Floorplan now available as a Lovelace card

OH sorry. You are right. U stucked myself and didn´t continue to read. Now it works. Thanks.

Hello Oscar,
After hours of research I just came across your project.
I am trying to document myself to try to do the same things, I manage to put 1 light but the config with several I can not.
could you show me your yaml code or tell me what’s wrong with me?
thank you in advance for your help

type: picture-elements
image: >-
/www/Floorplan/Plan%20Maison%20nuit.png
elements:

  • type: image
    entity: light.barrette_d_eclairage_a_led
    style:
    top: 50%
    left: 50%
    width: 100%
    state_image:
    ‘on’: >-
    /www/Floorplan/Balise%20led%20ipn%20on.png
    ‘off’: >-
    www/images/3d_floorplan/ipn.png
  • type: image
    entity: light.barrette_d_eclairage_a_led
    style:
    top: 50%
    left: 50%
    width: 100%
    state_image:
    ‘on’: >-
    www/images/3d_floorplan/ipn.png
    ‘off’: >-
    /www/Floorplan/Plan%20Maison%20nuit.png
  • type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.barrette_d_eclairage_a_led
    style:
    left: 60%
    top: 65%
    tap_action:
    action: toggle

Unfortunately this thread is about ha-floorplan not the picture elements card. If you decide to switch we will be able to help.

no worries, I will post in which section?

Try googling “picture elements floorplan” or perhaps start a new thread.

it’s good.?

Multiple Light Floorplan - Third party integrations / Floorplan - Home Assistant Community (home-assistant.io)

You might want to include some more details about what you are trying to do, what isn’t working and what you have tried. Also you will likely get more replies if you can post in English. Bon chance!

Edit: …and technically probably should be in the CONFIGURATION >> FRONTEND area

Friends, I ask for help.
I do it according to the instructions:
Installed ha-floorplan from the HACS repository.
Checked the availability of a new resource in the resource management section in lovelace.
I’m trying to add the code from the example, but an error is returned:

Clear log
29.01.2022, 00:03:29 ERROR URIError: /local/floorplan/examples/home/home.css?_=1643403809735: Error fetching resource at Function. (https://[ha address]/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941030:83:2717) at Generator.next () at s (https://[ha address]/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941030:83:734)
29.01.2022, 00:03:29 ERROR STYLESHEET Error loading stylesheet: /local/floorplan/examples/home/home.css
29.01.2022, 00:03:29 WARNING CONFIG Cannot find ‘pages’ nor ‘rules’ in floorplan configuration
29.01.2022, 00:03:29 INFO INIT Floorplan for Home Assistant (ha-floorplan) v1.0.30

How do I solve my problem? Thanks

Have you uploaded the image and CSS in the correct location. The error is saying the CSS can’t be loaded?

Yes. You are absolutely right. There were no such files. Please tell me where exactly they need to be copied? I am interested in the absolute path, not the relative one.

/config/www/floorplan/examples/home

It worked. Thank you very much. I’m starting to study

Hi!
I’m looking for a way to open a popup when long pressing an area.
I’m almost there but there is one problem. My popup configuration needs to know which entity should be displayed and I can’t find a way to pass the entity as a variable.
Here is the code I have so far

type: custom:floorplan-card
title: Appartement
config:
  show_side_bar: false
  show_app_header: false
  image: /local/Appart2.svg
  stylesheet: /local/floorplanner_home.css
  style:
    height: 50%
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - name: Rooms
      entities:
        - entity: light.chambre
          element: area.chambre
        - entity: light.salon
          element: area.salon
      tap_action: light.toggle
      state_action:
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
      hold_action:
        haptic: heavy
        action: fire-dom-event
        browser_mod:
          command: popup
          card:
            cards:
              - entities:
                  - entity: '{{ entity }}'
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: false
                        entity: entity.entity_id
                        color_picker: false
                        effects_list: false
                        full_width_sliders: true
                        hide_header: true
                        persist_features: true
                        show_slider_percent: true
                        smooth_color_wheel: true
                        type: custom:light-entity-card
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                    column_num: 1
                    layout: vertical
                    max_width:
                      - 100%
                    type: custom:layout-card
                type: custom:layout-card
            type: custom:vertical-stack-in-card
          deviceID:
            - '{{ deviceID }}'
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Salon
        image: /local/transparent.png
        style:
          height: 28%
          left: 61%
          top: 23%
          width: 12.7%
        tap_action:
          action: toggle
        type: image

As you can see, I tried different ways of getting the entity parameter, but none worked so far.
Anything I missed regarding this ?
thanks

Hi

Thank you for using floorplan.

We’re primary using the Discussion area on GitHub, to get a better overview of each question. I also think that we have a simular question there.

With that said. Are you trying to open a new window in your browser or a element within Home Assistant, with other Home Assistant elements?

Or maybe you’re not even talking about a popup at all. I’m a bit confused. If I misunderstod, please consider to give us a few more details.

For me it feels a bit like the xyproblem.info :blush:

Hi !
I’ve had a look at github but haven’t found what I’m looking for.
I’m trying to open a popup with browser_mod (GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity - and also an audio player) in home assistant, with home assistant elements inside, where the popup will contain controls for the lightin the pressed area. It’s basically working if I set a fix entity name in the entity fields (for example : entity: light.salon). But the thing is that action is common for multiple areas/lights so I would like to be able to write something like entity: ${entity.name} where entity.name would be replaced by the entity the “hold action” was done on.

Out of interest what do you want that is different to the more-info dialog that you can have pop up?

I want the light-entity-card that shows a color wheel and a brightness control

Ok I have the colour wheel and brightness control show in the standard dialog?

What do you mean ?

Replace your yaml completely with the following. You will see the default hold action is more-info. Then long press on your light and the normal light dialog box will appear. If you the light is on you will see you have the controls for brightness and colour.

type: custom:floorplan-card
title: Appartement
config:
  show_side_bar: false
  show_app_header: false
  image: /local/Appart2.svg
  stylesheet: /local/floorplanner_home.css
  style:
    height: 50%
  defaults:
    hover_action: hover-info
    hold_action: more-info
  rules:
    - name: Rooms
      entities:
        - entity: light.chambre
          element: area.chambre
        - entity: light.salon
          element: area.salon
      tap_action: light.toggle
      state_action:
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'