Hello! Since I've been searching for days without success, I'm asking for help. I would like to install a button and a digital display in an SVG image. The button should switch something or display something digitally. Does anyone have an example that I could install in my system (I would tweak it…

You could take a look at - [image] node-red-contrib-ui-svg A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard

I did this ages ago. Not Dashboard though so might not be of use. [image] Uibuilder + VueJS + SVG = visual IoT floorplan Share Your Projects Hi all, just a quick post to share something I've been messing with for the last couple of days. Posted the flow to the flows site …

:frowning: hanks very much, now I'm hanging somewhere else "2023-02-27T14:08:50.467Z Installieren : node-red-contrib-uibuilder 6.0.0 2023-02-27T14:08:49.670Z npm install --no-audit --no-update-notifier --no-fund --save --save-prefix=~ --production --engine-strict node-red-contrib-uibuilder@6.0.0 …

[image] ninaaa: engine Unsupported engine Your version of Node.js is too outdated. You won't be able to run the latest versions of Node-RED either. Please update Node.js to a currently supported version. One of the current versions of v14, v16 or v18. I think that v14 is close to end of life…

[image] Sean-McG: You could take a look at - @ninaaa , Since you have given no feedback to @Sean-McG , I have no idea what you are looking for. If you want to build your own dashboard from scratch, then you indeed should have a look at ui-builder. If the standard dashboard completely fits yo…

thank you all, I have to look at all this in peace and then understand it!

@TotallyInformation No matter what I try it doesn't work. I have a background.svg in the uibuilder src folder even background.html created and copied code and added the code to the rest of the file, but I get no picture. I did the same in the root folder without success (no picture) If I save …

[image] ninaaa: No matter what I try it doesn't work. Its not very clear from your post what exactly you have tried so far ? Can you post some sample code maybe ?

So this example is a bit old now and would be better with something other than the default CSS. However, it does still work. NOTE: Too big to go in one post - you'll need the next post as well. [{"id":"3b6e4ab8.0379f6","type":"inject","z":"8709510388dd6bc0","name":"LIGHTS","props":[{"p":"payload"},…

And too big again so you'll need the next one as well. [{"id":"7cad6c1d.112274","type":"comment","z":"8709510388dd6bc0","name":"index.html","info":"<!doctype html><html lang=\"en\"><head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"…

Node-RED

Node-RED Forum

Template Svg Graphic

General

TotallyInformation 26 February 2023 18:58 3

I did this ages ago. Not Dashboard though so might not be of use.

Topic		Replies	Views
Uibuilder dynamic SVG example - no framework needed Share Your Projects uibuilder	6	615	2 October 2024
Uibuilder + VueJS + SVG = visual IoT floorplan Share Your Projects uibuilder	52	9450	13 December 2022
[Announce] node-red-contrib-ui-svg Share Your Nodes	87	9402	25 April 2021
[Announce] node-red-contrib-ui-svg (final beta) UPDATE V1.2.1 Share Your Nodes	90	9986	23 October 2019
Uibuilder example General uibuilder	28	2913	24 September 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Template Svg Graphic

Related topics