[RELEASE] Tile Builder - Build Beautiful Dashboards (Grid 2.0 Released)

It's this one, :flower_playing_cards:, U+01F3B4, Flower Playing Cards

1 Like

Has something changed to stop the Menu Block (as described in the manual) from working?

I've created one as per the instructions (attribute tile, 0 devices, title & headers with a href elements), but I'm not able to select it to add to a dashboard, it just doesn't appear in the list.

This is the trace/debug logging I get when I hit publish (if it helps).

Summary

app:8032023-05-22 21:18:23.026debugmakeHTML: HTML final size is <= than 4,096 bytes.

app:8032023-05-22 21:18:23.021tracescrubHTML: Entering scrubHTML

app:8032023-05-22 21:18:23.018tracescrubHTML: Entering scrubHTML

app:8032023-05-22 21:18:23.015infogetNumberType: myVal: B20 cannot be converted to integer

app:8032023-05-22 21:18:23.014debuggetNumberType: myVal: B20 cannot be converted to float

app:8032023-05-22 21:18:23.012debuggetDataType: myVal is: B20

app:8032023-05-22 21:18:23.011tracehighlightValue: Received attributeValue: B20

app:8032023-05-22 21:18:23.009infogetNumberType: myVal: B19 cannot be converted to integer

app:8032023-05-22 21:18:23.008debuggetNumberType: myVal: B19 cannot be converted to float

app:8032023-05-22 21:18:23.006debuggetDataType: myVal is: B19

app:8032023-05-22 21:18:23.005tracehighlightValue: Received attributeValue: B19

app:8032023-05-22 21:18:23.003infogetNumberType: myVal: B18 cannot be converted to integer

app:8032023-05-22 21:18:23.002debuggetNumberType: myVal: B18 cannot be converted to float

app:8032023-05-22 21:18:23.001debuggetDataType: myVal is: B18

app:8032023-05-22 21:18:22.999tracehighlightValue: Received attributeValue: B18

app:8032023-05-22 21:18:22.997infogetNumberType: myVal: B17 cannot be converted to integer

app:8032023-05-22 21:18:22.996debuggetNumberType: myVal: B17 cannot be converted to float

app:8032023-05-22 21:18:22.995debuggetDataType: myVal is: B17

app:8032023-05-22 21:18:22.993tracehighlightValue: Received attributeValue: B17

app:8032023-05-22 21:18:22.991infogetNumberType: myVal: B16 cannot be converted to integer

app:8032023-05-22 21:18:22.990debuggetNumberType: myVal: B16 cannot be converted to float

app:8032023-05-22 21:18:22.989debuggetDataType: myVal is: B16

app:8032023-05-22 21:18:22.987tracehighlightValue: Received attributeValue: B16

app:8032023-05-22 21:18:22.986infogetNumberType: myVal: B15 cannot be converted to integer

app:8032023-05-22 21:18:22.984debuggetNumberType: myVal: B15 cannot be converted to float

app:8032023-05-22 21:18:22.983debuggetDataType: myVal is: B15

app:8032023-05-22 21:18:22.981tracehighlightValue: Received attributeValue: B15

app:8032023-05-22 21:18:22.980infogetNumberType: myVal: B14 cannot be converted to integer

app:8032023-05-22 21:18:22.978debuggetNumberType: myVal: B14 cannot be converted to float

app:8032023-05-22 21:18:22.977debuggetDataType: myVal is: B14

app:8032023-05-22 21:18:22.975tracehighlightValue: Received attributeValue: B14

app:8032023-05-22 21:18:22.974infogetNumberType: myVal: B13 cannot be converted to integer

app:8032023-05-22 21:18:22.972debuggetNumberType: myVal: B13 cannot be converted to float

app:8032023-05-22 21:18:22.971debuggetDataType: myVal is: B13

app:8032023-05-22 21:18:22.970tracehighlightValue: Received attributeValue: B13

app:8032023-05-22 21:18:22.968infogetNumberType: myVal: B12 cannot be converted to integer

app:8032023-05-22 21:18:22.966debuggetNumberType: myVal: B12 cannot be converted to float

app:8032023-05-22 21:18:22.965debuggetDataType: myVal is: B12

app:8032023-05-22 21:18:22.964tracehighlightValue: Received attributeValue: B12

app:8032023-05-22 21:18:22.962infogetNumberType: myVal: B11 cannot be converted to integer

app:8032023-05-22 21:18:22.960debuggetNumberType: myVal: B11 cannot be converted to float

app:8032023-05-22 21:18:22.959debuggetDataType: myVal is: B11

app:8032023-05-22 21:18:22.958tracehighlightValue: Received attributeValue: B11

app:8032023-05-22 21:18:22.956infogetNumberType: myVal: B10 cannot be converted to integer

app:8032023-05-22 21:18:22.954debuggetNumberType: myVal: B10 cannot be converted to float

app:8032023-05-22 21:18:22.953debuggetDataType: myVal is: B10

app:8032023-05-22 21:18:22.951tracehighlightValue: Received attributeValue: B10

app:8032023-05-22 21:18:22.950infogetNumberType: myVal: B09 cannot be converted to integer

app:8032023-05-22 21:18:22.948debuggetNumberType: myVal: B09 cannot be converted to float

app:8032023-05-22 21:18:22.947debuggetDataType: myVal is: B09

app:8032023-05-22 21:18:22.946tracehighlightValue: Received attributeValue: B09

app:8032023-05-22 21:18:22.944infogetNumberType: myVal: B08 cannot be converted to integer

app:8032023-05-22 21:18:22.943debuggetNumberType: myVal: B08 cannot be converted to float

app:8032023-05-22 21:18:22.941debuggetDataType: myVal is: B08

app:8032023-05-22 21:18:22.940tracehighlightValue: Received attributeValue: B08

app:8032023-05-22 21:18:22.938infogetNumberType: myVal: B07 cannot be converted to integer

app:8032023-05-22 21:18:22.936debuggetNumberType: myVal: B07 cannot be converted to float

app:8032023-05-22 21:18:22.935debuggetDataType: myVal is: B07

app:8032023-05-22 21:18:22.934tracehighlightValue: Received attributeValue: B07

app:8032023-05-22 21:18:22.932infogetNumberType: myVal: B06 cannot be converted to integer

app:8032023-05-22 21:18:22.931debuggetNumberType: myVal: B06 cannot be converted to float

app:8032023-05-22 21:18:22.929debuggetDataType: myVal is: B06

app:8032023-05-22 21:18:22.928tracehighlightValue: Received attributeValue: B06

app:8032023-05-22 21:18:22.926infogetNumberType: myVal: B05 cannot be converted to integer

app:8032023-05-22 21:18:22.925debuggetNumberType: myVal: B05 cannot be converted to float

app:8032023-05-22 21:18:22.923debuggetDataType: myVal is: B05

app:8032023-05-22 21:18:22.922tracehighlightValue: Received attributeValue: B05

app:8032023-05-22 21:18:22.920infogetNumberType: myVal: B04 cannot be converted to integer

app:8032023-05-22 21:18:22.918debuggetNumberType: myVal: B04 cannot be converted to float

app:8032023-05-22 21:18:22.917debuggetDataType: myVal is: B04

app:8032023-05-22 21:18:22.915tracehighlightValue: Received attributeValue: B04

app:8032023-05-22 21:18:22.914infogetNumberType: myVal: B03 cannot be converted to integer

app:8032023-05-22 21:18:22.912debuggetNumberType: myVal: B03 cannot be converted to float

app:8032023-05-22 21:18:22.911debuggetDataType: myVal is: B03

app:8032023-05-22 21:18:22.909tracehighlightValue: Received attributeValue: B03

app:8032023-05-22 21:18:22.908infogetNumberType: myVal: B02 cannot be converted to integer

app:8032023-05-22 21:18:22.906debuggetNumberType: myVal: B02 cannot be converted to float

app:8032023-05-22 21:18:22.905debuggetDataType: myVal is: B02

app:8032023-05-22 21:18:22.903tracehighlightValue: Received attributeValue: B02

app:8032023-05-22 21:18:22.902infogetNumberType: myVal: B01 cannot be converted to integer

app:8032023-05-22 21:18:22.900debuggetNumberType: myVal: B01 cannot be converted to float

app:8032023-05-22 21:18:22.899debuggetDataType: myVal is: B01

app:8032023-05-22 21:18:22.897tracehighlightValue: Received attributeValue: B01

