The previous issue I had with the overlay.svg was because I was using Microsoft Edge. Found out later it was working fine from the mobile and tablet app, subsequently Chrome as well.
Repaired Styles for the labels. Now changes the font size for the name rather than the label which was not working.
COMPLETE CODE FOR CARDS BELOW. I have added a few labels to make it easier when editing the yaml, I have also included the text sensors I generated in Node Red with a link.
I like this card, but i have problems finding the right sensors.
I use thermal comfort integration, which provides a lot of them, maybe it could replace the node red calculated sensor?
I am unsure which sensors are the appropriate ones to replace the original ones. Not enough air quality knowledge
The large if elif code blocks could be improved by using a variable (only one place to change entities, shorter/better readable).
-card {
{% set state = states('sensor.thermal_comfort_perception') %}
{% if state =='dry') %}
--ha-card-background: radial-gradient(circle, deepskyblue, 55%, black, black) !important;
{% elif state =='very_comfortable') %}
--ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, black, black) !important;
{% elif state =='comfortable') %}
--ha-card-background: radial-gradient(circle, limegreen, 55%, black, black) !important;
{% elif state =='ok_but_humid') %}
--ha-card-background: radial-gradient(circle, yellowgreen, 55%, black, black) !important;
{% elif state =='somewhat_uncomfortable') %}
--ha-card-background: radial-gradient(circle, yellow, 55%, black, black) !important;
{% elif state =='quite_uncomfortable') %}
--ha-card-background: radial-gradient(circle, gold, 55%, black, black) !important;
{% elif state =='extremely_uncomfortable') %}
--ha-card-background: radial-gradient(circle, orange, 55%, black, black) !important;
{% elif state =='severely_high') %}
--ha-card-background: radial-gradient(circle, crimson, 55%, black, black) !important;
{% endif %}
}
I was going to convert all these sensors to macro’s and also simplify the template format. Will post when I do.
As for the dewpoint comfort in your attached code, that looks like you have converted a dewpoint into words via NodeRED?
A good dewpoint sensor that can produce the dewpoint for multiple areas where temperature and humidity is measured is. All configured through GUI.
Link below to a custom dewpoint sensor I have in my configuration.yaml based on the same Arden Buck equation for accurate dew point estimation, as above integration.
I have created colour sensors in my configuration.yaml file
With the above method I only have to add the large code blocks to my configuration.yaml file and the card itself is reduced significantly in the lovelace.yaml.
The words that show up on the card are calculated from the dewpoint temperature. The colour templates are also determined by the word produced by the sensor.
