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

Electronlibre2012 · 2023-08-16T14:28:15Z

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.

The text was updated successfully, but these errors were encountered:

exetico · 2023-08-16T20:08:06Z

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 · 2023-08-17T00:20:04Z

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 · 2023-08-17T03:26:17Z

ok thanks i will sent you the files tonight.

Electronlibre2012 · 2023-08-17T03:27:22Z

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 · 2023-08-17T04:15:47Z

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 · 2023-08-18T11:22:37Z

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 · 2023-08-18T11:26:48Z

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 · 2023-08-18T11:32:36Z

here is the .svg

OzGav · 2023-08-18T11:59:02Z

Have you tried the fix that @MackoMici suggested?

Electronlibre2012 · 2023-08-18T12:00:35Z

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

OzGav · 2023-08-18T12:06:49Z

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 · 2023-08-18T12:08:01Z

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

Electronlibre2012 · 2023-08-18T12:19:30Z

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 · 2023-08-18T12:21:03Z

maison.txt

i upload it .txt because .css not alowed

Thanks for your help @OzGav

MackoMici · 2023-08-18T12:43:35Z

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 · 2023-08-18T12:50:12Z

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 · 2023-08-18T13:27:04Z

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 :

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 · 2023-08-18T13:51:14Z

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 :

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

Electronlibre2012 · 2023-08-18T15:15:17Z

<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 · 2023-08-18T15:26:02Z

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 · 2023-08-19T11:29:41Z

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.

Electronlibre2012 · 2023-08-19T13:09:12Z

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 · 2023-08-19T13:38:19Z

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.

zen2 · 2023-08-20T12:26:50Z

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.

bernji · 2023-09-15T11:09:35Z

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?

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 · 2023-09-20T11:29:49Z

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.

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 · 2023-09-20T11:33:18Z

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 · 2023-09-20T15:24:41Z

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 · 2023-09-20T21:26:41Z

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

tinkerberlin · 2023-09-21T07:36:38Z

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

OzGav · 2023-09-21T09:17:03Z

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 · 2023-09-21T13:24:57Z

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 · 2023-09-21T17:44:35Z

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:

exetico · 2023-09-21T17:57:25Z

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 · 2023-09-22T08:46:10Z

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 · 2023-09-22T09:59:53Z

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

tinkerberlin · 2023-09-22T10:03:32Z

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

OzGav · 2023-09-22T10:08:32Z

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 · 2023-09-22T10:46:49Z

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 · 2023-09-22T10:54:29Z

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 · 2023-09-22T11:00:01Z

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 · 2023-09-22T11:02:31Z

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 · 2023-09-22T12:27:57Z

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 · 2023-09-22T13:31:47Z

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 :

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.

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 · 2023-09-22T14:22:26Z

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

bernji · 2023-09-22T18:33:32Z

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 · 2023-09-22T18:53:47Z

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 · 2023-09-23T09:51:59Z

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 · 2023-09-23T09:57:07Z

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 · 2023-09-23T10:09:02Z

@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!!

…ultiple_linebreak_logics setText use cur. tspan or cr. multiple if \n #357

exetico · 2023-09-23T14:40:01Z

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?

Logics are now changed and implemented in:
https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.39

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.

Maybe I walked through the posts a bit too fast. I just though you had quite a few hardcoded things on each tspan element, instead of handling that part in the CSS-file, which I'll always recommend, whenever possible 😃.

bernji · 2023-09-23T18:53:27Z

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

zen2 · 2023-09-23T21:34:51Z

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

If you want quick and easy result, I advice you to use Sweethome3D that is really easy to use to make your plan and render a picture in 3D of it. You can set the camera to have a 3D picture that is really similar to 2D one.
Then you import this picture (as incorporated) in inkscape to use it as a background so like it you have only home assistant element to manage by importing svg icons and so on.... You can see a screenshot of my floorplan based on this method: #357 (comment)

The big advantage is that you can change the picture easily in future and replace quickly element on it if needed. In fact you can use whatever you want to make the background picture.

tinkerberlin · 2023-09-24T06:52:53Z

@exetico:

Maybe I walked through the posts a bit too fast. I just though you had quite a few hardcoded things on each tspan element, instead of handling that part in the CSS-file, which I'll always recommend, whenever possible 😃.

No worries. I originally (and also now after the update) had nothing hard-coded in the svg (to my knowledge). I would simply create the text element, give it a "name" and then reference that "name" in the floorplan-code. Hardcoding x/y-values was one of the suggestions / something I tried so as to "fix" the original problem. My intent was always to just use the svg-file inkscape gave me and then change the text's look (mainly color) depending on various sensors' values (e.g. color = red if heater is heating; color = black if heater is not heating). :-)

@zen2: I have tried SH3D in the past. But I will look at it again going forward. Just as an explanation, of what I found to be so easy with PPT (in case other people are wondering). A) If you got office, it's entirely free and you can export SVG files that can then be read into (for example) inkscape. B) since you don't have nearly as many functions as with other programs, making very simple 2D floorplans (see my example below) is super easy. I just created a template wall, window, and door (in both horizontal and vertical orientation) and then copy/pasted those templates into the slide / above the background image. In inkscape then, I create the overlay elements (e.g. for lights being on or off) and I also do all the fine edits in inkscape.

Yes I know PPT is far from perfect, but for simply putting a bunch of rectangles together, it worked suprisngly well and easily. ;-)

My example (the textfields need some work still, but this is just about the floorplan itself):

Electronlibre2012 added the waiting on review Issues which are not categorized, yet. label Aug 16, 2023

Electronlibre2012 changed the title ~~floorplan text for sensors have mooved at a wrong position after update to 1.is not[BUG]~~ floorplan text for sensors have mooved at a wrong position after update to 1.0.37 [BUG] Aug 16, 2023

exetico closed this as completed Sep 22, 2023

exetico added a commit that referenced this issue Sep 23, 2023

setText use cur. tspan or cr. multiple if \n #357

940541a

exetico mentioned this issue Sep 23, 2023

setText use cur. tspan or cr. multiple if \n #357 #369

Merged

exetico added a commit that referenced this issue Sep 23, 2023

Merge pull request #369 from ExperienceLovelace/bug/tspan_single_vs_m…

85793b0

…ultiple_linebreak_logics setText use cur. tspan or cr. multiple if \n #357

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

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

Comments

Electronlibre2012 commented Aug 16, 2023

exetico commented Aug 16, 2023

MackoMici commented Aug 17, 2023

Electronlibre2012 commented Aug 17, 2023

Electronlibre2012 commented Aug 17, 2023

MackoMici commented Aug 17, 2023

Electronlibre2012 commented Aug 18, 2023 • edited Loading

exetico commented Aug 18, 2023

Electronlibre2012 commented Aug 18, 2023

OzGav commented Aug 18, 2023

Electronlibre2012 commented Aug 18, 2023

OzGav commented Aug 18, 2023

OzGav commented Aug 18, 2023

Electronlibre2012 commented Aug 18, 2023

Electronlibre2012 commented Aug 18, 2023

MackoMici commented Aug 18, 2023

OzGav commented Aug 18, 2023 • edited Loading

Electronlibre2012 commented Aug 18, 2023 • edited Loading

Electronlibre2012 commented Aug 18, 2023

Electronlibre2012 commented Aug 18, 2023 • edited Loading

Electronlibre2012 commented Aug 18, 2023

zen2 commented Aug 19, 2023

Electronlibre2012 commented Aug 19, 2023 • edited Loading

Electronlibre2012 commented Aug 19, 2023 • edited Loading

zen2 commented Aug 20, 2023 • edited Loading

bernji commented Sep 15, 2023

tinkerberlin commented Sep 20, 2023

OzGav commented Sep 20, 2023 • edited Loading

tinkerberlin commented Sep 20, 2023

OzGav commented Sep 20, 2023

tinkerberlin commented Sep 21, 2023

OzGav commented Sep 21, 2023

tinkerberlin commented Sep 21, 2023

zen2 commented Sep 21, 2023 • edited Loading

exetico commented Sep 21, 2023 • edited Loading

tinkerberlin commented Sep 22, 2023

OzGav commented Sep 22, 2023

tinkerberlin commented Sep 22, 2023

OzGav commented Sep 22, 2023 • edited Loading

OzGav commented Sep 22, 2023

OzGav commented Sep 22, 2023 • edited Loading

tinkerberlin commented Sep 22, 2023

tinkerberlin commented Sep 22, 2023

zen2 commented Sep 22, 2023 • edited Loading

exetico commented Sep 22, 2023 • edited Loading

exetico commented Sep 22, 2023

bernji commented Sep 22, 2023

exetico commented Sep 22, 2023

tinkerberlin commented Sep 23, 2023

tinkerberlin commented Sep 23, 2023

tinkerberlin commented Sep 23, 2023

exetico commented Sep 23, 2023

bernji commented Sep 23, 2023

zen2 commented Sep 23, 2023

tinkerberlin commented Sep 24, 2023

Electronlibre2012 commented Aug 18, 2023 •

edited

Loading

OzGav commented Aug 18, 2023 •

edited

Loading

Electronlibre2012 commented Aug 18, 2023 •

edited

Loading

Electronlibre2012 commented Aug 18, 2023 •

edited

Loading

Electronlibre2012 commented Aug 19, 2023 •

edited

Loading

Electronlibre2012 commented Aug 19, 2023 •

edited

Loading

zen2 commented Aug 20, 2023 •

edited

Loading

OzGav commented Sep 20, 2023 •

edited

Loading

zen2 commented Sep 21, 2023 •

edited

Loading

exetico commented Sep 21, 2023 •

edited

Loading

OzGav commented Sep 22, 2023 •

edited

Loading

OzGav commented Sep 22, 2023 •

edited

Loading

zen2 commented Sep 22, 2023 •

edited

Loading

exetico commented Sep 22, 2023 •

edited

Loading