Awesome, thanks so much for sharing! This gets me way closer to what I was wanting to do. 
Very much appreciated!
by the way, looks like this tweak makes the blur work on later chrome versions (I tested in Chrome Edge):
.tile {
-webkit-backdrop-filter: saturate(3) blur(20px);
backdrop-filter: saturate(3) blur(20px);
}
2 Likes
that looks amazing--how are you doing mail and package tracking?
1 Like
I was using the mail and packages custom HA component.
I'm a big Apple fan so when iOS 14 was released I dumped HA and went back to HomeKit for my UI.
A driver or app for something like aftership would be awesome for this.
I am now creating a smart mirror (MagicMirror) and integrate in there a Hubitat dashboard.
Take a look at the picture; I want to get rid of the upper band that has the Hubitat icon on the left and those other icons on the right . I highlighted it in red.
Can someone guide me on how to remove them?
Could try adding CSS:
.header {display:none;}Thanks a lot.
Luckily I tried it with a copy of the dashboard. How can I revert that change? What if I want to edit the dashboard? I am used to do it by clicking on the gear icon which I just removed...
Use this CSS
.dashboard div .header {
position: fixed;
bottom: 0;
right: 1em;
z-index: 999;
opacity: .2;
zoom: .6;
-moz-transform:scale(.6);
}
.wrapper {
height: 100%;
margin-top: 0;
padding-top: 1em;
}
.dashBack,
.dashName {
display: none;
}
.dashboard div .header>.flex-auto.justify-end,
.dashboard div .header>.flex-auto.justify-end>.flex {
display: block;
}
Will you be adding touch control? I've also been toying with building one of these but the touch options seem tricky to implement.
The way I usually correct this is by doing a right-click on dashboard and selecting Inspect. From there I scroll up through the box until I find the div tag that is using the class header and type in an additional style tag to override the display (usually display:block).
I have not yet researched on the touchscreen subject as I do not have plans for that... at least in the short term. I know that once I have it running my thoughts might change...
Another Home Assistant dashboard here using the Hubitat custom integration to import all of my hubitat devices. I'll echo @Vettester and say that with Lovelace UI the possibilities are truely endless.
Each room here opens the controls for all devices in that room. I also have a devices tab that groups all devices together such as locks, lights, thermostats, etc.. There's a themes tab and a camera tab as well which I rarely use since I have the cams nested inside their individual rooms. So if I open the entrance room I've got my front entrance camera. Pool has the pool cameras etc..
4 Likes
Another HA convert here for my Dash, using TileBoard in HA.
A lot of the buttons will pop up and then allow control of other rooms, rather than switching to another page etc. Its fast, as is the execution of the buttons.
3 Likes
@Royski I like the card you're using with Windy. I had a windy card there for the weather map but it always defaulted back to wind speed and didn't give the forecast like that. Very cool.
1 Like
Ah ok. Doesn’t do that with mine, the settings are part of the URL.
Those are amazing!
Couple of questions (here they come....)
- How do you get the light on status to work?
- How do you get it to work in irregular shapes to match the drawing?
Would love something along these lines.
- Just stack tiles, remove icon and text, and set templates for color activation end 100% transparent for inactive.
- Define an absolute position for the tile.
So the states:
{
"template": "bulb",
"bgColor": "rgba(255,255,0,0.51)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "bulb",
"bgColor": "rgba(0,0,0,0)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
The position:
/Keuken Sfeer - 1/
#tile-12 { position: absolute; left: 320px; top: 62px; width: 43px; height: 140px;}
#tile-12 .dimmer,
#tile-12 .dimLevel {visibility: hidden;}
#tile-12 .material-icons{display:none}
2 Likes
