Closed Electronlibre2012 closed 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.
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>
ok thanks i will sent you the files tonight.
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?
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.
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
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.)
here is the .svg
Have you tried the fix that @MackoMici suggested?
well...i dont know where modify this data in my .svg sorry, i use Inkscape
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
You can also post the css you have for static-temp
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"
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
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.
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...
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
<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)"
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
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.
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
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.
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.
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>
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.
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
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.
Try and delete and recreate one of these entities that are moving.
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".)
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.
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.
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:
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!
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.
Do you really mean to say “text BOX”? Are you not using a simple text object?
Sorry, I believe I'm using the text object.
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)
I think this was recommended above. Remove all reference to font and text alignment in your css. This should be set in your SVG.
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%'
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. :-(
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.
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 ?
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! 😄
Release 1.0.38 is here: https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.38
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?
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.
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 ;-)
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!
@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!!
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):
Smartphone (please complete the following information):
Share configuration Please share:
YAML
Additional context Add any other context about the problem here.