This is a simple example of using SVG in a template node (node-red-dashboard) to display and update graphics overlaid on a floor plan. Useful for lots of things, but I used this for showing sensor states in a home
-
-
Save ssadams11/a6b09cbd3019ba579053433e27fbe87f to your computer and use it in GitHub Desktop.
Visualizing and Animating Motion Sensors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{"id":"a05b0da9.4c666","type":"tab","label":"Visualizing Motion Sensors","disabled":false,"info":""},{"id":"2f7facf6.23ab74","type":"ui_template","z":"a05b0da9.4c666","group":"44ad467f.f314c8","name":"Visualization","order":1,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\n</head>\n<body style=\"margin: 0px;\">\n\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"500\" height=\"800\" xml:space=\"preserve\" id=\"i01XXX\">\n <!-- Generated by PaintCode - http://www.paintcodeapp.com -->\n <defs>\n <pattern id=\"i01XXX-floorPlanClean-floorPlan\" x=\"0\" y=\"0\" width=\"472\" height=\"1050\" patternUnits=\"userSpaceOnUse\" viewBox=\"0 0 472 1050\">\n <image xlink:href=\"https://i.pinimg.com/474x/24/25/68/242568f663ba3e62eea4eaea3a26d58d--small-house-plans--sq-ft-house-plans.jpg\" x=\"0\" y=\"0\" width=\"238\" height=\"533\" />\n </pattern>\n </defs>\n <rect id=\"i01XXX-floorPlan\" stroke=\"none\" fill=\"url(#i01XXX-floorPlanClean-floorPlan)\" x=\"0\" y=\"0\" width=\"236\" height=\"525\" transform=\"scale(1.5, 1.5)\" />\n <g id=\"i01XXX-allSensors\">\n <g id=\"i01XXX-motionSensors\" opacity=\"0.28\">\n <g id=\"i01XXX-gM13\">\n <path id=\"i01XXX-oM13\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" d=\"M 40.18,-62.19 C 40.18,-26.36 40.18,20.18 40.18,62.19 34.97,63.56 29.49,64.3 23.85,64.3 -11.51,64.3 -40.18,35.51 -40.18,-0 -40.18,-20.82 -30.32,-39.32 -15.05,-51.07 -4.26,-59.37 9.22,-64.3 23.85,-64.3 29.49,-64.3 34.97,-63.56 40.18,-62.19 Z M 40.18,-62.19\" transform=\"translate(106.37, 362.71) rotate(90.48)\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"80\" y=\"340\"><tspan x=\"80\" y=\"379\">M13</tspan></text>\n </g>\n <g id=\"i01XXX-gM11\">\n <path id=\"i01XXX-oM11\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" d=\"M 40.5,-62.39 C 40.5,-26.45 40.5,20.24 40.5,62.39 35.25,63.77 29.73,64.5 24.05,64.5 -11.6,64.5 -40.5,35.62 -40.5,-0 -40.5,-20.88 -30.57,-39.45 -15.17,-51.24 -4.3,-59.56 9.3,-64.5 24.05,-64.5 29.73,-64.5 35.25,-63.77 40.5,-62.39 Z M 40.5,-62.39\" transform=\"translate(106.5, 544.5) rotate(-90)\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"80\" y=\"504\"><tspan x=\"80\" y=\"543\">M11</tspan></text>\n </g>\n <g id=\"i01XXX-gM10\">\n <rect id=\"i01XXX-oM10\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" x=\"37\" y=\"408\" width=\"122\" height=\"89\" rx=\"13\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"62\" y=\"408\"><tspan x=\"62\" y=\"460\">M10</tspan></text>\n </g>\n <g id=\"i01XXX-gM8\">\n <rect id=\"i01XXX-oM8\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" x=\"19\" y=\"704\" width=\"61\" height=\"67\" rx=\"13\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"32\" y=\"720\"><tspan x=\"32\" y=\"745\">M8</tspan></text>\n </g>\n <g id=\"i01XXX-gM9\">\n <rect id=\"i01XXX-oM9\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" x=\"121\" y=\"696\" width=\"54\" height=\"82\" rx=\"13\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"134\" y=\"721\"><tspan x=\"134\" y=\"745\">M9</tspan></text>\n </g>\n <g id=\"i01XXX-gM6\">\n <circle id=\"i01XXX-oM6\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" cx=\"95.5\" cy=\"237.5\" r=\"63.5\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"77\" y=\"206\"><tspan x=\"77\" y=\"244\">M6</tspan></text>\n </g>\n <g id=\"i01XXX-gM5\">\n <circle id=\"i01XXX-oM5\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" cx=\"234.5\" cy=\"219.5\" r=\"63.5\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"212\" y=\"188\"><tspan x=\"212\" y=\"226\">M5</tspan></text>\n </g>\n <g id=\"i01XXX-gM4\">\n <circle id=\"i01XXX-oM4\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" cx=\"275.5\" cy=\"339.5\" r=\"63.5\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"257\" y=\"308\"><tspan x=\"257\" y=\"346\">M4</tspan></text>\n </g>\n <g id=\"i01XXX-gM3\">\n <circle id=\"i01XXX-oM3\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" cx=\"234.5\" cy=\"466.5\" r=\"63.5\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"212\" y=\"435\"><tspan x=\"212\" y=\"473\">M3</tspan></text>\n </g>\n <g id=\"i01XXX-gM2\">\n <circle id=\"i01XXX-oM2\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" cx=\"238.5\" cy=\"593.5\" r=\"63.5\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"216\" y=\"562\"><tspan x=\"216\" y=\"600\">M2</tspan></text>\n </g>\n <g id=\"i01XXX-gM1\">\n <circle id=\"i01XXX-oM1\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" cx=\"238.5\" cy=\"687.5\" r=\"63.5\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"216\" y=\"656\"><tspan x=\"216\" y=\"694\">M1</tspan></text>\n </g>\n <g id=\"i01XXX-gM7\">\n <rect id=\"i01XXX-oM7\" stroke=\"none\" fill=\"rgb(0, 249, 0)\" x=\"19\" y=\"585\" width=\"149\" height=\"67\" rx=\"13\" />\n \n <text fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"20\" x=\"51\" y=\"601\"><tspan x=\"51\" y=\"626\">M7</tspan></text>\n </g>\n </g>\n </g>\n</svg>\n\n\n\n\n<script>\n (function(scope){ \n scope.$watch('msg', function(msg) {\n if (msg){\n\n $(msg.payload.jquerySelector).attr('opacity', msg.payload.opacity)\n }\n });\n })(scope);\n</script>\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1050,"y":240,"wires":[[]]},{"id":"129b5f3f.fdcd51","type":"inject","z":"a05b0da9.4c666","name":"motions to 1.0","topic":"","payload":"{\"jquerySelector\":\"#i01XXX-motionSensors\",\"opacity\":1}","payloadType":"json","repeat":"","crontab":"","once":false,"x":210,"y":200,"wires":[["2f7facf6.23ab74"]]},{"id":"f39259ef.75cf38","type":"inject","z":"a05b0da9.4c666","name":"motions to 0.5","topic":"","payload":"{\"jquerySelector\":\"#i01XXX-motionSensors\",\"opacity\":0.5}","payloadType":"json","repeat":"","crontab":"","once":false,"x":210,"y":260,"wires":[["2f7facf6.23ab74"]]},{"id":"1bb2cfc0.0a7a8","type":"ui_button","z":"a05b0da9.4c666","name":"","group":"44ad467f.f314c8","order":0,"width":0,"height":0,"passthru":false,"label":"Show All Motion Sensors","color":"","bgcolor":"","icon":"","payload":"{\"jquerySelector\":\"#i01XXX-motionSensors\",\"opacity\":1}","payloadType":"json","topic":"","x":450,"y":320,"wires":[["2f7facf6.23ab74"]]},{"id":"28b2e646.dd348a","type":"ui_button","z":"a05b0da9.4c666","name":"","group":"44ad467f.f314c8","order":0,"width":0,"height":0,"passthru":false,"label":"Hide All Motion Sensors","color":"","bgcolor":"","icon":"","payload":"{\"jquerySelector\":\"#i01XXX-motionSensors\",\"opacity\":0}","payloadType":"json","topic":"","x":450,"y":360,"wires":[["2f7facf6.23ab74"]]},{"id":"4e254e02.8ac8a","type":"inject","z":"a05b0da9.4c666","name":"Random values","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":200,"y":560,"wires":[["d7443efb.72a2a"]]},{"id":"d7443efb.72a2a","type":"function","z":"a05b0da9.4c666","name":"all short names","func":"all = ['M1','M2','M3','M4','M5','M6','M7','M8','M9','M10','M11','M13']\nmsg.payload = all\nreturn msg;","outputs":1,"noerr":0,"x":400,"y":560,"wires":[["75a22e71.19b1e"]]},{"id":"954ddfdd.3cb17","type":"function","z":"a05b0da9.4c666","name":"set opacity on the graphics","func":"shortName = msg.payload\npay = {jquerySelector: \"#i01XXX-g\"+shortName,\nopacity: (Math.random() > 0.5 ? 1.0 : 0.0)}\nmsg.payload = pay\nreturn msg;","outputs":1,"noerr":0,"x":840,"y":560,"wires":[["2f7facf6.23ab74"]]},{"id":"75a22e71.19b1e","type":"split","z":"a05b0da9.4c666","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":590,"y":560,"wires":[["954ddfdd.3cb17","3d0a3d4e.5c8232"]]},{"id":"3d0a3d4e.5c8232","type":"function","z":"a05b0da9.4c666","name":"set opacity on the graphic labels","func":"shortName = msg.payload\npay = {jquerySelector: \"#i01XXX-label\"+shortName,\nopacity: (Math.random() > 0.5 ? 1.0 : 0.0)}\nmsg.payload = pay\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":600,"wires":[["2f7facf6.23ab74"]]},{"id":"de434fe4.0e788","type":"ui_button","z":"a05b0da9.4c666","name":"","group":"44ad467f.f314c8","order":0,"width":0,"height":0,"passthru":false,"label":"Randomly Switch Motion Sensors","color":"","bgcolor":"","icon":"","payload":"{\"jquerySelector\":\"#i01XXX-motionSensors\",\"opacity\":0}","payloadType":"json","topic":"","x":420,"y":400,"wires":[["d7443efb.72a2a"]]},{"id":"fe01480f.fec528","type":"comment","z":"a05b0da9.4c666","name":"Open the dashboard and select Testing Motion Viz","info":"","x":260,"y":100,"wires":[]},{"id":"44ad467f.f314c8","type":"ui_group","z":"","name":"Testing Motions","tab":"88123fcf.a392c","disp":true,"width":"10"},{"id":"88123fcf.a392c","type":"ui_tab","z":"","name":"Testing Motion Viz","icon":"dashboard"}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment