# House blueprint with graphic interactions dashboard

**URL:** <https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906>\
**Category:** Dashboard\
**Created:** [6 September 2018 10:58 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906 "2018-09-06T10:58:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [6 September 2018 10:58 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/1 "2018-09-06T10:58:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [6 September 2018 12:51 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/2 "2018-09-06T12:51:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [6 September 2018 14:22 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/3 "2018-09-06T14:22:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [6 September 2018 14:54 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/4 "2018-09-06T14:54:35Z")

</div>

Hello  
I am using an excellent tutorial

> **[Custom node-red-dashboard Overhead Status](http://mhallock.blogspot.com/2017/04/custom-node-red-dashboard-overhead.html)**
>
> One of the neat things I've seen several home automation systems do is allow someone to build a visual indicator of the status of their syst...

What is missing is the reverse, how would I click an icon and cause an action

Kind regards

José Godinho

---

<div class="post-metadata">

**Author:** ![mikeyd0407](https://avatars.discourse-cdn.com/v4/letter/m/3bc359/32.png) [@mikeyd0407](https://discourse.nodered.org/u/mikeyd0407)\
**Post date:** [7 September 2018 07:59 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/5 "2018-09-07T07:59:58Z")

</div>

I don't know if this is of any help, but there is a great javascript library called leaflet js  
[https://leafletjs.com/](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

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [7 September 2018 10:25 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/6 "2018-09-07T10:25:01Z")

</div>

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](mailto:nodered@discoursemail.com) escreveu no dia sexta, 7/09/2018 à(s) 09:10:

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2018 10:27 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/7 "2018-09-07T10:27:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 September 2018 11:11 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/8 "2018-09-07T11:11:30Z")

</div>

Dave,

seems that you can use Leaflet for floorplans (see [demo](https://codepen.io/zachdunn/pen/VvRXdP)), 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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2018 11:24 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/9 "2018-09-07T11:24:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 September 2018 14:14 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/10 "2018-09-07T14:14:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 September 2018 15:38 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/11 "2018-09-07T15:38:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2018 16:07 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/12 "2018-09-07T16:07:02Z")

</div>

@TotallyInformation - "the editor is NOT a dashboard...." 😉

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 September 2018 17:55 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/13 "2018-09-07T17:55:25Z")

</div>

> [@dceejay](#):
>
> 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...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2018 19:14 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/14 "2018-09-07T19:14:20Z")

</div>

Yeah. Every now and then he does a good thing

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [8 September 2018 16:21 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/15 "2018-09-08T16:21:35Z")

</div>

> [@dceejay](#):
>
> @TotallyInformation - "the editor is NOT a dashboard...." 😉

haha, "yet"!

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

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [10 September 2018 10:05 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/16 "2018-09-10T10:05:05Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [10 September 2018 14:35 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/17 "2018-09-10T14:35:09Z")

</div>

Maybe add an `ng-click="send({payload: el})"` to your icon?  
Here is where I go to consult the [angular docs](https://docs.angularjs.org/api/ng/directive/ngClick)...

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [11 September 2018 11:21 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/18 "2018-09-11T11:21:48Z")

</div>

Hi shrickus,

Ok consider that I display this

```auto
{
   "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

---

<div class="post-metadata">

**Author:** ![LeXLuther422](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lexluther422/32/132_2.png) [@LeXLuther422](https://discourse.nodered.org/u/LeXLuther422)\
**Post date:** [11 September 2018 12:50 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/19 "2018-09-11T12:50:37Z")

</div>

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](https://flows.nodered.org/flow/8666510f94ad422e4765) 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.

```auto
[{"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

```auto
<?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>

```

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [11 September 2018 13:53 UTC](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906/20 "2018-09-11T13:53:00Z")

</div>

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:

```auto
[
  {
    "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:

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

[Next page](https://discourse.nodered.org/t/house-blueprint-with-graphic-interactions-dashboard/2906.md?page=2)