I’ve recently built a few DIY air quality sensors (using a BME680 sensor, Wemos D1 all in a 3d printed case), work really well (apart from a batch of dodgy displays that need replacing!) reports Indoor Air Quality, Pressure, Temperature, Humidity, bVOC, Co2 … using ESPHome and HomeAssistant as a middle man to get in to hubitat
Any creative thoughts on how I might replicate the sort of widget I was able to create in homeassistant on a native hubitat dashboard? Using some CSS magic or any other thoughts?
I’ll post an update with a guide if anyone is interested on how it all hangs together…
As you can see I use smartly advanced grid settings and lots of stacks. Happy to help with them in any way I can.
You can also use a couple community apps to create tiles. I use @Cobra’s Super Tile to make the one below that monitors 6 outdoor lights. This is not a control tile just informational (SOB one is on!). @BPTWorld also has an app that can make multi device tiles with control.
Not thought about selling them really but easy enough to make; I’ll have to put up a how to for anyone who is interested !
I had a play with the weather 2 tile (hubigraphs) but doesn’t quite fit my dashboards, so gone back to SuperTile which works well! Thank you for the suggestions
Would it be possible in CSS to change the color of the first line of text (“GOOD”) in the screenshot, based on its value. This is an AirQuality Attribute, wandering if I can change text to be RED, AMBER, GREEN dependent on the value?
And perhaps change the “Uncertain” value to be smaller and left aligned - its a confidence value for the Air Quality based on sensors current calibration state.
You can certainly change the color, but I’m unsure about target those elements separately. Do you know if those values are separately defined elements? If you bring up the ‘inspect’ tool can you highlight them each by themselves? If so you should be able to target them with CSS. If they are all one element you cannot.
Check out this post if you are unsure how to use the ‘inspect’ tool, and I’ll tag CCS mastermind @spelcheck to get his expert opinion.
@Dan@TechMedX is spot on, we’d need to see how the tile is built to know for sure, but good chance changing color on the first word or number on an attribute tile will be possible. Let’s have you extract that tile html using the process he posted and PM it over
@spelcheck Thanks for your help, this is what I see… the ideal scenario would be to color the entire background of the tile based on a value in the type, for example the current Hazadous status would change the tile to a red
On next release of smartly-inject, the first word (or whole number) in an attribute tile will be injected as a “attribute-[extracted text/number]” so in your case you’d use:
Would you mind pointing me to what I’d need to edit? I’ve added to the custom css section, but I guess i’m missing something… thanks in advance!!
/* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */
#tile-75.attribute-Good {
color: green;
}
@media screen and (max-width: 854px) and (min-width:850px){.dashboard{zoom:0.933; -moz-transform:scale(0.933);}}
@Dan, would you mind selecting all that code and then clicking the “gear” icon above your post and click Hide Details? It makes posts much easier to read.
Edit: @Dan the feature that allows “attribute value classing” isn’t released yet, sorry I wasn’t more clear. I was saying if you wanted to put the CSS in ahead of time, when it’s released and you update, it’ll just work.
@Dan, just released! Update smartly-inject and you can use the following CSS (an an example) to change the tile color based on the first word of the tile. In your case, it would be GOOD/DANGER etc.
Be sure to use the same exact capitalization though!
/* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */
#tile-99.attribute-GOOD {
color: green;
}
#tile-99.attribute-DANGER {
color: red;
}