Trouble Getting Values Into SVG

[jodysaliba]

I can't seem to get this to work. I'm attempting to get a proof of concept working just pulling in one temperature sensor value, but can't seem to get working.

Preview of SVG:

I'm using Illustrator, since I don't want to download a program solely to get this going, but it seems like there's nobody else in here that is using Illustrator (search turns up empty). There's not a menu to input an "ID" in Illustrator, but it appears that you can change the ID by naming the elements like below:

This is the output SVG from the above drawing:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1280px" height="720px" viewBox="0 0 1280 720" style="enable-background:new 0 0 1280 720;" xml:space="preserve">
<rect id="background" style="fill:#E57373;" width="1280" height="720"/>
<text id="sensor.attic-temperature" transform="matrix(1 0 0 1 355.8149 436.5)" style="font-family:'MyriadPro-Regular'; font-size:260;">##.#*</text>
</svg>

As you can see, the text element itself has an ID of sensor.attic-temperature, and I put it in a group just to try to troubleshoot.

I've created a card with the following YAML:

config:
  console_log_Level: info
  defaults:
    hover_action: hover-info
    tap_actionL: more-info
  image: /local/floorplan/test-floorplan.svg
  rules:
    - element: sensor.attic-temperature
      entity: sensor.attic_temperature
      state_action:
        action: call-service
        service: floorplan.text_set
        service_data: ${entity.state}
  stylesheet: /local/floorplan/test-floorplan.css
  full_height: false
type: custom:floorplan-card

However, the following is what I get:

I can't for the life of me figure out why the pinkish color is coming up transparent. Also, the placeholder "XX.X*" is extremely small and no value is displayed. My stylesheet is currently blank, as I just wanted to get a proof of concept going before attempting custom styles.

[jodysaliba]

Ok. made the change to my YAML (directly not caching the image):

config:
  console_log_Level: info
  defaults:
    hover_action: hover-info
    tap_actionL: more-info
  image:
    location: /local/floorplan/test-floorplan.svg
    cache: false
  rules:
    - element: sensor.attic-temperature
      entity: sensor.attic_temperature
      state_action:
        action: call-service
        service: floorplan.text_set
        service_data: ${entity.state}
  stylesheet: /local/floorplan/test-floorplan.css
  full_height: false
type: custom:floorplan-card

And now I get the following SVG:

But how do I get the service call to override the placeholder text?

[exetico]

Hi.

Is the SVG code the full file? What version of ha-floorplan are you using?

Try and wrap your text in a <tspan> element, inside the <text> element. That should resolve it, if you're using the newest released version.

This is a bit unrelated screenshot, but useful information for your case.

A tip for a simular situation: Try and look in the browsers dom code next time (inspect the HTML) 😊. I guess you'd spotted that we create a tspan element inside the text element.

[jodysaliba]

Hey. Yes, that was the total SVG file. I manually added the placeholder text in a tspan element (below) and it worked!

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1280px" height="720px" viewBox="0 0 1280 720" style="enable-background:new 0 0 1280 720;" xml:space="preserve">
<rect id="background" style="fill:#E57373;" width="1280" height="720"/>
<text id="sensor.attic-temperature" transform="matrix(1 0 0 1 355.8149 436.5)" style="font-family:'MyriadPro-Regular'; font-size:260;">
	<tspan id="tspan-test">##.#*</tspan>
</text>
</svg>

Result:

However, is there a way to automate the placement of the tspan elements? If I must, I guess I can take the time to do it once I finish the full design, but I'd prefer to create my SVG in a way that the export process does it for me. I saved it as SVG 1.1, but I have the below options avalable to me.

The below is what the layer window is showing when I re-open the SVG into Illustrator:

[exetico]

I'm not used to see Illustrator as the primary SVG generator for HA-floorplan. I understand your personal choice of going with that, but Inkscape can do so much for you. I'm not here to point you in another direction... But.... 😉

https://www.youtube.com/watch?v=f_3KAPc53hQ

And regarding the technical details:
We're not supporting a "force empty <text> element, and add tspan" right now, but that's a thing we can do, for sure.

Could I ask you to test this version:
#325 (comment)

I don't have time to review the logics of the code now, but if the above solution fixes your problems too, I'd focus on get that into the main branch :-) Kindly note that there's a few experimantal things in it, and a few console.logs too.