Tablet Home Card in a cross-section ;)


tablet3
You can see a high resolution animated gif here
Hi everybody, just wanted to share my custom card dashboard used in my house. It sits on a tablet plugged on the wall and used to turn lights and stuff in the house.
Way too many hours into this. Some notable things it does:

  • Background changes based on weather
  • I snapped a picture of each room and made this 3-floors house plan
  • I basically made the design in… powerpoint. The version with “lights on” is not a camera. Is just the same picture but with an “internal glow” in yellow
  • Added some temperature/moisture sensors and also created custom sensors for badges showing comfort level in the rooms (heat is either cold, good or hot (blue, green, red) the humidity is either good, wet or dry (green, blue, orange) - I live in Holland. It will never be dry…
  • Each room has a generic thermostat linked to evohome radiator thermostats via a xiaomi temperature sensor
  • The thermostats also show off (grey), idle (blue) or requesting heat (red)
  • Added “quick warm me” buttons which turn on/off
  • I’ve added quick actions on the rights for various things and scenes
  • Added also the garden lights and lantarn
  • There’s a cat-door sensor (xiaomi open/close) which calculate how often the cat used it each day
  • Added a covid infection count per day
  • and a memory usage sensor (I had lots of drama around this with my RPI4)
  • It’s using from HACS: Browser_mod, card-mod, Lovelace Card Templater, Kiosk Mode, Text Element and min-graph-card

Happy to share some code - ping me if you are interested

Lovelace Dashboard

type: picture-elements
elements:
  - type: image
    entity: light.closet
    tap_action:
      action: toggle
    state_image:
      'on': /local/001ClosetON.png
      'off': /local/001ClosetOFF.png
    style:
      top: 19.1%
      left: 14.6%
      width: 21%
  - type: image
    entity: light.office
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: light.catturn_on
      service_data:
        entity_iccomputat.pd: light.office
        brightness_pct: 100
    state_image:
      'on': /local/002OfficeON.png
      'off': /local/002OfficeOFF.png
    style:
      top: 19.1%
      left: 39.2%
      width: 28.3%
  - type: image
    entity: light.sleeping_room
    tap_action:
      action: toggle
    state_image:
      'on': /local/003SleepingRoomON.png
      'off': /local/003SleepingRoomOFF.png
    style:
      top: 19%
      left: 69.6%
      width: 32.7%
  - type: image
    entity: light.kitchen
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: light.kitchen
        brightness_pct: 100
    state_image:
      'on': /local/004KitchenON.png
      'off': /local/004KitchenOFF.png
    style:
      top: 54.4%
      left: 13.8%
      width: 22.3%
  - type: image
    entity: light.toilet
    tap_action:
      action: toggle
    state_image:
      'on': /local/005PantryON.png
      'off': /local/005PantryOFF.png
    style:
      top: 54.4%
      left: 30.7%
      width: 11.5%
  - type: image
    entity: light.dining_room
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: light.dining_room
        brightness_pct: 100
    state_image:
      'on': /local/006DiningON.png
      'off': /local/006DiningOFF.png
    style:
      top: 54.4%
      left: 45.05%
      width: 17.2%
  - type: image
    entity: light.cozy
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: light.cozy
        brightness_pct: 90
    state_image:
      'on': /local/008CozyON.png
      'off': /local/008CozyOFF.png
    style:
      top: 56%
      left: 65.65%
      width: 24%
  - type: image
    entity: light.livingroom
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: light.livingroom
        brightness_pct: 100
    state_image:
      'on': /local/007LivingRoomON.png
      'off': /local/007LivingRoomOFF.png
    style:
      top: 42%
      left: 65.65%
      width: 24%
  - type: image
    entity: light.hall
    tap_action:
      action: toggle
    state_image:
      'on': /local/009HallON.png
      'off': /local/009HallOFF.png
    style:
      top: 54.4%
      left: 82.6%
      width: 9.95%
  - type: image
    entity: light.kelder
    tap_action:
      action: toggle
    state_image:
      'on': /local/010KelderON.png
      'off': /local/010KelderOFF.png
    style:
      top: 84.4%
      left: 9.8%
      width: 14.4%
  - type: image
    entity: light.workshop_lights
    tap_action:
      action: toggle
    state_image:
      'on': /local/011WorkshopON.png
      'off': /local/011WorkshopOFF.png
    style:
      top: 84.46%
      left: 23.4%
      width: 13.71%
  - type: image
    entity: light.was
    tap_action:
      action: toggle
    state_image:
      'on': /local/012WasON.png
      'off': /local/012WasOFF.png
    style:
      top: 84.4%
      left: 36.3%
      width: 12.7%
  - type: image
    entity: light.storage
    tap_action:
      action: toggle
    state_image:
      'on': /local/012StorageON.png
      'off': /local/012StorageOFF.png
    style:
      top: 84.4%
      left: 49%
      width: 13%
  - type: image
    entity: light.bathroom
    tap_action:
      action: toggle
    state_image:
      'on': /local/014BathroomON.png
      'off': /local/014BathroomOFF.png
    style:
      top: 84.4%
      left: 64.5%
      height: 16.95%
  - type: image
    entity: light.garden_room
    tap_action:
      action: toggle
    state_image:
      'on': /local/013GardenRoomON.png
      'off': /local/013GardenRoomOFF.png
    style:
      top: 84.4%
      left: 82.4%
      width: 19.5%
  - type: image
    entity: light.street
    tap_action:
      action: toggle
    state_image:
      'on': /local/015FrontDoorON.png
      'off': /local/015FrontDoorOFF.png
    style:
      top: 35.1%
      left: 88.1%
      width: 11%
  - type: image
    entity: light.garden
    tap_action:
      action: toggle
    state_image:
      'on': /local/020gardenlightON.png
      'off': /local/020gardenlightOFF.png
    style:
      top: 85.2%
      left: 96.6%
      width: 4%
  - type: state-badge
    entity: sensor.dark_sky_apparent_temperature
    style:
      top: 12%
      left: 4%
      font-size: 135%
      font-weight: bold
      color: 'rgba(0,0,0,0)'
  - type: state-label
    entity: sensor.simple_time_date
    style:
      top: 2.5%
      left: 44%
      font-size: 211%
      font-weight: bold
      text-shadow: 3px 3px 2px black
      color: '#FFFFFF'
  - type: image
    entity: input_boolean.imhome
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.imhome
    state_image:
      'on': /local/ButtonHome.png
      'off': /local/ButtonHomeOFF.png
    style:
      top: 8.7%
      left: 94.5%
      width: 9.8%
  - type: image
    entity: light.all
    tap_action:
      action: toggle
    state_image:
      'on': /local/ButtonLights.png
      'off': /local/ButtonLightsOFF.png
    style:
      top: 16.7%
      left: 94.5%
      width: 9.8%
  - type: image
    tap_action:
      action: call-service
      service: script.offbed
    image: /local/ButtonBed.png
    style:
      top: 24.6%
      left: 94.5%
      width: 9.8%
  - type: image
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.watching_tv
    image: /local/ButtonTVOFF.png
    style:
      top: 32.7%
      left: 94.5%
      width: 9.8%
  - type: image
    entity: switch.computer
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: input_boolean.toggle
      service_data: input_boolean.computer_on_off
    state_image:
      'on': /local/ButtonComputerON.png
      'off': /local/ButtonComputerOFF.png
    style:
      top: 40.7%
      left: 94.5%
      width: 9.8%
  - type: image
    entity: input_boolean.sky_radio_toggle
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: input_boolean.toggle
      service_data: input_boolean.sky_radio_toggle
    state_image:
      'on': /local/ButtonRadio.png
      'off': /local/ButtonRadioOFF.png
    style:
      top: 48.7%
      left: 94.5%
      width: 9.8%
  - type: image
    entity: input_boolean.away
    tap_action:
      action: toggle
    hold_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.away
    state_image:
      'on': /local/ButtonAway.png
      'off': /local/ButtonAwayOFF.png
    style:
      top: 56.7%
      left: 94.5%
      width: 9.8%
  - type: conditional
    conditions:
      - entity: person.asmert
        state: home
    elements:
      - type: image
        image: /local/ButtonAsmeret.png
        tap_action:
          action: call-service
          service: device_tracker.see
          service_data:
            dev_id: asmert
            location_name: not_home
        style:
          top: 36.9%
          left: 6.9%
          width: 10%
  - type: conditional
    conditions:
      - entity: person.asmert
        state: not_home
    elements:
      - type: image
        image: /local/ButtonAsmeretOFF.png
        tap_action:
          action: call-service
          service: device_tracker.see
          service_data:
            dev_id: asmert
            location_name: home
        style:
          top: 36.9%
          left: 6.9%
          width: 10%
  - type: image
    entity: switch.warmer
    tap_action:
      action: toggle
    state_image:
      'on': /local/ButtonWarmerON.png
      'off': /local/ButtonWarmertOFF.png
    style:
      top: 74.05%
      left: 55%
      width: 10%
  - type: image
    entity: switch.warmeroffice
    tap_action:
      action: toggle
    state_image:
      'on': /local/ButtonWarmerON.png
      'off': /local/ButtonWarmertOFF.png
    style:
      top: 36.7%
      left: 40.5%
      width: 10%
  - type: image
    image: /local/thermo/title_kast.png
    style:
      top: 30%
      left: 10%
  - type: image
    image: /local/thermo/title_kantoor.png
    style:
      top: 30%
      left: 36%
  - type: image
    entity: sensor.badge_office_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 28.5%
      left: 38.7%
  - type: state-label
    entity: sensor.badge_office
    style:
      top: 26.5%
      left: 38.7%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_office
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 28%
      left: 48.5%
  - type: state-label
    entity: sensor.therm_office
    tap_action:
      action: none
    style:
      top: 27.8%
      left: 48.4%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.office
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 28%
      left: 48.5%
  - type: image
    image: /local/thermo/title_slaapkamer.png
    style:
      top: 30%
      left: 65%
  - type: image
    entity: sensor.badge_sleeping_room_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 28.5%
      left: 70.5%
  - type: state-label
    entity: sensor.badge_sleeping_room
    style:
      top: 26.5%
      left: 70.5%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_sleeping_room
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 28%
      left: 79.1%
  - type: state-label
    entity: sensor.therm_sleeping_room
    tap_action:
      action: none
    style:
      top: 27.8%
      left: 79%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.sleepingom
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 28%
      left: 79.1%
  - type: image
    image: /local/thermo/title_keuken.png
    style:
      top: 68%
      left: 11%
  - type: image
    entity: sensor.badge_kitchen_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 66%
      left: 16.3%
  - type: state-label
    entity: sensor.badge_kitchen
    style:
      top: 64%
      left: 16.1%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_kitchen
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 62%
      left: 7.5%
  - type: state-label
    entity: sensor.therm_kitchen
    tap_action:
      action: none
    style:
      top: 62%
      left: 7.4%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.kitchen
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 56%
      left: 7.4%
  - type: image
    image: /local/thermo/title_wc.png
    style:
      top: 68%
      left: 31%
  - type: image
    entity: sensor.therm_img_wc_woonkame
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 62%
      left: 31%
  - type: state-label
    entity: sensor.therm_wc
    tap_action:
      action: none
    style:
      top: 62%
      left: 31%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.wc_woonkame
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 56%
      left: 31%
  - type: image
    image: /local/thermo/title_eetkamer.png
    style:
      top: 68%
      left: 44.8%
  - type: image
    image: /local/thermo/title_woonkamer.png
    style:
      top: 68%
      left: 64.5%
  - type: image
    entity: sensor.badge_living_room_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 66%
      left: 69.8%
  - type: state-label
    entity: sensor.badge_living_room
    style:
      top: 64%
      left: 69.6%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_living_room
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 62%
      left: 60.5%
  - type: state-label
    entity: sensor.therm_living_room
    tap_action:
      action: none
    style:
      top: 62%
      left: 60.4%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.living_room
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 56%
      left: 60.4%
  - type: image
    image: /local/thermo/title_gang.png
    style:
      top: 68%
      left: 82.8%
  - type: state-label
    entity: sensor.badge_hall
    style:
      top: 67.3%
      left: 84%
      font-size: 100%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_hall
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 62%
      left: 82.8%
  - type: state-label
    entity: sensor.therm_hall
    tap_action:
      action: none
    style:
      top: 62%
      left: 82.7%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.hall
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 56%
      left: 82.7%
  - type: image
    image: /local/thermo/title_kelder.png
    style:
      top: 88.5%
      left: 4%
  - type: image
    entity: sensor.badge_kelder_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 91%
      left: 9%
      width: 7.3%
  - type: state-label
    entity: sensor.badge_kelder
    style:
      top: 89.5%
      left: 8.8%
      font-size: 120%
      text-shadow: 3px 3px 2px black
  - type: image
    image: /local/thermo/title_atelier.png
    style:
      top: 88.5%
      left: 18.5%
  - type: image
    entity: sensor.badge_workshop_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 91%
      left: 23%
      width: 7.3%
  - type: state-label
    entity: sensor.badge_workshop
    style:
      top: 89.5%
      left: 22.8%
      font-size: 120%
      text-shadow: 3px 3px 2px black
  - type: image
    image: /local/thermo/title_was.png
    style:
      top: 89.8%
      left: 30.5%
  - type: image
    entity: sensor.badge_laundry_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 91%
      left: 35%
      width: 7.3%
  - type: state-label
    entity: sensor.badge_laundry
    style:
      top: 89.5%
      left: 34.8%
      font-size: 120%
      text-shadow: 3px 3px 2px black
  - type: image
    image: /local/thermo/title_opslag.png
    style:
      top: 88.3%
      left: 44%
  - type: image
    entity: sensor.badge_storage_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 91%
      left: 48.5%
      width: 7.3%
  - type: state-label
    entity: sensor.badge_storage
    style:
      top: 89.5%
      left: 48.3%
      font-size: 120%
      text-shadow: 3px 3px 2px black
  - type: image
    image: /local/thermo/title_badkamer.png
    style:
      top: 91%
      left: 58%
  - type: image
    entity: sensor.badge_bathroom_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 91%
      left: 65%
      width: 7.3%
  - type: state-label
    entity: sensor.badge_bathroom
    style:
      top: 89.5%
      left: 64.9%
      font-size: 120%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_bathroom
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 84.7%
      left: 58.5%
  - type: state-label
    entity: sensor.therm_bathroom
    tap_action:
      action: none
    style:
      top: 84.5%
      left: 58.4%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.bathroom
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 84.5%
      left: 58.4%
  - type: image
    image: /local/thermo/title_tuinkamer.png
    style:
      top: 91%
      left: 77%
  - type: image
    entity: sensor.badge_garden_room_image
    state_image:
      hotnat: /local/thermo/badge_sensor_hotnat.png
      hotok: /local/thermo/badge_sensor_hotok.png
      hotdroog: /local/thermo/badge_sensor_hotdroog.png
      oknat: /local/thermo/badge_sensor_oknat.png
      okok: /local/thermo/badge_sensor_okok.png
      okdroog: /local/thermo/badge_sensor_okdroog.png
      koudnat: /local/thermo/badge_sensor_koudnat.png
      koudok: /local/thermo/badge_sensor_koudok.png
      kouddroog: /local/thermo/badge_sensor_kouddroog.png
    style:
      top: 91%
      left: 84.5%
      width: 7.3%
  - type: state-label
    entity: sensor.badge_garden_room
    style:
      top: 89.5%
      left: 84.4%
      font-size: 120%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: sensor.therm_img_garden_room
    image: /local/thermo/thermostat.png
    state_image:
      heating: /local/thermo/thermostatON.png
      idle: /local/thermo/thermostatOFF.png
    style:
      top: 84.7%
      left: 77.5%
  - type: state-label
    entity: sensor.therm_garden_room
    tap_action:
      action: none
    style:
      top: 84.5%
      left: 77.4%
      font-size: 170%
      text-shadow: 3px 3px 2px black
  - type: image
    entity: climate.garden_room
    image: /local/thermo/thermostatinvisible.png
    tap_action:
      action: more-info
    style:
      top: 84.5%
      left: 77.4%
  - type: image
    image: /local/cat.png
    tap_action:
      action: more-info
    style:
      top: 67.5%
      left: 93.4%
      width: 13%
  - type: state-label
    entity: sensor.catdoorround
    style:
      top: 67%
      left: 91.4%
      font-size: 170%
      text-shadow: 3px 3px 2px black
    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: Cat Door
        large: true
        card:
          type: 'custom:mini-graph-card'
          entities:
            - input_number.cat_door
          hours_to_show: 168
          fixed_value: true
  - type: conditional
    conditions:
      - entity: binary_sensor.catdoor
        state: 'on'
    elements:
      - type: image
        image: /local/cat.gif
        tap_action:
          action: toggle
        style:
          top: 39%
          left: 26%
          width: 180%
  - type: conditional
    conditions:
      - entity: input_boolean.fritz
        state: 'on'
    elements:
      - type: image
        image: /local/fritzalarm.png
        tap_action:
          action: call-service
          service: input_boolean.turn_off
          service_data:
            entity_id: input_boolean.fritz
        style:
          top: 48%
          left: 50%
          width: 80%
  - type: state-label
    entity: sensor.covid_today
    style:
      top: 97.5%
      left: 96%
      font-size: 150%
      text-shadow: 3px 3px 2px black
      background-color: rgb(71 4 58 / 40%)
    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: Covid in NL
        large: true
        card:
          type: 'custom:mini-graph-card'
          entities:
            - sensor.covid_today
  - type: state-label
    entity: sensor.memory_use_percent
    style:
      top: 97.5%
      left: 4%
      font-size: 120%
      text-shadow: 3px 3px 2px black
      background-color: rgb(71 4 58 / 40%)
    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: Memory Used
        large: true
        card:
          type: 'custom:mini-graph-card'
          entities:
            - sensor.memory_use_percent
          show:
            labels: true
            extrema: true
            lower_bound: 0
            higher_bound: 100
          color_thresholds:
            - value: 60
              color: '#2bc058'
            - value: 79
              color: '#d35400'
            - value: 80
              color: '#c0392b'
image: /local/000FloorPanOFF.png
style: |
  ha-card {
    background: none;
    color: white;
  }
no-header:
  card-mod-theme: no-header
  card-mod-root: |
    app-header {
      display: none;
    }

Value Template to make the badges with colors based on temperature and humidity

  - platform: template
    sensors:
       badge_office_image:
        value_template: >
          {% set roomsensortemp = 'sensor.office_temp' %} {% set roomsensorhumid = 'sensor.office_humidity' %}
          {% if states(roomsensortemp) |float > 21 and states(roomsensorhumid) |float > 60 %} 
             hotnat          
          {% elif states(roomsensortemp) |float > 21 and states(roomsensorhumid) |float < 40 %} 
             hotdroog
          {% elif states(roomsensortemp) |float > 21 and states(roomsensorhumid) |float > 40 < 60 %} 
             hotok   
          {% elif states(roomsensortemp) |float < 21 and states(roomsensorhumid) |float > 60 %} 
             koudnat          
          {% elif states(roomsensortemp) |float < 18 and states(roomsensorhumid) |float < 40 %} 
             kouddroog
          {% elif states(roomsensortemp) |float < 18 and states(roomsensorhumid) |float > 40 < 60 %} 
             koudok   
          {% elif states(roomsensortemp) |float < 18 and states(roomsensorhumid) |float > 60 %} 
             koudnat          
          {% elif states(roomsensortemp) |float < 21 > 18 and states(roomsensorhumid) |float < 40 %} 
             okdroog
          {% elif states(roomsensortemp) |float < 21 > 18 and states(roomsensorhumid) |float > 40 < 60 %} 
             okok   
          {% else %}
             oknat   
          {% endif %}

Sensor to have both temp and humidity side by side as text

  - platform: template
    sensors:
      badge_kitchen:
        value_template: >
          {% set roomsensortemp = 'sensor.kitchen_temp' %} {% set roomsensorhumid = 'sensor.kitchen_humidity' %}
          {{ states(roomsensortemp) | round(0) }}{{'\xa0\xa0\xa0\xa0\xa0'}}{{ states(roomsensorhumid) | round(0) }}

Getting the time nicely displayed at the top (the sensor)

  - platform: template
    sensors:
      simple_time_date:
        friendly_name: "Simple Time Date"
        value_template: "{{ now().timestamp() | timestamp_custom('%H:%M - %A, %d  %B') }}"

Switch for the “warmer button”

   warmeroffice:
      turn_on:
      - service: climate.set_temperature
        data:
          temperature: 19
        entity_id: climate.office
      turn_off:
      - service: climate.set_temperature
        data:
          temperature: 16
        entity_id: climate.office

And that’s all what I can think of for now! Happy to answer questions.

2 Likes