Coloring an image based on state

[Chykan (Andrew)]

SIMPLE AIR COMFORT CARD Colour Change of SVG Image based on state.

Simple Air Comfort card

UPDATE: Flows available to convert numeric temperatures and humidity readings to words are available from here Weather Word Descriptions from Dew Point, Temperature & Tado (Simple Air Comfort Card) Used this sensor to calculate the dewpoint from my Temperature and Humidity Sensors. Available from the below link Dew Point Sensor Calculator Created a flow in node red to convert the numeric dewpoint value to words. The Switch Sorts the Values msg.topic is used as a filter [image] [image] …

 cards:
                - type: picture-elements
                  image: local/overlay.svg
                  card_mod:
                    style: |
                      ha-card {
                         {% if is_state('sensor.text_dewpoint_comfort_living','Dry Cold') %}
                         --ha-card-background: radial-gradient(circle, blue, black, black, blue) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Dry Cool') %}
                         --ha-card-background: radial-gradient(circle, lightblue, black, black, lightblue) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Pleasant') %}
                         --ha-card-background: radial-gradient(circle, lightgreen, black, black, lightgreen) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Comfortable') %}
                         --ha-card-background: radial-gradient(circle, green, black, black, green) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Sticky Humid') %}
                         --ha-card-background: radial-gradient(circle, yellow, black, black, yellow) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Muggy') %}
                         --ha-card-background: radial-gradient(circle, orange, black, black, orange) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Sweltering') %}
                         --ha-card-background: radial-gradient(circle, darkorange, black, black, darkorange) !important;
                         {% elif is_state('sensor.text_dewpoint_comfort_living','Stifling') %}
                         --ha-card-background: radial-gradient(circle, red, black, black, red) !important;
                         {% endif %}
                      }
                      ha-card {
                        --ha-card-border-width: 0px !important;
                        --ha-card-border-radius: 5px !important;
                        --box-shadow: none !important;
                      }