Show Off Your Dashboards!

📝 Dashboards Hubitat Dashboard
1020

dash
dash682×1218 421 KB

dash-2
dash-2686×1218 403 KB

I’m about to tinker with Homebridge. Meanwhile, happy with the dashboard styling so far. I’ve added custom css to:

  • change tile backgrounds to use webkit’s background blur and saturate (and picked my own tile colors)
  • soften the drop shadows on text significantly
  • reduce opacity on the "more" icon, customized the weather widget to put more focus on temperature
  • tweak header styling in small ways and use a background image from Unsplash

Anyone ran into an issue where any tiles added after the Mode tile was added show atop the mode selection modal? I seems like background filters are interacting with the layout in a bad way.

I wish the tiles on the far right weren’t cut off before the edge of the screen, creating a weird margin at the edge when the dashboard needs scrolling.

3 Likes
1021

This sounds like a grid settings issue. I documented the process in my Guide to HE Dashboard write up. I have reposed the applicable section below. Make sure your grid has been adjusted to allow for enough space to add additional tiles where needed, and not on top.

Grid Columns and Rows

The amount of columns and rows available on the gird is set in the Options (gear icon). This comes in mostly when adding new tiles. The system will automatically chose the next tile location given the settings below.

image
image1771×371 23.9 KB

When adding a new tile, be sure you are placing it's location on a green tile. If you see a blue tile, that means you will be overlaying an existing tile (shown below). If no more green tiles are available you will need to adjust the grid settings above.

image
image1183×388 32.5 KB

The system will allow you to place tiles outside the grid setting, so this is not a limitation. It's just very helpful when placing new tiles to make sure they do not overlap, making it harder to adjust afterwards.

Using smartly you can add your mobile devices (both portrait, and landscape) to the calibration section and it will size your dashboard correctly. smartly will create a custom CSS entry for each of your device. My iPad calibration (I only use landscape since it is mounted) looks like this....

@media screen and (max-width: 1024px) and (min-width:1020px){.dashboard{zoom:0.94;}}

With that code in the CSS my screen is perfectly sized with no tiles bleeding over the edge. Since smartly makes lots of other changes to your dashboard, I do NOT recommend you run this dash thru it (not without a good backup first). Instead I suggest you create a new dash (copy the current JSON if you want) and run that "test dash" through smartly. Pick all your devices for calibration. Apply the smartly changes to your "test dash" and see how it looks. If you like the format, but not the other smartly changes copy the @media screen lines to all your new dashes for the calibration to remain.

All and all a very good start!

1022

Recently converted from ST to HE, this is on my Samsung :woozy_face: smart fridge, I modeled it after my ActionTiles layout I previously used.

IMG_1854
IMG_18541512×2016 763 KB

18 Likes
1023

How did you get the dashboard on the Samsung smart fridge? I have the same fridge and would like to have a Hunitat dashboard on it.

1024

On the fridge, use the built in browser app

one
one724×624 797 KB

Enter your Hubitat's IP, then from Apps
two
two826×1526 484 KB

Find Hubitat Dashboard then click on the name of your dashboard
three
three1086×680 1.04 MB

Then click the "Local LAN Link to Dashboard".
four
four1292×476 907 KB

Once displayed set it to favorites and put on Fridge home screen
five
five966×530 963 KB

Settings I used:
5 Columns
8 Rows
Font Size 8
Icon Size 31
Grid Gap 2
Rounded 1
Column Width 103
Column Height 103

Custom CSS:
.tile{text-shadow:none}
I actually have more CSS, but it's for the Custom Presence Tiles I created.

6 Likes
1025

That was easy! Thank you!

1026

DUDE how do i use the weather tiles like you have? i been trying in the native hubitat dashboard but haven't figured it out. Tried sharptools and i was doing well with that but the monthly charge took me away from it and back to the native dashboard.

1027

This example is from the weather underground maps page. For this one I clicked on animation and then right click and copy image address. Then pasted that into an tile using the image template with a refresh

weather
weather1032×772 118 KB

1 Like
1028

image
image2019×1368 982 KB
main screen just finished, using Hubigraph and smartly. top row is all air quality. worklng on the sub-pages now. hosted on my android tablet using kiosk browser.

1 Like
1029

You should make the tile background transparent on those top dial tiles. Your presence dashboard is not capitalized but the others are. Also would be nice to have the presence tiles change color depending on status. And drop the Main dashboard link on the Main dashboard to free up some space for something else. Maybe HSM or something like that in it's place.

2 Likes
1030

Your OCD is showing.

1 Like
1031

Hahaha, yup!

1 Like
1032

Are you using PurpleAir devices or something else? I need to find a way to add those.

1033

first one is purple using HubiGraphs, the others are awair sensors.

1034

all good suggestions, thanks--it caused me to figure out how to do transparency. now need to figure out how to do conditional formatting

1035

Hit up @spelcheck he's a CSS ninja.

1036

What conditions are your targeting, and what formatting do you want tot apply? With smartly 2.0 (which it looks like your using) CSS conditional targeting is much easier.

Here's a couple temp and humidity BG color changes as examples

.temp-129{background-color:rgba(211,4,1,.9)!important}
.temp-130{background-color:rgba(211,4,1,.9)!important}

.tile.humidity-0{background-color:rgb(240,199,31)!important}
.tile.humidity-1{background-color:rgb(236,199,30)!important}

You could do the same with air quality. I don't have a sensor thu, so I'm not sure how they output readings.

1037

You could use this app for conditional formatting using images

1038

was thinking that the water sensors should turn red if wet. presence icons change based on state. Easy to do in android hubitat dashboard app, but not HE. I don't see it in smartly--will need to learn some CSS it apears.

1 Like
1039

thanks for the pointer to conditional image server. I think this might do the trick. off to install and play now while the brisket smokes...