SVG trigger the specified LED ON

Dashboard
1

Sorry~ Because I'm new to SVG I would like to ask how to trigger the specified LED ON in the background image
flows (1).json (149.0 KB)

2

I doubt if many people will want to download and install a 150kB flow file.

Might be a good idea to post a screen capture showing your dashboard and the LED you want to turn on.

3

Yes indeed quite a large flow file. But it is in fact a very small flow, but it contains a base64 encoded image to show inside an svg drawing:

image
image1019×127 7.25 KB

Hi @king,
I think you are mixing up things.

  • Pixel-oriented: You use an svg drawing to show a single image, and you have drawn (manually via some Paint tool) your LED's inside your png image:

    image
    image736×302 38 KB

    Your png image is just an array of pixels, and you have simply colored some of those pixels to show your LED's inside the drawing. But you still have a png image containing just pixels.

  • Vector-oriented: Since SVG means "Scalable Vector Graphics"*, what you should do is:

    • Show the png without LED's as background image in the svg:

      image
      image739×304 35.5 KB

    • And next you should show some circle elements on top of that background drawing, by adding them below the background image:

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="1199" height="489" viewBox="0 0 1199 489" preserveAspectRatio="xMidYMid meet">
   <image x="0" y="0" xlink:href="data:image/png;base64,iVBOR....K5CYII=" transform="matrix(0.761472 0 0 0.760503 16.6011 20.5882)"/>
   <circle id="led1" cx="68" cy="206" r="10" fill="red" />
   <circle id="led2" cx="480" cy="206" r="10" fill="green" />
</svg>

      Each circle gets an id, so you can manipulate them via input messages.

Then you can show/hide the circle elements using input messages:

show-hide-leds

flow-show-hide.json (64.7 KB)

I have done my best to explain you the basics of the basics above. However now it is up to you. The internet is full of tutorials and videos about the basics of SVG. And the readme page and wiki pages of my svg-node are full of information about how to show and manipulate svg drawings in Node-RED.

Good luck!
Bart