[RELEASE] Tile Builder - Build Beautiful Dashboards

[garyjmilne]

You only need to enable the module once, it then works for all tiles that are generated by that module.

[lkk3511]

I would like to use some lock and/or light switch tiles on the same dashboard as a Tile Builder Thermostat. This line in the CSS mod for Thermostat is blocking all tile device names. Is there a way to figure out how to hide the device name for just tile builder tiles and the thermostat tile? Or maybe just unhide it for my lock tile(s)?

/* Hide the Device Name for all tiles */
.tile-title {visibility: hidden; display: none;}

My ultimate goal is a status dashboard of all temperatures, vents, lights, locks, weather station, etc. But it would be great to see that a light is on that should be off and just turn it off from the same dashboard. I'm using a remote to set the desired temperature, but it might get confusing to use that for a lot of lights and locks.

[dnickel]

Lock and Maker API doc

[RELEASE] Tile Builder - Build Beautiful Dashboards

New Releases: Tile Builder Parent 1.4.9 and Tile Builder Grid 1.0.9 The updates to the Tile Builder Parent only contain additional information for some of the help fields, mostly related to Tile Builder Grid. The updates to Grid make it easier to add some limited control to a device group using Maker API as the intermediary. This post will explain how to do that. Install the Maker API Select the devices you want to authorize Copy the device command string which will look something like this…

[lkk3511]

Thanks. I'll look into installing Maker API. This reminds me of the recipe for rabbit stew:

1. Catch a rabbit....

[garyjmilne]

Have a look at this thread if you want to learn about manipulating tiles via CSS.

The Noob's (in)complete guide to CSS for Hubitat

Anyone know how I can align the Groups on the left to be left aligned? I'm also struggling with getting the keypad to fill the entire tile that it's sitting in. The top and bottom padding doesn't seem to go away regardless of what I set in the CSS. [image] Here's the CSS I have so far, all of the tiles are currently TEXT but will eventually be replaced with links to individual dashboards. #tile-30 .tile-title { display:none; object-fit: cover; background-color:transparent; border: none; } #…

Or this thread if you want to learn about the various CSS components of the Thermostat tile.

How to customize a Thermostat Tile

