Qustion about node-red-contrib-ui-svg - Control via messages - Add elements via msg - Add dynamic image

Dashboard
1

I have question about node-red-contrib-ui-svg. Is it possible to add dnamic image through "Control via messages"?
I have tried below msg but it doesn't work.

msg = {"payload": {
  "command": "add_element", 
  "elementType": "image",
  "elementId": "pic_1", 
  "elementAttributes": {
      "xlink:href": my image file path,
      "x": "10",
      "y": "10",
      "height": "100",
      "width": "100"
  }
}
};
return msg;
2

I have found the element attribute "xlink:href" is no longer available for chrome.It shall be replaced by
arrtibute "href". See below msg.

{
  "command": "add_element", 
  "elementType": "image",
  "elementId": "car_1", 
  "elementAttributes": {
      "href": "/Pic/car.png",
      "x": "10",
      "y": "10",
      "height": "100",
      "width": "100"
  }
}
3

Hi @OrangeRaspberry,
Does your last flow work? I assume not because it contains a path to a local image file, which a browser cannot access. Suppose all browsers over the globe would be able to access the files on your computer, that would be quite a problem for you :wink:

See this wiki page for more information about this topic.

Bart

4

Hello @BartButenaers
Last flow work. The file path is not the cause. I just changed attribute "xlink:href" to "href".

5

car1
car11231Ă—294 109 KB

car2
car21407Ă—282 109 KB

6

I have seen your github. The action " Add an image to an SVG drawing " is on node red IDE page. I just want this feature on node red dashboard. In other words, I want this image is dynamic.

7

It seems SVG 2 remove attribute "xlink:href". So "href" shall be used instead of "xlink:href".

1 Like
8

Awesome node! I like it.

1 Like