Pretty happy with a night's work.... Still plenty I want to do with it...
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
Nice work. I expect the 3 dots are part of the tile, you can navigate down the structure in Chrome by hitting F12. Bit of a path to traverse, but useful to work out what elements to adjust with CSS (for me).
Thanks! It's been over 5 years since I've done heavy duty JS coding. It's coming back.
As far as manipulating the contents, Javascript is the only way to get at it that I can see. I'd suspect I could probably add an ID to that child DIV via JS as well and then one could use CSS for styling it. I've already added a class via JS in another effort. I've modded the Ecowitt driver to dynamically change the tile color based on the range the current temperature falls in. Freezers should be in a certain range, different range for refrigerator, different for wine cellar, etc. Out of range goes yellow then red. It's been working great and I'll submit that into the driver owner soon which is you 
In this case fortunately all the code I looked at indicates the tile-contents DIV is always the first child of the DIV which has the id of tile-nn on it.
1 Like
Looks amazing
Been playing around with my avatar driver on my infrastructure dashboard, showing a status for my various hubs, lights, smart plugs and contact sensors. Next steps will be to link some of the existing apps and rules that detect issues and flag them on the status images. I also want the stuff on the left to be dynamic, leaving it blank most of the time for a clean look. I am thinking of using an iFrame that launches when I click one of the images on the right, displaying relevant information about the group of devices.
once again fine work. I think i have done what you were talking about maybe. I have a device alert to pop up and stay until i clear it on the main menu. this shows thruout my menus until i get to my device monitor which then tells me which ones have an alert. I use iframes thruout also in areas. Also, the alarm shows the status as well in the alarm tile:
on the below image, i can see top left what isnt reported in 24hrs. on the right is batteries below 10%. i can click device report in the middle to update in real time. If i scroll down below device report, it will show status and battery info in real time with a timestamp as well (most of this info is missing in my screenshot).
Alarm status notice i cleared the device alert as well:
1 Like
I’m still working my way through various features to include learning how to use CSS for custom styling of my dashboards.
I picked up a Wiz Hue bulb for one of the kids for Christmas and discovered his old iPhone was too old to run the Wiz app. So, I added the driver to the Hubitat Elevation that I’m setting up for our RV and easily paired the bulb.
Here’s a dashboard I threw together. It works great and he loves the theme. I’d like to find a way to set attributes within the Wiz driver to access the bulbs built-in effects and modes. Edit: using RM to set effects…sort of messy, but it gets the job done.
6 Likes
Updated my HVAC Display after buying a new air con unit.
I wanted a bedside display that I can read without putting my goggles on. The air con remote only sends its 'state' instead of individual commands, hence the simplified buttons to match the code presets on the RM Mini 3 that controls it.
After a lot of hit and miss mucking about with the CSS (
@sburke781), finally I have achieved something that is functional yet still pleasing to my eyes.
8 Likes
Nice work
