ha-floorplan: floorplan text for sensors have mooved at a wrong position after update to 1.0.37 [BUG]

Describe the bug All my text sensor have mooved on the left after upgrade to 1.0.37.

To Reproduce Steps to reproduce the behavior: just update to 1.0.37, try to revert to 1.0.35 doesnt solved the problem. Have to use a previous backup of HA.

Expected behavior my plan doesnt change position of sensors.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: HASSOS 10.4 / CORE 2023.8.2 / SUPERVISOR 2023.08.1
Browser Chrome 115.0.5790.171 (Build officiel) (64 bits) and same with Mozilla 116.0.2

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Share configuration Please share:

YAML

- name: Temperature
              entities:
                - sensor.mi_bureau_temperature
                - sensor.mi_sejour_temperature
                - sensor.mi_chambre_olive_temperature
                - sensor.mi_garage_temperature
                - sensor.mi_salon_temperature
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state *
                    10) / 10 + "°C" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-temp

Additional context Add any other context about the problem here.

About this issue

Original URL
State: closed
Created 10 months ago
Comments: 54 (18 by maintainers)

Commits related to this issue

setText use cur. tspan or cr. multiple if \n #357 — committed to ExperienceLovelace/ha-floorplan by exetico 9 months ago
Merge pull request #369 from ExperienceLovelace/bug/tspan_single_vs_multiple_linebreak_logics setText use cur. tspan or cr. multiple if \n #357 — committed to ExperienceLovelace/ha-floorplan by exetico 9 months ago

Most upvoted comments

I suppose the SVG is your problem:

your temperature and humidity svg elements are displayed by a complex way:

set a 40px font size with different style
apply a matrix to translate & reduce the element (then CSS is applied).

So your elements size is defined by both font size and matrix transformation. Better to use properly font size and no matrix transformation.

You can modify it easily with inkscape: Ctrl-shift-X to open XML editor. Find your sensor definitions and delete “transform” name with value “matrix(…)”. That will move your element position and grow up text to the font size defined. Then you fix the position by replacing where you need your element and set the font size (text and font editor or xml editor).

I suppose that will works. The mistake is copy/paste, setting the font size then transform it by resizing down the element. You can do the opposite and remove font definitions and resize the element. Personally to do not have a big and complex svg (I use a lot of groups and subgroups too), I set only the font size for text element and never resize the element. Like it corresponding XML stay light and simple.

It is difficult to avoid svg caching with browsers. To be sure to have clear the cache:

use a different brother after have clear globally cache
use an incognito/private browser window
add a query string to url used in yaml resource definition and modify it at each definition

And a useful trick is to keep a version number hidden or not in your svg that you increment at each modifications and that you can check to be sure you are using the last one and not the cached one.

zen2 on Aug 19, 2023

Thank you so much! It works now and my floorplan looks beautiful again! Much appreciated.

bernji on Sep 23, 2023

EDIT : ok i found a way : i change x and y in xml editor of inkscape and delete the transform line

Its a lot of work but it work again : x=420 and y=480 are the correct position
id="sensor.mi_bureau_temperature"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1669);display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       inkscape:label="sensor.mi_bureau_temperature"
       x="420"
       y="480"><tspan
         x="516"
         y="1130.0302"
         id="tspan1172">n/a</tspan></text><text
       xml:space="preserve"
thanks all for your help

I am interested if someone has a simple solution for my future sensor because its a pain in the **s to do all manually like this.

You could have done it straight within Inkscape: you delete the matrix transformation in XML editor and watch where your sensor that is selected appears now. Simply drag and drop it to fix his position. Then remove font attributes and set only the font size.

For others sensors, you only have to copy/paste already fixed sensors and set the right object id.

With Inkscape, i advise you to always check your objects as XML at creation time because it is too much easy with the interface to apply multiple not needed transformation on objects especially starting from an already transformed one by copy/paste.

zen2 on Aug 20, 2023

You can modify it with a text editor as SVG files are actually plain text. However, you are likely doing something different to everyone else as I also use Inkscape but don’t have this problem. Maybe you are grouping objects or inserting them in a different way? Try deleting one of the objects you have and then insert a single new text object

OzGav on Aug 18, 2023

Have you tried the fix that @MackoMici suggested?

OzGav on Aug 18, 2023

I’ll just point out that I’m unable to fix it in the next two weeks, but if there’s a issue in general, @petarkozul can take a look.

Also, if needed, jump back to the previous version of ha-floorplan: https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/1.0.35/dist/floorplan.js

Again, the SVG would be great to have. And as Petar will have to look into it if needed, please share it here in the issue.

(Disclaimer: I’ve not checked the responses, I’d just like to point out that I’m away for a few weeks.)

exetico on Aug 18, 2023

Hi. Im sorry if I’ve missed a logic. The text_set change was part of the last “pre-release” and no-one reported issues.

Could I aak you to send me the SVG file in e Email, and include a very minimal YAML, with just the bare minimum to test it? Find my information in my bio, oe at tobiasnordahl (dot) dk.

exetico on Aug 16, 2023