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 for myself). An example of a boiler that changes color with temperature or anything that changes color with temperature.
Thanks
You could take a look at -
I did this ages ago. Not Dashboard though so might not be of use.
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
2023-02-27T14:08:59.635Z [err] npm
2023-02-27T14:08:59.635Z [err] ERR! code EBADENGINE
2023-02-27T14:08:59.649Z [err] npm ERR!
2023-02-27T14:08:59.649Z [err] engine Unsupported engine"
2023-02-27T14:08:59.649Z [err] npm ERR!
2023-02-27T14:08:59.649Z [err] engine Not compatible with your version of node/npm: node-red-contrib-uibuilder@6.0.0
2023-02-27T14:08:59.650Z [err] npm ERR!
2023-02-27T14:08:59.650Z [err] notsup Not compatible with your version of node/npm: node-red-contrib-uibuilder@6.0.0
2023-02-27T14:08:59.650Z [err] npm
2023-02-27T14:08:59.650Z [err] ERR! notsup Required: {"node":">=14.14"}
2023-02-27T14:08:59.650Z [err] npm ERR!
2023-02-27T14:08:59.650Z [err] notsup Actual: {"npm":"8.5.1","node":"v12.22.9"}
2023-02-27T14:08:59.654Z [err]
2023-02-27T14:08:59.655Z [err] npm ERR!
2023-02-27T14:08:59.655Z [err] A complete log of this run can be found in:
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 as well so probably best to go with 16 or 18.
If you are running on a Pi or a Debian install, you should be able to use the installer shell script which has parameters that let you upgrade everything. Otherwise, simply update Node.js according to the instructions on their website.
@ninaaa,
Since you have given no feedback to @smcgann99, 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 your needs, then you should have a look at the ui-svg node from that link. In this tutorial you can see how you can put html elements inside an svg. This tutorial shis how to do it for an input field and a table, but it should also work for a button...
Bart
thank you all,
I have to look at all this in peace and then understand it!
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 the code in a .html, I can open the image but there are no lamps.
In a tempate also see the picture and the lamps no.
and in a uibuilder I see nothing but the text.
thanks greetings
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"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"LIGHTS","payload":"","payloadType":"date","x":280,"y":160,"wires":[["890108da.2fa5b8"]]},{"id":"5c2bfd6d.f7d3e4","type":"uibuilder","z":"8709510388dd6bc0","name":"","topic":"","url":"svgtest","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"5.0.0-dev.2","credentials":{},"x":540,"y":160,"wires":[["9abf6bfc.5b1fb8"],["fae7b678.eb9f48"]]},{"id":"9abf6bfc.5b1fb8","type":"debug","z":"8709510388dd6bc0","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":710,"y":160,"wires":[]},{"id":"fae7b678.eb9f48","type":"debug","z":"8709510388dd6bc0","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":710,"y":200,"wires":[]},{"id":"890108da.2fa5b8","type":"change","z":"8709510388dd6bc0","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\t \"A\": $random() >= 0.5 ? true : false,\t \"B\": $random() >= 0.5 ? true : false,\t \"C\": $random() >= 0.5 ? true : false,\t \"D\": $random() >= 0.5 ? true : false\t}\t ","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":375,"y":160,"wires":[["5c2bfd6d.f7d3e4"]],"l":false},{"id":"6596781f.95dd58","type":"inject","z":"8709510388dd6bc0","name":"LIGHT A on","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"LIGHTS","payload":"{\"A\":true}","payloadType":"json","x":290,"y":220,"wires":[["5c2bfd6d.f7d3e4"]]},{"id":"5ed19907.81ac08","type":"inject","z":"8709510388dd6bc0","name":"LIGHT A off","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"LIGHTS","payload":"{\"A\":false}","payloadType":"json","x":290,"y":260,"wires":[["5c2bfd6d.f7d3e4"]]},{"id":"4590282f.f9a0b8","type":"inject","z":"8709510388dd6bc0","name":"LIGHT B on","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"LIGHTS","payload":"{\"B\":true}","payloadType":"json","x":290,"y":300,"wires":[["5c2bfd6d.f7d3e4"]]},{"id":"baab8f9.679267","type":"inject","z":"8709510388dd6bc0","name":"LIGHT B off","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"LIGHTS","payload":"{\"B\":false}","payloadType":"json","x":290,"y":340,"wires":[["5c2bfd6d.f7d3e4"]]}]
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=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\">\n\n <title>Node-RED UI Builder: SVG Test</title>\n <meta name=\"description\" content=\"Node-RED UI Builder - SVG Test with VueJS + bootstrap-vue\">\n\n <link rel=\"icon\" href=\"./images/node-blue.ico\">\n\n <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css\" />\n <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css\" />\n \n <link rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n \n</head><body>\n\n <script type=\"text/x-template\" id=\"bulb-template\">\n <svg @click=\"doClick\" :style=\"ciconstyle\" :height=\"height\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <filter id=\"shadow\">\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"5\" flood-opacity=\"50%\" />\n </filter>\n <filter id=\"glow\" filterUnits=\"userSpaceOnUse\"\n x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <!-- blur the text at different levels-->\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\" result=\"blur5\"/>\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur10\"/>\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"20\" result=\"blur20\"/>\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"30\" result=\"blur30\"/>\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"50\" result=\"blur50\"/>\n <!-- merge all the blurs except for the first one -->\n <feMerge result=\"blur-merged\">\n <feMergeNode in=\"blur10\"/>\n <feMergeNode in=\"blur20\"/>\n <feMergeNode in=\"blur30\"/>\n <feMergeNode in=\"blur50\"/>\n </feMerge>\n <!-- recolour the merged blurs red-->\n <feColorMatrix result=\"red-blur\" in=\"blur-merged\" type=\"matrix\"\n values=\"1 0 0 0 0\n 0 0.06 0 0 0\n 0 0 0.44 0 0\n 0 0 0 1 0\" />\n <feMerge>\n <!--<feMergeNode in=\"red-blur\"/> largest blurs coloured red -->\n <feMergeNode in=\"blur-merged\"/>\n <feMergeNode in=\"blur5\"/> <!-- smallest blur left white -->\n <feMergeNode in=\"SourceGraphic\"/> <!-- original -->\n </feMerge>\n </filter>\n <slot name=\"filter\"></slot>\n </defs>\n <title>{{title}}</title>\n <slot name=\"icon\"><path :fill=\"cfillcolor\" d=\"M511.549861 803.293331H408.419043a73.232959 73.232959 0 0 1-67.1862-41.991375 59.795719 59.795719 0 0 1-6.71862-30.569722 207.60536 207.60536 0 0 0-33.593101-113.88061 196.519637 196.519637 0 0 0-27.882273-33.5931A463.248853 463.248853 0 0 1 217.274302 504.314738a399.086031 399.086031 0 0 1-36.95241-75.248544 242.542184 242.542184 0 0 1-15.116895-77.264131 349.032312 349.032312 0 0 1 8.062344-84.990544 314.76735 314.76735 0 0 1 51.733375-114.888403A367.172586 367.172586 0 0 1 361.724634 34.011334 327.532728 327.532728 0 0 1 433.949799 8.144647 369.524103 369.524103 0 0 1 528.682342 0.418234a333.579486 333.579486 0 0 1 126.310057 29.225997 326.860866 326.860866 0 0 1 70.881442 44.678824A382.625412 382.625412 0 0 1 808.848799 168.383736a314.095488 314.095488 0 0 1 41.991375 105.146403 312.751764 312.751764 0 0 1 6.382689 92.045095 275.799353 275.799353 0 0 1-20.15586 76.256338 449.139751 449.139751 0 0 1-61.139443 107.16199 497.513815 497.513815 0 0 1-33.5931 39.639858 160.575019 160.575019 0 0 0-31.241583 48.038134 215.331773 215.331773 0 0 0-18.812136 55.428615c-1.679655 11.757585 0 23.179239-2.687448 33.5931a171.660742 171.660742 0 0 1-3.695241 25.194826 69.873649 69.873649 0 0 1-33.593101 40.647651 74.576683 74.576683 0 0 1-39.639858 10.07793zM490.050277 88.768088c-11.085723 0-22.171446 2.351517-33.5931 4.031172a210.96467 210.96467 0 0 0-74.240752 26.538549 244.221839 244.221839 0 0 0-55.428616 44.342893 222.386324 222.386324 0 0 0-43.335099 63.82689 230.784599 230.784599 0 0 0-19.483998 94.732543 28.218204 28.218204 0 0 0 33.5931 28.890066 28.890066 28.890066 0 0 0 22.171446-26.202618v-13.773171a167.965501 167.965501 0 0 1 9.406068-49.045927 184.762052 184.762052 0 0 1 64.834684-83.98275 167.965501 167.965501 0 0 1 93.72475-33.593101 142.770676 142.770676 0 0 0 18.140274 0 23.851101 23.851101 0 0 0 19.148067-15.452826 33.5931 33.5931 0 0 0 0-19.483998 23.51517 23.51517 0 0 0-20.491791-18.140274 122.950747 122.950747 0 0 0-15.116895 0zM647.601917 943.040628a15.788757 15.788757 0 0 1-13.773171 15.116895H400.356699a17.468412 17.468412 0 0 1-16.460619-8.734206 18.812136 18.812136 0 0 1 0-20.15586 16.124688 16.124688 0 0 1 16.460619-4.703034h227.089358a19.148067 19.148067 0 0 1 19.148067 20.827722zM405.731595 899.369598a18.140274 18.140274 0 0 1-16.460619-12.765378 17.804343 17.804343 0 0 1 15.452826-23.851101H635.508401a18.812136 18.812136 0 0 1 17.804343 13.773171 19.819929 19.819929 0 0 1-10.749792 21.499584 24.187032 24.187032 0 0 1-8.734206 0H423.535938zM437.64504 1022.992207a17.132481 17.132481 0 0 1-15.452826-9.406068 18.140274 18.140274 0 0 1 15.116895-26.202618h139.411367a19.819929 19.819929 0 0 1 19.483998 17.804343 16.124688 16.124688 0 0 1-8.734206 15.788757 19.148067 19.148067 0 0 1-9.741999 3.023379H442.348074z\" /></slot>\n <slot name=\"default\"></slot>\n </svg>\n </script>\n \n <b-container id=\"app\">\n\n <h1>\n UIbuilder + SVG + Vue.js + bootstrap-vue for Node-RED\n </h1>\n <p>\n This is a uibuilder example looking at how easy it is to create a dynamic view of IoT devices in a building\n using SVG images both for the background (floor-plan) and device indicators.\n </p>\n\n <h2>My House, Ground Floor</h2>\n <div id=\"floorplan\" style=\"position:relative; width:100%; height:50em; background:url(./images/serveimage.svg);\">\n <bulb id=\"a\" :color=\"isona ? 'red' : 'grey'\" :glow=\"isona\" :clickable=\"false\" x=\"100\" y=\"100\" @bulbclicked=\"myClick\" title=\"A: This one does not respond to clicks\"><desc>Here we use a component slot to insert some more custom svg</desc></bulb>\n <bulb id=\"b\" :color=\"isonb ? 'red' : 'grey'\" :glow=\"isonb\" :clickable=\"true\" x=\"270\" y=\"120\" @bulbclicked=\"myClick\" title=\"B\"><circle cx=\"50\" cy=\"50\" r=\"50\"/></bulb>\n <bulb id=\"c\" :ison=\"isonc\" :clickable=\"true\" x=\"650\" y=\"120\" @bulbclicked=\"myClick\" title=\"C\"></bulb>\n <bulb id=\"d\" :ison=\"isond\" :clickable=\"true\" x=\"250\" y=\"270\" @bulbclicked=\"myClick\" :title=\"'D: ' + (isond ? 'ON' : 'off')\"></bulb>\n </div>\n\n </b-container>\n \n <!-- Load the front-end libraries & code -->\n <script src=\"../uibuilder/vendor/socket.io/socket.io.js\"></script>\n <script src=\"../uibuilder/vendor/vue/dist/vue.js\"></script>\n <script src=\"../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js\"></script>\n <script src=\"./uibuilderfe.min.js\"></script>\n <script src=\"./index.js\"></script>\n\n</body>\n\n</html>","x":580,"y":280,"wires":[]},{"id":"162a2ce6.135bb3","type":"comment","z":"8709510388dd6bc0","name":"index.js","info":"/* jshint browser: true, esversion: 5, asi: true */\n/*globals Vue, uibuilder */\n// @ts-nocheck\n/*\n Copyright (c) 2019 Julian Knight (Totally Information)\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n*/\n'use strict'\n\n//#region ---- Components ---- //\nVue.component('bulb', {\n // NB: prop defined as 'home-data' because it is used as an HTML attribute. BUT use as variable 'homeData'\n //props: ['home-data', 'switches'],\n template: '#bulb-template',\n // template: `\n // <svg @click=\"doClick\" :style=\"ciconstyle\" :height=\"height\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n // <defs>\n // <filter id=\"shadow\">\n // <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"5\" flood-opacity=\"50%\" />\n // </filter>\n // <filter id=\"glow\" filterUnits=\"userSpaceOnUse\"\n // x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n // <!-- blur the text at different levels-->\n // <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\" result=\"blur5\"/>\n // <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur10\"/>\n // <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"20\" result=\"blur20\"/>\n // <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"30\" result=\"blur30\"/>\n // <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"50\" result=\"blur50\"/>\n // <!-- merge all the blurs except for the first one -->\n // <feMerge result=\"blur-merged\">\n // <feMergeNode in=\"blur10\"/>\n // <feMergeNode in=\"blur20\"/>\n // <feMergeNode in=\"blur30\"/>\n // <feMergeNode in=\"blur50\"/>\n // </feMerge>\n // <!-- recolour the merged blurs red-->\n // <feColorMatrix result=\"red-blur\" in=\"blur-merged\" type=\"matrix\"\n // values=\"1 0 0 0 0\n // 0 0.06 0 0 0\n // 0 0 0.44 0 0\n // 0 0 0 1 0\" />\n // <feMerge>\n // <!--<feMergeNode in=\"red-blur\"/> largest blurs coloured red -->\n // <feMergeNode in=\"blur-merged\"/>\n // <feMergeNode in=\"blur5\"/> <!-- smallest blur left white -->\n // <feMergeNode in=\"SourceGraphic\"/> <!-- original -->\n // </feMerge>\n // </filter>\n // <slot name=\"filter\"></slot>\n // </defs>\n // <title>{{title}}</title>\n // <slot name=\"icon\"><path :fill=\"cfillcolor\" d=\"M511.549861 803.293331H408.419043a73.232959 73.232959 0 0 1-67.1862-41.991375 59.795719 59.795719 0 0 1-6.71862-30.569722 207.60536 207.60536 0 0 0-33.593101-113.88061 196.519637 196.519637 0 0 0-27.882273-33.5931A463.248853 463.248853 0 0 1 217.274302 504.314738a399.086031 399.086031 0 0 1-36.95241-75.248544 242.542184 242.542184 0 0 1-15.116895-77.264131 349.032312 349.032312 0 0 1 8.062344-84.990544 314.76735 314.76735 0 0 1 51.733375-114.888403A367.172586 367.172586 0 0 1 361.724634 34.011334 327.532728 327.532728 0 0 1 433.949799 8.144647 369.524103 369.524103 0 0 1 528.682342 0.418234a333.579486 333.579486 0 0 1 126.310057 29.225997 326.860866 326.860866 0 0 1 70.881442 44.678824A382.625412 382.625412 0 0 1 808.848799 168.383736a314.095488 314.095488 0 0 1 41.991375 105.146403 312.751764 312.751764 0 0 1 6.382689 92.045095 275.799353 275.799353 0 0 1-20.15586 76.256338 449.139751 449.139751 0 0 1-61.139443 107.16199 497.513815 497.513815 0 0 1-33.5931 39.639858 160.575019 160.575019 0 0 0-31.241583 48.038134 215.331773 215.331773 0 0 0-18.812136 55.428615c-1.679655 11.757585 0 23.179239-2.687448 33.5931a171.660742 171.660742 0 0 1-3.695241 25.194826 69.873649 69.873649 0 0 1-33.593101 40.647651 74.576683 74.576683 0 0 1-39.639858 10.07793zM490.050277 88.768088c-11.085723 0-22.171446 2.351517-33.5931 4.031172a210.96467 210.96467 0 0 0-74.240752 26.538549 244.221839 244.221839 0 0 0-55.428616 44.342893 222.386324 222.386324 0 0 0-43.335099 63.82689 230.784599 230.784599 0 0 0-19.483998 94.732543 28.218204 28.218204 0 0 0 33.5931 28.890066 28.890066 28.890066 0 0 0 22.171446-26.202618v-13.773171a167.965501 167.965501 0 0 1 9.406068-49.045927 184.762052 184.762052 0 0 1 64.834684-83.98275 167.965501 167.965501 0 0 1 93.72475-33.593101 142.770676 142.770676 0 0 0 18.140274 0 23.851101 23.851101 0 0 0 19.148067-15.452826 33.5931 33.5931 0 0 0 0-19.483998 23.51517 23.51517 0 0 0-20.491791-18.140274 122.950747 122.950747 0 0 0-15.116895 0zM647.601917 943.040628a15.788757 15.788757 0 0 1-13.773171 15.116895H400.356699a17.468412 17.468412 0 0 1-16.460619-8.734206 18.812136 18.812136 0 0 1 0-20.15586 16.124688 16.124688 0 0 1 16.460619-4.703034h227.089358a19.148067 19.148067 0 0 1 19.148067 20.827722zM405.731595 899.369598a18.140274 18.140274 0 0 1-16.460619-12.765378 17.804343 17.804343 0 0 1 15.452826-23.851101H635.508401a18.812136 18.812136 0 0 1 17.804343 13.773171 19.819929 19.819929 0 0 1-10.749792 21.499584 24.187032 24.187032 0 0 1-8.734206 0H423.535938zM437.64504 1022.992207a17.132481 17.132481 0 0 1-15.452826-9.406068 18.140274 18.140274 0 0 1 15.116895-26.202618h139.411367a19.819929 19.819929 0 0 1 19.483998 17.804343 16.124688 16.124688 0 0 1-8.734206 15.788757 19.148067 19.148067 0 0 1-9.741999 3.023379H442.348074z\" /></slot>\n // <slot name=\"default\"></slot>\n // </svg>\n // `,\n\n props: {\n //b1color: '#F5BC1A',\n color: {\n type: String,\n required: false,\n default: 'grey',\n },\n height: {\n type: String,\n required: false,\n default: '32',\n },\n x: {\n type: String,\n required: false,\n default: '0',\n },\n y: {\n type: String,\n required: false,\n default: '0',\n },\n title: {\n type: String,\n required: false,\n default: '',\n },\n clickable: {\n type: Boolean,\n required: false,\n default: false,\n },\n glow: {\n type: Boolean,\n required: false,\n default: false,\n },\n ison: {\n type: Boolean,\n required: false,\n default: false,\n },\n },\n\n data: function() { return {\n }}, // -- End of data -- //\n\n computed: {\n\n /** Compute the current fill colour */\n cfillcolor: function() {\n return this.ison ? '#d4af37' : this.color\n },\n\n /** Compute the current style */\n ciconstyle: function() {\n return {\n //color: this.cfillcolor, //this.ison ? '#d4af37' : this.color,\n top: this.y + 'px',\n left: this.x + 'px',\n cursor: this.clickable ? 'pointer' : 'default',\n position: 'absolute',\n filter: this.glow || this.ison ? 'url(#glow)' : 'url(#shadow)',\n transition: 'filter 2s ease-in-out', //'filter 10s',\n }\n },\n }, // -- End of methods -- //\n\n methods: {\n\n /** When the icon is clicked, emit an event\n * and optionally return some data to the parent\n * In the parent: <bulb @bulbclicked=\"myClick\"></bulb>\n * and define method `myclick: function(event, returnData){}`\n */\n doClick: function(event) {\n if ( !this.clickable ) return\n \n var returnData = { \n 'srcId': '',\n 'event': event,\n }\n\n // Try to find which icon was clicked (have to have an id attrib on the <bulb> tag)\n //var whichIcon = this.findWithAttr(event.path,'tagName','svg')\n\n //if ( whichIcon !== -1 ) {\n // Report back the src tag id\n //returnData.srcId = event.path[whichIcon].id\n //}\nreturnData.srcId = this.$vnode.elm.id\n\n this.$emit('bulbclicked', returnData)\n\n //console.log('Icon clicked! (COMPONENT)', event)\n }, // - End of doClick() - //\n\n /** Find array element by object attribute or return -1\n * @param {Array} array The array to search\n * @param {string} prop The property used for searching\n * @returns {number} Array offset or -1\n */\n findWithAttr: function(array, prop, value) {\n for(var i = 0; i < array.length; i += 1) {\n if(array[i][prop] === value) {\n return i;\n }\n }\n return -1;\n }, // - End of findWithAttr() - //\n\n }, // -- End of methods -- //\n\n}) // --- End of bulb component --- //\n//#endregion ---- Components ---- //\n\n// Define the VueJS app\nvar app1 = new Vue({\n el: '#app',\n data: {\n\n isonb: false,\n isona: false,\n isonc: false,\n isond: false,\n\n }, // --- End of data --- //\n \n methods: {\n\n // Called if one of the bulb icons is clicked\n myClick: function(returnedData) {\n\n // returnedData.srcId contains the element id, returnedData.event contains the click event object\n console.log('Somebody clicked the ' + returnedData.srcId + ' icon!', returnedData)\n\n var out\n\n if ( returnedData.srcId === 'a' ) {\n out = this.isona = !this.isona\n }\n if ( returnedData.srcId === 'b' ) {\n out = this.isonb = !this.isonb\n }\n if ( returnedData.srcId === 'c' ) {\n out = this.isonc = !this.isonc\n }\n if ( returnedData.srcId === 'd' ) {\n out = this.isond = !this.isond\n }\n\n // Lets tell Node-RED\n uibuilder.send({\n 'topic': returnedData.srcId.toUpperCase(),\n 'payload': out,\n })\n\n }, // -- End of myClick -- //\n\n }, // --- End of methods --- //\n\n // Get things started\n mounted: function(){\n\n /** **REQUIRED** Start uibuilder comms with Node-RED */\n uibuilder.start()\n\n // msg is updated when a standard msg is received from Node-RED\n uibuilder.onChange('msg', function(msg){\n\n if ( msg.payload.hasOwnProperty('A') ) {\n app1.isona = msg.payload.A\n }\n if ( msg.payload.hasOwnProperty('B') ) {\n app1.isonb = msg.payload.B\n }\n if ( msg.payload.hasOwnProperty('C') ) {\n app1.isonc = msg.payload.C\n }\n if ( msg.payload.hasOwnProperty('D') ) {\n app1.isond = msg.payload.D\n }\n\n console.log('incoming msg', app1.isona, app1.isonb, app1.isonc, app1.isond, msg)\n })\n\n } // --- End of mounted hook --- //\n\n}) // --- End of app1 --- //\n\n// EOF","x":570,"y":320,"wires":[]}]
Doh! I can't post the SVG I'm afraid. You'll find it elsewhere no doubt.
Hello
no matter what I try, I can't get there.
In the uibuilder I go under files Orfner /src and replace the index.html and index.js
If I now copy the content from the backgrond.svg and paste it into the index.html, I have a picture without lamps.
If I create a file with background.svg in the folder and insert the content, then it's not html and I don't have an image either.
What is the correct approach, I read that nowhere.
sorry but i don't know much about programming.
Can you please share your index.html, index.css (if changed) and index.js files so that I can see where you are up to? I'll take a look
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
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.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy