Home Assistant Dashboard and Floor plan

There are a lot of different options and themes that you could use to create a Dashboard in Home Assistant. Probably I will change and test different options in future but currently I’ve based my solution on two custom components made by the user thomasloven:

Layout-card custom component improves Lovelace layout control and gives the ability to setup a 3 columns layout.

Card-mod custom component gives the ability to apply CSS styles to almost any Lovelace element so I can control size, color, font…

The final result I would obtain is the following:

Custom components installation

Easiest way to install the two custom components is from HACS Frontend, search the two component and install them:

Create your own Floor plan

Floor plan is the central part of my dashboard, and it is interactive so that I can switch on/off lights clicking on the plan position of each light.

I’ve used this web tool to create my floor plan: https://floorplanner.com

I’ve choose this one because it’s free, with some limitations, and mostly because includes many nice furniture 3D models.

Once completed the design it’s possible to export the plan in 3D or 2D view to a png file, choosing also lightning settings, to simulate Day light change from morning to night. In my case I have used 3 different lightning conditions: day, mid and night.

Using WinSCP (link) application I’ve finally uploaded the pictures to my Home Assistant under the WWW folder and images/3dfloorplan sub folders that I’ve created for this specific purpose.

Create the Dashboard

Create a new Dashboard from the Configuration menu

Type the Title, select and Icon and click CREATE

Click on the top-right corner 3 dots menu, a click Edit Dashboard

Enter Raw configuration editor mode and replace existing code with the following one.

Enter

This is my one code, with my own entities, so you have to replace them with your entities (swicthes, lights and so on)

I can suggest this very useful resource for card-mod styles: Card-mod – Add css styles to any lovelace card

