ExperienceLovelace / ha-floorplan

Bring new life to Home Assistant. By mapping entities to a SVG-object, you're able to control devices, show states, calling services - and much more. Add custom styling on top, to visualize whatever you can think of. Your imagination just became the new limit.
https://experiencelovelace.github.io/ha-floorplan/
Apache License 2.0
1.12k stars 174 forks source link

floorplan text for sensors have mooved at a wrong position after update to 1.0.37 [BUG] #357

Closed Electronlibre2012 closed 1 year ago

Electronlibre2012 commented 1 year ago

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. image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Share configuration Please share:

Additional context Add any other context about the problem here.

exetico commented 1 year ago

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.

MackoMici commented 1 year ago

The problem is that the font settings are in the tspan, but in this case the css does not apply to the text entry, if you move the font settings to the text, everything is restored to its place. I hope I was understandable, unfortunately my English is bad.

wrong format:

<text id="sensor.nappali_temperature" x="1690.333" y="75.694336" xml:space="preserve"><tspan id="tspan148-9-8-1-2-4" x="1690.333" y="75.694336" font-family="Ubuntu" font-size="50px" font-weight="bold" stroke-width=".99772" text-align="end" text-anchor="end" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">T</tspan></text>

good format:

<text id="sensor.nappali_temperature" x="1690.333" y="75.694336" font-family="Ubuntu" font-size="50px" font-weight="bold" stroke-width=".99772" text-align="end" text-anchor="end"><tspan>T</tspan></text>
Electronlibre2012 commented 1 year ago

ok thanks i will sent you the files tonight.

Electronlibre2012 commented 1 year ago

The problem is that the font settings are in the tspan, but in this case the css does not apply to the text entry, if you move the font settings to the text, everything is restored to its place. I hope I was understandable, unfortunately my English is bad.

wrong format:

<text id="sensor.nappali_temperature" x="1690.333" y="75.694336" xml:space="preserve"><tspan id="tspan148-9-8-1-2-4" x="1690.333" y="75.694336" font-family="Ubuntu" font-size="50px" font-weight="bold" stroke-width=".99772" text-align="end" text-anchor="end" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">T</tspan></text>

good format:

<text id="sensor.nappali_temperature" x="1690.333" y="75.694336" font-family="Ubuntu" font-size="50px" font-weight="bold" stroke-width=".99772" text-align="end" text-anchor="end"><tspan>T</tspan></text>

thanks, your english is nice, bur where can i modify these data? or it is on the dev side?

MackoMici commented 1 year ago

The problem is that the font settings are in the tspan, but in this case the css does not apply to the text entry, if you move the font settings to the text, everything is restored to its place. I hope I was understandable, unfortunately my English is bad. wrong format:

<text id="sensor.nappali_temperature" x="1690.333" y="75.694336" xml:space="preserve"><tspan id="tspan148-9-8-1-2-4" x="1690.333" y="75.694336" font-family="Ubuntu" font-size="50px" font-weight="bold" stroke-width=".99772" text-align="end" text-anchor="end" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">T</tspan></text>

good format:

<text id="sensor.nappali_temperature" x="1690.333" y="75.694336" font-family="Ubuntu" font-size="50px" font-weight="bold" stroke-width=".99772" text-align="end" text-anchor="end"><tspan>T</tspan></text>

thanks, your english is nice, bur where can i modify these data? or it is on the dev side?

Modify svg file.

Electronlibre2012 commented 1 year ago

Modify svg file.

hello @MackoMici , thanks, but where i have to modify this please? i dont find this data when i click on the sensors in the .svg file.

Thanks

exetico commented 1 year ago

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.)

Electronlibre2012 commented 1 year ago

here is the .svg

maisonV2

OzGav commented 1 year ago

Have you tried the fix that @MackoMici suggested?

Electronlibre2012 commented 1 year ago

well...i dont know where modify this data in my .svg sorry, i use Inkscape

OzGav commented 1 year ago

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 commented 1 year ago

You can also post the css you have for static-temp

Electronlibre2012 commented 1 year ago

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

yes, they are regroup like "sensor" "cameras" "room"