I've been working on a thermostat project and had to get grips with the thermostat css in the dashboard. I'd seen quite a few questions from people trying to customize this so I created this as a tool to help identify the various components. This is what an idle thermostat tile looks like in 2 x 2 size. [image] /* For diagnostic purposes every object has a border. These can be turned off by setting the border width to 0px using the BW CSS variable */ :root {--BW:2px;} /* Thermostat tile - m…

[lkk3511]

@garyjmilne

Still new to this, where are you getting these little icons you are using in the keyword highlight?

[garyjmilne]

The icons are emoji characters just like you might see on your phone.

I use [this] quite a bit when trying to find something suitable. (Red Flashing Light Emojis | 🚨💡🔴➕ | Copy & Paste)

There is also a thing called UNICODE which has many symbols besides emojis which you can find here. This will look intimidating at first, but try clicking on the ornamental dingbats as a good example of something that might be useful.

[lkk3511]

Thanks. All is working now. My new challenge is to figure out how to reduce the size. To keep all my tiles under 1024, I can only put 2 locks per tile, but 3 tiles instead of 6 for my 6 locks is still a good improvement. I'm avoiding cloud solutions for now.

For aesthetics, I still haven't had any attempt at background or background-color work, but I have some more things to try.

[garyjmilne]

If you have the Advanced version you will find some compression options under the Advanced Tab. This is usually good for shrinking the output by 10%-25% depending on the type of content and the selected compression level.

[lkk3511]

Thanks. Saw that, with 3 locks Normal size is 1195, Extreme is 1105. I'm not far away, I'm figuring out with trial and error what affects the size. I had 4 locks originally, when I removed one and made it 3, I still see myDevice4 in the settings. Not sure how to remove that, or if it would make much difference.

[lkk3511]

Removed frameborder=0, saved 40 bytes and got a little color indicator next to each lock.

[garyjmilne]

Looks nice. Shrinking the HTML is a bit of an art but if you go to the advanced tab and turn on Show Pseudo HTML you will get something like this:

If you cut and paste the actual content vs a screen shot I can take a look.

Have you tried using the local or cloud endpoint as that does not have the same limit?

P.S. There is also a style called Everything Off that will give you the smallest table and then you can add just the styles you want to it.

[lkk3511]

I've been avoiding file manager, as if you go over 1024 it turns to scrollable even if it isn't necessary to fit in a tile. I have yet to try cloud for anything.

I'll try that everything off style. I had an issue with style, if I apply one, I can't un-apply it, I can only apply a different one.

Here is my Pseudo-HTML, I am blanking out the token.

[head][style] table.qq{border-collapse:Collapse;width:100%;margin:Auto;background:#D9ECB1}.qq tr{color:#000;text-align:Center}.qq td{}.qq th,.qq td{border:Solid 2px #000}.qq th{background:#90C226;color:#000;text-align:Center}hqq1{color:#ff2600}hqq2{color:#009d00}[/style][/head][body][table class=qq][thead][tr][th]Door[/th][th]State[/th][/tr][/thead][tbody][tr][td]Office[/td][td][hqq2][iframe name=a width=0 height=0][/iframe][a href=http://192.168.50.246/apps/api/1078/devices/�viceID%/unlock?access_token=[access token here] target=a style=opacity:1;text-decoration:none][/a][/hqq2][/td][/tr][tr][td]Garage Bolt[/td][td][hqq1][iframe name=a width=0 height=0]][/iframe][a href=http://192.168.50.246/apps/api/1078/devices/�viceID2%/lock?access_token=[access token here] target=a style=opacity:0.5][/a][/hqq1][/td][/tr][tr][td]Garage Exterior[/td][td][hqq2][iframe name=a width=0 height=0][/iframe][a href=http://192.168.50.246/apps/api/1078/devices/�viceID3%/unlock?access_token=[access token here] target=a style=opacity:1;text-decoration:none][/a][/hqq2][/td][/tr][/tbody][/table][/body]

[lkk3511]

Everything off worked. It turned off headers, when I put them back it went back up, so I left them off and just labeled the tile with the footer. That made the size 1000 with 3 locks. Thanks for your help.

[dnickel]

@garyjmilne
I see the new guy on the block got his locks working.
I thought I would get on with this since you dug into this a while ago for me.
I can't seem to get the second column to show Lock/Unlock with any attribute set in Template Column 2; I have tried many entries in Gather Device Details.
I always get the list of deviceLabel and it's in some random order.

[lkk3511]

Try keyword match instead of contains, and use locked and unlocked, ignore case. I didn't use the select filter either. Maybe it's the screenshot, but I see viceID instead of deviceID....

[dnickel]

Thanks for the spelling catch. I was monkeying around with things and must have saved the incomplete URL.
Tried the Match instead of contains but nothing alters that darn second column.

I have variable as %lock%
What do you have for Template Column 2?
and Gather Device Details?

[lkk3511]

Well, I went to the free form layout, as I was hoping that would make the size smaller. But when I was using a group, all I needed to add was deviceID, and it looks like you have that, %deviceID% is just used in the replacement text . I think template column 2 should just be %lock%, which would show locked or unlocked. Then matching on those 2 keywords should get the replacement to work.

I can create a temporary grid using device group and see what happens to the size when I customize it the same way, after all I've done with that it might be smaller instead of larger.

[dnickel]

Yeah, that's what I have.
Maybe I'll just delete and start fresh.
Thanks

[lkk3511]

So putting %lock% in template 2 didn't work? I created one with device group, and it came out being the exact same size when I was done, so the method to build the table doesn't matter with size.

This should get locked and unlocked into the table: