[APP][Pro] Enhanced Device Widgets. Live 1.1.21, Test 1.1.23

Have you tried putting ‘Mop’ and ‘Vacuum’, eg in quotes?

I haven’t tried it but it’s what I would try.

Yes I tried that with = and ==
I tried simple and double quotes too

OK, I worked it out. The Flow card returns the string value unquoted, so in your case it would create a formula for the parser as “Mop == ‘Mop’…”. The parser would then assume that Mop is a variable that hasn’t been defined.
To fix it just put quotes around the variable name like this example:
image

The Enhanced Device Widget is replacing all line shifts with
in the HTML code which makes the blank space above the table. This was implemented in a resent version. I have experienced that it is not very practically to edit the HTML code in the When card dialog. When you typically need variables in the code it becomes VERY unpractical.
I have also made a graph that shows current prices through the day and night. For this I am using Homeyscript that feches the prices from the “Power by the hour” app and that makes the HTML code that is passed til the Enhanced Device Widget’s when card. This works fine.
Though I haven’t found a script that makes a table and feches the input from devices. But I do beleave this is the way to do it.

@Peter_Kawa / @Adrian_Rockall: earlier both Peter and I noted that, when using an HTML table in the status widget of the Enhanced Device Widget app, you need to set the table width to values well above 100% to scale correctly.

I also noted myself that for the same widget with the same HTML table (for which the column/cell widths have also been set), but with other data in the table cells, the table width value that results in a proper scaling is also different.

I found out that if you use the table-layout: fixed; style tag, the table is rendered correctly/respecting the cell and table widths you specified. You can use this tag as part of the table tag <table style="table-layout: fixed;"></table> or apply it as a default to all tables in the style tag section in the header, e.g. <style>table {table-layout: fixed;}<style>

The four status widgets in the following example all align in the same manner, when using the indicated style tag. Without that tag, the cell widths in each status widget would be different. In my case I need to set the table with to 97% to get even widget frame/border spacing on both sides. If set to 100%, the border of the widget on the left hand side is larger than the right hand side.

1 Like

Do you also run into the issue that after a Homey firmware update, the image ID changes? And hence you have to update all your image references in the HTML code? I had that issue today after updating to version 12.4.1. Not sure if there is an other way to refer to images.

Yes I had, thats why I switched to refer my images from an online server instead from the Homey itself. I’d rather keep them local, I also asled the Homey team if this can be fixed.

1 Like

I am not able to get the text centered in the status widget. I have tried different HTML codes with no success. Any ideas?

Assuming you have defined a table that has only one column, you can center the text in a row by using the following HTML code:

<tr><td style="text-align: center;">YOUR TEXT</td></tr>

Further you must set and fix the width of the table, using these style tags in your <table> tag:

table-layout: fixed;
width: 97%;

In my case the available canvas in the status widget is 97%, so I set the table with accordingly.

If you want the max out of the available space, you can set the cell border spacing to 0 pixels via this style tag: border-spacing: 0px

Forgot to mention I am not using table layout.
Do I need to to being able to center?
Can I use <td style="text-align: center;">YOUR TEXT</td> only?

No, because the <td></td> tags mark the start and end of a table cell, so such a declaration requires a table.

If you don’t have a table this might work, but I am not sure:

<div style="text-align: center;">YOUR TEXT</div>

The <div></div> tags mark the start and end of a section.

By the way, this resource has a lot of information on HTML coding: HTML Tutorial

did unfortunately not work. I will check the page you mentioned, thanks.

You can, of course, consider creating a simple table with just one cell that contains your text:

<table style=“table-layout: fixed; width: 97%;”>
<tr><td style="text-align: center;">YOUR TEXT</td></tr></table>

That’s true :slight_smile:

That did not align the text centered either :slight_smile:
Strange

Can you share your flow / the flow cards that set the HTML code?

That’s strange. I did some tests.

The following options - without using a table, but with a paragraph element - should also work, but somehow do not:

  • <p style="text-align:center;">Your Text</p>
  • <p style="margin-left:auto; margin-right:auto;">Your Text</p>

The suggested table option should also work. However somehow it does not when you only have one tabel column, so not part of a more elaborate table with multiple columns and rows. I am using the text-align:center style in multiple tables where it works just fine:

I also checked whether perhaps the widget allows the deprecated <center></center> tags, but those also don’t work.

I have no clue why the centering does not work in EDW’s status widget :blush:.
Maybe @Adrian_Rockall can explain this behaviour?

1 Like

Exactly my findings too. I also tested with <p>, etc.

1 Like

I have a Android phone set up with Enhanced Device Widgets only, 7 different label wigdets. And eventually the Homey app has crashed or at least closed.
I read that using the Canvas API might cause the dashboard to crash. Is Enhanced Device Widgets using Canvas API?