Electronlibre2012 commented 1 year ago

maison.txt

i upload it .txt because .css not alowed

Thanks for your help @OzGav

MackoMici commented 1 year ago

Modify svg file.

hello @MackoMici , thanks, but where i have to modify this please? i dont find this data when i click on the sensors in the .svg file.

Thanks

your font settings are in the right place, that's not your problem

OzGav commented 1 year ago

Sorry I see the css now. Try removing the tspan

try this

.static-temp, .static-temp * {
  fill: #0000ff;
}

edit: I’m on my iPad so can’t look at your SVG but if you have objects grouped then ungroup them.

Electronlibre2012 commented 1 year ago

Sorry I see the css now. Try removing the tspan

try this

.static-temp, .static-temp * {
  fill: #0000ff;
}

it doesnt change anything without "tspan" removed and "*" add.

something strange i haven't the same result with chrome and mozilla :

MOZILLA : mozilla

CHROME : chrome

I have moved a sensor from a group, no difference.

I create a new one, outside any group and i see anything...(of course have modify the .yaml and shift + F5 on chrome and F5 on Mozilla)

what a mess...

Electronlibre2012 commented 1 year ago

objects are not grouped, they are listed under "name" :

            - name: Humidite
              entities:
                - sensor.mi_bureau_humidity
                - sensor.mi_sejour_humidity
                - sensor.mi_chambre_olive_humidity
                - sensor.mi_garage_humidity
                - sensor.mi_salon_humidity
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state *
                    10) / 10 + "%" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-humidity

and in the .svg : svg

and seem F5 doesnt work, i have to right click to refresh icon in chrome and select empty cache and refresh

Electronlibre2012 commented 1 year ago

<tspan

i have no

<text id >

label

i have

inkscape:label="sensor.mi_sejour_humidity"><tspan
         x="548"
         y="1122.0302"
         id="tspan3119">n/a</tspan></text><text
       xml:space="preserve"
       id="sensor.mi_salon_humidity"
       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(#rect314-2);display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       transform="matrix(0.72693334,0,0,0.39208444,78.089054,455.68267)"
Electronlibre2012 commented 1 year ago

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.)

i have replace the file from your link but its change nothing

zen2 commented 1 year ago

I suppose the SVG is your problem:

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

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:

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.

Electronlibre2012 commented 1 year ago

What a detail reply @zen2 ! thanks for your time.

i have delete all

transform="matrix(0.72693334,0,0,0.39208444,150.08909,-85.317331)"

with notepad++ editor

then i moved all item at the right place.

the problem is i cant see anymore my sensor in floorplan

I open again with Notepad++ and i have a new line :

transform="translate(-136,-644)"><tspan

sorry i dont know very well inkscape...

i have follow a tutorial for text item...

Perhaps there is a simple way to recreate new ones without transform? I try to change x and y but it does nothing

Any idea

Electronlibre2012 commented 1 year ago

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 Sans titre2

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.

zen2 commented 1 year ago

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 Sans titre2

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.

bernji commented 1 year ago

Hello yall! Isn't this related to https://github.com/ExperienceLovelace/ha-floorplan/issues/358 because the root cause is that with the latest release the attributes of any child of the text node are erased?

So If you have

<text id=someId"><tspan x="10">some text</tspan></text>

After calling the service floorplan.text_set on that text node ("someId") it looks like this:

<text id=someId"><tspan>new text</tspan></text>

tinkerberlin commented 1 year ago

