Show Off Your Dashboards!

[cachevich]

This is my first post anywhere so please bear with my lack of knowledge especially on how to make references.

I finally decided to take a shot at trying to do a custom dashboard.

Preamble:
I lived with one of those basic ones for more than a year but no matter how much I tweaked it, always felt cumbersome and outdated.
I took inspiration from the floor pan dashboards most people do in Home Assistant, but I may not have the skills nor did I wanted to go to another hub / system. I also like what people d with smartly.

I Finally decided to take some time and put my hands and brain to use and ended up with these dashboards.
I am surprised with the outcome as I am not a programmer and have limited skills with css /json.
I tried smartly but struggled with the grid spacing between dashboard links and the rest and since I was mostly after “transparent” tiles , I stayed with the basic Hubitat setup and did some CSS lines.

This is the “before” dashboard set up.

And these are the new ones.

For those curious on how to do this:
The key elements:

• I did my layouts in Autocad as I am familiar with it, but the can even be done by hand.
  ○ I read about how to identify my screen size and set my drawings to that in mind.
  ○ Very important: I only use 1 phone to access the dashboards, so I didn’t have the problem of the background not scaling properly in different devices.

• Saved them in google photos.
  ○ Please read about how to create “permanent”hyperlinks to your photos.

• The layouts are then the background image to the dashboard.

• I created a dense tile grid : 16x21; it could have been denser, but that was enough.

• I modified templates for switches and sensors to have transparent backgrounds and use some nicer/simpler icons.

• I created CSS to get rid of the texts, except for battery status in sensors.

• I got rid through CSS of the annoying shadow in texts and icons.

• I played around with “ dash link” “text” and “generic” tiles to create the upper half menus.

• I realized the importance of copy+paste elements from one dashboard to another through the JSON code.

I struggled and had to work around the background color for specific tiles.

I did not solve (for now) the font size and alignment for specific tiles; so right now all my texts are relatively small.

Let me know what you think of it.

[lewis.heidrick]

Keep it clean like this. People start with something that looks nice, and then crowd it up with every little sensor they can find to the point it's unusable. Maybe add some scene stuff for the TV Room instead of just an on off, and some redundant status indicators for the garage door.

[gertjan.deprez]

Voortzetting van de discussie Show Off Your Dashboards!:

I'm a school drop-out. Even my english is from movies and a lot of games.
0.0 skills with any of those coding or anything.
Only had a lot of motivation to learn an willing to fight for what i want.
Last year i got my hubitat (was expensive for a belgian)

And now I am kinda proud on what i achieved.
I have my temprature set that there collor text changes according to there value.
I *** learned that a simple . or , makes a big difference.

[sburke781]

G'day,

Great job getting your temperature chart and tiles setup!! Also, you get a lot of respect from me, I have grown up speaking English and can still find it challenging, so well done for persisting and getting a great result.

