Navigating within a Dashboard

[tinkerberlin]

Hi there,
along the lines of #181 .

I want to set up a rather simple "floorplan", where the "floorplan" is just the outside view of my house. I've overlayed that image (in the svg file) with transparent rectangles that align with the groundfloor and the 1st floor of my house. From here, all I want to do, is to navigate to a secondary dashboard view (I do not want to leave Home Assistant). That secondary view would then contain information about the different rooms and entities on the respective floor.

My code is:

type: custom:floorplan-card
full_height: true
config:
  image: /local/floorplan/examples/home/haus1.svg
  stylesheet: /local/floorplan/examples/home/home.css
  log_level: debug
  console_log_level: debug
  defaults:
    hover_action: hover-info
    tap_action: navigate
  rules:
    - entity: light.kronleuchter
      element: floor.eg
      tap_action: navigation
      navigation_path: /dashboard-floorplan/test-eg

A couple of notes:

1. "light.kronleuchter" is a light in my house. It's here just as a dummy, so that I have a HA entity included. However, I would mention that if I change the tap_action to "toggle" this does toggle the light. So in principle the code should work.
2. As you can see (I hope) I'm trying to click on the "floor.eg" element within the SVG file and have that then navigate me to the dashboard "/dashboard-floorplan/test-eg". The dashboard in question (i.e. the one with the "floorplan") is located at "/dashboard-floorplan/0". So this is within a single "dashboard"...
3. the log does not spit out any errors; I would have it disabled, but kept it enabled, given that things aren't quite working yet. All it says is

... DEBUG STATE light.kronleuchter: off (initial load)
... INFO INIT Floorplan for Home Assistant (ha-floorplan) v.1.0.35

4. The transparent box (svg-element: "floor.eg") does highlight itself when I move the mouse over it. So it's being recognized as a "clickable" entity/element. Clicking it, just does not do anything (that I can see).

Perhaps I misunderstood something that was being said in #181, but I was under the impression that all HA native actions should work, no? If this does not work (yet), I think it would be a great addition! I know that I could create a secondary "floorplan" for the two floors and have it all done within the floorplan card, but then I'm missing out on some of the other integrations/layouts that I'd like to utilize. So this, for me, would really be ideal.

Thanks for your help!

[tinkerberlin]

OK - sorry, just figured it out.
got to write it like this:

>   rules:
>     - entity: light.kronleuchter
>       tap_action:
>         action: navigate
>         navigation_path: /dashboard-floorplan/test-eg
>       element: floor.eg

[jolbi]

Hi,
First of all, thank you for this great project. I use my floorplan daily and it works perfectly!
I want to add a navigation service to the temperature element in this rule:

    - name: temperature
      entities:
        - entity: sensor.temperature_sensor_03_temperature
          element: temp_livingroom
        - entity: sensor.temperature_sensor_04_temperature
          element: temp_tim
        - entity: sensor.lumi_lumi_weather_11d61204_temperature
          element: temp_terrace
        - entity: sensor.temperature_sensor_06_temperature
          element: temp_garage
      state_action:
        action: call-service
        service: floorplan.text_set
        service_data:
          text: ${entity.state}°C

I want to add a tap action for each temperature element to open a specific view (a pop-up card from bubble cards).
I tried to include the navigate service for each entity-element pair, but that doesn't work.

    - name: temperature
     entities:
       - entity: sensor.temperature_sensor_03_temperature
         element: temp_livingroom
         tap_action:
         action: navigate
         navigation_path: /dashboard-mobile/tloris#living-room               

I assume this is because rules can only be applied to all entities in a 'group', but not to each element separately. Is this correct?
If I use the tap action at the same level as the state action, the navigate service works, but then I can only navigate to one view for all temperature elements.
Then I tried to use the element.id variable to 'dynamically' set the navigation path like this:

       tap_action:
        action: navigate
        navigation_path: '/dashboard-mobile/tloris#${element.id}'         

But for some reason, this doesn't work. I tried to pass the element.id variable to the floorplan.text_set service and it works. But it does not work with the navigate service. It navigates to the literal string: /dashboard-mobile/tloris#${element.id}

What am I missing here? Why is the element.id not passed to the navigation_path?
I tried with and without quotes and removing # sign but nothing changed. Should I use a function to parse the path?

Any help is much appreciated!

[OzGav]

Tobias means you can add a line of JavaScript that will output the value of the string you are trying to construct so you can see if it is working. Here is a related example from my test dashboard

            - entity: input_number.temp_graph_test
              element: needle2
              name: Rotate Needle2
              state_action:
                service: floorplan.style_set
                service_data: 
                  style: |
                    >
                    var rotation = ((Math.round(entity.state) - 30) * 2.21);
                    if (rotation > 110)
                      rotation = rotation * 1.03;
                    else if (rotation < 0)
                      rotation = rotation * 0.92;
                    console.log('fan', hass.states["fan.alfresco"].attributes.friendly_name);
                    return `
                      transform-box: fill-box;
                      transform-origin: center;
                      transform: rotate(${rotation}deg);
                    `;