app:8032023-05-22 21:18:22.892debugmakeHTML: myTemplate with Row Data is : [#tt#:Lounge, #ts#:200, #tc#:rgba(255,31,15,1), #tp#:0, #ta#:Center, #to#:1, #shcolor#:#000000, #shver#:0, #shhor#:0, #shblur#:3, #titleShadow#:, #A00#:Local, #B00#:Cloud, #hbc#:rgba(0,0,0,0.2), #hbo#:0.2, #htc#:rgba(251,20,4,1), #hto#:1, #hts#:125, #hta#:Center, #hp#:0, #rbc#:rgba(105,105,105,1), #rtc#:rgba(40,40,40,1), #rts#:90, #rta#:Center, #rabc#:#dff8aa, #ratc#:#000000, #rp#:0, #rto#:1, #rbo#:1, #id#:qq, #th#:Auto, #tw#:100, #tbc#:rgba(0,0,0,0);, #bw#:2, #bc#:rgba(0,0,0,1), #bs#:Solid, #br#:0, #bp#:10, #bo#:1, #ft#:%time%, #fs#:60, #fc#:#000000, #fa#:Center, #hc1#:#008000, #hts1#:125, #hc2#:#CA6F1E, #hts2#:125, #hc3#:#00FF00, #hts3#:100, #hc4#:#0000FF, #hts4#:100, #hc5#:#FF0000, #hts5#:100, #k1#:?, #ktr1#:?, #k2#:?, #ktr2#:?, #k3#:?, #ktr3#:?, #k4#:?, #ktr4#:?, #top1#:[1], #tcv1#:70, #ttr1#:?, #top2#:[3], #tcv2#:70, #ttr2#:?, #top3#:[1], #tcv3#:70, #ttr3#:?, #top4#:[1], #tcv4#:70, #ttr4#:?, #top5#:[1], #tcv5#:70, #ttr5#:?, #comment#:?, #bm#:Seperate, #tff#:Comic Sans MS, #bfs#:18, #fbc#:#282828, #customWidth#:200, #customHeight#:190, #iFrameColor#:#000000, #isCustomSize#:false, #isFrame#:false, #isComment#:false, #isTitle#:true, #isTitleShadow#:false, #isHeaders#:true, #isBorder#:false, #isAlternateRows#:false, #isFooter#:false, #isOverrides#:true, #isScrubHTML#:true, #isKeyword1#:false, #isKeyword2#:false, #isKeyword3#:false, #isKeyword4#:false, #isKeyword5#:false, #isThreshold1#:false, #isThreshold2#:false, #isThreshold3#:null, #isThreshold4#:false, #isThreshold5#:false, #A01#:A01, #B01#:B01, #A02#:A02, #B02#:B02, #A03#:A03, #B03#:B03, #A04#:A04, #B04#:B04, #A05#:A05, #B05#:B05, #A06#:A06, #B06#:B06, #A07#:A07, #B07#:B07, #A08#:A08, #B08#:B08, #A09#:A09, #B09#:B09, #A10#:A10, #B10#:B10, #A11#:A11, #B11#:B11, #A12#:A12, #B12#:B12, #A13#:A13, #B13#:B13, #A14#:A14, #B14#:B14, #A15#:A15, #B15#:B15, #A16#:A16, #B16#:B16, #A17#:A17, #B17#:B17, #A18#:A18, #B18#:B18, #A19#:A19, #B19#:B19, #A20#:A20, #B20#:B20]

app:8032023-05-22 21:18:22.876debugfillStyle: myEffectiveSettingsMap is: [#tt#:Lounge, #ts#:200, #tc#:rgba(255,31,15,1), #tp#:0, #ta#:Center, #to#:1, #shcolor#:#000000, #shver#:0, #shhor#:0, #shblur#:3, #titleShadow#:, #A00#:Local, #B00#:Cloud, #hbc#:rgba(0,0,0,0.2), #hbo#:0.2, #htc#:rgba(251,20,4,1), #hto#:1, #hts#:125, #hta#:Center, #hp#:0, #rbc#:rgba(105,105,105,1), #rtc#:rgba(40,40,40,1), #rts#:90, #rta#:Center, #rabc#:#dff8aa, #ratc#:#000000, #rp#:0, #rto#:1, #rbo#:1, #id#:qq, #th#:Auto, #tw#:100, #tbc#:rgba(0,0,0,0);, #bw#:2, #bc#:rgba(0,0,0,1), #bs#:Solid, #br#:0, #bp#:10, #bo#:1, #ft#:%time%, #fs#:60, #fc#:#000000, #fa#:Center, #hc1#:#008000, #hts1#:125, #hc2#:#CA6F1E, #hts2#:125, #hc3#:#00FF00, #hts3#:100, #hc4#:#0000FF, #hts4#:100, #hc5#:#FF0000, #hts5#:100, #k1#:?, #ktr1#:?, #k2#:?, #ktr2#:?, #k3#:?, #ktr3#:?, #k4#:?, #ktr4#:?, #top1#:[1], #tcv1#:70, #ttr1#:?, #top2#:[3], #tcv2#:70, #ttr2#:?, #top3#:[1], #tcv3#:70, #ttr3#:?, #top4#:[1], #tcv4#:70, #ttr4#:?, #top5#:[1], #tcv5#:70, #ttr5#:?, #comment#:?, #bm#:Seperate, #tff#:Comic Sans MS, #bfs#:18, #fbc#:#282828, #customWidth#:200, #customHeight#:190, #iFrameColor#:#000000, #isCustomSize#:false, #isFrame#:false, #isComment#:false, #isTitle#:true, #isTitleShadow#:false, #isHeaders#:true, #isBorder#:false, #isAlternateRows#:false, #isFooter#:false, #isOverrides#:true, #isScrubHTML#:true, #isKeyword1#:false, #isKeyword2#:false, #isKeyword3#:false, #isKeyword4#:false, #isKeyword5#:false, #isThreshold1#:false, #isThreshold2#:false, #isThreshold3#:null, #isThreshold4#:false, #isThreshold5#:false]

app:8032023-05-22 21:18:22.864debugmyBaseSettingsMapwithRGBA is: [#tt#:Lounge, #ts#:200, #tc#:rgba(255,31,15,1), #tp#:0, #ta#:Center, #to#:1, #shcolor#:#000000, #shver#:0, #shhor#:0, #shblur#:3, #titleShadow#:, #A00#:Local, #B00#:Cloud, #hbc#:rgba(0,0,0,0.2), #hbo#:0.2, #htc#:rgba(251,20,4,1), #hto#:1, #hts#:125, #hta#:Center, #hp#:0, #rbc#:rgba(105,105,105,1), #rtc#:rgba(40,40,40,1), #rts#:90, #rta#:Center, #rabc#:#dff8aa, #ratc#:#000000, #rp#:0, #rto#:1, #rbo#:1, #id#:qq, #th#:Auto, #tw#:100, #tbc#:#000000, #bw#:2, #bc#:rgba(0,0,0,1), #bs#:Solid, #br#:0, #bp#:10, #bo#:1, #ft#:%time%, #fs#:60, #fc#:#000000, #fa#:Center, #hc1#:#008000, #hts1#:125, #hc2#:#CA6F1E, #hts2#:125, #hc3#:#00FF00, #hts3#:100, #hc4#:#0000FF, #hts4#:100, #hc5#:#FF0000, #hts5#:100, #k1#:?, #ktr1#:?, #k2#:?, #ktr2#:?, #k3#:?, #ktr3#:?, #k4#:?, #ktr4#:?, #top1#:[1], #tcv1#:70, #ttr1#:?, #top2#:[3], #tcv2#:70, #ttr2#:?, #top3#:[1], #tcv3#:70, #ttr3#:?, #top4#:[1], #tcv4#:70, #ttr4#:?, #top5#:[1], #tcv5#:70, #ttr5#:?, #comment#:?, #bm#:Seperate, #tff#:Comic Sans MS, #bfs#:18, #fbc#:#282828, #customWidth#:200, #customHeight#:190, #iFrameColor#:#000000, #isCustomSize#:false, #isFrame#:false, #isComment#:false, #isTitle#:true, #isTitleShadow#:false, #isHeaders#:true, #isBorder#:false, #isAlternateRows#:false, #isFooter#:false, #isOverrides#:true, #isScrubHTML#:true, #isKeyword1#:false, #isKeyword2#:false, #isKeyword3#:false, #isKeyword4#:false, #isKeyword5#:false, #isThreshold1#:false, #isThreshold2#:false, #isThreshold3#:null, #isThreshold4#:false, #isThreshold5#:false]

app:8032023-05-22 21:18:22.853debugmyBaseSettingsMap is: [#tt#:Lounge, #ts#:200, #tc#:#ff1f0f, #tp#:0, #ta#:Center, #to#:1, #shcolor#:#000000, #shver#:0, #shhor#:0, #shblur#:3, #titleShadow#:, #A00#:Local, #B00#:Cloud, #hbc#:#000000, #hbo#:0.2, #htc#:#fb1404, #hto#:1, #hts#:125, #hta#:Center, #hp#:0, #rbc#:#696969, #rtc#:#282828, #rts#:90, #rta#:Center, #rabc#:#dff8aa, #ratc#:#000000, #rp#:0, #rto#:1, #rbo#:1, #id#:qq, #th#:Auto, #tw#:100, #tbc#:#000000, #bw#:2, #bc#:#000000, #bs#:Solid, #br#:0, #bp#:10, #bo#:1, #ft#:%time%, #fs#:60, #fc#:#000000, #fa#:Center, #hc1#:#008000, #hts1#:125, #hc2#:#CA6F1E, #hts2#:125, #hc3#:#00FF00, #hts3#:100, #hc4#:#0000FF, #hts4#:100, #hc5#:#FF0000, #hts5#:100, #k1#:?, #ktr1#:?, #k2#:?, #ktr2#:?, #k3#:?, #ktr3#:?, #k4#:?, #ktr4#:?, #top1#:[1], #tcv1#:70, #ttr1#:?, #top2#:[3], #tcv2#:70, #ttr2#:?, #top3#:[1], #tcv3#:70, #ttr3#:?, #top4#:[1], #tcv4#:70, #ttr4#:?, #top5#:[1], #tcv5#:70, #ttr5#:?, #comment#:?, #bm#:Seperate, #tff#:Comic Sans MS, #bfs#:18, #fbc#:#282828, #customWidth#:200, #customHeight#:190, #iFrameColor#:#000000, #isCustomSize#:false, #isFrame#:false, #isComment#:false, #isTitle#:true, #isTitleShadow#:false, #isHeaders#:true, #isBorder#:false, #isAlternateRows#:false, #isFooter#:false, #isOverrides#:true, #isScrubHTML#:true, #isKeyword1#:false, #isKeyword2#:false, #isKeyword3#:false, #isKeyword4#:false, #isKeyword5#:false, #isThreshold1#:false, #isThreshold2#:false, #isThreshold3#:null, #isThreshold4#:false, #isThreshold5#:false]

app:8032023-05-22 21:18:22.836debugbp: 10

app:8032023-05-22 21:18:22.834debugisBorder: false

app:8032023-05-22 21:18:22.833tracefillStyle: Entering fillStyle.

app:8032023-05-22 21:18:22.831debugHTML Template is: #tt#

#A00# #B00#

app:8032023-05-22 21:18:22.826tracemakeHTML: Entering makeHTML

app:8032023-05-22 21:18:22.824debugrefreshTable: calling makeHTML: [#A01#:A01, #B01#:B01, #A02#:A02, #B02#:B02, #A03#:A03, #B03#:B03, #A04#:A04, #B04#:B04, #A05#:A05, #B05#:B05, #A06#:A06, #B06#:B06, #A07#:A07, #B07#:B07, #A08#:A08, #B08#:B08, #A09#:A09, #B09#:B09, #A10#:A10, #B10#:B10, #A11#:A11, #B11#:B11, #A12#:A12, #B12#:B12, #A13#:A13, #B13#:B13, #A14#:A14, #B14#:B14, #A15#:A15, #B15#:B15, #A16#:A16, #B16#:B16, #A17#:A17, #B17#:B17, #A18#:A18, #B18#:B18, #A19#:A19, #B19#:B19, #A20#:A20, #B20#:B20] and myRows:0 with deviceLimit: 0

app:8032023-05-22 21:18:22.820debugrefreshTable: sortedMap is: [:]

app:8032023-05-22 21:18:22.818debugDeviceType = null

app:8032023-05-22 21:18:22.817tracegetDeviceMapAttrMon: Entering.

app:8032023-05-22 21:18:22.815tracerefreshTable: Entering refreshTable

app:8032023-05-22 21:18:22.731debugappButtonHandler: activeButton is: 5

app:8032023-05-22 21:18:22.727tracecreateSubscription: Entering.

1 Like

Not that I ama aware of. Have a look at the stotage device driver and see if the tile is getting created there. Ill try it later when im home.

1 Like

No, it’s not in the device, just checked that. I created a simple battery tile in the next slot, that appears ok.

I also meant to mention a feature request, to add the healthStatus attribute to the list of selectable attributes please.

2 Likes

I've tracked down the error. The instructions were wrong and should have said Activity Monitor rather than Attribute Monitor. Then you publish the table and set the refresh period to never. I just tried it and it worked for me so should work for you. Sorry about that, I will update the docs shortly.

I don't see healthStatus listed as a standard attribute in the docs.

2 Likes

Hi Gary,

The healthStatus is not a standard HE attribute as per today, but it already used by a number of custom drivers and popular apps/integrations like the Device Activity Check, HubiThings Replica, Home Asistant Device Bridge. It is a good way to determine whether a device is online or offline to the HE hub, based on device-specific behavior.

It will be great if the healthStatus is added in the Attribute Monitor list.

3 Likes

It was derived from the SmartThings healthCheck production capability and is the only attribute that is event supplied by their go forward API. I would/do argue that the older ST Groovy solution healthCheck was a mess and poorly documented, but this is an easy win for everyone.

Hubitat needs to get onboard and add healthStatus to their healthCheck capability. IMHO.

3 Likes

It will be in the next release.

6 Likes

That did the trick, thanks :+1:

1 Like

With the addition of "Simple CSS Editor", I finally have one functional dashboard completed.

While building it I noticed that the style export/import facility appears to miss the first highlight (#1), both threshold and keyword.

Now for Upstairs, and then to go back to the monitoring dashboard and apply some of the things I've learnt along the way.

4 Likes

I like the consistency.

Thanks, I just discovered that today. I have an update to this and several other things mostly complete. Just needs some additional testing before release.

2 Likes

Would it help with the attribute size if there was the option to not include the CSS, but make it available for copy/paste into the CSS of the individual dashboards? I appreciate this would add more manual steps?

It took me a while to realise that my door and window tiles didn’t need recreating using a different set of styles, but the originals could be included and then restyled with additional CSS on the dashboard. That’s also how I introduced a left hand margin for the left justified tables.

1 Like

Yes, it does reduce the attribute size. I used to have a section in the docs about offloading CSS classes to the dashboard for that purpose but pulled it out of there. I thought it might be daunting for some people. Plus, with the ability to use a file, the need to offload classes was diminished.

Offloading works well for the user defined classes but when it comes to the classes for the Table, Header, Title etc. those class names are allocated dynamically by the storage driver. Were that not the case then the CSS attributes would be shared across all of the tables where that class was defined. That was an early hurdle that I had to cross.

3 Likes

I noticed that, .Aa, .Ab, etc, and I’m guessing with subsequent devices it would go .Ba, .Ca etc.

But once the attribute is created, they stay consistent, so they can be used, I.e.

#tile-7 .tile-primary .Ay tr:first-child th:first-child, #tile-8 .tile-primary .Ax tr:first-child th:first-child {
border: 1px solid red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#tile-7 .tile-primary .Ay tr:last-child th:last-child, #tile-8 .tile-primary .Ax tr:last-child th:last-child {
border: 1px solid red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Or have I misunderstood?

1 Like

Tile Builder Storage Device 1 starts with A (2 with B etc). It then appends a letter a-y corresponding to the tile number 1-25.

You can also use these types on constructs in overrides but as you point out that does make the size grow.

2 Likes

Hi @garyjmilne
I have some hub variables (strings) that I would like to keep track of and display on the dashboard.
Am I right to think the app currently does not support variables?
If so, do you plan on adding in the future?

3 Likes

If I use the attribute of variable it does work. I cannot limit the selector to "variable" also but if I use * you just have to select those devices you are interested in, no big deal but it would have been nice if the list had been filtered as it does with other capabilities such as sensor or temperature.

This will be in an update that I am currently testing. I expect to release it this week barring any unexpected problems.

2 Likes

A very poor attempt to merge 4 tiles into one. I can see I will have to play around with the tile sizes, and explore some more css.

2 Likes

Love what you've done here, and think you've pretty much achieved your overall goal. Even the "merger" works IMHO. Did you run into any size constraints during design?

Yes, staying under the 1024 limit (so it renders remotely) required 4 tiles.

On the top tile I used the following css to remove the bottom border:

border-width: 2px 2px 0 2px;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;

And equivalent for the bottom tile:

border-width: 0 2px 2px 2px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;

The middle tiles simply required this change to remove the top and bottom borders and remove the corners:

border-width: 0 2px 0 2px;
border-radius: 0px !important;

I shuffled them all up by eye using "margin-top: -nnpx" until they looked more or less equally spaced. And then finally I took advantage of the .bf and .bo classes created for the highlighting to right align the bulbs:

.bf, .bo { text-align: right !important; padding-right: 5px; }

With this as the final result (I've left the 3 dots on so you can see the position of the tiles)

4 Likes