Hi i have a problem with msg.payload and svg node graphics

[Villarreal94]

Hello, i have the next flow...

And in the function node i put the next js...

But i have an error when show me in the debug console... i want to change colour with msg.payload of the image of the pump in svg file node... some solution please??

cannot connect or some error

[BartButenaers]

Hi @Villarreal94,
Welcome to this forum!
You can find a tutorial for that on my wiki page.
Bart

[Villarreal94]

Thank you! But I still don't understand the error why it appears in the debug console, what do I have to do with msg.payload?
In the case of CSS, would I have to place it in the function node or in svg? because i need the value of msg.payload as input to false or true...

[BartButenaers]

I am not quite sure what is not clear to you in my tutorial. There is an example flow in the tutorial, that you can import in your flow editor and explains how this works. And there also are some example payloads added, which you can just copy-paste.

You have used a completely different payload. Not sure where you got that from? But if you inject a message with some self-invented content, then nodes don't know what to do with it. So you will get errors

[Villarreal94]

Yes ill try to import the script ando view the flow anda the nodes, i have a PLC node s7 and i try to connect with a svg formato graphic and i don't know if i convert in json format, i'll see your nodes y i'll Say to You if i can connect, thanks!

[BartButenaers]

Just try to understand the simple example. In the wiki you find some other tutorials, and there is also info on the readme page about the input messages. As soon as you are familiar with the format, you need to try to build your own messages with that format.

As you can see the msg.payload always needs to contain a command, or an array of commands. Otherwise the node does not what it needs to do. If you don't specify a command, then the node expects a topic containing a command (which is also explained on the readme page). But since your payload does not contain a command, you get the error: "The specified msg.topic is not supported". But that will hopefully become clear after reading some of the documentation

[Villarreal94]

Yes your example show how change the colour of the image of the camera, but, in my case, i need with conditions for msg.payload to change the colours, because its boolean the data input, and i have a function node, with javascript, in your case its an inject node only, i need to read with if and else and run in the svg node

[Villarreal94]

And in your case its with a click on the camera image, in my case it's about conditions of the value of msg.payload... and thats my dude, i was trying all and i cannot change... i need develop conditions with javascript not with event on svg node i think... i dont know

[Villarreal94]

Uploading: image.png...

flow probe.txt (17.9 KB)

[dynamicdave]

I've taken your flow and replaced the S7 node (as I don't use it) with two Inject nodes.

Injecting 'true' or 'false' into your 'function 1' node seems to produce the correct visual response.

Maybe you should check the output from your serial node to make sure it is of type 'boolean'.

[Villarreal94]

Nice, but yo havent the problem of msg.topic?

Cause now i can view the change in the node svg graphics but i dont know the reason of that mistake..

[dynamicdave]

I don't understand your answer about msg.topic Where does that come in?
Where is node:cc2663cf...........?
If you give it a name it will be easier for people locate and advise you.

[Villarreal94]

Excuse me, it would be the node svg graphics

I don't know why I get that error... from msg.topic is not supported in the previous image in the debug

[dynamicdave]

If I put a debug node on the output pin of the SVG node I don't get an error.

Could you post the (revised) flow that is giving the error?

[Colin]

I don't use that node, but I notice that the messages that @Villarreal94 shows in the debug have no topic, whereas if your inject nodes are using the default setting they may be injecting an empty string. Perhaps that is the difference. I see that the SVG node does allow control data to be passed in via topic, perhaps it does not cope with a completely missing topic.

[dynamicdave]

Yes I spotted that, although in my test flow it didn't cause any errors.
That was my next suggestion - to remove the default "topic" from the Inject node as it serves no purpose.
Here is a revised flow to check-out.

