Kitchen Dashboard

type: picture-elements
image: /local/KitchenDashboard.png
elements:
  - type: state-icon
    entity: sensor.givtcp_sa2221g173_soc
    name: BATTERY CHARGE ICON
    style:
      top: 7%
      left: 48%
      color: green
      '--paper-item-icon-color': Green
      transform: scale(3,3)
  - type: state-label
    entity: sensor.givtcp_sa2221g173_soc
    name: SOLAR BATTERY CHARGE TEXT
    prefix: 'Solar '
    style:
      top: 18%
      left: 50.5%
      color: black
      font-size: 15px
      font-weight: bold
  - type: state-badge
    entity: sensor.kitchen_temperature_sensor
    title: null
    name: KITCHEN TEMPERATURE SENSOR
    style:
      top: 8%
      left: 57%
      color: rgba(0,0,0,0)
      transform: scale(1.5,1.5)
  - type: custom:digital-clock
    dateFormat:
      weekday: long
      day: 2-digit
      month: short
    style:
      top: 11%
      left: 83%
      font-size: 18px
      border: solid 5px
      border-color: black
      border-radius: 25px
      width: 30%
      overflow: hidden
  - type: state-label
    entity: sensor.tasmota_energy_power
    name: TUMBLE DRYER ENERGY USAGE
    style:
      top: 44.5%
      left: 12%
      color: red
      font-size: 20px
  - type: image
    entity: switch.tasmota
    name: TUMBLE DRYER IMAGE TOGGLE
    tap_action:
      action: toggle
    image: /local/TD-OFF.png
    state_image:
      'on': /local/Dryer-On.png
    style:
      top: 68%
      left: 12.3%
      width: 17%
      border-radius: 5px
  - type: custom:stack-in-card
    cards:
      - type: entities
        entities:
          - entity: timer.dryer
            name: ' '
            icon: mdi:av-timer
    state_color: true
    show_header_toggle: false
    style:
      '--ha-card-background': rgb(0,0,0,0)
      '--primary-text-color': white
      '--paper-item-icon-color': rgb(0,0,0,0)
      '--ha-card-border-width': 0px
      font-size: 20px
      top: 95%
      left: 8.5%
  - type: state-label
    entity: sensor.tasmota_energy_power_4
    name: WASHING MACHINE ENERGY USAGE
    style:
      top: 44.5%
      left: 31%
      color: red
      font-size: 20px
  - type: image
    entity: switch.tasmota_4
    name: WASHING MACHING IMAGE TOGGLE
    tap_action:
      action: toggle
    image: /local/WM-OFF.png
    state_image:
      'on': /local/WM-on.jpg
    style:
      top: 68%
      left: 31%
      width: 17%
      border-radius: 5px
  - type: custom:stack-in-card
    cards:
      - type: entities
        entities:
          - entity: timer.washingmachine
            name: ' '
            icon: mdi:av-timer
    style:
      '--ha-card-background': rgb(0,0,0,0)
      '--primary-text-color': white
      '--paper-item-icon-color': rgb(0,0,0,0)
      '--ha-card-border-width': 0px
      font-size: 20px
      top: 95%
      left: 28%
  - type: state-label
    entity: sensor.tasmota08_energy_power_2
    name: DISH WASHER ENERGY USAGE
    style:
      top: 44.5%
      left: 50%
      color: red
      font-size: 20px
  - type: image
    name: DISH WASHER IMAGE TOGGLE
    entity: switch.tasmota08_2
    tap_action:
      action: toggle
    image: /local/DW-OFF.png
    state_image:
      'on': /local/DW-on.png
    style:
      top: 68%
      left: 50%
      width: 17%
      border-radius: 5px
  - type: custom:stack-in-card
    cards:
      - type: entities
        entities:
          - entity: timer.dishwasher
            name: ' '
            show_icon: false
    style:
      '--ha-card-background': rgb(0,0,0,0)
      '--primary-text-color': white
      '--paper-item-icon-color': rgb(0,0,0,0)
      '--ha-card-border-width': 0px
      font-size: 20px
      top: 95%
      left: 46.5%
  - type: custom:button-card
    entity: light.poppy_light
    title: POPPY LIGHT TOGGLE
    tap_action:
      action: toggle
    icon: >-
      [[[ if (entity.state == "off") return "mdi:lightbulb-off"; else return
      "mdi:lightbulb-on" ]]]
    name: ' '
    style:
      top: 35%
      left: 62%
      transform: scale(1.5,1.5)
      '--paper-item-icon-color': white
      '--ha-card-background': rgb(0,0,0,0)
      '--ha-card-border-width': 0px
  - type: custom:button-card
    entity: light.cooker_light
    title: COOKER LIGHT TOGGLE
    tap_action:
      action: toggle
    icon: >-
      [[[ if (entity.state == "off") return "mdi:lightbulb-off"; else return
      "mdi:lightbulb-on" ]]]
    name: ' '
    style:
      top: 35%
      left: 74.5%
      transform: scale(1.5,1.5)
      '--paper-item-icon-color': white
      '--ha-card-background': rgb(0,0,0,0)
      '--ha-card-border-width': 0px
  - type: custom:button-card
    entity: light.sink_light
    title: SINK LIGHT TOGGLE
    tap_action:
      action: toggle
    icon: >-
      [[[ if (entity.state == "off") return "mdi:lightbulb-off"; else return
      "mdi:lightbulb-on" ]]]
    name: ' '
    style:
      top: 35%
      left: 87.3%
      transform: scale(1.5,1.5)
      '--paper-item-icon-color': white
      '--ha-card-background': rgb(0,0,0,0)
      '--ha-card-border-width': 0px
  - type: image
    image: /local/Energy-Dashboard-Button.png
    tap_action:
      action: navigate
      navigation_path: /lovelace/givenergy/?kiosk
    style:
      top: 87%
      left: 72%
      width: 16%
      border-radius: 10px
  - type: image
    image: /local/Temperature-Dashboard-Button.png
    tap_action:
      action: navigate
      navigation_path: /lovelace/home-temps/?kiosk
    style:
      top: 87%
      left: 90%
      width: 16%