Floorplan - lights can't toggle on/ off

Configuration Frontend
1

Hi everyone,

I’ve been using Home Assistant for a while now, mainly for automations. Recently, I wanted to take the next step by creating a nice frontend with a floorplan. Since I haven’t automated all the lights yet, I created some dummy lights in Home Assistant. The idea is that once I have the actual lights, I only need to change the entity, and it should work immediately.

However, I have encountered a problem: One dummy light (light.dummy_light_hal) can be turned ‘on’ and 'off’ via the dashboard. When I click on it, I can see the floorplan change accordingly. But the other dummy lights do nothing when I click on them.

I can’t figure out why this is happening and would like all the dummy lights to work. Could you help me solve this problem?

Here is a part of my configuration.yaml code:

light:
  - platform: template
    lights:
      dummy_light_eetkamer:
        friendly_name: "Dummy Light Eetkamer"
        turn_on:
          action: light.turn_on
          entity_id: light.dummy_light_eetkamer
        turn_off:
          action: light.turn_off
          entity_id: light.dummy_light_eetkamer
        set_level:
          action: light.turn_on
          data_template:
            entity_id: light.dummy_light_eetkamer
            brightness: "{{ brightness }}"
      dummy_light_keuken:
        friendly_name: "Dummy Light Keuken"
        turn_on:
          action: light.turn_on
          entity_id: light.dummy_light_keuken
        turn_off:
          action: light.turn_off
          entity_id: light.dummy_light_keuken
        set_level:
          action: light.turn_on
          data_template:
            entity_id: light.dummy_light_keuken
            brightness: "{{ brightness }}"
      dummy_light_hal:
        friendly_name: "Dummy Light Hal"
        turn_on:
          action: light.turn_on
          entity_id: light.dummy_light_hal
        turn_off:
          action: light.turn_off
          entity_id: light.dummy_light_hal
        set_level:
          action: light.turn_on
          data_template:
            entity_id: light.dummy_light_hal
            brightness: "{{ brightness }}"      
      dummy_light_wc:
        friendly_name: "Dummy Light Toilet"
        turn_on:
          action: light.turn_on
          entity_id: light.dummy_light_wc
        turn_off:
          action: light.turn_off
          entity_id: light.dummy_light_wc
        set_level:
          action: light.turn_on
          data_template:
            entity_id: light.dummy_light_wc
            brightness: "{{ brightness }}"

Here is a part of my ui-lovelace.yaml code:

title: Home
views:
  - title: Floorplan
    path: default_view
    panel: true # Zorgt voor een groot beeld
    cards:

    - type: picture-elements
      image: local/pictures_floorplan/home_transparent.png
      elements:
        # Tijd van de dag instellen en hier het plaatje op aanpassen
        - entity: sensor.time_of_day
          type: image
          state_image:
            Afternoon: local/pictures_floorplan/home_afternoon_lights_off.png
            Morning: local/pictures_floorplan/home_morning_lights_off.png
            Evening: local/pictures_floorplan/home_evening_lights_off.png
            Night: local/pictures_floorplan/home_night_lights_off.png
          style:
            top: 50%
            left: 70%
            width: 100%
        
        
        
        # Lampen
        # Licht woonkamer toevoegen en plaatje (afhankelijk van de dag) weergeven
        - type: image
          entity: light.woonkamer_2
          tap_action:
            action: none
          hold_action:
            action: none
          style:
            top: 50%
            left: 70%
            width: 100%
          state_image:
            'on': local/pictures_floorplan/home_evening_livingroom_lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
          state_filter:
            'on': local/home_evening_livingroom lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
        - type: state-icon
          entity: light.woonkamer_2
          tap_action:
            action: toggle
          style:
            left: 45%
            top: 50%
            opacity: 100%
            scale: 1.3
            '--mdc-icon-size': 15px
            '--paper-item-icon-color': yellow
            '--paper-item-icon-active-color': orange
        # Licht eetkamer toevoegen en plaatje (afhankelijk van de dag) weergeven    
        # aangezien de eetkamer nog niet is geautomatiseerd, is er een dummy licht gemaakt.
        - type: image
          entity: light.dummy_light_eetkamer
          tap_action:
            action: none
          hold_action:
            action: none
          style:
            top: 50%
            left: 70%
            width: 100%
          state_image:
            'on': local/pictures_floorplan/home_evening_diningroom_lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
        - type: state-icon
          entity: light.dummy_light_eetkamer
          tap_action:
            action: toggle
          style:
            left: 58%
            top: 25%
            opacity: 100%
            scale: 1.3
            '--mdc-icon-size': 15px
            '--paper-item-icon-color': yellow
            '--paper-item-icon-active-color': orange
        # Licht keuken toevoegen en plaatje (afhankelijk van de dag) weergeven    
        # aangezien de keuken nog niet is geautomatiseerd, is er een dummy licht gemaakt.
        - type: image
          entity: light.dummy_light_keuken
          tap_action:
            action: none
          hold_action:
            action: none
          style:
            top: 50%
            left: 70%
            width: 100%
          state_image:
            'on': local/pictures_floorplan/home_evening_kitchen_lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
        - type: state-icon
          entity: light.dummy_light_keuken
          tap_action:
            action: toggle
          style:
            left: 73%
            top: 40%
            opacity: 100%
            scale: 1.3
            '--mdc-icon-size': 15px
            '--paper-item-icon-color': yellow
            '--paper-item-icon-active-color': orange
        # Licht oprit (gegroepeerd) toevoegen en plaatje (afhankelijk van de dag) weergeven    
        - type: image
          entity: light.oprit_2
          tap_action:
            action: none
          hold_action:
            action: none
          style:
            top: 50%
            left: 70%
            width: 100%
          state_image:
            'on': local/pictures_floorplan/home_evening_driveway_lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
        - type: state-icon
          entity: light.oprit_2
          tap_action:
            action: toggle
          style:
            left: 60%
            top: 80%
            opacity: 100%
            scale: 1.3
            '--mdc-icon-size': 15px
            '--paper-item-icon-color': yellow
            '--paper-item-icon-active-color': orange
        # Licht WC toevoegen en plaatje (afhankelijk van de dag) weergeven    
        # aangezien de WC nog niet is geautomatiseerd, is er een dummy licht gemaakt.
        - type: image
          entity: light.dummy_light_wc
          tap_action:
            action: none
          hold_action:
            action: none
          style:
            top: 50%
            left: 70%
            width: 100%
          state_image:
            'on': local/pictures_floorplan/home_evening_toilet_lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
        - type: state-icon
          entity: light.dummy_light_wc
          tap_action:
            action: toggle
          style:
            left: 67%
            top: 57%
            opacity: 100%
            scale: 1.3
            '--mdc-icon-size': 15px
            '--paper-item-icon-color': yellow
            '--paper-item-icon-active-color': orange
        # Licht hal toevoegen en plaatje (afhankelijk van de dag) weergeven    
        # aangezien de hal nog niet is geautomatiseerd, is er een dummy licht gemaakt.
        - type: image
          entity: light.dummy_light_hal
          tap_action:
            action: none
          hold_action:
            action: none
          style:
            top: 50%
            left: 70%
            width: 100%
          state_image:
            'on': local/pictures_floorplan/home_evening_hallway_lights_on.png
            'off': local/pictures_floorplan/home_transparent.png
        - type: state-icon
          entity: light.dummy_light_hal
          tap_action:
            action: toggle
          style:
            left: 60%
            top: 55%
            opacity: 100%
            scale: 1.3
            '--mdc-icon-size': 15px
            '--paper-item-icon-color': yellow
            '--paper-item-icon-active-color': orange
2

Good idea, but I’m not clear how you created the dummy lights.

3

Thanks for your reply.
See my code snippet from my configuration.yaml on how I added the dummy lights.
The only light that works is my hallway light (light.dummy_light_hal). I can’t seem to get the other dummy lights working in mijn floorplan.

4

I do not think this is a proper way. Strange that you are saying that one light works.
It seems like a baron Munchausen pulling himself from a water:
image

I absolutely like the idea to use dummy entities - use the same way.
But suggest you to use a dedicated integration for creating dummy lights.
A possible alternative - a stock Demo integration - but it creates plenty of unneeded entities.

5

I’ve implemented the suggested hass-virtual. Unfortunately this didn’t solve my problem.
The demo integration is a bit too much for me.
Any other suggestions?

6

If you need just an entity with with an icon which is:

  • yellow when ON
  • not yellow when OFF

then just use an input_boolean with a bulb icon.