Switching floors using honeycomb

[tsx-5]

Hey Gang,

Been putting in a bit of effort on my floorplan, while on travel for business - and have come across a bit of an issue I was hoping I could get some input on. I have a 3 floor house; which I've modeled in Sweethome 3D, created a single SVG for each floor, and created overlays for each "area" of each floor - I would like to use honeycomb to switch between the 3 floors (I like it's look and it's better use of space then 3 buttons). I did try 3 buttons and was able to switch between the floors, however, with honeycomb using a very similar setup in my yaml file - it crashes with the following error:

logging-mixin.ts:77 Failure writing unhandled promise rejection to system log: Error: Cannot parse given Error object
at Object.parse (error-stack-parser.js:35:23)
at stacktrace.js:106:62
at new Promise ()
at fromError (stacktrace.js:105:20)
at t (log-message.ts:37:31)
at logging-mixin.ts:66:33
(anonymous) @ logging-mixin.ts:77

0:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

I believe the first half is just telling me it couldn't log the error (sad face), but I'm not sure what the 2nd part is telling me.

Here is the yaml code (please ignore the icons selected, just getting things to work :-) ). Please also note the "reload" option works just fine:

type: custom:floorplan-card
style: |
  ha-card {
      margin: 0 auto;
      background: none;
      box-shadow: none;
  }
full_height: true
config:
  console_log_level: debug
  defaults:
    hover_action: hover-info
  image: /local/floorplan/home_nasa/HomePlan-opt.svg
  stylesheet: /local/floorplan/home_nasa/Basement-ink-floorplan.css
  startup_action:
    - service: floorplan.class_set
      service_data:
        element: Main
        class: layer-visible
    - service: floorplan.class_set
      service_data:
        elements:
          - TopFloor
          - Basement
        class: layer-hidden
  rules:
    - element: button.top
      tap_action:
        action: null
        service: honeycomb
        service_data:
          buttons:
            - icon: mdi:volume-plus
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: TopFloor
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - Main
                      - Basement
                    class: layer-hidden
            - icon: mdi:volume-minus
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: Main
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - TopFloor
                      - Basement
                    class: layer-hidden
            - icon: mdi:volume-mute
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: Basement
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - Main
                      - TopFloor
                    class: layer-hidden
            - icon: mdi:volume-source
              tap_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.javascript
                  data:
                    code: lovelace_reload();
    - entities:
        - light.patio
        - light.workout
        - light.basement_overhead
        - light.laundry_room
        - light.staircase
        - light.gaming
        - light.office_ceiling
        - light.spare_ceiling
        - light.guest_ceiling
        - light.island
        - light.garage
        - light.deck
        - light.driveway
        - light.informal
        - light.dining_room
        - light.chandelier
        - light.kitchen_sink
        - light.kitchen_fdr_hallway
      tap_action:
        action: call-service
        service: homeassistant.toggle
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: light-${entity.state}
    - entity: media_player.basement_tv
      tap_action: more-info
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: media-player-tv media-player-${entity.state}
    - entities:
        - light.patio
        - light.workout
        - light.basement_overhead
        - light.laundry_room
        - light.staircase
        - light.gaming
        - light.office_ceiling
        - light.spare_ceiling
        - light.guest_ceiling
        - light.island
        - light.garage
        - light.deck
        - light.driveway
        - light.informal
        - light.dining_room
        - light.chandelier
        - light.kitchen_sink
        - light.kitchen_fdr_hallway
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          element: ${entity.entity_id.replace('light.', 'light_overlay.')}
          style: |
            >
            if( entity.state !== "on" )
                return "display: none;";
            let hue = 0;
            let sat = 0;
            if( entity.attributes.hs_color )
            {
                hue = entity.attributes.hs_color[0];
                sat = entity.attributes.hs_color[1];
            }
            if( sat < 10 )
            {
              return `
                display: block;
                filter:
                  brightness(calc( ${entity.attributes.brightness} / 255));`
            }
            return `
              display: block;
              filter:
                sepia(100%)
                hue-rotate(calc( ${hue}deg - 55deg ))
                saturate(calc( ${sat}% * 2 ))
                brightness(calc( ${entity.attributes.brightness} / 255));
            `
      view_layout:
        grid-area: right

[exetico]

We dont really have that kind of support for external resources/modifications, but I can give it a go at some time.

[tsx-5]

Ok,

Coming back to this (after solving some other issues)... Decided to see if I could this by using virtual toggles to enable different floor views. So as a test case, I wrote this:

  - entity: input_boolean.fp_basement
     state_action:
       - service: floorplan.class_set
         service_data:
           class: |
             >
             console.log("Entity Info - Debug info:", entity);
             switch (entity.state) {
               case "on":
                 return {element: 'Basement', 
                 class: 'layer-visible'};
               case "off":
                 return "";
               default:
                 return "";
               }
       - service: floorplan.class_set
         service_data:
           class: |
             >
             switch (entity.state) {
               case "on":
                 return {element: 'TopFloor', 
                 class: 'layer-hidden'};
               case "off":
                 return "";
               default:
                 return "";
               }
       - service: floorplan.class_set
         service_data:
           class: |
             >
             switch (entity.state) {
               case "on":
                 return {element: 'Main', 
                 class: 'layer-hidden'};
               case "off":
                 return "";
               default:
                 return "";
               }

The boolean is just a helper function within HA. I can see the section get executed - but nothing actually changes on the view. I was thinking it might have to do with "TopFloor" or "Main" or "Basement" (all the exact terms I used in pretty much the exact code tied to an element/entity combo) -- without the quotes or ticks, I get an error in the console saying these items are not found. Any thoughts?

[exetico]

Why would a input_boolean from Home Assistant help with your layer-problem? I don't really understand the path you're on right now. I'm sorry that I do provide pretty slow response-times these days. I've lots of other things on my table (just not ha-floorplan related 😄 ).

Why would you move the logics to Home Assistant dedicated entities? ha-floorplan does not touch entity states in Home Assistant by itself, so, I'd personally think things would go wrong pretty fast, if you're using the floorplan solution on multiple devices 😄 ?

[tsx-5]

I'm just imagining using the virtual toggles to turn options on/off (for example to turn on showing room temps). Nothing to extravagant.

[tsx-5]

Ok,

Figured it out. Code below allows me to switch "on" a floor based on toggling the boolean. Now to put it into real action :-)

    - entity: input_boolean.fp_basement
      state_action:
        - service: floorplan.class_set
          service_data:
            element: TopFloor
            class: |
              >
              console.log("Entity Info - Debug info:", entity);
              switch (entity.state) {
                case "on":
                  return 'class: layer-hidden';
                case "off":
                  return "";
                default:
                  return "";
                }
        - service: floorplan.class_set
          service_data:
            element: Main
            class: |
              >
              console.log("Entity Info - Debug info:", entity);
              switch (entity.state) {
                case "on":
                  return 'class: layer-hidden';
                case "off":
                  return "";
                default:
                  return "";
                }
        - service: floorplan.class_set
          service_data:
            element: Basement
            class: |
              >
              console.log("Entity Info - Debug info:", entity);
              switch (entity.state) {
                case "on":
                  return 'class: layer-visible';
                case "off":
                  return "";
                default:
                  return "";
                }

[OzGav]

If it works great! It is a little wordy though. If you have a look at this it might give you a more streamlined way to do this #347