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

This part you can do today by loading the style Everything Off.

I have thought about converting (255,255,255,1) to #FFF (as an example) as it's quite a space saver and will include this in some future release.

I have considered offloading some CSS to the dashboard and the docs even talk about it and includes an example I think, but I don't think it'll ever be mainstream in my app. One of my goals in writing the app was that someone could achieve attractive results without knowing anything about CSS or even that it existed For the more techy among us they have overrides to give them a huge level of control. I'm hoping if we can get enough people using TB that we can lobby for an increase in the 1,024 limit. Even 2,048 would be huge.

3 Likes

Ah yes, I could not remember if it were you that requested an extra slot. You'll have it this weekend.

2 Likes

Agreed, and I sense most advanced users would be comfortable lobbying for 2k as the new payload limit. Dashboards are certainly coming into their own these days, and the expanding CSS/HTML lexicon is not helping matters.

At first glance, it's unexpected to find device attributes capped at 1K, dashboard tiles at 4k, and Hub Variables (ergo their Connector Devices) of type String, for instance, constrained to only 256 bytes (with clipping), while Rule Machine's Local Variables can each hold over 300K without skipping a beat.

So it's clearly not a database limitation, just a practical one. One must balance bandwidth, rendering time, system responsiveness and other realtime considerations against users' desire to push the bounds. (Example: The discovery that it's possible to sneak a bitmap image into a Tile by pasting uuencoded text.)

Wonder if anyone has already run a bunch of time trials, to test the extreme cases. @sburke781 ?

I have a few different opinions on the matter, more likely coming down on the side of keeping it at 1K (sorry). I'm conscious of clouding the positive and vibrant conversation here on @garyjmilne 's topic with something, though very relevant to TB, which probably deserves it's own topic if you want to take the conversation about the attribute size further. My other suggestion, if you did decide to continue the conversation, would be to centre it more around future options for the kinds of use-cases Tile Builder is satisfying, dynamic listings of devices with other details and potentially control. rather than simply raising the attribute size.

In terms of your actual question, if I read what you are asking correctly, I haven't looked at each of the options you mentioned, opting for data files on the hub to achieve similar outcomes of dynamic content, albeit for different purposes.

1 Like

Great job on the videos @garyjmilne, dotted throughout the first post , much easier way to consume the huge range of possibilities provided by the TB App, particularly for those that don't tend to read the instructions like me :wink: Has inspired me to at least think more about doing some videos for some of my creations.

Also.... Great job on the thresholds with the colour and in particular the text replacement, like hot, cold, etc.

I do like the styles option, something I am keen to progress in my own projects for dashboard editing. Nice to see similar concepts in other utilities people are creating, becoming a concept people will hopefully become familiar with and value.

3 Likes

THIS

2 Likes

Will be enabled by a change I'm making this weekend.

2 Likes

Thanks, they were created with a tool called clipchamp that is built in to Windows 11. Pretty easy to use but a little minimalist in places that leaves you wondering how to do something.

Glad you like those, personally I'm a numbers guy.

I'm hoping that as we get more users experimenting that people will share styles (using export function) that other forum members can then import. Hopefully a few strong ones will percolate to the top and I can build them in with the originators approval.

2 Likes

Hi @garyjmilne ,

This isn't a major deal, but something you may want to consider is trying to detect when multiple devices update in quick succession on a tile. With one of the test tiles I setup the other day I included each of my SensorPush Temperature sensors, which I wrote a driver for to poll their cloud server for the readings every minute. As we move into Winter they are each updating most minutes and so I saw a long list of publishing occurring in the logs for each sensor reporting a change. Not an issue as such, just something worth considering.

The best I could think of would be to detect the first change that triggers a tile change and wait for say 10 seconds to see if anything else comes in? Or offer that as an option to turn on / off for the tile, allowing you to have more responsive tiles where you know this won't happen.

Just an idea...

2 Likes

It is a good idea. I'll have to think about that because the device driver handles those notifications and not Tile Builder. Makes it a bit more complicated when the driver has to track that for all tiles but still quite do-able.

2 Likes

Perhaps an alternative would be to only update on set increments, say half-degree changes. Unless I have missed this option amongst the long list already included :wink:

1 Like

Users can usually set the update increment on the device itself, so TB is just honoring that preference. I think it could get confusing if the "normal" tile said 71.5 and TB said 72.0 for the same sensor, could lead to a loss of confidence. I think your idea of limiting the logging is the better one.

2 Likes

Good point, I agree with that.

2 Likes

Starting to get the hang of this - careful reading of the manual starting to pay off. Just wish I could have found a unicode character for door open - a glowing door will have to do :grin:

Screenshot 2023-05-20 17.47.10

2 Likes

I hear yah, I want that too. I do plan on looking more closely at integrating the materials font (or similar) to provide a richer supply of icons but that is more a med-long term ambition. Not sure how that might impact file size.

I'm glad someone is reading it. There is quite a lot there. The override settings really are a toolkit for more advanced users who are willing to dig into the manual but I think the payoff is worth it.

I'm not sure if you are using this technique but I'll point it out anyway.
When you use a highlight for a keyword or threshold it enables a tag called #high1# ..... #high5#
So you can modify anything that is a match using the #high1#= tag. For example:
#high1#=background-image: repeating-linear-gradient(45deg, red 0px, red 5px, red 0px, yellow 5px, yellow 10px)
image
Try out some of the included samples.

There are lots of suggestive unicode characters that you can use as well. In this case I used ▯ and gave it a brown color so it looks like an open door frame.

Keep up the good work and thanks for being a TB pioneer.

P.S. Another open door idea
image

2 Likes

I can see being creative with CSS and the tile configuration will pay off - it's time consuming, but good fun.

I used your final Class example, which showed how to define an on/off set of classes, instead of using the #High1#, #High2#... set of classes.

I've also run into the "why don't the tiles line up" question, answer, because one was over 1024 characters :smiley: Filtering is a short cut to solving that, but I might try multiple tiles under the limit to represent all the devices in a class / room (without title or headers). I'm sure others will come up with more creative solutions.

Thank you for creating this, it's going to be really useful, and good fun :smiley:

1 Like

Yes, I found that when I was creating it I'd get distracted into playing with it instead of actually testing it. Still do, like right now! Here is something to try if you don't already know about it.
#tile-28 .tile-primary {vertical-align: top;}

I've also found leaving the edge around the tile and letting the contents float in the middle gives a more "lined up" feeling.

3 Likes

Is there a way to make the table color transparent? I am looking for a way to set the whole tile color using css at the dashboard interface.

You need to set the table background opacity to zero. By default the row opacity is zero. If you have headers the header opacity must be zero also. That will do it.

Sorry, I am missing the opacity option for the table: