Show Off Your Dashboards!

[ebukva]

Thanks! Here’s my setup:

Rounded: 18
Font-Size: 16
Background image: https://images.unsplash.com/photo-1493552152660-f915ab47ae9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80
(There are tons of other great photos on Unsplash)

Then, my CSS:

.tile {
  -webkit-backdrop-filter: saturate(3) blur(20px);
}

.tile-edit .material-icons {
  opacity: .18;
}

.tile-primary,
.tile-contents,
.tile-title,
.material-icons,
.dashName,
.thermostat {
  text-shadow: rgba(0,0,0,.18) 0 0 4px !important;
}

.header {
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
}

.weatherTemperature {
  font-weight: bold;
}

.weatherSpeed,
.weatherDirection,
.weatherHumidity {
  opacity: .5;
}

/* To enable pictures of people to replace the default
   icons in the presence tile */

.presence { background-size: 68% !important;}
.present { vertical-align: top; }
.present .material-icons { display: none; }
.present > div { margin-top: 0px; }

I’m using the dashboard mostly on iPhone (not sure of -webkit-backdrop-filter: support on other platforms). If the blurred bg looks weird in some tiles that are colored by default, you can target them more specifically.

And lastly, colors in my "Layout" section:

"customColors": [
    {
      "bgColor": "rgba(26,26,26,0.92)",
      "state": "night",
    },
    {
      "template": "dimmer",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "off"
    },
    {
      "template": "dimmer",
      "bgColor": "rgba(255,255,255,1)",
      "iconColor": "rgb(92,89,20)",
      "state": "on"
    },
    {
      "template": "thermostat",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "idle",
    },
    {
      "template": "thermostat",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "pending heat",
    },
    {
      "template": "weather",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "default",
    },
    {
      "template": "mode",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "home",
    },
    {
      "template": "outlet",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "off",
    },
    {
      "template": "presence",
      "bgColor": "rgba(64,64,64,.46)",
      "state": "present",
    }
  ],

[rfoust]

Awesome, thanks so much for sharing! This gets me way closer to what I was wanting to do. Very much appreciated!

[rfoust]

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);
}

[Markio506]

@Vettester

Here's an example of my dashboard using Home Assistant. I'm using HA's custom Hubitat integration to import all my Hubitat device information into HA. With the latest version of HA and their Lovelace UI the possibilities are endless. I think it's time for the Hubitat developers to step up their game.

that looks amazing--how are you doing mail and package tracking?

[Vettester]

I was using the mail and packages custom HA component.

Mail and Packages: Custom component for UPS, FEDEX, and USPS

I'm a big Apple fan so when iOS 14 was released I dumped HA and went back to HomeKit for my UI.

[potts.mike]

A driver or app for something like aftership would be awesome for this.

[Panda]

No kidding this dashboard is legit.

[cachevich]

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?

[thebearmay]

Could try adding CSS:

.header {display:none;}

[cachevich]

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...

[Angus_M]

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;
}

[Angus_M]

@cachevich

smart mirror

Will you be adding touch control? I've also been toying with building one of these but the touch options seem tricky to implement.

[thebearmay]

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).

[cachevich]

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...

[MRobi]

@Markio506

@Vettester

Here's an example of my dashboard using Home Assistant. I'm using HA's custom Hubitat integration to import all my Hubitat device information into HA. With the latest version of HA and their Lovelace UI the possibilities are endless. I think it's time for the Hubitat developers to step up their game.

that looks amazing

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..

[Royski]

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.

[MRobi]

@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.

[Royski]

Ah ok. Doesn’t do that with mine, the settings are part of the URL.

[fanmanrules]

Trying to get more uniformity in my dashboards.
First attempt:

The old dash:

[cuirbear]

Those are amazing!
Couple of questions (here they come....)

1. How do you get the light on status to work?
2. How do you get it to work in irregular shapes to match the drawing?

Would love something along these lines.