Create Lovelace interface with 3D Floorplan

Page Navigation:

Part 1

I’ll show you how to create your Lovelace interface with a great looking 3D floor plan.

We’ll explore how to use free tools to create the floor plans, how to make the light overlays and finally how to make buttons with icons which show status of devices. In the next part of this video, we’ll use all of the graphics we create to create our interface.

Part 2

This part will show you how to create your Lovelace interface with a great looking 3D floor plan. We’ll use the buttons and overlays created in the part 1 and get them working in Home Assistant.

Part 3

This part will show you how to create your Lovelace interface with a great looking 3D floor plan. We’ll build on Part 2 and make a button allowing you to select the floor, the background and all of the entities will change! We’ll also add in presence detection with some custom avatars.

Part 4

In this final part we’ll build on the previous parts and add some more elements including animated TV overlay, some more buttons on the left and a CCTV feed showing at the bottom.

Free Tools Used to Create Graphics

Roomle: https://www.roomle.com/en

Gravit: https://www.designer.io/en/

Gimp: https://www.gimp.org/

Button Graphics

You can download all of the Button Graphics here:Download

Floor Plan Graphics

Download the example floor plans here:Download

Lighting/Graphic Overlays

You can download all of the lighting overlays created here:Download

Avatars

Unless you look remarkably like me, you probably won’t want these… but you can have them anyway in case you wanted to create the interface with icons and all!Download

Configuration Used in Part 2

type: picture-elements
elements:

#Start of Lighting Overlays
  - entity: input_boolean.demo_office_main
    title: Office lighting Overlay
    tap_action:
      action: none
    hold_action:
      action: none
    image: /local/lovelace/overlay/1x1_trans.png
    state_image:
      'on': /local/lovelace/overlay/light_office_main.png
    style:
      left: 45.8%
      top: 18.5%
      width: 30.5%
      opacity: 0.5
    type: image
  - entity: input_boolean.demo_hall_main
    title: Office lighting Overlay
    tap_action:
      action: none
    hold_action:
      action: none
    image: /local/lovelace/overlay/1x1_trans.png
    state_image:
      'on': /local/lovelace/overlay/light_hall_main.png
    style:
      left: 50%
      top: 45%
      width: 22%
      opacity: 0.5
    type: image
    
#End of Lighting Overlays

#Start of Lighting Icons
    
  - entity: input_boolean.demo_office_main
    title: Office Main Light
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    image: /local/lovelace/icon/icon_light_pendant_off.png
    state_filter:
      'off': brightness(80%) saturate(0.8)
      'on': brightness(130%) saturate(1.5)
    state_image:
      'on': /local/lovelace/icon/icon_light_pendant_on.png
    style:
      left: 50%
      top: 31.5%
      width: 3%
    type: image
  - entity: input_boolean.demo_hall_main
    title: Hallway Main Light
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    image: /local/lovelace/icon/icon_light_spot_off.png
    state_filter:
      'off': brightness(80%) saturate(0.8)
      'on': brightness(130%) saturate(1.5)
    state_image:
      'on': /local/lovelace/icon/icon_light_spot_on.png
    style:
      left: 50%
      top: 48%
      width: 3%
    type: image
 
#End of Lighting Icons 
 
    
image: local\lovelace\floorplan\ground2.png

Configuration Used in Part 3

elements:
  - conditions:
      - entity: input_select.select_floorplan
        state: Ground Floor
#Start of Ground Floor Elements    
    elements:
#Background Image    
      - image: /local/lovelace/floorplan/ground2.png
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        type: image


#Start Ground Floor Lighting Overlays
      - entity: input_boolean.demo_office_main
        title: Office lighting Overlay
        tap_action:
          action: none
        hold_action:
          action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_office_main.png
        style:
          left: 45.8%
          top: 18.5%
          width: 30.5%
          opacity: 0.5
        type: image
      - entity: input_boolean.demo_hall_main
        title: Office lighting Overlay
        tap_action:
          action: none
        hold_action:
          action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_hall_main.png
        style:
          left: 50%
          top: 45%
          width: 22%
          opacity: 0.5
        type: image
    
#End Ground Floor Lighting Overlays



