Working with svg

Dashboard
1

Hi everyone ! I found some code , and i want to modify it , to be able to change the color of two svg rechtangle., but i stucked. If i click on the button , it works well for one rechtangle , but the another became black.

this is the code:[{"id":"8d159deb.79f54","type":"tab","label":"templateFile","disabled":false,"info":"Trying to use a file instead of code int template node."},{"id":"e2611ae2.44df68","type":"function","z":"8d159deb.79f54","name":"nameLabel ColorText ID label","func":"msg.color1 = (msg.payload === \"on\")?\"red\":\"lime\";\nmsg.textColor = \"white\";\nmsg.ID1 = \"svg_1\";\nmsg.nameLabel =\"Text w LED\";\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":140,"wires":[["3e519f6c.09fe"]]},{"id":"848396c9.59b1f8","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":80,"wires":[["ab21bd1a.3c817"]]},{"id":"a351e98b.c35bf8","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"anything else","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":140,"wires":[["20d44052.274d6"]]},{"id":"ab21bd1a.3c817","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"green","color":"","bgcolor":"","icon":"fa-fire","payload":"asdf","payloadType":"str","topic":"","x":270,"y":80,"wires":[["e2611ae2.44df68"]]},{"id":"20d44052.274d6","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"red","color":"","bgcolor":"","icon":"fa-fire","payload":"on","payloadType":"str","topic":"","x":270,"y":140,"wires":[["e2611ae2.44df68"]]},{"id":"3e519f6c.09fe","type":"template","z":"8d159deb.79f54","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<style>\n\n.svg_1 {\n stroke: none;\n fill : {{color1}};\n \n}\n.svg_2{\n stroke: none;\n fill : {{color2}};\n \n}\n\n</style>\n\n<svg width=\"580\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->\n <g>\n <title>background</title>\n <rect fill=\"#fff\" id=\"canvas_background\" height=\"402\" width=\"582\" y=\"-1\" x=\"-1\"/>\n <g display=\"none\" overflow=\"visible\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" id=\"canvasGrid\">\n <rect fill=\"url(#gridpattern)\" stroke-width=\"0\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\"/>\n </g>\n </g>\n <g>\n <title>Layer 1</title>\n <rect class =\"svg_1\" id=\"svg_1\" height=\"127\" width=\"147\" y=\"33.4375\" x=\"27.5\" stroke-width=\"1.5\" stroke=\"#000\" />\n <rect class =\"svg_2\" id=\"svg_2\" height=\"152\" width=\"191\" y=\"210.4375\" x=\"330.5\" stroke-width=\"1.5\" stroke=\"#000\" />\n \n </g>\n</svg>","output":"str","x":800,"y":200,"wires":[["bc1ac945.821798"]]},{"id":"bc1ac945.821798","type":"ui_template","z":"8d159deb.79f54","group":"91ff15b6.fc5c28","name":"","order":0,"width":"15","height":"10","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":960,"y":200,"wires":[[]]},{"id":"331cec3d.cc0714","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":280,"wires":[["d609d141.8f274"]]},{"id":"45a79ebd.aaed3","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"anything else","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":340,"wires":[["18e32917.817ae7"]]},{"id":"d609d141.8f274","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"green","color":"","bgcolor":"","icon":"fa-fire","payload":"asdf","payloadType":"str","topic":"","x":270,"y":280,"wires":[["9ed544a0.e0e1b8"]]},{"id":"18e32917.817ae7","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"red","color":"","bgcolor":"","icon":"fa-fire","payload":"on","payloadType":"str","topic":"","x":270,"y":340,"wires":[["9ed544a0.e0e1b8"]]},{"id":"9ed544a0.e0e1b8","type":"function","z":"8d159deb.79f54","name":"nameLabel ColorText ID label","func":"msg.color2 = (msg.payload === \"on\")?\"red\":\"lime\";\nmsg.textColor = \"white\";\nmsg.ID2 = \"svg_2\";\n\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":260,"wires":[["3e519f6c.09fe"]]},{"id":"91ff15b6.fc5c28","type":"ui_group","z":"","name":"Default","tab":"28de6aa.bc23196","disp":true,"width":"15","collapse":false},{"id":"28de6aa.bc23196","type":"ui_tab","z":"","name":"tests","icon":"dashboard"}]

2

Your flow could do with some debug nodes in which would help you to see what is happening.

When you click on a button, you either get a message with color1 OR color2. Your template has no memory of the previous messages which is why one changes colour and the other goes black.

One solution would be to save the colour in each side to the context store. Then when a button is pressed you get the other colour setting from the context. See https://nodered.org/docs/writing-functions#storing-data on how to store data.

4

Thank you very mutxh !
I still have some problem with the style

This is not working , how should i do it ?

.svg_1 {
stroke: none;
fill : {{global.get("color1")}};

}
.svg_2{
stroke: none;
fill : {{global.get("color2")}};

}

and the svg code :

 <rect  id="svg_1" height="127" width="147" y="33.4375" x="27.5" stroke-width="1.5" stroke="#000" />
  <rect  id="svg_2" height="152" width="191" y="210.4375" x="330.5" stroke-width="1.5" stroke="#000"   />
5

I wouldn't even try to do it that way.

Use the function nodes you already have to set the value it has and to get the value it doesn't have.

6

I tried it different ways, but not of them was good. Could you or someone help me out with some code ?

Mine :

[{"id":"8d159deb.79f54","type":"tab","label":"templateFile","disabled":false,"info":"Trying to use a file instead of code int template node."},{"id":"e2611ae2.44df68","type":"function","z":"8d159deb.79f54","name":"nameLabel ColorText ID label","func":"if(msg.payload === "on")\n{\n msg.color1 = "green";\n global.set("color1",msg.color1);\n}\nif(msg.payload === "off")\n{\n msg.color1 = "red";\n global.set("color1",msg.color1);\n}\nelse\n{\n msg.color1=global.get("color1");\n \n}\nmsg.textColor = "white";\nmsg.ID = "svg_1";\nmsg.nameLabel ="Text w LED";\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":160,"wires":[["33975b1f.bf4f44","9c023e43.b2032"]]},{"id":"848396c9.59b1f8","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":80,"wires":[["ab21bd1a.3c817"]]},{"id":"a351e98b.c35bf8","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":140,"wires":[["20d44052.274d6"]]},{"id":"ab21bd1a.3c817","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"green","tooltip":"","color":"","bgcolor":"","icon":"fa-fire","payload":"on","payloadType":"str","topic":"","x":270,"y":80,"wires":[["e2611ae2.44df68"]]},{"id":"20d44052.274d6","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"red","tooltip":"","color":"","bgcolor":"","icon":"fa-fire","payload":"off","payloadType":"str","topic":"","x":270,"y":140,"wires":[["e2611ae2.44df68"]]},{"id":"bc1ac945.821798","type":"ui_template","z":"8d159deb.79f54","group":"91ff15b6.fc5c28","name":"","order":0,"width":"15","height":"10","format":"<div ng-bind-html="msg.payload">","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":940,"y":200,"wires":[]},{"id":"331cec3d.cc0714","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":280,"wires":[["d609d141.8f274"]]},{"id":"45a79ebd.aaed3","type":"inject","z":"8d159deb.79f54","name":"","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":340,"wires":[["18e32917.817ae7"]]},{"id":"d609d141.8f274","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"green","tooltip":"","color":"","bgcolor":"","icon":"fa-fire","payload":"on","payloadType":"str","topic":"","x":270,"y":280,"wires":[["9ed544a0.e0e1b8"]]},{"id":"18e32917.817ae7","type":"ui_button","z":"8d159deb.79f54","name":"","group":"91ff15b6.fc5c28","order":0,"width":0,"height":0,"passthru":false,"label":"red","tooltip":"","color":"","bgcolor":"","icon":"fa-fire","payload":"off","payloadType":"str","topic":"","x":270,"y":340,"wires":[["9ed544a0.e0e1b8"]]},{"id":"9ed544a0.e0e1b8","type":"function","z":"8d159deb.79f54","name":"nameLabel ColorText ID label","func":"if(msg.payload === "on")\n{\n msg.color2 = "green";\n global.set("color2",msg.color2);\n}\nif(msg.payload === "off")\n{\n msg.color2 = "red";\n global.set("color2",msg.color2);\n}\nelse\n{\n msg.color2=global.get("color2");\n \n}\nmsg.textColor = "white";\nmsg.ID = "svg_2";\nmsg.nameLabel ="Text w LED";\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":260,"wires":[["33975b1f.bf4f44","e39c089c.cc0cb8"]]},{"id":"33975b1f.bf4f44","type":"template","z":"8d159deb.79f54","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n#svg_1 {\n stroke: none;\n fill : {{color1}};\n \n}\n#svg_2{\n stroke: none;\n fill : {{color2}};\n \n}\n\n\n<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg\">\n \n \n background\n <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>\n <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">\n <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>\n \n \n \n Layer 1\n <rect id="svg_1" height="127" width="147" y="33.4375" x="27.5" stroke-width="1.5" stroke="#000" />\n <rect id="svg_2" height="152" width="191" y="210.4375" x="330.5" stroke-width="1.5" stroke="#000" />\n \n \n","output":"str","x":780,"y":200,"wires":[["bc1ac945.821798"]]},{"id":"9c023e43.b2032","type":"debug","z":"8d159deb.79f54","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"color1","x":790,"y":120,"wires":},{"id":"e39c089c.cc0cb8","type":"debug","z":"8d159deb.79f54","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"color2","x":870,"y":300,"wires":},{"id":"91ff15b6.fc5c28","type":"ui_group","z":"","name":"Default","tab":"28de6aa.bc23196","disp":true,"width":"15","collapse":false},{"id":"28de6aa.bc23196","type":"ui_tab","z":"","name":"tests","icon":"dashboard"}]

7

In your first function

msg.color1 = (msg.payload === "on")?"red":"lime";
msg.textColor = "white";
msg.ID1 = "svg_1";
msg.nameLabel ="Text w LED";
global.set("color1",msg.color1)
msg.color2  = context.get('color2')||"black";
return msg;

and something similar in your second function...

1 Like