Create your first floorplan in Inkscape (1/2) | Including CSS and YAML configuration

[exetico]

This is the 2. video for ha-floorplan. Stay tuned for part 2, where I'll add more items and logics to the floorplan, the CSS-file and the YAML-code.

Learn how to draw a floorplan in Inkscape, and setup the workspace. Create your first CSS file, and upload it to Home Assistant. Setup ha-floorplan with a fresh floorplan, and create your first entity-trigger with our tap_action and other services. See the first advance example on how to use JavaScript functions to style SVG-elements with properties from the Home Assistant entities (like the rgb-color). And even more.

🗣️💬 I need your input
I've tried another microphone this time. I'm not sure if that improves the experince. Let me know what you guys think...

https://www.youtube.com/watch?v=f_3KAPc53hQ

❤️☕ Support my work:
https://www.buymeacoffee.com/coffeetoexetico

Software used:
➡️ Home Assistant 2022.10.04
➡️ Firefox Developer Edition 105.0b4 (64-bit)
➡️ Inkscape 1.2.1

[aparker21]

I am following along with video 1 of 2 (admittedly I am not on to video 2 yet) and have built in some neat lamp auotmations. . . however, I am trying to do the simple changing of the opacity of the gray color layer and I am having issues. I have followed the video to a "t" and I have the entity tied to the css file and can see that the entitystate is changing in the inspector. However, my item is not changing it's opacity. Any suggestions?? Below is my programming for the .css and the .yaml:

.CSS file copied from the video:

/* All good :/ */
.entitystate-on{
opacity: 0;
}

.eintitystate-off{
opacity: 1;
}

.YAML for the particular element I'm having issues with:

        - element: light-garage-opacity
          entity: light.front_room_lamp    # I am using another entity not in the garage due to not having that set up yet
          state_action:
            action: call-service
            service: floorplan.class_set
            service_data: entitystate-${entity.state}

some of my other .YAML in case that is needed (this is everything starting at the top and leading up to the listing of the elements under "rules":

title: Our Floorplan
views:

• title: Sample Entities
  path: sample-entities
  icon: ''
  badges: []
  cards:
  • type: entities
    entities:
    • type: divider
    • entity: light.abbys_lamp
      name: Abbys Lamp (light-abbys_lamp)
    • entity: light.aarons_lamp
      name: Aarons Lamp (light-aarons_lamp)
    • entity: light.nursery_lamp
      name: Nursery Lamp (light-nursery)
      title: Master Bedroom
  • type: entities
    entities:
    • type: divider
    • entity: light.front_room_lamp
      name: Living Room Lamp (light-living_lamp)
      title: Front Room
• title: My First Floorplan
  path: floorplan
  theme: Google Dark Theme
  panel: true
  type: panel
  badges: []
  cards:
  • config:
    console_log_level: info
    defaults:
    hover_action: hover-info
    tap_action: more-info
    image: /local/floorplan/examples/home/home_simple.svg
    log_level: info
    rules:

Below is the last few lines of code after the listing of all the elements:

      stylesheet: /local/floorplan/examples/home/home_simple.css  # The CSS file shown above
    full_height: true
    type: custom:floorplan-card

[OzGav]

You have a typo in your css for the off entity

[aparker21]

What a catch!!! I knew it had to be something that simple. I looked it over 5 times and apparently the "i" was hidden to me. Thank you!!!

[aparker21]

That still didn't fix it

[aparker21]

Here is my inspector data:

"path style="fill: rgb(203, 203, 203); fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-width: 0.264583px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.621; cursor: pointer;" d="m 134.31144,142.33802 h 33.97919 v 11.23721 l 80.53335,0.26756 0.80266,120.3987 H 133.77633 Z" id="light-garage-opacity" class="entitystate-on floorplan-hover"><title>Front Room Lamp
State: on"

min_color_temp_kelvin: 2500
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 400
supported_color_modes: brightness,color_temp,hs
friendly_name: Front Room Lamp
supported_features: 32
color_mode: color_temp
brightness: 82
color_temp_kelvin: 2702
color_temp: 370
hs_color: 28.391,65.659
rgb_color: 255,166,87
xy_color: 0.526,0.387

Last changed: 1 minute ago
Last updated: 1 minute ago</title>

You can clearly see the opacity is still a 1 instead of a 0 even though the entitystate is entitystate-on. I'm stumped

[OzGav]

Look at the second last post https://community.home-assistant.io/t/anyone-know-how-to-clear-cache-in-the-ios-app/64569/12

[aparker21]

That fixed it!! Many thanks!!!

[Morcegolas]

When inspecting home_modern.yaml, in minute 12:39 mine still nothing change, class="entity state-off... and all of that is missing. I already changed browser and make a hard refresh but no luck.

YAML:

title: Modern Floorplan
views:
  - title: My Modern Floorplan
    path: floorplan
    theme: Google Dark Theme
    panel: true
    type: panel
    badges: []
    cards:
      - config:
          console_log_level: info
          defaults:
            hover_action: hover-info
            tap_action: more-info
          image: /local/floorplan/home_modern/home_modern.svg
          log_level: info
          rules:
            - element: ligh-kitchen-primary
              entity: switch.luz_switch_1
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
          stylesheet: /local/floorplan/home_modern/home_modern.css
        full_height: true
        type: custom:floorplan-card

CSS file:

</* All good :/ */
.entitystate-on{
    opacity: 0;
}

.entitystate-off{
    opacity: 0.7;
    fill: rgb(49,45,45)!important;
}

What I'm doing wrong here?

PS: I found it, typo in light (ligh) xD

[OzGav]

Can you reformat all your code by clicking edit post, highlighting the code and pressing the <> button

[exetico]

@Morcegolas Its great that you figured it out 👍😊