Graphic building map

Dashboard
1

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.

2

Coming soon...

3

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

1 Like
4

Hi Bart,

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

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

5

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.

6

I am using Chrome Browser...

7

Hmmm. Should work.

How did you install?

8

by terminal:

cd ~/.node-red)

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

@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?

10

screen
screen.png2608Ă—904 78.5 KB

11

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?

12

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

1 Like
13

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.

14

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

15

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

2 Likes
16

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

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

17

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

18

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.

19

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
I am not able to understand where to fit the code... Can I ask you a sample clipboard to load in my node-red?

20

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.