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

Styles are the tool that you are looking for. You can apply any of the built in styles or save your own styles and apply them to any number of tiles. Styles include pretty much every setting, colors, fonts, keywords, borders, padding, title size etc but does not include the content such as Title text, header text or footer text.

You are going to love these.

No I don't understand but perhaps it doesn't matter with what I have told you.

1 Like

Styles! Thank you!

It doesn't matter to me now either. :wink:

1 Like

Should users expect the 'Decimal Places' setting to override – or simply limit/truncate – numeric values? I set it to 1 (the default) thinking all numbers would then appear in 00.0 format. Alas, nope...

NOTE: Changing the value of Dec2B to 70.2 indeed updated its 2nd column value to 70.2, but I'd have expected/preferred 70 to display as 70.0 as well, for consistency across all rows/values.

My next question was going to be, "Will Tile Builder also allow decimal alignment as opposed to simple centering?"

I know many of you will have better results than me, but I wanted to show what I was able to do with Tile Builder so far. Great tool!!

This is my monitoring page and combines the native Hubitat dashboard with HubInfo and EchoSpeaks information tiles from @thebearmay and (of course) Tile Builder tiles from @garyjmilne

6 Likes

Right now it just truncates what is there but I'll add padding when it is needed.

With the decimal point issue fixed then right justified results would be aligned to the decimal point but obviously be crammed against the right edge. I have another unrelated change to add that I think might make this possible but I won't say anymore until I've tried it out.

1 Like

Looks like you kept all your tiles under 1,024. How does it look in the Hubitat app when you are off LAN? I'm not that great with colors either so I hope other people will create some good styles and export them to the community.

Feature Request: Include 'Button Devices' in drop-down filter for 'Activity Monitor' (yep, I know I can select them manually from 'All Devices'); as well as (though far less useful, surely) 'Button' in attribute selector for 'Attribute Monitor'.

Why? In many of my workflows, it's helpful to know (without examining the Logs) which button(s) last got pushed, double-tapped, held, etc.

What you're currently offering is outstanding, so please take such feature requests as long-term fancy more than urgent needs. :slight_smile:

1 Like

Thanks, I do appreciate you saying that. My main immediate focus is to make sure everything is stable and reliable in the short term but what you are asking makes good sense so I will get to it in due course.

2 Likes

Yes, I intentionally kept them all under 1,024 so I could use them remotely.
How do they look remotely? Exactly the same. :grinning:

2 Likes

I'm actually gray/green color blind. So, my color choices could easily be horrid.

1 Like

Beauty is in the eye of the beholder. I'm not color blind, I just dress like I am. :laughing:

3 Likes

Having lots of fun here! I have a question about vertical alignment. This is a slice of one of my dashboards. All of the tiles on the right were created using Tile Builder, plus a bit of dashboard CSS. On the left, only the bottom one — Inactive Devices — is a Tile Builder tile. It's the only activity monitor. The others monitor attributes.

Presence, Motion, and Contact have their contents nicely aligned right under the title. Batteries is a filtered list, and there's currently only one that meets the criteria. And it's right in the middle of the tile, which makes my OCD twitch a little. Is there any way to get the contents to align at the top? I tried adding vertical-align: top to .tile-contents, but that didn't do it.

I'm guessing that Inactive Devices — if there were any — might do the same thing.

Thanks for a really cool app and stellar documentation!

1 Like

I like what you have so far. Here is something that might help diagnose the issue. Go into Tile Builder for that tile. Then go to advanced tab, enable overrides and then select the category, Bordes and Padding.

One of the built-ins commands will draw a box around each element (send me a pic please) and that will at least tell you if that blank space is part of the title or part of the table. I think there is also an example of this in the docs. A lot of the time adjusting the padding can resolve the issue.

Am I correct in assuming the word Batteries is a title field?

I have some more tricks if you are still stuck. It is

1 Like

P.S. It is quite fun to have that level of control. It’s kept up late quite a few nights. Once you play wity with the override samples you’ll come to realize you have a lot more options than you think you have.

One other thought came to mind. Assuming the word Batteries is the Title field you could do this.
In Tile Builder
Disable the Title
On the Headers Tab select Merge Headers
Enter the word Batteries

Now the word batteries and the rows of data are both part of the table and should not be separate. You will have to edit the dashboard CSS with #tile-XX .tile-primary {vertical-align: top;} if you want it to be top aligned, otherwise it will be centered.

Yes, "Batteries" is the title field.

First screen shot is how it looks in the app... the "close approximation."
Second screen shot is how it looks on the dashboard. I've removed all of the dashboard CSS, just in case that was some of the problem.

Screenshot 2023-05-17 at 7.46.14 PM

Screenshot 2023-05-17 at 7.46.30 PM

That didn't quite work, either.

First: app preview.
Second: dashboard tile - no vertical align.
Third: dashboard tile - after I added vertical-align: top.

Screenshot 2023-05-17 at 7.55.16 PM

Screenshot 2023-05-17 at 7.55.01 PM

Screenshot 2023-05-17 at 7.57.27 PM

Just for grins, I changed the filter criteria so I'd have more than one device displayed.

Screenshot 2023-05-17 at 8.05.57 PM

Strange, looks like row or border padding is out of whack.

Try this, go to Styles, turn on Show Import Export. Then PM me the stuff in yellow highlighter. I can then import that and hopefully get the same experience as you.

Then tell me a little bit about what you are monitoring.

You know what, try playing with the height in general settings.