#Start Ground Floor Graphic Overlays
    
      - entity: input_boolean.demo_office_main
        title: Office Main Light
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        image: /local/lovelace/icon/icon_light_pendant_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_pendant_on.png
        style:
          left: 50%
          top: 31.5%
          width: 3%
        type: image
      - entity: input_boolean.demo_hall_main
        title: Hallway Main Light
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        image: /local/lovelace/icon/icon_light_spot_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_spot_on.png
        style:
          left: 50%
          top: 48%
          width: 3%
        type: image
 
#End Ground Floor Graphic Overlays



#Start Ground Floor Icon Buttons

#End Grond Floor Icon Buttons
    type: conditional
        

        

        
        
        

#First Floor Floor Elements
  - conditions:
      - entity: input_select.select_floorplan
        state: First Floor
#Background Image
    elements:
      - image: /local/lovelace/floorplan/first2.png
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        type: image
        

#Start First Floor Lighting Overlays

#End First Floor Lighting Overlays



#Start First Floor Graphic Overlays

#End First Floor Graphic Overlays



#Start First Floor Icon Buttons

#End First Floor Icon Buttons
    type: conditional
    
    
    
#Start Left Panel Row 1 - People
  - entity: person.simon_hoy
    image: /local/lovelace/avatar/avatar_simon_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_simon_home.png
      away: /local/lovelace/avatar/avatar_simon_away.png
      unknown: /local/lovelace/avatar/avatar_simon_away.png
    style:
      left: 3.7%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.wife
    image: /local/lovelace/avatar/avatar_wife_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_wife_home.png
      away: /local/lovelace/avatar/avatar_wife_away.png
      unknown: /local/lovelace/avatar/avatar_wife_away.png
    style:
      left: 9.5%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.girl1
    image: /local/lovelace/avatar/avatar_girl1_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_girl1_home.png
      away: /local/lovelace/avatar/avatar_girl1_away.png
      unknown: /local/lovelace/avatar/avatar_girl1_away.png
    style:
      left: 15.3%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.boy
    image: /local/lovelace/avatar/avatar_boy_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_boy_home.png
      unknown: /local/lovelace/avatar/avatar_boy_away.png
    style:
      left: 21.2%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.girl2
    image: /local/lovelace/avatar/avatar_girl2_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_girl2_home.png
      unknown: /local/lovelace/avatar/avatar_girl2_away.png
    style:
      left: 27.1%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
#End Left Panel Row 1 - People



#Start Left Panel Row 2 - Floors
  
  - image: /local/lovelace/floorplan/image_floor.png
    style:
      left: 3.7%
      top: 20%
      width: 5%
    tap_action:
      action: call-service
      service: input_select.select_next
      service_data:
        entity_id: input_select.select_floorplan
    type: image
  - entity: input_select.select_floorplan
    hold_action:
      action: more-info
    image: /local/lovelace/icon/icon_floor_1.png
    state_image:
      First Floor: /local/lovelace/icon/icon_floor_1.png
      Ground Floor: /local/lovelace/icon/icon_floor_g.png
    style:
      left: 9.5%
      top: 20%
      width: 5%
    tap_action:
      action: call-service
      service: input_select.select_next
      service_data:
        entity_id: input_select.select_floorplan
    type: image
  
#End Left Panel Row 2 - Floors



#Start Left Panel Row 3 - States
 
#End Left Panel Row 3 - States



#Start Cameras
  
#End Cameras

image: /local/lovelace/floorplan/ground2.png
type: picture-elements

Configuration Used in Part 4

elements:
  - conditions:
      - entity: input_select.select_floorplan
        state: Ground Floor
#Start of Ground Floor Elements    
    elements:
#Background Image    
      - image: /local/lovelace/floorplan/ground2.png
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        type: image


