# Graphic building map

**URL:** <https://discourse.nodered.org/t/graphic-building-map/15438>\
**Category:** Dashboard\
**Created:** [11 September 2019 21:29 UTC](https://discourse.nodered.org/t/graphic-building-map/15438 "2019-09-11T21:29:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [11 September 2019 21:29 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/1 "2019-09-11T21:29:56Z")

</div>

Hello Everybody,

I'd like to create a dashboard with graphic map that show a building and lights status. Do you know any palette to do this? Practically I would like to load a picture and put some led icons on it.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 September 2019 21:32 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/2 "2019-09-11T21:32:20Z")

</div>

Coming soon...

> [@Announce node-red-contrib-ui-svg : feedback request](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431):
>
> Hi folks, An interactive floorplan is already a long time on top of my TODO list, so I developed an alfa version of [node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg)... It would be nice if you could read the readme documentation, test it and give some 'constructive' feedback. Keep in mind that this is an early alfa version, that I published only to start the discussion! I have already registered a list of known [issues](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues). For most of those issues I will need some input from the community. I'm not going to repeat all i…

---

<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:** [11 September 2019 21:40 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/3 "2019-09-11T21:40:07Z")

</div>

Hi @mike829,  
Steve (@Steve-Mcl ) and I have already put **LOTS** of efforts into this new contribution, but we need to implement a couple of things before we can release a new beta version...  
Bart

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 08:19 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/4 "2019-09-12T08:19:35Z")

</div>

Hi Bart,

thanks for your reply and congratulations for your work.  
I just installed the SVG graphics, I putted in the following simple code:

```auto
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g display="inline">
  <title>Layer 1</title>
  <rect id="svg_1" height="320" width="490" y="88" x="71" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="93" rx="77" id="svg_2" cy="248" cx="445" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="53" rx="79" id="svg_3" cy="255" cx="217" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg> 

```

but when I load the node-red/ui I am not able to see the image. I am sure I miss some steps... Can you please tell me what I did wrong?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2019 08:53 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/5 "2019-09-12T08:53:44Z")

</div>

Are you by chance trying to view the dashboard in internet explorer? IE is currently too much trouble to support. Once SVG node is done, we will look at IE compatibility.

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 08:57 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/6 "2019-09-12T08:57:06Z")

</div>

I am using Chrome Browser...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2019 09:02 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/7 "2019-09-12T09:02:24Z")

</div>

Hmmm. Should work.

How did you install?

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 09:10 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/8 "2019-09-12T09:10:16Z")

</div>

by terminal:

```auto
cd ~/.node-red)

npm install bartbutenaers/node-red-contrib-ui-svg

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2019 09:15 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/9 "2019-09-12T09:15:57Z")

</div>

@mike829, I am not in a position to assist further at this point. (Not near a computer)

If you know how, try to install the dev branch.

@BartButenaers, any ideas?

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 09:18 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/10 "2019-09-12T09:18:43Z")

</div>

![screen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/77fda010250eda5fc76774d275839b149acaa336.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2019 09:21 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/11 "2019-09-12T09:21:54Z")

</div>

That is strange.

Try refresh browser?

What version of dashboard do you have installed (full name and version).

What version of node js?

What version of node red?

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 09:24 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/12 "2019-09-12T09:24:35Z")

</div>

Ok, Solved. The problem was I installed svg palette before then node-red dashboard. I just re-installed svg component and now it works... Sorry...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2019 09:26 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/13 "2019-09-12T09:26:33Z")

</div>

Have fun testing but if you install dev branch it is much improved and closer to final.

Please note, things have changed and may change further.

---

<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:** [12 September 2019 10:01 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/14 "2019-09-12T10:01:43Z")

</div>

> [@Steve-Mcl](#):
>
> Please note, things have changed and may change further.

Hey Mike,  
a bit late but good that you and Steve has solved it.  
Like Steve says keep in mind that our next beta version is a major rewrite, so lots of things will change!!

---

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [12 September 2019 10:07 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/15 "2019-09-12T10:07:03Z")

</div>

Bart/Steve

Thanks for the awesome work!! I have been watching with interest and have installed the first version.  
This has awesome potential, cant wait for the next release  
Keep up the good work

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 10:45 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/16 "2019-09-12T10:45:43Z")

</div>

Sorry... I am trying to put an animation but I don't understand why I see the animation at 0x and 0y...  
instead 500x 300y

```auto
<circle id="mycircle" 500 r="5" 300>
   <animate id="myanimation" attributeName="r" begin="0s" dur="3s" repeatCount="1" from="10" to="40"/>
</circle>

```

I also tryed using the animations tab but I am not able to understand where to fit the coordinates...

Can you help me to understand what I am doing wrong?

---

<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:** [12 September 2019 10:51 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/17 "2019-09-12T10:51:02Z")

</div>

> [@mike829](#):
>
> 500 r="5" 300

Shouldn't that be \<circle cx="500" cy="300" r="40" ...\>  
If you don't specify cx and cy, then your browser will render the shape at 0,0 I assume ...

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [12 September 2019 12:31 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/18 "2019-09-12T12:31:12Z")

</div>

> [@mike829](#):
>
> `<circle id="mycircle" 500 r="5" 300>`

If SVG were to parse this the way HTML works this line is the shortened version for `<circle id="mycircle" 500="true" r="5" 300="true">`  
However, SVG is supposed to parse it as XML, and following the XML protocol shorthand attributes are invalid syntax so it's unsure what happens. It appears to at least successfully parse it, but it still does the wrong thing. Make sure to set them as values to attributes, rather than as attribute-key as might happen depending on the parser behind it.

---

<div class="post-metadata">

**Author:** ![mike829](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mike829/32/11676_2.png) [@mike829](https://discourse.nodered.org/u/mike829)\
**Post date:** [12 September 2019 13:11 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/19 "2019-09-12T13:11:12Z")

</div>

Hi Bart, you're right... sorry...

I am trying to learning how to change the attribute value reading "changing attributes value" from here [https://github.com/bartbutenaers/node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg)  
I am not able to understand where to fit the code... Can I ask you a sample clipboard to load in my node-red?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2019 13:52 UTC](https://discourse.nodered.org/t/graphic-building-map/15438/20 "2019-09-12T13:52:03Z")

</div>

Hi you'd be better off (if you haven't already) installing the dev branch as this is an area that has changed lots. If you do that I can send you an example of how to animate attributes via msg.

[Next page](https://discourse.nodered.org/t/graphic-building-map/15438.md?page=2)