House blueprint with graphic interactions dashboard

#1

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

0 Likes

#2

What is the file format of your digital house blue print (floorplan) file ? png, jpeg, svg, etc ?

0 Likes

#3

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

0 Likes

#4

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

0 Likes

#5

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

0 Likes

#6

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:

0 Likes

#7

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 :slight_smile:

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.

0 Likes

#8

Dave,

seems that you can use Leaflet for floorplans (see demo), but indeed not much GPS located sensors at home :joy:

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

1 Like

#9

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.

1 Like

#10

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 ...

0 Likes

#11

Hmm, lets think :wink:

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?

0 Likes

#12

@TotallyInformation - "the editor is NOT a dashboard...." :wink:

@BartButenaers - no - I have no interest in alternative co-ordinate systems... feel free to fork it !

0 Likes

#13

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...

0 Likes

#14

Yeah. Every now and then he does a good thing

1 Like

#15

haha, "yet"!

But who knows what interesting and innovative purposes it will be put to in the future :smile:

1 Like

#16

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>
0 Likes

#17

Maybe add an ng-click="send({payload: el})" to your icon?
Here is where I go to consult the angular docs...

0 Likes

#18

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

0 Likes

#19

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>
0 Likes

#20

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.

0 Likes