So inside console log the first value fanis just a label. The next value you will have your entity.id so you can see the value of it.

Edit: good point though. If you can see the url when the window changes and it is not resolving the value of entity.id then that is your problem. See below for two possible solutions

[jolbi]

I will try this when I have a bit more time, to figure this out. I'll let you know if I find some more information, about what could cause the problem. Just to clarify - this should work the way I imagine right? Could this be a bug?

For now, I created separate rules for each entity and it works.
In the future, I am planning to do the same for areas/rooms and it would be great if the rules could be grouped for this service also. I like the idea of pop-ups as a richer, custom alternative to more-info dialog, and this would simplify the configuration a lot.

Thank you both for the input!

[exetico]

@jolbi : No, I don't think this is a bug. As mentioned, if there's # in your URL, that could cause the problem.
https://developer.mozilla.org/en-US/docs/Web/API/URL/hash

Let us know the console output, as @OzGav kindly provided a good example for 😄 .

Update:
I just saw the a pop-up card from bubble cards) detail in your question. I guess we're deeply in the "Can ha-floorplan support bubble cards" talk, or maybe even "Does bubble card support triggers, if the user navigates to the page, with a virtual hash change?".

Just to break it down:

1. You are on view A. Here's your floorplan
2. You press a sensor, and expect ha-floorplan to send the user to view B AND trigger the bubble-card to open?

Or, are you trying to trigger the bubble card in the same view? I fell like this is a bit of a XY-problem, that's why I'm trying to get what you're actually trying to do, and nothing more. Also, personally, I'd recommend you to create a separate discussion with both "Navigation" and "bubble card" in the title, and link to the first posts in the discussion 😄 . I'm also asking, as I guess it could be a good topic for a video ("How to combine ha-floorplan and bubble card).

[exetico]

@jolbi What are you navigating from, and to? Are you navigating between different views?

If I have /default-overview/0 opened, and navigate to /default-overview/alarm#test-bubble-card-id-2, my popup bubble card does not open, as I'm entering the new view, without the popup cards (and similar) has been initiated, yet.

If I have already opened /default-overview/alarm, and jumps back to /default-overview/0, it works just fine with a rule like:

        tap_action:
          action: navigate
          navigation_path: '#test-bubble-card-id-2'

But you're not getting the smooth "slide up" effect, is if you've pressed a button.

However I just revisited this, and you're right about the reference to entity.id. We're not evaluating the navigation_path. In other words, no matter what you're trying to do, we're just returning the string you provided, as a string. Nothing is broken down into pieces. I'm sorry that I didn't catch that, in the first part of the discussion. I'm just so used to submissions, where the XY-problem are totally real, and a fix reported as a bug, is actually just a implementation error, or similar 😄 .

I've implemented the fix for that, and tested it with:

tap_action:
  action: navigate
  navigation_path: |
    > const target = "/default-overview/alarm#" + element.id;
    console.log(element.id, "target", target);
    return target;

And also the simple way of doing it:

tap_action:
  action: navigate
  navigation_path: '/default-overview/alarm#${element.id}'

I'll push it through the release cycle now. Please give me half an hour.

[exetico]

Release: https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.41

@OzGav @jolbi

[OzGav]

I do this

              tap_action:
                action: call-service
                service: |
                    > 
                      switch (entity.entity_id) {
                        case 'device_tracker.technicolor_technologies_belgium_nv_3e_51_c8': { window.open("http://192.168.1.254"); }
                          break;
                        case 'device_tracker.netgear_ae_74_91': { window.open("http://192.168.1.251"); }
                          break; 

You should be able to change it to navigate though….

edit: worst case scenario you can just create a rule for each entity instead of having them all grouped together

[jolbi]

Do you mean that I do the if/case statement for every entity/element and hardcode the navigation path, or do you mean I should try some javascript statement and see if this way the element.id (or any other value) behaves correctly?

[OzGav]

Yes it is one rule with multiple entities but the switch has each entity with a hard coded path

[exetico]

@OzGav : You're not using the url´ action here, as the url_path` are not evaluated, right?

[OzGav]

There was some problem when I did this ages ago and this was the solution. I think for a time I needed a null service as well or something like that...memory is fuzzy...

[exetico]

@OzGav 1.0.43 now evaluate url_path too.

I understand the null service-need. I guess that's solved with the implementation of the execute service back with https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.34.

[exetico]

Fulfilled with release: https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.41