Show Off Your Dashboards!

My home is +6,000sqft including a basement and shop. I would prefer not to walk all over checking my lights and making sure they are off. Something like this would be super beneficial. For a 1200sqft home where you can see at a glance if the light is on or off, yeah, analog switches are great. But, this has some real practical uses

1 Like

You're hosting a web server locally?

(Edit: I suppose if it's just JS, you can do it in a static html file, no need for a server).

This is probably a stupid noob question but...
What is the correct syntax for adding a background image into a tile.
Does the image have to be on the hub?

1 Like

Not stupid at all. When adding a tile (or while editing one that already exists), look over on the right side of the dialog box under Options. There you will find Background Image Link.

It can be local to the hub, in which case the syntax would be something like /local/Blue0.jpg

Or it can be an image on the interwebs in which case it would be a URL of a jpg, for example.

Ironically, I find local files to be slower than Internet accessible images, but the latter may be subject to change, and unavailable when your Internet connection is down.

1 Like

Thanks. I was able to use an online image but couldn't find how to use a local.
Another question, I it possible to use either no icon or a transparent icon so I can just use background image? Thanks again

Read through the info at this thread about local files. It's really quite easy once you find it (under Hub Settings). As for a tile that is just an image and nothing else, select the Dashboard Link template (and no device). Put the URL to the image on the Image URL property. This is what many people do for weather tiles (e.g., if they can find a static image on their local TV station's web site).

Yes, Apache2 on a Pi. It's a piece of cake to set up and is utterly reliable.

This looks fantastic, going with a JS/CSS environment is absolutely the best way to go.

1 Like

Thank you and agree! It's a bit of work but worth it for the end result. I'm really happy with the direction of my dashboards now. Still a bit of work to do but getting there.

OK so this is "read only" as a dashboard, but it takes data from the MakerAPI and presents it in for an overview.

This particular screen uses Unifi-Poller to generate the network stats from my Unifi devices, the scraper for Nomad to get information on my running containers, and my own project to pull the data from the MakerAPI into Prometheus for graphing


Here is what I came up with for my bedroom using a lot of the code snippets and advice I found on this board. I'm a noob so this is my first attempt.

I'm using a repurposed old android phone for my display.
Backgrounds turn yellow when device is on.
No labels cuz I know what everything is :grinning:


Hi,Can you explain how you did this , Ive installed the smartly inject.JS via the package manager but im not sure how i use this now its installed.


Here's my main dashboard using Lenovo M8 tablets with Fully Kiosk running. I was using Fire tablets, but Amazon updates would mess with some of the features in Fully. This is all built using HE dashboard features and CSS. I learn a little more each time I get in there and mess around.


Not done with Smarty so can't help you there. I think there is a thread specifically for that.
Look for "using custom icons" in the discussion boards for some CSS code.
I used transparent background icons I downloaded as the backgrounds on the tiles. Uploaded to the hub via file manager. Once you upload them, use /local/your_icon.png in the background field of the tile.
I put this code on the CSS page to get rid of text shadowing and make the icons fit the tiles.

.tile {text-shadow: none;
background-size: contain !important;}

And this turns off the titles

.tile-title {visibility: hidden;}

Play around and have fun with it

1 Like

Add the smartly inject 'device' tile onto a dashboard as an 'attribute' tile, and select smartlyinject from the drop down. Then add the code above to you CSS section of the options screen.

This is only needed if you do not want to use the default smartly editor which does it for all you.

This is nice. Can you give me info on how you did the HSM code number pad?

I have an "Enter Code" button to disarm HSM, but it brings up the tablet keyboard, which makes my dashboard get squished vertically, since it's set to auto-respond to page size. I use the same dashboard on my computer also.

Can you disarm HSM by hitting the numpad to key in the PIN?

I used the Virtual Keypad HE app by @mbarone. It sits on my dashboard as an iframe, so no resizing. Very slick little app. I’m still playing with it but it’s definitely worth taking a look. Lots of features. And yes, I can arm/disarm HSM or even use custom arm/disarm rules.

Here is the release thread for the Virtual Keypad App. feel free to ask any questions there.

And since we're in the show us your dashboard thread....
here is my fire8 tablet dashboard using fkb:

and my phone dashboard:

Ive been updating the keypad app, thats why my follow me events are spammed with HSM arm/disarm events.


Thanks! I didn't know about that app. I'm going to re-do my dashboard with that!

@mbarone Hey, I got a question about your HSM Status tile. It looks like you used Tile Master to create it, but how did you actually get it to see that data? I can't figure out how to get HSM to show up in the device list when you configure TM (or at least I can't see how to get TM to find HSM status variables). Can you do a quick break down of how that tile was created? Thanks!