Hello All
I have several sensors and would like to have a graphic interface, by using the house blue print has a background be able to show the sensors values ( temperature or lights) and also be able to turn on/off in the specific locations.
Is there any basic example that i may adpot.
Thank you all
What is the file format of your digital house blue print (floorplan) file ? png, jpeg, svg, etc ?
I am using a png and i am able to place the temperature and indicators from the my data. My wish is to be able to click in a icon and and start an action. i.e clik in an light icon and turn on the lights
Hello
I am using an excellent tutorial
What is missing is the reverse, how would I click an icon and cause an action
Kind regards
José Godinho
I don't know if this is of any help, but there is a great javascript library called leaflet js
https://leafletjs.com/
You may be able to embed the the functionality you require into an http response node.
I'd be interested to see how you get on with this
Cheers
Michael
Hello Michael
I will try, but i just resume coding after 30 years, I only "speak" pre-historic languages ..... gw Basic .... and visual basic .....
thank you
Michael Dalby nodered@discoursemail.com escreveu no dia sexta, 7/09/2018 Ă (s) 09:10:
Leaflet is really for mapping - but I guess could be made to work in this scenario - but does sound like extra complexity unless you have all your sensors and switches fully gps located 
Depends what you mean by click on an icon - there are obviously switches etc already built into dashboard. If you mean fully custom then look at the ui-template node that does have a simple example of adding a button to send a message.
Dave,
seems that you can use Leaflet for floorplans (see demo), but indeed not much GPS located sensors at home 
I also need such an interactive floorplan, and I'm a bit surprised that nobody has published one yet. So just need to find a free timeslice to start experimenting with it ...
Bart
well if you want to use leaflet then the worldmap node can probably do 90% of what you want. At the moment clicking opens a popup but happy to discuss options on adding more options.
Thanks Dave for the proposal! Nice contribution ...
Have never used the worldmap node before, since I didn't need a worldmap until now ... But it indeed contains 'most' of the drawing stuff (controlled via input messages) that we need. But are you sure we are allowed to tweak the worldmap node, to be able to draw our floorplans? Seems like we are abusing your node. Especially with the very specific coordinate system...
Don't know it it is possible, but wouldn't it be better if all he drawing stuff would be isolated in a general drawing node. And then your worldmap node and our floorplan nodes both depend on (or reuse?) that general drawing node. Does this makes sense or am I telling nonsense? But not a clue at the moment how to handle something like that in Javascript ...
Hmm, lets think 
We already have something (in addition to the worldmap) that is actually pretty close as long as you would accept a more abstract view. That is the Node-RED admin UI. Built over D3.
Perhaps a follow-on from the v0.20 split that is currently being worked on?
@TotallyInformation - "the editor is NOT a dashboard...."
@BartButenaers - no - I have no interest in alternative co-ordinate systems... feel free to fork it !
Ok Dave, will see what I can do... But anyway, most credits go to the author of the worldmap contribution. Don't know him, but he looks like a nice chap...
Yeah. Every now and then he does a good thing
haha, "yet"!
But who knows what interesting and innovative purposes it will be put to in the future 
Hello All
My question is very simple for you wizards in Angular HTML.
I just would appreciate your support in getting a click on a icon action to complement the following script ( This info is copied from the link mentioned by me in the initial post )
THANK YOU
<div style="background: url(http://<ip-of-raspberry-pi>/staticContent/<image.png>) center/contain no-repeat; height: 500px; position: relative;">
<div ng-repeat="el in msg.payload" style="left: {{el.left}}px; position: absolute; top: {{el.top}}px;">
<ng-md-icon icon="{{el.icon}}" size="20" style="border-radius: 50%; border: 2px solid {{el.color}}; fill: {{el.color}}; padding: 3px 0px 0px 3px;"></ng-md-icon>
<br />
<div style="color: {{el.color}}; font-size: 10px; padding-top: 2px; text-align: center;">
{{el.text}}</div>
</div>
</div>
</div>
Maybe add an ng-click="send({payload: el})" to your icon?
Here is where I go to consult the angular docs...
Hi shrickus,
Ok consider that I display this
{
"topic": "/zway/familyRoom/familyRoomLight",
"payload": {
"icon": "lightbulb_outline",
"top": 230,
"left": 650,
"state": 1,
"color" : "#5a5"
}
}
How can I using the ng-click identify this previous icons, select the icon and prompt an action.
Kind regards
What I have been trying to do is create one without use of UI Dashboard so that it was separate from my dashboard. I used Simple Web Page flow by @dceejay and added a SVG to it. Here is the modified template node with external SVG. I am just at the beginning of this project but it might give you some ideas.
[{"id":"aca96bca.024aa8","type":"template","z":"fc610c9a.5866b","name":"Simple Web Page","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>Compressor System</title>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n <object id=\"svgObject\" type=\"image/svg+xml\" data=\"compressor.svg\" >\n Your browser doesn't support SVG\n <script type=\"text/javascript\">\n var ws;\n var wsUri = \"ws:\";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"simple\",\"ws/simple\");\n\n\n\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n //var line = \"\"; // either uncomment this for a building list of messages\n var a = document.getElementById(\"svgObject\");\n //console.log(a);\n \t// Get the SVG document inside the Object tag\n \tvar svgDoc = a.contentDocument;\n //console.log(svgDoc);\n \t// Get one of the SVG items by ID;\n \tvar svgItem = svgDoc.getElementById(\"tspan86\");\n //console.log(svgItem);\n \t// Set the colour to something else\n\n ws.onmessage = function(msg) {\n var line = \"\"; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = msg.data;\n console.log(data);\n // build the output from the topic and payload parts of the object\n line += \"<p>\"+data+\"</p>\";\n // replace the messages div with the new \"line\"\n \tconsole.log(svgItem);\n svgItem.innerHTML = data; \n // \tdocument.getElementById('messages').innerHTML = line;\n // svgItem.getElementById('tspan66').innerText = data;\n //ws.send(JSON.stringify({data:data}));\n if (data ==\"OFF\") {\n document.getElementById(\"stop\").disabled = true;\n document.getElementById(\"start\").disabled = false;\n } else {\n document.getElementById(\"stop\").disabled = false;\n document.getElementById(\"start\").disabled = true;\n }\n }\n ws.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n //ws.send(\"Open for data\");\n console.log(\"connected\");\n }\n ws.onclose = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"not connected\";\n // in case of lost connection tries to reconnect every 3 secs\n setTimeout(wsConnect,3000);\n }\n }\n \n function doit(m) {\n if (ws) { ws.send(m); }\n }\n </script>\n </object>\n </head>\n <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n <font face=\"Arial\">\n // <div style=\"font-size:40px;\" id=\"messages\"></div>\n <button id=\"stop\" style=\"height:100px;width:200px;font-size: 30px;background-color: #f44336\" onclick='doit(\"OFF\");' class=\"btn\"><i class=\"fa fa-times-circle\"> STOP</i></button>\n <button id=\"start\" style=\"height:100px;width:200px;font-size: 30px;background-color: #4CAF50\" onclick='doit(\"ON\");' class=\"btn\"><i class=\"fa fa-play-circle\"> START</i></button>\n <hr/>\n <div id=\"status\">unknown</div>\n </font>\n </body>\n</html>\n","x":590,"y":80,"wires":[["3e513425.c5a79c"]]}]
compressor.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:lucid="lucid"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1024"
height="768"
version="1.1"
id="svg230"
sodipodi:docname="compressor.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
viewBox="-4 450 624.64 468.48">
<metadata
id="metadata236">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs234" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1018"
id="namedview232"
showgrid="false"
inkscape:zoom="0.8828436"
inkscape:cx="-58.07226"
inkscape:cy="384.71952"
inkscape:window-x="1912"
inkscape:window-y="1072"
inkscape:window-maximized="1"
inkscape:current-layer="compressor"
scale-x="0.61"
viewbox-x="-4"
viewbox-y="450" />
<g
lucid:page-tab-id="0_0"
id="compressor"
transform="translate(-517.75,213.4108)">
<g
id="seperator"
style="fill:#ffeca9;stroke:#000000;stroke-width:2">
<path
d="m 885.1,493.34 c 0,0 -1.46,3.35 -3.42,5.94 -1.96,2.6 -4.9,6.4 -8.82,9.44 -3.84,3.04 -9.4,6.24 -13.4,7.46 -3.92,1.07 -6.7,2.13 -12.83,2.13 -6.2,0.17 -10.87,0.32 -17.48,-2.42 -6.62,-2.74 -8.25,-3.5 -12.67,-7 -4.33,-3.66 -8.74,-8.54 -10.7,-12.04 -2.04,-3.5 -2.37,-4.57 -2.37,-4.57"
id="path124"
inkscape:connector-curvature="0" />
<path
d="m 884.95,492.57 h -81.3 V 366.3 h 81.3 z"
id="path126"
inkscape:connector-curvature="0" />
</g>
<path
d="m 820.95,366.14 v 69.05 h 47.43 v -69.06 m -57.6,0.01 h 10.17 m 47.43,0 h 10.17"
id="seperatorelement"
inkscape:connector-curvature="0"
style="fill:#c7e8ac;stroke:#000000;stroke-width:2" />
<path
d="m 666.88,359.24 97.3,16.6 v 49.46 l -97.3,16.27 z"
id="rotor"
inkscape:connector-curvature="0"
style="fill:#7f5410;stroke:#000000;stroke-width:2" />
<g
id="airfilter">
<path
style="fill:none;stroke:#000000;stroke-width:2"
inkscape:connector-curvature="0"
id="path134"
d="m 724.4,286.62 v 46.86 h 51.97 v -46.86 z" />
<path
style="fill:#ffffff;stroke:#000000;stroke-width:2"
inkscape:connector-curvature="0"
id="path136"
d="m 776.37,286.62 c 0,-12.74 -11.64,-23.07 -26,-23.07 -14.34,0 -25.98,10.33 -25.98,23.07 0,12.75 11.63,23.08 25.98,23.08 14.35,0 26,-10.33 26,-23.08 z" />
</g>
<g
id="airin">
<path
d="m 765.24,374.8 -0.13,3 -0.92,-0.03 v -1.93 l -1.97,-0.34 0.04,-0.8 z m 1.69,-40.26 -3,-0.13 0.05,-0.92 h 3 z"
id="path140"
inkscape:connector-curvature="0" />
<path
d="m 738.05,370.37 -1.24,-35.9"
id="path142"
inkscape:connector-curvature="0"
style="fill:none;stroke:#000000;stroke-width:3" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path138"
d="m 763.74,374.75 1.7,-40.27" />
<path
inkscape:connector-curvature="0"
id="path144"
d="m 739.6,371.65 -3.03,-0.52 -0.02,-0.7 3,-0.1 z m -1.3,-37.23 -3,0.1 -0.02,-1.04 h 3 z" />
</g>
<g
id="wetout">
<g
id="g150"
style="stroke:#000000;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none"
transform="matrix(0.95726311,0,0,1,36.264386,0)">
<path
d="m 833.25,449.12 h -31.03 v 27.63 h 31.03 z"
id="path146"
inkscape:connector-curvature="0"
style="fill:none;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none" />
<path
d="m 833.25,476.75 c 8.45,0 15.3,-6.18 15.3,-13.8 0,-7.64 -6.85,-13.83 -15.3,-13.83 -8.44,0 -15.28,6.2 -15.28,13.82 0,7.63 6.84,13.8 15.28,13.8 z"
id="path148"
inkscape:connector-curvature="0"
style="fill:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
<path
d="m 804.36,447.67 -0.16,1.45 h -1.98 v 1.33 l -1.17,-0.13 0.33,-2.98 z m -38.94,-22.02 -2.68,1.36 -0.7,-1.34 2.14,-0.36 v -2.08 z"
id="path154"
inkscape:connector-curvature="0" />
<path
d="m 739.55,430.24 -2.87,0.87 -0.35,-1.14 2.98,-0.5 z M 802.22,475 v 1.75 h 1.98 l -0.12,1.42 -3,-0.25 0.26,-3 z"
id="path158"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:3.06226945;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:connector-curvature="0"
id="path152"
d="m 802.75695,448.83 -10.21105,-0.62 -7.2936,-1.4 -5.31392,-1.77 -3.95938,-1.94 -3.12583,-2.06 -2.45899,-2.16 -2.00053,-2.3 -1.64627,-2.5 -1.31285,-2.8 -1.00027,-3.22 -0.35426,-1.73" />
<path
style="fill:none;stroke:#000000;stroke-width:3.03735805;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:connector-curvature="0"
id="path156"
d="m 738.12669,430.68053 0.95374,4.52797 1.21011,4.13814 1.48701,3.83828 1.71261,3.5684 1.94849,3.3485 2.20487,3.15858 2.46125,2.99865 2.72789,2.82873 3.04579,2.6788 3.38422,2.54886 3.77391,2.39892 4.20464,2.239 4.71739,2.04908 5.23016,1.79919 5.86597,1.53931 6.48129,1.15948 7.13763,0.71967 6.19414,0.19991" />
</g>
<path
d="m 1035.74,454.85 v 37.1 h 99.6 v -37.1 z m 9.96,0 v 37.1 m 79.7,-37.1 v 37.1 m -79.7,-27.82 h 79.7 m -79.7,9.27 h 79.7 m -79.7,9.28 h 79.7 m -89.6,-99.18 v 60.02 h 99.3 v -60 z m 9.94,0 v 60.02 m 79.43,-60 v 60 m -79.43,-45 h 79.43 m -79.43,15 h 79.43 m -79.43,15 h 79.43"
id="radiator"
inkscape:connector-curvature="0"
style="fill:#b2b2b2;stroke:#000000;stroke-width:2" />
<g
id="thermostatic">
<path
style="fill:#ffffff;stroke:#000000;stroke-width:2"
inkscape:connector-curvature="0"
id="path162"
d="m 1018.57,461.9 v 20.83 c 5.16,1.34 10.04,1.24 14.68,0 V 461.9 c -5.62,-1.15 -10.5,-1.12 -14.68,0 z" />
<path
style="fill:#ffffff;stroke:#000000;stroke-width:2"
inkscape:connector-curvature="0"
id="path163"
d="m 1030.7,477.53 c 0,2.23 -2.07,4.03 -4.65,4.03 -2.58,0 -4.68,-1.8 -4.68,-4.03 0,-2.24 2.1,-4.06 4.68,-4.06 2.58,0 4.66,1.82 4.66,4.06 z m -0.13,-10.31 c 0,2.24 -2.08,4.04 -4.66,4.04 -2.57,0 -4.65,-1.8 -4.65,-4.04 0,-2.24 2.08,-4.06 4.66,-4.06 2.6,0 4.67,1.82 4.67,4.06 z" />
</g>
<g
id="oilout">
<path
d="m 845.76,518.26 v 0.9 h -3 v -1.1 z m 172.81,-48.73 h -1 v -3 h 1 z"
id="path174"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path170"
d="m 847.26,519.16 v 13.12 H 954.3 v -64.25 l 0.88,-2.12 2.12,-0.87 h 60.27" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path172"
d="m 841.26,519.16 v 16.12 l 0.88,2.12 2.12,0.88 H 957.3 l 2.12,-0.88 0.88,-2.12 v -64.25 h 57.27" />
</g>
<g
id="oilfilter"
style="fill:#7f5410;stroke:#000000;stroke-width:2">
<path
d="m 805.1,653.4 c 0,0 -0.75,1.35 -1.75,2.38 -1,1.04 -2.5,2.56 -4.5,3.78 -1.94,1.22 -4.77,2.5 -6.8,3 -2,0.42 -3.42,0.84 -6.54,0.84 -3.15,0.06 -5.52,0.12 -8.9,-0.97 -3.35,-1.1 -4.2,-1.4 -6.43,-2.8 -2.2,-1.47 -4.45,-3.42 -5.45,-4.82 -1.04,-1.4 -1.2,-1.82 -1.2,-1.82"
id="path176"
inkscape:connector-curvature="0" />
<path
d="m 805.02,653.1 h -41.38 v -50.52 h 41.38 z"
id="path178"
inkscape:connector-curvature="0" />
</g>
<path
d="m 759.57,569.6 v 33.32 h 48.9 v -33.3 z"
id="oilfilterblock"
inkscape:connector-curvature="0"
style="fill:#ffffff;stroke:#000000;stroke-width:2" />
<g
id="filterin">
<path
d="m 809.48,587.76 h -1 v -3 h 1 z m 209.09,-109.38 h -1 v -3 h 1 z"
id="path188"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path184"
d="M 809.48,583.26 H 978.14 V 476.88 l 0.88,-2.12 2.12,-0.88 h 36.43" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path186"
d="m 809.48,589.26 h 171.66 l 2.12,-0.87 0.88,-2.14 V 479.88 h 33.43" />
</g>
<g
id="filterout">
<path
d="m 759.57,587.76 h -1 v -3 h 1 z M 713.9,434.97 h -3 v -0.76 l 3,-0.5 z"
id="path194"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path190"
d="M 758.57,589.26 H 712.4 l -2.12,-0.87 -0.88,-2.14 v -151.3" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path192"
d="M 758.57,583.26 H 715.4 v -148.3" />
</g>
<g
id="scavanger">
<path
style="fill:none;stroke:#000000"
inkscape:connector-curvature="0"
id="path196"
d="M 825.82,428.56 V 359.43 H 785.3 v 53.85 l -0.3,0.7 -0.7,0.3 h -19.12" />
<path
style="fill:none;stroke:#000000"
inkscape:connector-curvature="0"
id="path198"
d="m 827.82,428.56 v -70.13 l -0.3,-0.7 -0.7,-0.3 H 784.3 l -0.7,0.3 -0.3,0.7 v 53.85 h -18.12 m 61.64,16.28 v 3" />
</g>
<g
id="airout">
<path
d="m 869.48,350.3 h -1.5 v -3 h 1.5 z m 166.32,43 h -1 v -3 h 1 z"
id="path208"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path204"
d="m 869.48,345.8 h 82.66 l 2.12,0.9 0.88,2.1 v 40 h 79.67" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path206"
d="m 869.48,351.8 h 79.66 v 40 l 0.88,2.12 2.12,0.88 h 82.67" />
</g>
<g
id="pressurecheck">
<path
d="m 846.02,349.48 h 20 v 10 h -20 z"
id="path210"
inkscape:connector-curvature="0"
style="fill:none" />
<path
style="fill:#ffffff;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path202"
d="m 844.5,330.95 v 35.72 h 23.48 v -35.72 z" />
<path
d="m 849.02,349.48 c 0,0.55 -0.45,1 -1,1 -0.55,0 -1,-0.45 -1,-1 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z m 2,-2 h 10 z m 10,0 -1,-1 v 2 z"
id="path214"
inkscape:connector-curvature="0"
style="stroke:#000000" />
<path
d="m 848.02,359.48 v -10 l 16,10 v -10"
id="path212"
inkscape:connector-curvature="0"
style="fill:none;stroke:#000000" />
</g>
<g
id="motor">
<path
style="fill:#ffffff;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path216"
d="M 519.25,368.8 H 634.5 v 55.6 H 519.25 Z" />
<path
style="fill:none;stroke:#000000;stroke-width:3"
inkscape:connector-curvature="0"
id="path218"
d="m 546.88,359.25 v 83 m 60.42,-83 v 83 M 634.5,396.6 H 667" />
</g>
<path
d="m 741.9,341.2 9.68,19.1 9.66,-19.1 z"
id="airinflow"
inkscape:connector-curvature="0"
style="fill:#c1e4f7;stroke:#000000;stroke-width:3" />
<path
d="m 774.83,467.9 21.07,-3.7 -15.44,-14.8 z"
id="wetoutflow"
inkscape:connector-curvature="0"
style="fill:#ffeca9;stroke:#000000;stroke-width:3" />
<path
d="m 910.7,358.6 19.1,-9.68 -19.1,-9.66 z"
id="airoutflow"
inkscape:connector-curvature="0"
style="fill:#c1e4f7;stroke:#000000;stroke-width:3" />
<path
d="m 926.65,576.48 -19.08,9.68 19.08,9.66 z M 907,544.73 926.07,535.05 907,525.4 Z m -184.74,-26.06 -9.68,-19.08 -9.66,19.07 h 19.34 z"
id="oilflow"
inkscape:connector-curvature="0"
style="fill:#7f5410;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:19.52px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;-inkscape-font-specification:'sans-serif, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;"
x="757.63397"
y="563.83093"
id="messages1"><tspan
sodipodi:role="line"
x="757.63397"
y="563.83093"
id="tspan66">oildiff</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.52000046px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1"
x="518.4696"
y="255.66708"
id="messages1-4"><tspan
style="stroke-width:1"
sodipodi:role="line"
x="518.4696"
y="255.66708"
id="tspan86">status</tspan></text>
</g>
</svg>
The first issue is that your template is iterating over all the objects in your payload, using the syntax ng-repeat="el in msg.payload" -- so your incoming payload needs to be an array of objects, even if you have only 1 icon. Also, your payload does not contain a text field, which is displayed inside the colored <div ...>{{el.text}}</div>. So given this revised payload:
[
{
"topic": "/zway/familyRoom/familyRoomLight",
"payload": {
"icon": "lightbulb_outline",
"top": 230,
"left": 650,
"state": 1,
"color" : "#5a5",
"text": "Help me!"
}
}
]
just add the ng-click att to your md-icon element, like so:
<div style="background: url(http://<ip-of-raspberry-pi>/staticContent/<image.png>) center/contain no-repeat; height: 500px; position: relative;">
<div ng-repeat="el in msg.payload" style="left: {{el.left}}px; position: absolute; top: {{el.top}}px;">
<ng-md-icon icon="{{el.icon}}" ng-click="send({payload: el})" size="20" style="border-radius: 50%; border: 2px solid {{el.color}}; fill: {{el.color}}; padding: 3px 0px 0px 3px;"></ng-md-icon>
<br />
<div style="color: {{el.color}}; font-size: 10px; padding-top: 2px; text-align: center;">
{{el.text}}
</div>
</div>
</div>
This will return the original payload object that was used to build each icon in the first place... of course, you can change what is returned, but get this working first.
Then wire the output of the ui_template node to a debug node -- when you click on the icon, the resulting payload will be the same as the incoming object. From that, you can access msg.payload.text or msg.payload.icon to determine which of the icons was clicked.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy