@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 ??
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....
5 Likes
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:
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
4 Likes
18 Likes
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");
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 ";
2 Likes
There is a CSS thread that would be the place to discuss this:
Yeah I was hoping for a more obvious place but this technically isn't a CSS issue, it's a Javascript one and searching for innerHTML results in this thread with the most mentions of that.
Fair point....
1 Like
