Floorplan now available as a Lovelace card

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"}'

Ok thanks ! that fits my need on that part !
It also means that somehow, the popup knows the light it works on. Is it something that can be done manually too (like I was trying to do) ? I see some use cases where that can be interesting to be able to reference the entity or element in the action (kind of like entity.state in the service_data field)

The pop up “knows” because that is a native service of HA. Floor plan allows access to the HA services and provides some extras related to the display. So you will need to find out if you can do what you are after natively in floorplan… @exetico was right this was an XY problem :slight_smile:

1 Like

Which is what I was asking actually : how to provide the entity to the hold_action

I googled this “hassio more info different entity” and a bunch of results appeared so you will need to search there for a start as this isn’t a ha-floorplan thing…

I don’t know if I’m just way out of my depth here or what but I can’t even get past step 2 where it says to Create a new view. Create the view where/how? I did verify that the floorplan.js shows up under resources, but I’m lost on how to proceed even from here. Is there a guide that spells things out a little bit more in depth?

Its just a normal view in your dashboard. Because it is a custom card you can’t do this in the UI editor. Either edit you ui-lovelace.yaml file (if you use YAML mode) or do it through EDIT DASHBOARD>>RAW CONFIGURATION EDITOR

Your yaml would start something like:

title: Home Assistant
views:
  - panel: true
    cards:
      - full_height: true
        config:
#          log_level: info
          image:
            sizes:
              - location: /local/floorplan/floorplan_3d-light.svg
                cache: false
          stylesheet:
            location: /local/floorplan/floorplan.css
            cache: true

Ah, makes sense, thank you.

Did anyone ever get back to you on this?

Do you face a simular problem? Fell free to ask here, or at out Discussion area on Github. :ok_hand:

1 Like