Show the temps of all the rooms in the house in one clear display

Share your Projects! Dashboards & Frontend
1

I use a custom mini graph per room card to show temp and humidity but was looking for a visual but clear way to display the temps of 5-8 rooms in one panel on my front page of my UI

Was wondering what people used? Any examples?

2

Take a look at my post here Lovelace entities - reduce space between elements

1 Like
3

Do you have the yaml for the picture elements card you used?

Does it have card modder as part of it or just a standard picture element card?

4

Standard picture element card with a tedious amount of state-label & state-icon
Here’s a start.

- type: picture-elements
    image: /local/icons/transparent.png
    show_header_toggle: false
    style: |
      ha-card { height: 312px; }
    elements:
      - type: state-label
        entity: input_text.inside
        style:
          top: 21%
          left: 12%
          font-size: 140%
          font-weight: bold

      - type: conditional
        conditions:
          - entity: sensor.room_location
            state_not: 'br1'
        elements:
          - type: state-label
            entity: input_text.br1
            style:
              top: 40%
              left: '59px'
              font-size: 100%
              font-weight: 400

      - type: state-label
        entity: sensor.acurite_tower_temp_br1
        style:
          top: 40%
          left: 35%
          font-size: 100%

      - type: state-label
        entity: sensor.acurite_tower_humidity_br1
        style:
          top: 40%
          left: 50%
          font-size: 100%

      - type: state-icon
        entity: sensor.acurite_tower_icon_br1
        style:
          top: 39%
          left: 65%

      - type: state-icon
        entity: switch.fan_br1
        tap_action:
          action: toggle
        style:
          top: 39%