Displaying Air Quality Details

[Dan]

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…

[LosinIt]

I have no answer to your question but I’ll suggest you consider marketing those! Very well done.

[markus]

@Dan

Any creative thoughts on how I might replicate the sort of widget I was able to create in homeassistant on a native hubitat dashboard?

The only way without using an app to create a custom tile would be with tile stacking and CSS. @TechMedX probably has some good input on that.

There’s also a post by @spelcheck about tile stacking:

HE Dashboard Tile Stacking

This was originally posted to HE forums by @TechMedX. … a neat ‘trick’ I learned and want to share. Some of you may know this, but for those that don’t here goes. Tile Stacking - using multiple overlapping tiles to give the impression of a single more useful tile. The tile on the left is somewhat obvious it is 7 tiles stacked 1 lock 1 contact for each door plus an oversized background tile with a group title. The right side has 2 sets tiles each having a switch and a color bulb tile. This …

[TechMedX]

Have you look at hubigraphs? that might have charts like those.
Here are a few of my tile stacks to give you an idea of possibilities.

7tiles

4 tiles each (need to update all color coding now that it is cold)

3 tiles

2 tiles each

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.

[april.brandt]

Uhm - you made these? Are you going to sell them?

[Dan]

Thanks for all the suggestions !

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.

[TechMedX]

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.

[spelcheck]

@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

[Dan]

@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

<div class="tile-contents"><div class="tile-secondary"> CustomDisplay </div><div class="tile-primary" style="font-size: 21px;"><div style="color: #000000;font-size:20px;font-weight: normal; font-style: normal">HAZARDOUS <br>18.7 °C 54.7 %<br> Calibrating <br> <br> <br> <br> <br> </div></div></div>

[spelcheck]

Looks good, I think this’ll work!

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:

#tile-99.attribute-HAZARDOUS {
  background-color: red;
  color: white;
}

I’ll tag you when it’s released

[Dan]

awesome! for now would it work to add the CSS manually?

[spelcheck]

Until that feature is added in smartly-inject, there are no classes to target via CSS. You can put it in there ahead of time though

[Dan]

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);}}

[LosinIt]

@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.

Thanks!

[spelcheck]

@Dan

/* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */

#tile-75.attribute-Good {
  color: green;
}

This looks good.

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.

Edit: Released in 2.1.0 on 10/22/20

[Dan]

ah! gotcha! Thanks again!

[spelcheck]

@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!

[RELEASE] smartly 2.1.0 featuring smartly-inject

[image] RELEASE 2.1.0 - 11/22/2020 SMARTLY add mod options for ‘generic’, ‘variable*’ and ‘weather’ tile types #98 @temptingtime @bBrian add Pixel 5 calibration #106 @djw1191 text tile text alignment mod not working #108 @yoyotogblo Thermostat ‘title replacement’ mod needs adjustment #109 @Simon Add calibrations #110 – Lenovo Yoga Tab 3 10" @sebad90 – Samsung Galaxy S20 @yoyotogblo add icon mod for links tiles #111 @epw SMARTLY INJECT - Update now available on HPM! Stock .modal co…

/* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */

#tile-99.attribute-GOOD {
  color: green;
}

#tile-99.attribute-DANGER {
  color: red;
}