Hi there, I'm having the same problem - I think. I uploaded a new svg file and as long as the entity name isn't asigned in code, (i.e. I tell the floorplan which sensor's data to display where) it looks great. However, once I add that information, the text get's formated lighter (not black anymore but a shade of grey (?) - though this may just be an opitcal illusion since my css is shrinking the text a bit; the change to red (and back to black) depending on the status of the sensor works just fine) and (more importantly) the text is moved to the top left.

textmove1 textmove2

Until now this was working fine (with another svg file but essentially the same entity-names); so I don't think it relates to the code in the dashboard.

My css looks as follows:

/* Layers */

.layer-visible {
  display: inline !important;
}

.layer-hidden {
  display: none !important;
}

/* Temperature text */

  .heizung-heating-static-temp, .heizung-heating-static-temp tspan {
  fill: red !important;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: lighter;
  font-size: xx-large;

  }

  .heizung-idle-static-temp, .heizung-idle-static-temp tspan {
  fill: black !important;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: lighter;
  font-size: xx-large;

  }

  .heizung-heat-static-temp, .heizung-heat-static-temp tspan {
  fill: red !important;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: lighter;
  font-size: xx-large;

  }

  .heizung-off-static-temp, .heizung-off-static-temp tspan {
  fill: black !important;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: lighter;
  font-size: xx-large;

  }

  .feuchtigkeit, .feuchtigkeit tspan {
  fill: black !important;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: lighter;
  font-size: xx-large;

  }

Any help would be greatly appreciated.

OzGav commented 1 year ago

Look at @zen2 advice above. I had the same problem with one of mine. Not sure how that particular one had transformations applied but removed that and repositioned the element and all good again. As for the light text you dont show the code where the class is set

tinkerberlin commented 1 year ago

I have gone through the xml file in inkscape and deleted the transform lines. I have then moved the textbox to the correct location and the xml file now includes x and y values akin oto those shown by zen. However, in HA the problem persists - and infact the textboxes seem to be moved even further to the side, since I can't even see them anymore on the dashboard.

OzGav commented 1 year ago

Try and delete and recreate one of these entities that are moving.

tinkerberlin commented 1 year ago

Hmm so deleting the entity did not work. I then went back into xml and deleted everything (!). Then manually created an x and a y variable. that sort-of worked. I say sort-of because an entity that should be centered on a room now appears ever so slightly to the top left of the room. I have tried "text-align: center" in the css to see if this is just something about the textbox, but it did not change anything. (I just tested with the one room, so all the other rooms are still "wrong".)

image

OzGav commented 1 year ago

I’m not sure what you mean by “manually created an x and y variable”. You should be just typing some text on the screen, then positioning it, setting the font size and then setting the ID. Don’t resize it.

tinkerberlin commented 1 year ago

I mean that I create a variable in xml and put in the correct x and respectivly y value.

I have no deleted the text-entity (again) and have put in a new entity. There is no transform on that entity in the XML. Once important into HA / used in the floorplan the text "disapears"; as soon as I don't reference the entity in the floorplan code, I see the placeholder text, just where I put it in inkscape.

zen2 commented 1 year ago

Take care to set font type only in SVG or only in CSS, not both as that could result in strange results. Globally it is better to set element style in SVG or CSS, not both way for same element.

To debug, always check XML of SVG in inkscape then the XML of SVG in browser debug inspector to see how floorplan and css style modify your original SVG.

Personally I avoid to apply external CSS to SVG because you do not control easily the result so I set everything like font and size directly in SVG then I set basic style using floorplan function. Big pro to do this way is that you see the result directly at SVG edition time for size/position. A little trick for text element: always set a fake text that represent the maximum real text size of your element like "22.3°C" for a temperature with only one digit precision and so on.

The idea is to set static style in SVG that won't be modified by home assistant and to set basic CSS dynamically using function for what need to have a dynamic style depending on homeassistant entities states or attributes.

Example:

floorplan.yaml

...

functions: !include functions.yaml

- entities:
  - sensor.thp_room1_temperature
  - sensor.thp_room2_temperature
  tap_action: more-info
  hover_action: hover-info
  state_action:
  - service: floorplan.text_set
    service_data: '${entity.state === "unavailable" ? "NA" : entity.state}°'
  - service: floorplan.style_set
    service_data: ${functions.style_temperature(entity)}

functions.yaml

|
  >
  return {

    style_temperature: (entity) => {
      var temp = parseFloat(entity.state.replace("°", ""));
      var temp1 = 10.0 ;
      var temp2 = 21.0 ;
      var temp3 = 32.0 ;
      var color1 = [036, 074, 255];
      var color2 = [100, 205, 00];
      var color3 = [240, 000, 000];
      if ( temp < temp1 ) {
        var r = color1[0];
        var g = color1[1];
        var b = color1[2];
      }
      else if ( temp >= temp1 & temp < temp2 ) {
        var r = Math.floor(color1[0] + ((color2[0] - color1[0]) * ( (temp - temp1) / (temp2 - temp1) )));
        var g = Math.floor(color1[1] + ((color2[1] - color1[1]) * ( (temp - temp1) / (temp2 - temp1) )));
        var b = Math.floor(color1[2] + ((color2[2] - color1[2]) * ( (temp - temp1) / (temp2 - temp1) )));
      }
      else if ( temp >= temp2 & temp < temp3 ) {
        var r = Math.floor(color2[0] + ((color3[0] - color2[0]) * ( (temp - temp2) / (temp3 - temp2) )));
        var g = Math.floor(color2[1] + ((color3[1] - color2[1]) * ( (temp - temp2) / (temp3 - temp2) )));
        var b = Math.floor(color2[2] + ((color3[2] - color2[2]) * ( (temp - temp2) / (temp3 - temp2) )));
      }
      else {
        var r = color3[0];
        var g = color3[1];
        var b = color3[2];
      }
      return `fill: rgb(${r}, ${g}, ${b})`;
    },
...
}

This example set temperature text color depending of his value based on a three-point color gradient. I use another function to set bulb icon color to correct RVB or HUE value for example and so on. As you can change color, you can play with display:inline/none CSS style to let appear/disappear an element too for example.

As you can see I use a lot of text on my floorplan: image

exetico commented 1 year ago

I've pushed a few things where I'm moving x+y attributes from the original tspan, but not all the other attributes. I'd always suggest to have transform and similar things on a layer above the tspan, if ever needed.

Kindly check with: https://github.com/ExperienceLovelace/ha-floorplan/blob/dev/dist/floorplan.js

It's currently in the dev-branch.

I'll consider to clone every tspan properties, if it's a single element.

(zen2: I've not read your comment, as I'm out of time, but I'll check later if you need input form me)

All: If someone could let me know if somethings needs to be done here, what would be much appreciated. I simply don't have the time to walk though every comment. Thanks!

tinkerberlin commented 1 year ago

Hello @exetico : Thank you for taking the time here! Just checking, are you saying the new floorplan.js should have fixed the problem? I haven't updated the svg I'm using, but text still moves off-screen as soon as I reference it in the floorplan code. So as long as text is just a textbox in the svg, it is just where I put it - as soon as I tell it to show (for example) a temperature (and I specify which textbox should display that temperature sensor's value) it can't be seen / moves away.

OzGav commented 1 year ago

Do you really mean to say “text BOX”? Are you not using a simple text object?

tinkerberlin commented 1 year ago

Sorry, I believe I'm using the text object. image

OzGav commented 1 year ago

Can you extract and post the code for one of these text objects that are moving? (Or the whole SVG if you have to) We use text objects a lot and do not have this problem so it must be something you are doing. That is not to say there isn’t a bug but we need to work out what you are doing differently.

edit: and show your css that is being applied (if any)

OzGav commented 1 year ago

I think this was recommended above. Remove all reference to font and text alignment in your css. This should be set in your SVG.

OzGav commented 1 year ago

I would also try just removing all the yaml and do a simple text set of a value like this

            - element: carsoh
              name: Percentage Sensors
              state_action:
                service: floorplan.text_set
                service_data: '96.2%'
tinkerberlin commented 1 year ago

Sorry, deleted the previous post, because some of the code wasn't ideal to be published.

I deleted all references to the font from the CSS (just left in the color changing part).

Otherwise, the problem persists, also when using a hard-coded text as in your example above.

I'm sorry - not trying to be difficult; just somewhat at a loss here. :-(

tinkerberlin commented 1 year ago

Could the problem be that I created the background image (i mean the walls, windows, doors) in PowerPoint, saved it as a SVG and then copy/pasted that into an inkscape-svg-file? I mention this, because ever since I did this, the problem appeard. In an old file, that was just PDF -> SVG using inkscape I did not have this problem. I wouldn't think that this is an issue, since the text-element was created in inkscape and the walls/windows/doors (so the things that were created with PowerPoint) work just fine.

zen2 commented 1 year ago

Could the problem be that I created the background image (i mean the walls, windows, doors) in PowerPoint, saved it as a SVG and then copy/pasted that into an inkscape-svg-file? I mention this, because ever since I did this, the problem appeard. In an old file, that was just PDF -> SVG using inkscape I did not have this problem. I wouldn't think that this is an issue, since the text-element was created in inkscape and the walls/windows/doors (so the things that were created with PowerPoint) work just fine.

Why don't you use simply inkscape to create your SVG ?

exetico commented 1 year ago

Why don't you use simply inkscape to create your SVG ?

@zen2: Different person, different tool. There's plenty of people who doesn't really prepare themself for another "get to learn"-weekend, while jumping into ha-floorplan. With that said... PowerPoint? That's something new 😄.

@Electronlibre2012 : image

The text is now rendered as expected (the original issue, with shared SVG), but I know you've made some changes already. The fix for the original question/issue raised, will be part of the next release.

@tinkerberlin : No I'm just trying to understand the current situation, and also, telling that a new version is out with a few changed logics, which you could try and test 😃. You raised an issue, which is totally fine now that you're facing issues with 1.0.37. But it also feels like you've styled your floorplan in a bit of a odd way, which we didn't really expect to support.

image https://youtu.be/f_3KAPc53hQ?si=C_66q4a--2FyDc5C&t=106

I'll suggest you to give this and part to your time, at some point.

Hello yall! Isn't this related to #358 because the root cause is that with the latest release the attributes of any child of the text node are erased?

@bernji You're right. That's fixed in the latest version, which I'm pushing very soon.

GitHub: Get your quote-functions updated to 2023, please 🙃. What a (not that great) experience...

Everybody:

I'm closing this one, as the original issue will be fixed as part of the new release. I kindly ask the one of you with problems to use our Discussions area.

If you think it's related to a issue in ha-floorplan itself, please share: SVG, CSS and YAML, thanks. Also, create a minimal-example, whenever possible. Thanks! 😄

exetico commented 1 year ago

Release 1.0.38 is here: https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.38

bernji commented 1 year ago

Thank you @exetico ! I just installed the new release and I can confirm that x and y attributes of the tspan element are not deleted anymore. However, other attributes are deleted. For example, I have attributes like "text-align", "text-anchor", "text-size" or "font-family" are deleted. My assumption was that all tspan attributes are kept and only the body of the tspan is updated. Can you reopen the issue or should I create a new one?

exetico commented 1 year ago

I'll suggest you to open a new one.

I guess we should just reuse the current tspan, if there's only a single one, without line-breaks.

tinkerberlin commented 1 year ago

Why don't you use simply inkscape to create your SVG ?

I just found it to be easier to make a very simply 2d floorplan in PPT. I was tracing an existing image file and somehow that - in Inkscape - wasn't as easy (for me) as in PPT. I know, a weird choice...but it worked for me ;-)

tinkerberlin commented 1 year ago

Why don't you use simply inkscape to create your SVG ?

@zen2: Different person, different tool. There's plenty of people who doesn't really prepare themself for another "get to learn"-weekend, while jumping into ha-floorplan. With that said... PowerPoint? That's something new 😄.

thanks @exetico ! I did spend quite a bit of time learning the "back-end" of Floorplan (e.g. studying the example files etc.). I also did create my first floorplan svg in inkscape. It just somehow did not have the "look and feel" of what I was going for and PPT for whatever reason looked better for me. This is purely the case, because I'm not using a 3d graphic. I'm just using a top-down view of the floor with walls in black, windows in light blue, and doors in brown.

How do you mean you did not anticipate my use of floorplan? just curious. :-) I'm using the text to display temperature values, just as is the case in a bunch of the examples on here. But maybe I'm missing something.

I will give the new version a try and report back with a result. Thank you again!

tinkerberlin commented 1 year ago

@exetico Just checked and this seems to have fixed the problem. I can also re-enable my css formating :-) I'll let you know if anything re-appears, but for now, all seems good. Thanks!!