title: Casa
views:
  - theme: Backend-selected
    background: >-
      center / cover no-repeat url('/local/images/custom_ui/background_1.png')
      fixed
    background-position: cover;
    background-repeat: no-repeat;
    background-size: 100% 114%;
    path: wallpanel
    icon: mdi:tablet-dashboard
    type: panel
    badges: []
    cards:
      - type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 30% 50% 20%
          grid-template-rows: 100% 100% 100%
        cards:
          - type: vertical-stack
            cards:
              - type: entities
                entities:
                  - entity: light.switch_3
                  - entity: light.switch_6
                  - entity: light.switch_4
                  - entity: light.switch_7
                  - entity: light.switch_5
                  - entity: switch.piantana
                    icon: mdi:floor-lamp-outline
                    name: Piantana
                  - entity: cover.rolling_shutter_switch_1_2
                  - entity: cover.rolling_shutter_switch_2_2
                title: Zona Giorno
                card_mod:
                  style: |
                    ha-card {
                      border-radius: 20px;
                      margin: 0px;
                      padding: 0px;
                      padding-bottom: 6px;
                      -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                      -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                      box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                      font-size:12px;
                      --switch-checked-color: yellow;
                      --switch-checked-button-color: yellow;
                      --switch-checked-track-color: yellow;
                      line-height:20px;
                      --mdc-icon-size:20px;
                      background: url('/local/images/custom_ui/background_1.png')
                    }
                    .card-header {
                      padding-top: 12px;
                      padding-left: 18px;
                      padding-bottom: 10px;
                      font-size:18px;
                      font-weight:bold;
                      line-height:32px;
                      height:32px;
                    }
                    hui-generic-entity-row$: |
                      state-badge {
                        height:24px;
                      }
                      div {
                        padding-left:4px;
                        height:24px;
                      }
              - type: entities
                card_mod:
                  style: |
                    ha-card {
                      border-radius: 20px;
                      margin: 0px;
                      margin-top: 8px;
                      padding: 0px;
                      padding-bottom: 6px;
                      -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                      -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                      box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                      font-size:12px;
                      --switch-checked-color: yellow;
                      --switch-checked-button-color: yellow;
                      --switch-checked-track-color: yellow;
                      line-height:20px;
                      --mdc-icon-size:20px;
                      background: url('/local/images/custom_ui/background_1.png')
                    }
                    .card-header {
                      padding-top: 12px;
                      padding-left: 18px;
                      padding-bottom: 10px;
                      font-size:18px;
                      font-weight:bold;
                      line-height:32px;
                      height:32px;
                    }
                    hui-generic-entity-row$: |
                      state-badge {
                        height:24px;
                      }
                      div {
                        padding-left:4px;
                        height:24px;
                      }
                entities:
                  - entity: light.switch_9
                  - entity: light.switch_2
                  - entity: light.switch_8
                  - entity: light.switch_1
                title: Zona Notte
          - type: custom:layout-break
          - type: picture-elements
            elements:
              - entity: sensor.brightness_sun
                image: /local/images/3DFloorplan/floorplan_day.png?v=2
                state_image:
                  bright: /local/images/3DFloorplan/floorplan_day.png?v=2
                  mid: /local/images/3DFloorplan/floorplan_mid.png?v=2
                  dark: /local/images/3DFloorplan/floorplan_dark.png?v=2
                  black: /local/images/3DFloorplan/floorplan_dark.png?v=2
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                tap_action:
                  action: none
                type: image
              - entity: light.switch_1
                type: state-icon
                title: Luce Bagno
                icon: mdi:lightbulb
                style:
                  top: 83%
                  left: 41%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_2
                type: state-icon
                title: Luce Studio
                icon: mdi:lightbulb
                style:
                  top: 70%
                  left: 16%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_3
                type: state-icon
                title: Luce Sala
                icon: mdi:lightbulb
                style:
                  top: 26%
                  left: 65%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_4
                type: state-icon
                title: Luce Cucina
                icon: mdi:lightbulb
                style:
                  top: 53%
                  left: 60%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_5
                type: state-icon
                title: Luce Sgabuzzino
                icon: mdi:lightbulb
                style:
                  top: 43%
                  left: 14%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_6
                type: state-icon
                title: Luce Ingresso
                icon: mdi:lightbulb
                style:
                  top: 30%
                  left: 34%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_7
                type: state-icon
                title: Luce Isola
                icon: mdi:lightbulb
                style:
                  top: 45%
                  left: 54%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_8
                type: state-icon
                title: Luce Corridoio
                icon: mdi:lightbulb
                style:
                  top: 58%
                  left: 37%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: light.switch_9
                type: state-icon
                title: Luce Camera
                icon: mdi:lightbulb
                style:
                  top: 78%
                  left: 70%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(255, 255, 255, 0.3)
                tap_action:
                  action: toggle
              - entity: cover.rolling_shutter_switch_1_2
                type: state-icon
                title: Tapparella Sala
                style:
                  top: 25%
                  left: 90%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(0, 0, 0, 0.3)
                tap_action:
                  action: toggle
              - entity: cover.rolling_shutter_switch_2_2
                type: state-icon
                title: Tapparella Cucina
                style:
                  top: 54%
                  left: 90%
                  '--paper-item-icon-color': '#000000'
                  width: 40px
                  height: 40px
                  line-height: 38px
                  border-radius: 50%
                  transform: scale(1.0,1.0)
                  text-align: center
                  background-color: rgba(0, 0, 0, 0.3)
                tap_action:
                  action: toggle
              - entity: sensor.kpad_battery_level
                type: state-badge
                title: null
                style:
                  top: 6%
                  left: 74%
                  font-size: 10px
                  color: black
                  '--label-badge-text-color': magenta
                  '--label-badge-red': green
                  '--label-badge-background-color': white
              - entity: sensor.sensore_temperatura_terrazzo_temperature
                type: state-badge
                title: null
                style:
                  top: 6%
                  left: 94%
                  font-size: 10px
                  color: black
                  '--label-badge-text-color': magenta
                  '--label-badge-red': green
                  '--label-badge-background-color': white
              - entity: sensor.0x00158d00045bd50d_temperature
                type: state-badge
                title: null
                style:
                  top: 6%
                  left: 84%
                  font-size: 10px
                  color: black
                  '--label-badge-text-color': magenta
                  '--label-badge-red': green
                  '--label-badge-background-color': white
            image: /local/images/3DFloorplan/floorplan_day.png?v=4
            card_mod:
              style: |
                ha-card {
                  border-radius: 10px;
                  -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                  -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                  box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                  --ha-card-background: white
                }
          - type: custom:layout-break
          - type: vertical-stack
            cards:
              - type: grid
                cards:
                  - type: gauge
                    min: 0
                    max: 100
                    entity: sensor.0x00158d00045bd50d_temperature
                    needle: true
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        div.name {
                          font-size:12px;
                        }
                    name: Sala
                  - type: gauge
                    min: 0
                    max: 100
                    entity: sensor.sensore_temperatura_terrazzo_temperature
                    needle: true
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        div.name {
                          font-size:12px;
                        }
                    name: Terrazzo
                  - type: gauge
                    min: 0
                    name: Consumo
                    unit: Kw
                    entity: sensor.f20t60a_kw
                    needle: true
                    severity:
                      green: 0
                      yellow: 2.5
                      red: 3
                    max: 3.3
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      service_data: {}
                      target:
                        entity_id: scene.luci_spente
                    entity: scene.luci_spente
                    show_state: false
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      service_data: {}
                      target:
                        entity_id: scene.tapparelle_basse
                    entity: scene.tapparelle_basse
                    show_state: false
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: script.tapparelle_aperte
                      service_data: {}
                      target: {}
                    entity: script.tapparelle_aperte
                    show_state: false
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: script.box_bidoni
                      service_data: {}
                      target: {}
                    entity: script.box_bidoni
                    show_state: true
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.pompa_acqua
                    show_state: true
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.citofono_apri_porta
                    icon: mdi:door-open
                    name: Portone
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: vacuum.sterminatore
                    name: Vacuum
                    card_mod:
                      style: |
                        ha-card {
                          border-radius: 10px;
                          -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
                          background: url('/local/images/custom_ui/background_1.png')
                        }
                        span {
                          font-size:12px;
                        }
                square: true
                columns: 2