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

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

Inspired by your design motif, I took this test tile over to my preferred dashboard app, hubiVue, and got fairly decent results using one of its HTML Tiles with a custom background.

Still a lot more tweaking to do, but thanks for the inspiration!

3 Likes

I like what you have there. Your 4 in 1 isn't bad, just looks like an intentional grouping. What you might find useful is the use of a vertical transform. In Tile Builder you can access these under the Advanced Tab\Overrides category Transforms as shown below.

I've used the built in example (in yellow highlight)

and edited it to:
#Table#=transform: translate(0px, 60px)
which basically says take the whole table and move it vertically downward by 60 pixels.
From this:


To this:

I think you could use this type of adjustment in your 4:1 example if you wished. You can use negative numbers for these transform values.

2 Likes

Oh, I see you figured out a way to do it via CSS anyway. Nice outcome.

1 Like

Question: I'd love to set up a tile with multiple attributes for a single device. But I can't see how to do this because I need to select an attribute first before I can select a device, and then the other attributes aren't available.

Is there any chance you would consider adding this? (Then I could have even more fun!)