[{"id":"ed05e7d079fb5e63","type":"debug","z":"6e8293384806f186","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":240,"wires":[]},{"id":"0ace04ddd9da919c","type":"ui_svg_graphics","z":"6e8293384806f186","group":"d91b0467b426ae08","order":0,"width":"5","height":"5","svgString":"<svg xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"1382.54345703125 394.55853271484375 410.8680419921875 356.9156494140625\" version=\"1.1\" id=\"svg5\" xml:space=\"preserve\" inkscape:version=\"1.2.2 (732a01da63, 2022-12-09)\" sodipodi:docname=\"Pump1.svg\" preserveAspectRatio=\"xMinYMin meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1920\" height=\"1080\" style=\"fill:none;stroke:none\"/><sodipodi:namedview id=\"namedview7\" pagecolor=\"#ffffff\" bordercolor=\"#000000\" borderopacity=\"0.25\" inkscape:showpageshadow=\"2\" inkscape:pageopacity=\"0.0\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\" inkscape:document-units=\"px\" showgrid=\"false\" inkscape:zoom=\"0.64379276\" inkscape:cx=\"665.58685\" inkscape:cy=\"542.87656\" inkscape:window-width=\"1920\" inkscape:window-height=\"1001\" inkscape:window-x=\"-9\" inkscape:window-y=\"-9\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"layer1\"/><defs id=\"defs2\"/><g inkscape:label=\"Capa 1\" inkscape:groupmode=\"layer\" id=\"layer1\"><g id=\"g319\" transform=\"matrix(0.86680977,0,0,0.82939545,279.83044,465.95041)\" style=\"image-rendering:auto\"><g id=\"Group_OutletPort\">\n\t\n\t\t<linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"119.3706\" y1=\"-412.02271\" x2=\"119.3706\" y2=\"-361.6145\" gradientTransform=\"matrix(1,0,0,-1,0,-360.895)\">\n\t\t<stop offset=\"0\" style=\"stop-color:#004C00\" id=\"stop131\"/>\n\t\t<stop offset=\"0.21\" style=\"stop-color:#007000\" id=\"stop133\"/>\n\t\t<stop offset=\"0.54\" style=\"stop-color:#4BA54B\" id=\"stop135\"/>\n\t\t<stop offset=\"0.64\" style=\"stop-color:#3D9E3D\" id=\"stop137\"/>\n\t\t<stop offset=\"0.79\" style=\"stop-color:#178B17\" id=\"stop139\"/>\n\t\t<stop offset=\"0.97\" style=\"stop-color:#006C00\" id=\"stop141\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop143\"/>\n\t</linearGradient>\n\t<rect x=\"110.662000\" y=\"0.7190165520220262\" fill=\"url(#SVGID_1_)\" stroke=\"#b3b3b3\" stroke-width=\"0.5\" width=\"13.101000\" height=\"50.408000\" id=\"rect146\" style=\"fill:url(#SVGID_1_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"83.070801\" y1=\"76.919701\" x2=\"83.070801\" y2=\"115.9207\" gradientTransform=\"matrix(1,0,0,-1,0,122.105)\">\n\t\t<stop offset=\"0\" style=\"stop-color:#004C00\" id=\"stop148\"/>\n\t\t<stop offset=\"0.52\" style=\"stop-color:#63B163\" id=\"stop150\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop152\"/>\n\t</linearGradient>\n\t<polyline fill=\"url(#SVGID_2_)\" points=\"51.0758,6.18403,110.748,6.18403,110.748,45.185,100.358,45.185\" id=\"polyline155\" style=\"fill:url(#SVGID_2_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_Legs\">\n\t\n\t\t<linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"52.528301\" y1=\"1094.1335\" x2=\"52.528301\" y2=\"1058.2527\" gradientTransform=\"translate(0,-973.75)\">\n\t\t<stop offset=\"0\" style=\"stop-color:#319831\" id=\"stop158\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop160\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_3_)\" stroke=\"#999999\" stroke-width=\"0.396\" d=\"M9.161749,120.384L19.415749,84.503h61.908l10.252,35.881H70.806749L50.302749,89.497L29.533749,120.384Z\" id=\"path163\" style=\"fill:url(#SVGID_3_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_LegBase\">\n\t<path fill=\"#319831\" stroke=\"#b3b3b3\" stroke-width=\"0.5\" d=\"m0.76,115.851h37.533v5.254H-1.399251Z\" id=\"path166\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t<path fill=\"#319831\" stroke=\"#b3b3b3\" stroke-width=\"0.5\" d=\"m66.603,115.851h37.929v5.254H64.443749Z\" id=\"path168\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_PumpBody\">\n\t\n\t\t<radialGradient id=\"SVGID_4_\" cx=\"126.48\" cy=\"837.1521\" r=\"51.565899\" gradientTransform=\"matrix(0.9999,0.0069,-0.0069,0.9999,-67.9976,-780.2224)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.18\" style=\"stop-color:#003200\" id=\"stop171\"/>\n\t\t<stop offset=\"0.26\" style=\"stop-color:#003700\" id=\"stop173\"/>\n\t\t<stop offset=\"0.35\" style=\"stop-color:#004400\" id=\"stop175\"/>\n\t\t<stop offset=\"0.44\" style=\"stop-color:#005B00\" id=\"stop177\"/>\n\t\t<stop offset=\"0.54\" style=\"stop-color:#007A00\" id=\"stop179\"/>\n\t\t<stop offset=\"0.64\" style=\"stop-color:#47A347\" id=\"stop181\"/>\n\t\t<stop offset=\"0.72\" style=\"stop-color:#97CB97\" id=\"stop183\"/>\n\t\t<stop offset=\"0.81\" style=\"stop-color:#61B061\" id=\"stop185\"/>\n\t\t<stop offset=\"0.99\" style=\"stop-color:#006A00\" id=\"stop187\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop189\"/>\n\t</radialGradient>\n\t<path fill=\"url(#SVGID_4_)\" d=\"M50.887749,6.158C79.364749,6.354,102.289749,29.597,102.094749,58.075C101.899749,86.55,78.656749,109.473,50.180749,109.279C21.702749,109.086,-1.221251,85.841,-1.026251,57.364C-0.833251,28.889,22.413749,5.963,50.887749,6.158Z\" id=\"path192\" style=\"fill:url(#SVGID_4_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_CenterShade\">\n\t\n\t\t<radialGradient id=\"SVGID_5_\" cx=\"52.4468\" cy=\"-418.72681\" r=\"27.244101\" gradientTransform=\"matrix(1,0,0,-1,0,-360.895)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0\" style=\"stop-color:#000000\" id=\"stop195\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#003200\" id=\"stop197\"/>\n\t</radialGradient>\n\t<path fill=\"url(#SVGID_5_)\" d=\"M36.239749,81.168C23.348749,73.407,19.190749,56.67,26.951749,43.78C34.713749,30.892,51.453749,26.735,64.336749,34.495c12.891,7.761,17.047,24.498,9.289,37.393c-7.764,12.881,-24.499,17.04,-37.386,9.28Z\" id=\"path200\" style=\"fill:url(#SVGID_5_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_Impeller\">\n\t\n\t\t<linearGradient id=\"SVGID_6_\" gradientUnits=\"userSpaceOnUse\" x1=\"101.9819\" y1=\"125.5398\" x2=\"106.1411\" y2=\"125.5342\" gradientTransform=\"matrix(0.9889,0.1484,0.1484,-0.9889,-69.6528,166.4384)\">\n\t\t<stop offset=\"0.01\" style=\"stop-color:#006500\" id=\"stop203\"/>\n\t\t<stop offset=\"0.51\" style=\"stop-color:#6FB76F\" id=\"stop205\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop207\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_6_)\" d=\"m51.014,77.055c-0.642,4.14,-2.024,7.351,-3.166,7.187c-1.139,-0.165,-1.545,-3.651,-0.902,-7.789l0.014,-0.081l5.874,-37.983c0.64,-4.139,1.986,-7.314,3.125,-7.149c1.142,0.163,1.507,3.623,0.866,7.76Z\" id=\"path210\" style=\"fill:url(#SVGID_6_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<linearGradient id=\"SVGID_7_\" gradientUnits=\"userSpaceOnUse\" x1=\"-277.9653\" y1=\"21.0618\" x2=\"-273.8071\" y2=\"21.0562\" gradientTransform=\"matrix(0.6317,-0.7752,-0.7752,-0.6317,243.0495,-142.3917)\">\n\t\t<stop offset=\"0.01\" style=\"stop-color:#006500\" id=\"stop212\"/>\n\t\t<stop offset=\"0.51\" style=\"stop-color:#6FB76F\" id=\"stop214\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop216\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_7_)\" d=\"m68.625,68.765c3.234,2.659,5.291,5.485,4.57,6.387c-0.724,0.895,-3.931,-0.533,-7.162,-3.193L63.810749,71.906L34.124749,47.493c-3.234,-2.66,-5.28,-5.437,-4.559,-6.333c0.722,-0.898,3.884,0.55,7.117,3.21Z\" id=\"path219\" style=\"fill:url(#SVGID_7_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<linearGradient id=\"SVGID_8_\" gradientUnits=\"userSpaceOnUse\" x1=\"216.76511\" y1=\"433.11789\" x2=\"220.92329\" y2=\"433.1123\" gradientTransform=\"matrix(0.4225,0.9064,0.9064,-0.4225,-432.8737,42.0522)\">\n\t\t<stop offset=\"0.01\" style=\"stop-color:#006500\" id=\"stop221\"/>\n\t\t<stop offset=\"0.51\" style=\"stop-color:#6FB76F\" id=\"stop223\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop225\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_8_)\" d=\"m35.58,67.368c-3.803,1.752,-7.245,2.373,-7.739,1.332c-0.491,-1.041,2.193,-3.306,5.994,-5.057L31.751749,63.61L66.660749,47.527c3.805,-1.752,7.195,-2.384,7.686,-1.345c0.494,1.041,-2.188,3.258,-5.99,5.008Z\" id=\"path228\" style=\"fill:url(#SVGID_8_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<radialGradient id=\"SVGID_9_\" cx=\"51.976601\" cy=\"64.424599\" r=\"6.5409999\" gradientTransform=\"matrix(1,0,0,-1,0,122.105)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0\" style=\"stop-color:#6FB76F\" id=\"stop230\"/>\n\t\t<stop offset=\"0.47\" style=\"stop-color:#6BB56B\" id=\"stop232\"/>\n\t\t<stop offset=\"0.64\" style=\"stop-color:#5DAE5D\" id=\"stop234\"/>\n\t\t<stop offset=\"0.76\" style=\"stop-color:#45A245\" id=\"stop236\"/>\n\t\t<stop offset=\"0.85\" style=\"stop-color:#239123\" id=\"stop238\"/>\n\t\t<stop offset=\"0.94\" style=\"stop-color:#007C00\" id=\"stop240\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop242\"/>\n\t</radialGradient>\n\t<path fill=\"url(#SVGID_9_)\" d=\"m53.274,51.269c3.543,0.718,5.829,4.168,5.11,7.709c-0.717,3.544,-4.167,5.83,-7.71,5.113c-3.536,-0.719,-5.824,-4.171,-5.105,-7.711c0.715,-3.536,4.17,-5.828,7.705,-5.111Z\" id=\"path245\" style=\"fill:url(#SVGID_9_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g></g></g></svg>","clickableShapes":[{"targetId":"#path192","action":"change","payload":"path192","payloadType":"str","topic":"path192"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit;\n}","name":"","x":660,"y":280,"wires":[["cb25cf5e5d3f15c0"]]},{"id":"5a6afd53f4176e72","type":"function","z":"6e8293384806f186","name":"function 1","func":"var css = '';\nif (msg.payload == true) {\n    css = {\n        \"command\": \"update_style\",\n        \"selector\": \"#path192\",\n        \"attributeName\": \"fill\",\n        \"attributeValue\": \"red\"\n    }; // Cambia el color de relleno a rojo si el valor es true\n} else {\n    css = {\n        \"command\": \"update_style\",\n        \"selector\": \"#path192\",\n        \"attributeName\": \"fill\",\n        \"attributeValue\": \"blue\"\n    }; // Cambia el color de relleno a verde si el valor es false\n}\n\nmsg.payload = css;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":280,"wires":[["0ace04ddd9da919c","ed05e7d079fb5e63"]]},{"id":"674ec7e4b70f6e75","type":"inject","z":"6e8293384806f186","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":330,"y":260,"wires":[["5a6afd53f4176e72"]]},{"id":"bf6529d3748ac904","type":"inject","z":"6e8293384806f186","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":330,"y":300,"wires":[["5a6afd53f4176e72"]]},{"id":"cb25cf5e5d3f15c0","type":"debug","z":"6e8293384806f186","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":840,"y":280,"wires":[]},{"id":"aceebe33d2f42ec4","type":"comment","z":"6e8293384806f186","name":"Revised flow with msg.topic removed from Inject nodes","info":"","x":460,"y":180,"wires":[]},{"id":"d91b0467b426ae08","type":"ui_group","name":"Project 1","tab":"3d6b404125e26ac7","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"3d6b404125e26ac7","type":"ui_tab","name":"Group 1","icon":"dashboard","disabled":false,"hidden":false}]