Hello
I want to know if the ui_svg_graphics node is still working?
Which node is that?
Please provide a link or screenshot.
1 Like
Hi @971JMD,
Assuming you mean node-red-contrib-ui-svg, I'm rather curious why you assume it is not working anymore?
That button doesn't add an image.
If you mean SVG then paste the SVG into the SVG source box.
If you mean an image like a jpg, then look elsewhere in the editor (I can't remember where exactly are the moment)
1 Like
Morning Jean-Michel,
Thanks for the screenshot, but can you please give us some more information about what you want to try to do. Because now we have to spend our time on guessing ...
Suppose you want to add a background image (e.g. of your house), so an jpg or png image. I 'think' the best way to do that is like another user described here. Summarized:
- Create a directory e.g.
/home/pi/public_images/(on linux). - Copy your background picture to that directory.
- Set the
httpStaticparameter in your settings file tohttpStatic: '/home/pi/public_images/, - Restart Node-RED. In the startup logs it should display your directory
[info] HTTP Static : /home/pi/public_images/ - Add this - via the "Source" tabsheet of our node's config screen - as first element in your SVG
<image width="1704px" height="695" id="background" xlink:href="/SVG.png" />
P.S. I'm not sure at the moment what width and height you need.
Caution: this image cannot be displayed correctly in the DrawSvg editor (which you open via the blue button on our config node's screen), because the DrawSvg cloud service has no access to that local folder!
I will contact the developer of DrawSvg whether he can offer us a solution for this!
Bart
1 Like
salut
je souhait intégré une image et rajouter des informations venant de plusieurs capteurs
sous raspberry 3 et node Red
I want to integrate an image and add information coming from several sensors
under raspbeery 3 and Node RED
Hello, no idea
Have you tried all the steps that I have described ( to load the background image ) and that did not work? Or is there anything else that fails?
Hello
I can not
Convert your image to base64 using any of the online image to base64 convertors.
Copy the data URL and paste it into an img src in the SVG source.
See this...
oui ça va le faire
et non
@971JMD is this 
the image you want to have in SVG?
As SVG is "scalable vectors" it would be much better to just draw it. It is not a complicated drawing!
That saidm if you must use an image, it does work as i said in my previous post..
- convert your image to base64 data (try to keep it small < 20KB if possible)
- copy the image data
data:image/jpeg;base64, LzlqLzRBQ...PoSk....etc...etcdata
- copy the image data
- add a new image element to the SVG Source
<image href="data:image/jpeg;base64, LzlqLzRBQ...PoSk....etc...etc" height="200" width="200"/>
so it looks something like this...
WARNING: Images are MUCH bigger than SVG and images look terrible because they do not "scale" like vector drawings. I would strongly recommend drawing these simple graphics in SVG (use inkscape if necessary)
Drag an image or click the button. It will convert to base64 string.
Then copy it & do what I said in the previous post.
je clic sur show code ou copy image ou copy css
Enfin 
Ça fonctionne, une erreur de copier colée
Maitenant je souhaiterai affichée un valeur venan de mon serveur FIBARO.
Now I would like to display a value from my FIBARO server.
flows (3).json (82.3 KB)