If you are interested, there is also a Temperature Charting thread (if you haven't seen it already), you may find some more inspiration:

Graphing / Charting Temp/Power Data

Hi, I know this has been asked a few times already, so my expectations for a new or different solution are low... I am expecting I will be looking at the InfluxDB and Grafana options, either on Windows or a variation of Linux (most likely Rasberry Pi)... I want to produce a chart / graph of the recent history of the temperature within my home, using my existing Philips Hue Motion Sensors and SensorPush Sensors. I'm not concerned about "real-time" information for this outcome, more so the tem…

[obolove2001]

Das ist mega geil

[gertjan.deprez]

Hi,
I had seen a topic about the color changing value but it was for F instead of C... Since we use C and meters

Color changing temp tiles

I wrote out, what I think is, some pretty cool code that changes the color of temp tiles on dashboards, depending on the current temp value. This is JSON template coding. As it stands now each numeric value needs to be coded separately (75.0, 75.1, 75.2, and so on, are all separate entries). The problem - the full finished code is way too big for cloud dash character limit (Fahrenheit 0-120 = 177,744, Celsius slightly smaller). We cannot add it to smartly, or we risk ruining peoples cloud dash …

I used that code but changed the value and found a online tool die color codes (RGB).
From
15.0 to 31.9C and ever 0.1 in between

[TechMedX]

@gertjan.deprez I have a complete code for Celsius too (-18 to 49) . PM me if you want it. (see below first)

https://community.hubitat.com/t/smartly-color-changing-tiles-now-in-celsius/41794

The current code is large as mention in the link posted above this post. The full code is too big for cloud dashboard limits. We are working on a shorter code now for use with smartly 2.0.

[lewis]

wow what switch is this ?

[wecoyote5]

I know this doesn't compare to other dashboards around here but this is my meager attempt at a house wide consolidated Alexa music control dash with the Smartly touch. Not super practical as I can tell Alexa to do the same thing, it was more of an enhanced dashboard creation exercise, passing variables between RM rules, etc. Right now it's setup to be able to select the music service and the Artist to search for then play on whatever Alexa is chosen. The album and song displays below the audio controls and it all actually works.

[lewis.heidrick]

Looking for some ideas to slim down my motion sensor tiles. Anyone have any slick looking tiles to show off?

[mbarone]

I used float:left on the device image and was able to slim my contact sensors:

Here is my custom CSS:

.tile.window .tile-title {
font-size: 11px;
}

.tile.switch .tile-primary .material-icons, .tile.door .tile-primary .material-icons, .tile.contact .tile-primary .material-icons, .tile.motion .tile-primary .material-icons, .tile.window .tile-primary .material-icons {
float: left;
padding-top: 0px !important;
}

.tile.switch .tile-primary, .tile.door .tile-primary, .tile.contact .tile-primary, .tile.motion .tile-primary, .tile.window .tile-primary {
font-size: 20px;
}

.tile-primary>div {
margin-top: 0;
}

.tile.switch .tile-tertiary, .tile.door .tile-tertiary, .tile.window .tile-tertiary, .tile.contact .tile-tertiary, .tile.motion .tile-tertiary {
left: 40px;
}

[Vettester]

@lewis.heidrick

Anyone have any slick looking tiles to show off?

Probably not what you want to hear, but you could use a 3rd party app that only displays the sensors that are actually active.

Here's an example of Homekit on iOS.

[Hasty1]

I used the battery hack listed here

[Dashboard CSS] Tabular layout for battery tiles

I recently had a few batteries die so I wanted to check out the status of my other devices. Since I bought a bunch more gadgets on ebay recently it was time to create a new Battery dashboard. I wanted the info to be more of a tabular layout so here was my solution. As an added bonus it looks pretty nice on the mobile browser too. [image] Disclaimer. This was the first time I've worked with CSS so this was a learning experience. Credit to @rocketwiz for the inspiration here: The Noob’s (in)…

[BrianP]

Mine are like this:

I have quite a bit of custom CSS but following is what I think is relevant. My dashboard changes sizes, so I can use the same one on my PC and my tablets, and everything scales. That's what attributes like font-size: 2.25vh; are for. I use color/icon to differentiate open/closed, so I got rid of the text. I just have location + icon + color, and battery % for battery-operated sensors.

.tile.dashboard > .tile-title {
  display: none;
}

.tile-contents {
  padding: 0;
  display: table;
  width: 100%;
  height: 100%;
}

.tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-44 .tile-title, #tile-46 .tile-title, .tile.motion .tile-title, #tile-35 .tile-title, #tile-35 .tile-title, #tile-29 .tile-title, #tile-16 .tile-title, #tile-37 .tile-title, #tile-33 .tile-title, #tile-2 .tile-title, #tile-1 .tile-title, #tile-17 .tile-title, #tile-31 .tile-title, #tile-51 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}
#tile-1 .tile-title:after {
    content: 'Porch';
}
#tile-2 .tile-title:after {
    content: 'Kitchen';
}
#tile-16 .tile-title:after {
    content: 'Basemt';
}
#tile-17 .tile-title:after {
    content: 'Flood Lights';
}
#tile-29 .tile-title:after {
    content: 'Liv.Rm';
}
#tile-31 .tile-title:after {
    content: 'Basemt';
}
#tile-33 .tile-title:after {
    content: 'Fam.Rm';
}
#tile-35 .tile-title:after {
    content: 'Din/M.Ba';
}
#tile-37 .tile-title:after {
    content: 'Sunrm';
}
#tile-34 .tile-title:after {
    content: 'Motion';
}
#tile-47 .tile-title:after {
    content: 'Entry';
}
#tile-48 .tile-title:after {
    content: 'Mudroom';
}
#tile-49 .tile-title:after {
    content: 'Upstairs';
}

div {
    font-size: 2.25vh;
}
.material-icons {
    font-size: 5vh !important;
}
.material.icons {
    font-size: 4vh !important;
}
.tile-tertiary {
    font-size: 2vh;
}

.closed > div {
    display: none;
}
.open > div {
    display: none;
}
.motion .tile-primary > div:nth-child(2) {
    display: none !important;
}
.smoke .tile-primary > div:nth-child(2) {
    display: none;
}

[harriscd]

I'm glad that worked out well even though my concept was just for battery levels originally. You might be able to scale down the image if you really wanted to minimize the tile footprint.

[Hasty1]

Worked perfect for my use case. I have automated pretty much everything. Now with SSL support I am starting to put up some local dashboards. The CSS has made what I do use much better.

[derge]

By any chance could you tell me how you set this up? Like the Tiles for searching and selecting provider and such?

[wecoyote5]

Sure, I'll send something later tonight after work and my honey-do list is over

[wecoyote5]

Hi @derge,
I started off creating 3 global variables with connectors as 'variables' so they can be attached to a tile on the dashboard.

ArtistSearch - String for, well, the name of the artist to search for
iMusicSource - Number(Integer) representing the Music provider selection (Amazon, Pandora, or iHeart), this is used on the dashboard as a variable number entry
sMusicSource - A string for the name of the music provider. Amazon, Pandora, iHeart, this is used as a display only tile.

I used the number as the selection to avoid issues of misspelling, capitalizing, etc, I used the string for display and in the conditional statements. This sets the sMusicSource based on the iMusicSource selection.

I select the provider (iMusicSource as a Variable number tile) and the artist (ArtistSearch as a Variable String tile) then press the button associated with the echo you want to play on.

I created a virtual button with as many buttons as amazon echoes, I have 6 echoes so I have a virtual button called pbSearchArtist with 6 buttons. Those are the 'Play on...' button tiles. The remaining tiles are a music player tile for each echo, and attribute tiles for the album cover, artist, and echo status.

Each button is the trigger for an RM rule like this one... (I default to Pandora if nothing else matches)

The searchAmazonMusic, searchIheart, and searchPandora (among others) are all available as custom commands. In the actions select 'Run Custom Action', select the echo you want then select which search... command you want to use. Then use the %ArtistSearch% global variable as the search string required by the action.

That's pretty much it. I spent almost as much time tweaking the tiles, also more for practice.

Hope that helps.

[derge]

Wow thank you for the write up. I'm going to set this up.