Show Off Your Dashboards!

If its not going to be interactive, you can use magic mirror to display any Web page(dashboard) in an iframe

Understood - I'm really excited about the Android Dashboard from @jpage4500 and currently I'm running that on a portrait display from a Win10 machine using Bluestacks for the Android VM. I want the great interaction this most excellent dashboard has so I'll need the touchscreen portion - I'll also embedded an Alexa, some backlighting thats dynamic, and some other features I've planned. There are some really great video's of these/items like this I intended to mimic!

@mark.cockcroft. Has anyone posted on how they did this? Always liked magic mirror but never created one due to the cost of the touch film. This could have distinct possibilities.

Not on here, there is tons in their website. If you need a lift on integration with HE you can send http requests to do stuff like turn off screen and back on

hello how did you put the keypad on the dashboard ??

Virtual keypad. [RELEASE] Virtual Keypad


Plus a lot of extra CSS work, in my particular case (in addition to what is already laid out in the post).

With the recent updates to my Status Avatar Driver and foundational features in Device Watchdog, I can now provide a more succinct status for my hubs, lights, smart plugs and contact sensors (using some Noun project icons that I need to include an attribution for...).

Next will be to include a pop-up dashboard when clicking on the icons to display more detailed reports from DW on a dashboard, taking inspiration from the Advanced iFrame Driver.

1 Like

I can't express how excited I am to start implementation of this! Sounds cliche but this really is a game changer because of it's dynamic use of dashboard space when it's at a premium (like mine)

1 Like

Latest version of my embedded keypad! Thanks @mbarone for the inspiration

I think this one is how it will be....


Pretty happy with a night's work.... Still plenty I want to do with it...


Getting next level with CSS....


Finally someone posts what i always had in mind. Simple and clean. Two things,

  1. how did you get the underline on the bottom menu (what css script do you use?

  2. Care to share the css for this screen?

My attempt at some screens:

1 Like

Thanks, I'll try to get to it tonight. My Zone Control dashboard post has it, but I'll dig that and a few more details out later.

1 Like

played around a bit and got similiar to yours. Still would like to see your css as to how you formatted the tiles and text:

1 Like

Thinking about it now, the general idea of this thread is primarily to showcase what we've done, at least that is my impression. Maybe we can move the discussion around the CSS and other techniques over to the CSS thread.

1 Like

This is my mobile dashboard. I still have some tweaks to add but using Smartly was a big help.


Winter is back so I decided to redesing my dashboard. This is what I came up with so far:


Seems like this might be a good/best place to ask this innerHTML question based on the audience though please do tell me if there's somewhere better.

I'm injecting the following JS (abbreviated) into my dashboard using "Dashboard JavaScript Injector". Instead of having 8 tiles using Attribute of the same device resulting in the same bottom tile name I want a more accurate description. The below works EXCEPT the 3 dots in the top right of the tile no longer function. The unchanged tiles 3 dots continue to work properly. If I save the page source and compare it, the only thing different is the text that was replaced.

document.getElementById("tile-20").innerHTML = document.getElementById("tile20").innerHTML.replace("Flume Water Monitor", "Flume Gals this Min");
document.getElementById("tile-21").innerHTML = document.getElementById("tile21").innerHTML.replace("Flume Water Monitor", "Flume Gals this Hour");

Don't mess with the structure which is what I was doing above. Only alter the specific element's innerHTML. Fortunately it's the first child so super simple. I could have done the .replace above too but didn't need to.

document.getElementById('tile-20').firstElementChild.innerHTML = " Flume Gals this Min ";
document.getElementById('tile-21').firstElementChild.innerHTML = " Flume Gals this Hour ";
1 Like

There is a CSS thread that would be the place to discuss this:

Download the Hubitat app