Please share your first frustrations about ha-floorplan

[exetico]

Hi,

I'm still considering making some videos about ha-floorplan, to help people getting started, and maybe even more.

Therefore I'll like to hear what have been the first frustration for you, in the "Getting started"-state? 😄

[Kilill]

Being a yaml and HA newb and not realy understanding how the parts go together I'm missing a super basic yaml setup.
But since i got minimalist up and running, how hard could it be ??
Followed the video, to what i though was a tee but apparently not since i could get nothing to work.
And i could not get any of the examples to work at all, after a lengthy "Learning Experience" i managed to boil it down to essentials:
A test floorplan that displays a square with the text "a Square" in it and when hovering over it displays a popup with HA stats.

This is based on only using non gui-backed dashboard yaml code, since using the gui version will store the yaml code "somewhere" and i prefer using a proper editor and i wanted to keep the all the parts together in one place.

Another area that took some while to understand was the browser cashing... adding the ?v=1 fake argument alleviated some of that even though I'm still doing the clear_browser_caches | force_reload_page | hit_HA_refresh dance from time to time.

I ended up with the following directory structure and files in the configuration directory of HA.

www
└─ floorplan 
     ├─ floorplan_main.yaml
     └─ test
          ├─ test.css
          ├─ test.svg
          └─ test.yaml

configuration.yaml

lovelace:
  mode: storage
  dashboards:
      floorplan-home:
      mode: yaml
      title: "Floorplans"
      icon: mdi:floor_plan
      show_in_sidebar: true
      filename: floorplan_main.yaml

floorplan_main.yaml

will only contain includes to main areas / floor/views etc:

---
title: "Floorplans"
views:
  - !include "test/test.yaml"

test.yaml

title: "Test"
paath: "test"
cards:
  - type: "custom:floorplan-card"
    config:
      image: /local/floorplan/test/test.svg?v=1
      stylesheet: /local/floorplan/test/test.css

      defaults:
        hover_action: hover-info
        tap_action: more-info

      rules:
        - entities:
          - entity: update.home_assistant_core_update
            element: "theSquare"

test.svg

the svg is a most basic svg containing a square and a text, an important point here is that all svg elements that will be referred to by
the yaml code has to be a group, this burned med for quite some time.
So the square and the text are grouped into a group with

I also used a lot of time discovering that the naming convention with tag.name used in the example files etc does not work for me ie having a dot as separator is a no no, changing this to underscore worked wonders.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="330.45538"
   height="250.5983"
   viewBox="0 0 87.432988 66.304133"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2" />
  <g
     id="layer1"
     transform="translate(-57.143912,-45.184177)">
    <g
       id="theSquare">
      <rect
         style="fill:#ffffff;stroke:#000000;stroke-width:1.32292;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none"
         id="whoot"
         width="86.110069"
         height="64.981209"
         x="57.80537"
         y="45.845638"
         rx="0.95624119"
         ry="1.2754107" />
      <text
         xml:space="preserve"
         style="font-size:12.7px;line-height:125%;font-family:Atlanta;-inkscape-font-specification:'Atlanta, Normal';text-align:center;text-decoration:none;text-decoration-line:none;text-decoration-color:#000000;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;stroke:#000000;stroke-width:0.330187px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stop-color:#000000"
         x="97.272484"
         y="81.32618"
         id="text1915"><tspan
           id="tspan1913"
           style="stroke-width:0.330187px"
           x="97.272484"
           y="81.32618">A Square</tspan></text>
    </g>
  </g>
</svg>

test.css

shamelessly stolen from the examples....

[exetico]

Followed the video, to what i though was a tee but apparently not since i could get nothing to work. And i could not get any of the examples to work at all

Are we talking about the videos released a few days ago by me, or other videos on YouTube?

I'm asking just to check if I should create another one, with a even more simplified floorplan/svg file, only containing a square or so.

As OzGav, I'm not 100 sure what you'd like me to focus on, in a new video.

If you're facing any specific problems, please let us know.

With that: Thank you for sharing your code here. That will 100% help other ha-floorplan users in the future ☺️.

[Kilill]

Someone more steeped in the the lore would probably have picked up on the small details that I am overseeing. So i guess its just me being a certified noob when it comes to yaml and how it is used in conjunction with HA and , in this case the floorplan-card...

But since I could not wrap my head around all the details I wanted to do a bare minimum setup , a kind of "hello world" example. And build from there.

Again it might be me missing something obvious here but i think it would be nice if the "examples directory" could be copied straight into the www directory and with a tweak or two of the configuration.yaml they should work.

[OzGav]

Hi,
I can't tell from your post exactly what isn't working but for a start I would make some points from your post:

A test floorplan that displays a square with the text "a Square" in it and when hovering over it displays a popup with HA stats.

This is positive. Some poeple can't even get anything on the screen at the start. So it shows your basic yaml is correct as well as the location of your files.

Another area that took some while to understand was the browser cashing... adding the ?v=1 fake argument

Yes this can be annoying but it is a function of the browser not ha-floorplan. The fake argument should actually not be required but if makes it work for you it doesn't hurt. What you can also do to help is to use the cache: key like so:

  image:
    location: /local/floorplan/examples/home/home.svg
    cache: false
 stylesheet: 
    location: /local/floorplan/examples/home/home.css
    cache: false

yaml is tricky because you need to have exactly the right indenting and exactly the right key structure. In your post above the rules section is not correct as it should not have the - entities: line so it should actually be:

      rules:
        - entity: update.home_assistant_core_update
          element: "theSquare"

Now the above won't actually do anything yet as you don't have a state_action defined.

an important point here is that all svg elements that will be referred to by the yaml code has to be a group

This is not actually true. You only need to group SVG objects if it makes sense to do so. For example this image is a group of a SVG circle and PNG image which I can then adjust the fill and stroke colour of to show when my PC is on:

discovering that the naming convention with tag.name used in the example files etc does not work for me ie having a dot as separator is a no no, changing this to underscore worked wonders

Certainly @exetico recommended this in his video but YMMV as I do use dots in my object IDs and I haven't had any issues although I never start an ID with one.

So let us know where you are at and we will be able to set you on othe right track...

[exetico]

Using . will possibly only give problems in compiled code, or if '.livingroom' is a style selectors, and you've defined a ID called #light.livingroom.something, cause the #idSinge.classMultiple in CSS will be target both '#idSingleand.classMultiple(or#light,.livingroomand.something`)

[Kilill]

Not sure why the tag.name did not work, it does now though... i think I'l going to blame caching issues. Is the rationale for the tag.name convention that floorplan makes assumptions that the the element name and the entity name can/should be the same ?

[exetico]

Please prevent the usage of dots as a separator - use typhen instead, if you're going to define both the entity and element in your YAML, and use something else than the entity name.

With that said.. I fully understand if you're not... Cause ha-floorplan will look for the entity name in the svg, if only 'entity:` is provided in the YAML.

It's clear that my person suggestions are not really doing it easier for the end-user, so please go along with whatever you think is OK with yourself. I bet most people would go with whatever works, and I won't blame them 😁☺️.

[exetico]

@OzGav Just a follow-up on the dots ;-)

https://experiencelovelace.github.io/ha-floorplan/docs/usage/#custom-functions

I had forgot all about that note, but don't come here and say that it's not mentioned in the docs 🤪 😉 .