It's this one, , U+01F3B4, Flower Playing Cards
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.
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.
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.
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.
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.
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.
It will be in the next release.
That did the trick, thanks
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.
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.
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.
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.
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?
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.
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?
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.
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.
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)