Mini Climate Card for Wundasmart Integration

[lafite64]

I have put together a mini climate card YAML for this integration which tries to roughly map the functionality of the Wundasmart App displays for each zone. Hope it's useful as I couldn't find anything similar: the mini-climate-card documentation isn't the easiest to follow!

type: custom:mini-climate
entity: climate.master_bedroom_2
name: Master Bedroom
#
# Mini Climate Card set up for a Wundasmart climate entity.
# Requires card-mod integration from HACS
# force icon to be specific colour.
#
card_mod:
  style: |
    ha-icon {
      color: white !important;
    }
icon: mdi:bed-king
hide_current_temperature: true
#
# Set step increments for target temp
#
target_temperature:
  step: 0.5
  value:
    style: |
      (value) => (value > 30 ? { color: 'red'} : { color: 'green'})
#
# Display only the target temperature
#
secondary_info:
  hide: true
#
# Hide the three-dots menu in the default card
#
toggle:
  hide: true
#
# Set the indicator for heating status from Wundasmart
#
hvac_mode:
#
# white for off, orange for heating, gray for idle
#
  style: |-
    (value, entity) => {
      if (value === 'off') return { color: 'white !important' };
      if (entity.attributes?.hvac_action === 'heating') return { color: 'orange !important' };
      return { color: 'gray !important' };
    }
  hide: false
#
# set icon for each mode, heating, idle and off
#
  source:
    "off":
      icon: mdi:power
      name: "off"
    auto:
      icon: mdi:fire
      name: auto
    heat:
      icon: mdi:fire
      name: heating
#
# Indicators: preset mode, humidity, temp and battery
# - temp at the end to keep data in multiple cards aligned as the mini climate card
#   presents integer temps as 23 rather than 23.0
# - Battery indicator is hidden unless battery is below 30%
# - Preset modes map to Wundasmart modes, and hand for manual mode set
#   Any temp manually set to be the same as a preset mode temp will show as if the preset is operating
#
indicators:
  preset:
    icon:
#
# preset mode returns null if manual mode is set
# Hand returned for manual settings, circle for anything else
#
      template: |
        (value) => (!value || value === '')
          ? 'mdi:hand-back-right-outline' 
          : 'mdi:circle-outline'
#
# Set colours for each mode, value == '' sets manual mode colour
#
      style: |
        (value) => {
          if (!value || value == '') {
            return { color: 'white' };
          } else if (value === 'reduced') {
            return { color: 'dodgerblue' };
          } else if (value === 'eco') {
            return { color: 'green' };
          } else {
            return { color: 'red' };
          }
        }
#
# click on circle brings up main thermostat window
#
    tap_action:
      action: more-info
      entity: climate.master_bedroom
#
# Do not display text for the preset mode, just the icon
#
    value:
      style: |
        () => ({display: 'none'})
    source:
      attribute: preset_mode
#
# Show humidity with colours above/below thresholds and
# history graph if clicked on
#
  humidity:
    icon:
      template: () => 'mdi:water-percent'
#
# Colour the icon above and below thresholds
#
      style: |
        (value) => {
          if (value > 80) {
            return { color: 'CadetBlue' }; // Above high threshold
          } else if (value > 40) {
            return { color: 'white' }; // Below low threshold
          } else {
            return { color: 'red' }; // Within the normal range
          }
        }
    value:
#
# colour the humidity data above and below thresholds
#
      style: |
        (value) => {
          if (value > 80) {
            return { color: 'CadetBlue' }; // Above high threshold
          } else if (value > 40) {
            return { color: 'white' }; // Below low threshold
          } else {
            return { color: 'red' }; // Within the normal range
          }
        }
#
# Click on the humidity gives history graph
#
    tap_action:
      action: more-info
      entity: sensor.master_bedroom_humidity
    unit: "%"
#
# round to nearest integer %
#
    round: 0
    source:
      entity: sensor.master_bedroom_humidity
#
# Show temperature with colours above/below thresholds and
# history graph if clicked on
#
  temperature2:
    icon:
      template: () => 'mdi:thermometer'
#
# Colour the icon above and below thresholds
#
      style: |
        (value) => {
          if (value > 27) {
            return { color: 'red' }; // Above high threshold
          } else if (value < 4) {
            return { color: 'CadetBlue' }; // Below low threshold
          } else {
            return { color: 'white' }; // Within the normal range
          }
        }
    value:
#
# colour the temperature data above and below thresholds
#
      style: |
        (value) => {
          if (value > 27) {
            return { color: 'red' }; // Above high threshold
          } else if (value < 4) {
            return { color: 'CadetBlue' }; // Below low threshold
          } else {
            return { color: 'white' }; // Within the normal range
          }
        }
#
# Click on temperature gives temperature graph
#
    tap_action:
      action: more-info
      entity: sensor.master_bedroom_temperature
    unit: C
#
# Show to 1 decimal place, but the card logic will always show X.0 as 
# an integer without any decimal places.
#
    round: 1
    source:
      entity: sensor.master_bedroom_temperature
#
# Show battery if it is below 30%, with different colours
# between 20-30% and below 20%. Hide indicator if battery >30%
#
  battery:
    hide: |
      (value) => value > 30
    icon:
#
# Choose 20% battery icon  above 20% otherwise 10% icon
#
      template: |
        (value) => (value > 20)
          ? 'mdi:battery-20' 
          : 'mdi:battery-10'
      style: |
#
# Show icon orange above 20%, red below 20%
#
        (value) => {
          if (value < 20) {
            return { color: 'red' }; // Above high threshold
          } else {
            return { color: 'orange' }; // Below low threshold
          } 
        }
    value:
#
# colour the battery data as for the icon
#
      style: |
        (value) => {
          if (value < 20) {
            return { color: 'red' }; // Above high threshold
          } else {
            return { color: 'orange' }; // Below low threshold
          } 
        }
    unit: "%"
#
# Round to nearest integer %
#
    round: 0
    source:
      entity: sensor.master_bedroom_battery_level