#Start Ground Floor Lighting Overlays
      - entity: input_boolean.demo_office_main
        title: Office lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_office_main.png
        style:
          left: 45.8%
          top: 18.5%
          width: 30.5%
          opacity: 0.5
        type: image
      - entity: input_boolean.demo_hall_main
        title: Hallway lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_hall_main.png
        style:
          left: 50%
          top: 47%
          width: 25%
        type: image
      - entity: input_boolean.demo_gym_main
        title: Gym lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_gym_main.png
        style:
          left: 67.5%
          top: 23%
          width: 12.5%
        type: image
      - entity: input_boolean.demo_toilet_main
        title: Toilet lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_toilet_main.png
        style:
          left: 81.8%
          top: 28.3%
          width: 15.5%
        type: image
      - entity: input_boolean.demo_living_main
        title: Living Room Main lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_livingroom_main.png
        style:
          left: 44.7%
          top: 75.6%
          width: 33.5%
          opacity: 0.5
        type: image
      - entity: input_boolean.demo_living_lamp
        title: Living Room Floor Lamp lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_livingroom_lamp.png
        style:
          left: 55%
          top: 86%
          width: 12%
        type: image
      - entity: input_boolean.demo_kitchen_main
        title: Kitchen Main lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_kitchen_main.png
        style:
          left: 79%
          top: 60%
          width: 37%
          opacity: 0.5
        type: image
      - entity: input_boolean.demo_dining_main
        title: Dining Main lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_dining_main.png
        style:
          left: 77%
          top: 66.3%
          width: 30.5%
          opacity: 0.5
        type: image
      - entity: input_boolean.demo_dining_main
        title: Dining Main lighting Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_dining_main.png
        style:
          left: 77%
          top: 66.3%
          width: 30.5%
          opacity: 0.5
        type: image
      - entity: input_boolean.demo_outside_front
        title: Outside Light Front Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_outside_front.png
        style:
          left: 36.2%
          top: 55.5%
          width: 7%
        type: image
      - entity: input_boolean.demo_outside_rear
        title: Outside Light Rear Overlay
        tap_action:
          action: none
        hold_action:
           action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/light_outside_rear.png
        style:
          left: 88%
          top: 109%
          width: 30%
        type: image
#End Ground Floor Lighting Overlays



#Start Ground Floor Graphic Overlays
      - entity: input_boolean.demo_tv
        title: Living TV
        tap_action:
          action: none
        hold_action:
          action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/tv_overlay2.png
        style:
          left: 47.5%
          top: 67%
          width: 8%
        type: image
      - entity: input_boolean.demo_tv
        title: Office Monitor
        tap_action:
          action: none
        hold_action:
          action: none
        image: /local/lovelace/overlay/1x1_trans.png
        state_image:
          'on': /local/lovelace/overlay/tv_overlay2.png
        style:
          left: 53%
          top: 27%
          width: 8%
          transform: rotate(17deg)
        type: image
 
#End Ground Floor Graphic Overlays



#Start Ground Floor Icon Buttons
      - entity: input_boolean.demo_office_main
        title: Office Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_pendant_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_pendant_on.png
        style:
          left: 49%
          top: 31%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_gym_main
        title: Gym Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_pendant_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_pendant_on.png
        style:
          left: 67%
          top: 31%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_toilet_main
        title: Toilet Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_pendant_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_pendant_on.png
        style:
          left: 78%
          top: 31%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_hall_main
        title: Hallway Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_spot_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_spot_on.png
        style:
          left: 49%
          top: 49%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_dining_main
        title: Dining Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_feature_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_feature_on.png
        style:
          left: 72%
          top: 58%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_living_main
        title: Living Room Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_pendant_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_pendant_on.png
        style:
          left: 49%
          top: 75%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_living_lamp
        title: Living Room Lamp
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_floorlamp_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_floorlamp_on.png
        style:
          left: 55%
          top: 88%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_kitchen_main
        title: Kitchen Main Light
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_spot_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_spot_on.png
        style:
          left: 72%
          top: 75%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_outside_front
        title: Oustide Front Lights
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_outside_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_outside_on.png
        style:
          left: 35%
          top: 40%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_outside_rear
        title: Oustide Rear Lights
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_light_outside_off.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_light_outside_on.png
        style:
          left: 88%
          top: 40%
          width: 3%
        tap_action:
          action: toggle
        type: image
      - entity: input_boolean.demo_front_door
        title: Front Door
        hold_action:
          action: more-info
        image: /local/lovelace/icon/icon_door_closed.png
        state_filter:
          'off': brightness(80%) saturate(0.8)
          'on': brightness(130%) saturate(1.5)
        state_image:
          'on': /local/lovelace/icon/icon_door_open.png
        style:
          left: 35%
          top: 50%
          width: 3%
        tap_action:
          action: more-info
        type: image
#End Ground Floor Icon Buttons
    type: conditional
        

        

        
        
        

#First Floor Floor Elements
  - conditions:
      - entity: input_select.select_floorplan
        state: First Floor
#Background Image
    elements:
      - image: /local/lovelace/floorplan/first2.png
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        type: image
        

#Start First Floor Lighting Overlays

#End First Floor Lighting Overlays



#Start First Floor Graphic Overlays

#End First Floor Graphic Overlays



#Start First Floor Icon Buttons

#End First Floor Icon Buttons
    type: conditional
    
    
    
#Start Left Panel Row 1 - People
  - entity: person.simon_hoy
    image: /local/lovelace/avatar/avatar_simon_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_simon_home.png
      away: /local/lovelace/avatar/avatar_simon_away.png
      unknown: /local/lovelace/avatar/avatar_simon_away.png
    style:
      left: 3.7%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.wife
    image: /local/lovelace/avatar/avatar_wife_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_wife_home.png
      away: /local/lovelace/avatar/avatar_wife_away.png
      unknown: /local/lovelace/avatar/avatar_wife_away.png
    style:
      left: 9.5%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.girl1
    image: /local/lovelace/avatar/avatar_girl1_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_girl1_home.png
      away: /local/lovelace/avatar/avatar_girl1_away.png
      unknown: /local/lovelace/avatar/avatar_girl1_away.png
    style:
      left: 15.3%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.boy
    image: /local/lovelace/avatar/avatar_boy_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_boy_home.png
      unknown: /local/lovelace/avatar/avatar_boy_away.png
    style:
      left: 21.2%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
  - entity: person.girl2
    image: /local/lovelace/avatar/avatar_girl2_away.png
    state_image:
      home: /local/lovelace/avatar/avatar_girl2_home.png
      unknown: /local/lovelace/avatar/avatar_girl2_away.png
    style:
      left: 27.1%
      top: 7.8%
      width: 5%
    tap_action:
      action: more-info
    type: image
#End Left Panel Row 1 - People



#Start Left Panel Row 2 - Floors
  
  - image: /local/lovelace/floorplan/image_floor.png
    style:
      left: 3.7%
      top: 20%
      width: 5%
    tap_action:
      action: call-service
      service: input_select.select_next
      service_data:
        entity_id: input_select.select_floorplan
    type: image
  - entity: input_select.select_floorplan
    hold_action:
      action: more-info
    image: /local/lovelace/icon/icon_floor_1.png
    state_image:
      First Floor: /local/lovelace/icon/icon_floor_1.png
      Ground Floor: /local/lovelace/icon/icon_floor_g.png
    style:
      left: 9.5%
      top: 20%
      width: 5%
    tap_action:
      action: call-service
      service: input_select.select_next
      service_data:
        entity_id: input_select.select_floorplan
    type: image
  
#End Left Panel Row 2 - Floors



#Start Left Panel Row 3 - States
  - entity: input_boolean.automation_state
    image: /local/lovelace/icon/icon_automation_off.png
    state_image:
      'on': /local/lovelace/icon/icon_automation_on.png
    style:
      left: 3.7%
      top: 32.2%
      width: 5%
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    type: image
  - entity: input_boolean.alarm_state
    image: /local/lovelace/icon/icon_alarm_off.png
    state_image:
      'on': /local/lovelace/icon/icon_alarm_on.png
    style:
      left: 9.5%
      top: 32.2%
      width: 5%
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    type: image
  - entity: input_boolean.home_occupied
    image: /local/lovelace/icon/icon_occupied_off.png
    state_image:
      'on': /local/lovelace/icon/icon_occupied_on.png
    style:
      left: 15.3%
      top: 32.2%
      width: 5%
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    type: image
  - entity: input_boolean.house_guests
    image: /local/lovelace/icon/icon_guests_off.png
    state_image:
      'on': /local/lovelace/icon/icon_guests_on.png
    style:
      left: 21.2%
      top: 32.2%
      width: 5%
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    type: image
  - entity: input_boolean.heating
    image: /local/lovelace/icon/icon_heat_rad_off.png
    state_image:
      'on': /local/lovelace/icon/icon_heat_rad_on.png
    style:
      left: 27.1%
      top: 32.2%
      width: 5%
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    type: image



#End Left Panel Row 3 - States



#Start Cameras
  - type: image
    entity: camera.cam03
    camera_image: camera.cam03
    camera_view: live
    style:
      top: 80%
      left: 16%
      width: 28%
      border-radius: 10%
#End Cameras

image: /local/lovelace/floorplan/ground2.png
type: picture-elements

Music: https://www.bensound.com

Video: Free Stock Video Footage by Videezy!