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.
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)
Latest version of my embedded keypad! Thanks @mbarone for the inspiration
I think this one is how it will be....
Finally someone posts what i always had in mind. Simple and clean. Two things,
how did you get the underline on the bottom menu (what css script do you use?
Care to share the css for this screen?
My attempt at some screens:
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.
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:
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.
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.
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");
HERE'S THE ANSWER
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 ";
There is a CSS thread that would be the place to discuss this: