Reactive SVG (using UI-Builder + Vue.js)
Demo for SVG controlled by Node-RED
- Using Vue.js to modify styles of SVG elements
- Circle, Square, Triangle ...
- Control Color and Sizes of SVG shapes
Requirements
[{"id":"356a431c.d413cc","type":"tab","label":"SVG Example","disabled":false,"info":""},{"id":"5da94a1f.94da84","type":"debug","z":"356a431c.d413cc","name":"simple-debug","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":800,"y":220,"wires":[]},{"id":"a4d77468.f82648","type":"uibuilder","z":"356a431c.d413cc","name":"Simple Example","topic":"","url":"uib_svg","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":580,"y":320,"wires":[["5da94a1f.94da84"],["4416ab7b.8dbc84"]]},{"id":"4416ab7b.8dbc84","type":"debug","z":"356a431c.d413cc","name":"uib controls","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":790,"y":360,"wires":[]},{"id":"296ab594.2ccb2a","type":"ui_colour_picker","z":"356a431c.d413cc","name":"","label":"circle color","group":"9fe02a61.963298","format":"hex","outformat":"string","showSwatch":true,"showPicker":false,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"true","order":0,"width":0,"height":0,"passthru":true,"topic":"svg/circle","x":150,"y":260,"wires":[["16b05af8.8234f5"]]},{"id":"16b05af8.8234f5","type":"template","z":"356a431c.d413cc","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#{{payload}}","output":"str","x":400,"y":320,"wires":[["a4d77468.f82648"]]},{"id":"78b2708f.584d9","type":"comment","z":"356a431c.d413cc","name":"uibuilder/SVG Example","info":"[Front-End](/uib_svg)\n\nThis flow passes HTML color values and numbers to UI-builder. This information is used to modify various elements in an SVG based on the topic\n\n## Configuration\n\nUpdate the files:\n\n* `index.html`\n* `index.js`\n* `index.css`\n\nAccording to the example(s) in the 3 other comment nodes in this example.\n\n## Usage\n\n* use the gui at <http://localhost:1880/ui>\n* view the result at <http://localhost:1880/uib_svg> ","x":180,"y":120,"wires":[]},{"id":"4ceeb846.8c5b88","type":"comment","z":"356a431c.d413cc","name":"index.html","info":"<!doctype html>\n<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>uibuilder SVG example</title>\n <meta name=\"description\" content=\"Node-RED uibuilder - Simple example using VueJS\">\n\n <link rel=\"icon\" href=\"./images/node-blue.ico\">\n\n <!-- Put your own custom styles in here -->\n <link rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n</head><body>\n \n <!-- The \"app\" element is where the code for dynamic updates is attached -->\n\t<div id=\"app\" :style=\"appStyle\">\n\t \n\t <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1000 1000\">\n <g>\n <circle cx=\"333\" cy=\"500\" :r=\"circleRadius\" stroke=\"black\" \n stroke-width=\"3\" :fill=\"circleFill\" />\n <rect :style=\"squareStyle\"/>\n <polygon transform='translate(500 400)' :style=\"triangleStyle\" points=\"0,200 100,0 200,200\" />\n </g> \n </svg>\n\t \n\t</div>\n\n <!-- Vendor Libraries - Load in the right order -->\n <script src=\"../uibuilder/vendor/socket.io/socket.io.js\"></script>\n <script src=\"../uibuilder/vendor/vue/dist/vue.min.js\"></script>\n\n <!-- REQUIRED: Sets up Socket listeners, the uibuilder and msg objects -->\n <script src=\"./uibuilderfe.min.js\"></script>\n\n <!-- Put your own custom code in here -->\n <script src=\"./index.js\"></script>\n\n</body></html>","x":540,"y":120,"wires":[],"icon":"node-red/parser-html.svg"},{"id":"90c35d49.ae5c1","type":"comment","z":"356a431c.d413cc","name":"index.js","info":"/* jshint browser: true, esversion: 5, asi: true */\n/*globals uibuilder, Vue */\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/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */\n\nvar app1 = new Vue({\n // The HTML element to attach to\n\tel: '#app',\n\t/** Pre-defined data\n\t * Anything defined here can be used in the HTML\n\t * if you update it, the HTML will automatically update\n\t */\n\tdata: {\n\n\t\t// individual attributes\n\t\tcircleFill: '#ff0000',\n\t\tcircleRadius: 100,\n\t\t\n\t\t// attributes grouped into styles\n\t\tappStyle: {\n\t\t backgroundColor: '#ffffff'\n\t\t},\n\t\tsquareStyle: {\n\t\t fill: '#00ff00',\n\t\t stroke: 'black',\n\t\t strokeWidth: '3',\n\t\t x:800,\n\t\t y:400,\n\t\t width: 200,\n\t\t height:200,\n\t\t},\n\t\ttriangleStyle: {\n\t\t fill: '#ffff00',\n\t\t stroke: 'black',\n\t\t strokeWidth: '3'\n\t\t}\n\t},\n\n // This is called when Vue is fully loaded\n\tmounted: function() {\n\t \n\t // Start up uibuilder\n\t\tuibuilder.start()\n\t\t\n\t\t// Keep a convenient reference to the Vue app\n\t\tvar app = this\n\n /** Triggered when the node on the Node-RED server\n * recieves a (non-control) msg\n */\n\t\tuibuilder.onChange('msg', function(msg) {\n\t\t \n\t\t // change app style\n\t\t if(msg.topic === 'svg/app') {\n \t\t app.appStyle.backgroundColor = msg.payload;\n\t\t }\n\t\t \n\t\t // change circle attribute \n\t if(msg.topic === 'svg/circle') {\n \t\t\tapp.circleFill = msg.payload;\n\t }\n \t\t\t\n\t\t\t// change square style\n\t\t\tif(msg.topic === 'svg/square') {\n \t\t\tapp.squareStyle.fill = msg.payload;\n\t\t\t}\n\t\t\t\n\t\t\t//change triangle style\n\t\t\tif(msg.topic === 'svg/triangle') {\n\t\t\t app.triangleStyle.fill = msg.payload;\n\t\t\t}\n\t\t\t\n\t\t\t// change square size\n\t\t if(msg.topic === 'svg/square/size') {\n\t\t\t var d = msg.payload;\n \t\t\tapp.squareStyle.width = d;\n \t\t\tapp.squareStyle.height = d;\n \t\t\tapp.squareStyle.x = 900 - d/2;\n \t\t\tapp.squareStyle.y = 500 - d/2;\n\t\t\t}\n\t\t\t\n\t\t\t// change circle size\n\t\t if(msg.topic === 'svg/circle/size') {\n \t\t\tapp.circleRadius = msg.payload\n\t\t\t}\n\t\t\t\n\t\t\t\n\t\t})\n\n\t\t// Send message back to node-red\n\t\t// uibuilder.send({payload:'some message'})\n\n\t\t// Triggered on reciept of a control message from node-red\n\t\t//uibuilder.onChange('ctrlMsg', function(msg) {\n\t\t// console.log(msg)\n\t\t//})\n\t},\n\t\n}) // --- End of the Vue app definition --- //\n\n// EOF","x":530,"y":160,"wires":[],"icon":"font-awesome/fa-code"},{"id":"1bbfc590.08dd9a","type":"comment","z":"356a431c.d413cc","name":"index.css","info":"#app {\n position: fixed;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n}","x":540,"y":200,"wires":[],"icon":"node-red/hash.svg"},{"id":"38b37b68.6698b4","type":"ui_colour_picker","z":"356a431c.d413cc","name":"","label":"square color","group":"9fe02a61.963298","format":"hex","outformat":"string","showSwatch":true,"showPicker":false,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"true","order":0,"width":0,"height":0,"passthru":true,"topic":"svg/square","x":150,"y":340,"wires":[["16b05af8.8234f5"]]},{"id":"691bf094.c5a3f","type":"ui_colour_picker","z":"356a431c.d413cc","name":"","label":"triangle color","group":"9fe02a61.963298","format":"hex","outformat":"string","showSwatch":true,"showPicker":false,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"true","order":0,"width":0,"height":0,"passthru":true,"topic":"svg/triangle","x":150,"y":420,"wires":[["16b05af8.8234f5"]]},{"id":"841eebab.e87238","type":"ui_colour_picker","z":"356a431c.d413cc","name":"","label":"background","group":"9fe02a61.963298","format":"hex","outformat":"string","showSwatch":true,"showPicker":false,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"square":"false","dynOutput":"true","order":0,"width":0,"height":0,"passthru":true,"topic":"svg/app","x":150,"y":180,"wires":[["16b05af8.8234f5"]]},{"id":"b6b340b7.b5a71","type":"ui_slider","z":"356a431c.d413cc","name":"","label":"square size","tooltip":"","group":"9fe02a61.963298","order":4,"width":0,"height":0,"passthru":true,"outs":"all","topic":"svg/square/size","min":"50","max":"200","step":"1","x":150,"y":540,"wires":[["a4d77468.f82648"]]},{"id":"3a6e6612.4d3a7a","type":"ui_slider","z":"356a431c.d413cc","name":"","label":"circle size","tooltip":"","group":"9fe02a61.963298","order":4,"width":0,"height":0,"passthru":true,"outs":"all","topic":"svg/circle/size","min":"50","max":"200","step":1,"x":140,"y":600,"wires":[["a4d77468.f82648"]]},{"id":"9fe02a61.963298","type":"ui_group","z":"","name":"SVG Control","tab":"cd3008cf.a73998","disp":true,"width":"6","collapse":false},{"id":"cd3008cf.a73998","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
