Passing SVG code to template_UI - not showing in dashboard

[adiculiniute]

Hello!

I spend days to achieve this, and I did not manage to success..
I have a PHP script that renders a SVG code, (drawing a boiler). In browser everything is Ok.
In node-red I am using an httprequest to output the php result and the template_ui for displaing it in the dashboard.

So what is happening is this:

I'm trying to pass the SVG code trough msg.payload (from httprequest node )but it always escapes the html entities and the SVG code is not rendered by the browser, but instead it's showed as plain text.

Anyone knows how I could force NODERED to not escape HTML entities ?

HTML Entities ESCAPED

[code] <svg xmlns="SVG namespace" xmlns:xlink="XLink namespace" viewBox="50 0 180 240">

				<defs>
				<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">[/code]

HTML entities NOT ESCAPED

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="50 0 180 240"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color: #9FD805;stop-opacity:1"/> <stop offset="25%" style="stop-color: #9FD805;stop-opacity:1"/>

How can I resolve this?

Any help would be appreciated.
Thank you !
Adrian

[adiculiniute]

here is my flow:

[{"id":"a7a3cd81.a426","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"342f2cba.90b274","type":"http request","z":"a7a3cd81.a426","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://home.adrianc.ro/test.php","tls":"","persist":false,"proxy":"","authType":"","x":310,"y":300,"wires":[["16cc787.eda7588"]]},{"id":"16cc787.eda7588","type":"ui_template","z":"a7a3cd81.a426","group":"4d40832c.a3bc1c","name":"pftest","order":17,"width":"6","height":"8","format":"<div id=\"pf\" style=\"width: 300px;height:300px;border:1px solid #fff;\"></div>\n<script>\ndocument.getElementById(\"pf\").innerHTML ={{msg.payload}};\nalert({{msg.payload}});\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":490,"y":300,"wires":[["25629043.7ceb4"]]},{"id":"25629043.7ceb4","type":"debug","z":"a7a3cd81.a426","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":300,"wires":[]},{"id":"fde7c9b3.d53128","type":"inject","z":"a7a3cd81.a426","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":300,"wires":[["342f2cba.90b274"]]},{"id":"4d40832c.a3bc1c","type":"ui_group","z":"","name":"Puffer test","tab":"58747d35.565884","order":6,"disp":true,"width":10,"collapse":false},{"id":"58747d35.565884","type":"ui_tab","z":"","name":"_ADI_'s Smart Home dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[Steve-Mcl]

Try triple braces {{{msg.payload}}}

PS, have you seen the ui-svg node? It greatly simplifies receiving events from elements, performing animations and binding attributes for dynamic SVG.

[adiculiniute]

I also tryed triple braces and all sort of combination.
Righ now I even tryed svg_ui with msg.payload in the SVG body. It shows blank.
The dashboard refuse to parse the code. Why in the world is happening this?

My goal is to draw a svg representing a boiler, with gradient colors depending on the temperature of the boiler. for this, I need to extract temperature data from mysql database, put some conditions regarding the value of the temp, and pass it throught ui_template or svg_ui or whatever, to display it in the dashboard.
All of these code, is done in PHP... because I am not a programmer, it is very hard for me to write functions and all sort of stuff in node red to achieve this only with svg_ui.

The interesting part is, that I have a solution that works, but its the last solution to go to.
I can export the svg code, throught PHP, to a file, "picture.svg". And after that with template_ui I can import it to dashboard and it works. This solution, unfortunately needs refreshing the whole dashboard for changes to take effect.

Is there any other solution, something that I am missing?
I prefer going my way, with php...unless someone can show me other ways to do it...

Thank you!

[BartButenaers]

@adiculiniute

Righ now I even tryed svg_ui with msg.payload in the SVG body. It shows blank

Hey @adiculiniute,
Can you share a simplified version of your flow where you use our svg-ui node. Just a very simple flow, and explain what you expect to see. Perhaps when can get you started with it ...
Bart

[adiculiniute]

Sure.
I have a php that literally, does everything, and draws the SVG. It's output looks like this:
http://home.adrianc.ro/test.php
So, with the help of the http request node, I can output the SVG code that the php file creates. (I see that it's working in debug window of node-red)

Now, this output I want to link to svg_ui (or template_ui) to display the created svg in the dashboard.
So I made the flow (you can see in the picture attached).
In the svg_ui node settings, in the svg section I put the {{msg.payload}}, because this is where the svg code needs to be.
After deploy, it wont display in the dashboard. If I return to the svg_ui node, and I copy/paste the code from debug window, (you can see it in the right part ot the image) directly in the SVG section of the svg_ui node, the SVG is correctly displayed in the dashboard.

I don't know why it doesen't show up with the code received from the payload.This is very frustrating.

[adiculiniute]

[{"id":"dcfc4345.6fbfe","type":"inject","z":"b2717a7b.1f2c28","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":300,"wires":[["fd4ea1db.36174"]]},{"id":"fd4ea1db.36174","type":"http request","z":"b2717a7b.1f2c28","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://home.adrianc.ro/test.php","tls":"","persist":false,"proxy":"","authType":"","x":430,"y":300,"wires":[["6c6ab2ca.17370c","285aa97f.247696"]]},{"id":"285aa97f.247696","type":"debug","z":"b2717a7b.1f2c28","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":240,"wires":[]},{"id":"6c6ab2ca.17370c","type":"ui_svg_graphics","z":"b2717a7b.1f2c28","group":"4d40832c.a3bc1c","order":17,"width":0,"height":0,"svgString":"{{msg.payload}}","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"test","x":590,"y":340,"wires":[[]]},{"id":"4d40832c.a3bc1c","type":"ui_group","z":"","name":"Puffer test","tab":"58747d35.565884","order":6,"disp":true,"width":10,"collapse":false},{"id":"58747d35.565884","type":"ui_tab","z":"","name":"_ADI_'s Smart Home dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[BartButenaers]

The {{msg.payload}} inside the SVG tabsheet won't xork, because we don't support that kind of Mustche expressions like e.g. the Template does. Instead I assume you need e.g. the replace-svg command.

If I where you, I would simplify your setup because generating a file via php looks quite complex to me.

Can't you just copy that svg to our svg tabsheet, and control it via messages. There are quite some control possibilities with this node...

[adiculiniute]

Ok. I will forget the svg_ui node then. I will use template_ui instead, and that is because the hard work for generating SVG colors based on the temperatures values stored in a mysql database, is done in php. Thats why I prefer this method.

The only problem I have now, using the template_ui is that the SVG code arrives in the browser deprecated (as shown in the picture)
Somehow the dashboard replaces the < > signs with < and &gt.... Why is doing that? How can I overcome this?

Thank you!

[Steve-Mcl]

@adiculiniute

I will forget the svg_ui node then. I will use template_ui instead, and that is because the hard work for generating SVG colors based on the temperatures values stored in a mysql database, is done in php. Thats why I prefer this method

Have you actually tried the binding and events capabilities in ui-svg node? I can't imagine hand coded php being easier than using a database node to grab data then pass it into the ui-svg node. This would completely cut out the middle man making for a dynamic runtime modifiable solution in one place.

[adiculiniute]

Sincerely no, since I am not a programmer, and I dont have basics knowledge of writing functions ...etc, the php is something that I understand.

Well here is the solution, from a russian telegram group of node-red, wich I am thankful (This is the code for the template_ui node). And it works well:

<div id="svg"></div>
<script>
    ;(function(scope) {
        scope.$watch('msg', function(msg) {
            if (msg.payload) {
                $('#svg').html(msg.payload);
            }
        })
    })(scope)
</script>

[Steve-Mcl]

Fair enough, however...

The ui-svg takes all the code away from you (it's pretty much point and click)

But if you don't want to use it & want to go the hard way, that's up to you.