Simple Air Comfort card

Share your Projects! Dashboards & Frontend
17

UPDATE: 16 23/04/2023
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
image1453×302 48.1 KB

image
image586×894 19.5 KB

image
image520×895 13.9 KB

image
image517×897 13.8 KB

image
image539×883 27.6 KB

Added Dew Point Comfort Text

                    - type: custom:button-card
                      entity: sensor.text_comfort_living
                      name: Living Room Dew Point Comfort
                      label: >-
                        Sensor created in Node Red converts dewpoint to comfort
                        text
                        https://github.com/miguelangel-nubla/home-assistant-dewpoint
                      show_state: true
                      show_name: false
                      show_label: false
                      show_icon: false
                      style:
                        right: '-50%'
                        top: 13%
                        width: 100%
                      styles:
                        state:
                          - font-size: 25px
                          - font-weight: bold
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          }

Added Dew Point Sensor

                    - type: custom:button-card
                      entity: sensor.dewpoint_living_room
                      name: Living Room Dew Point
                      icon: mdi:water-thermometer-outline
                      show_state: true
                      show_name: false
                      show_icon: true
                      style:
                        left: 20%
                        top: 30%
                        width: 50%
                        transform: translate(-50%, -50%) scale(0.8, 0.8)
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          }

Added a Dewpoint Comfort Sensor based off this chart:
This now changes the background colour of the outer ring only

image
image2000×590 36.7 KB

Added a Temperature Comfort Sensor based off this chart:
This now changes only the background colour of the card.

image
image1434×495 41 KB

FINAL PRODUCT: Optimised for Tablets, Nest Hubs, and my Portrait uPerfect 15.6 Vertical Monitor.

FULL CARDS CAN BE FOUND IN THE PREVIOUS POST.
Full code available here: Simple Air Comfort card - #16 by Chykan

- MOBILE OPTIMISED V3.0 - Used full width on phone in portrait orientation. Two vertical stack cards, within a horizontal stack card.

image
image444×667 110 KB

- MOBILE OPTIMISED - Used full width 1080p Tablet or vertical orientation screen.

image
image1010×261 102 KB

TABLET OR FULL WIDTH PHONE OPTIMISED CARD V3.0 - Full Width on Phone

image
image484×961 85.2 KB

NOTE: There has been a lot of calibration to ensure 50% Humidity sits in the middle of the chart.

MOBILE OPTIMISED Scaling for dot:*

Humidity

  • 0.4 shifts right to allow for 20% size of dot.
  • 0% is left of card, 50% middle, 100% is right of card.

Temperature

  • Change the OldMin Value to shift the dot up an down while maintaining the range and ratio.
  • (OldMax - OldMin) Value is the 45% Outer Ring.
  • The dot will always stay on the card, 0% is bottom and 100% is top.
NewValue = (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin

    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.air_conditioning_humidity') | float %}
          {% set temperature_float = states('sensor.air_conditioning_temperature') | float %}
          left: {{ 0.4 + humidity_float }}%;
          bottom: {{((temperature_float-4)*(100-0)/(72.5-27.5))+0}}%;
          transition: bottom 1s, left 1s;

TABLET OR FULL WIDTH PHONE OPTIMISED Scaling for dot:*

Humidity

  • 0.5 shifts right to allow for 25% size of dot.
  • 0% is left of card, 50% middle, 100% is right of card.

Temperature

  • Change the OldMin Value to shift the dot up an down while maintaining the range and ratio.
  • (OldMax - OldMin) Value is the 45% Outer Ring.
  • The dot will always stay on the card, 0% is bottom and 100% is top.
    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.netatmo_devonport_tas_indoor_humidity') | float %}
          {% set temperature_float = states('sensor.netatmo_devonport_tas_indoor_temperature') | float %}
          left: {{ 0.5 + humidity_float }}%;
          bottom: {{((temperature_float-1.5)*(100-0)/(72.5-27.5))+0}}%;
          transition: bottom 1s, left 1s;

The way TADO does it must be with trigonometric functions Someone with a lot more coding know how will have to figure out this one:
image

Thanks @Grandmasterseven and @agak79 fantastic card for Tado Users. I have also setup the card for some outside sensors I have.

1 Like