From b119221b68a48319a32713faf683039b9878cc0a Mon Sep 17 00:00:00 2001 From: sdorn Date: Wed, 27 May 2020 14:05:47 +0000 Subject: [PATCH] update --- flows_ubuntu.json | 2 +- uibuilder/uibuilder/src/.eslintrc.json | 35 ++++ uibuilder/uibuilder/src/index.css | 14 ++ uibuilder/uibuilder/src/index.html | 147 +++++++++++++++ uibuilder/uibuilder/src/index.js | 197 +++++++++++++++++++++ uibuilder/uibuilder/src/manifest.json | 15 ++ uibuilder/uibuilder/src/uibuilder.appcache | 37 ++++ 7 files changed, 446 insertions(+), 1 deletion(-) create mode 100644 uibuilder/uibuilder/src/.eslintrc.json create mode 100644 uibuilder/uibuilder/src/index.css create mode 100644 uibuilder/uibuilder/src/index.html create mode 100644 uibuilder/uibuilder/src/index.js create mode 100644 uibuilder/uibuilder/src/manifest.json create mode 100644 uibuilder/uibuilder/src/uibuilder.appcache diff --git a/flows_ubuntu.json b/flows_ubuntu.json index 3e341ce..d54d879 100644 --- a/flows_ubuntu.json +++ b/flows_ubuntu.json @@ -1 +1 @@ -[{"id":"f55cffcf.8b0d7","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"e1485bac.6a7678","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"8a767adb.353ab8","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","reset":false},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":false},"page-titlebar-backgroundColor":{"value":"#097479","edited":false},"page-backgroundColor":{"value":"#111111","edited":false},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#0eb8c0","edited":false},"group-borderColor":{"value":"#555555","edited":false},"group-backgroundColor":{"value":"#333333","edited":false},"widget-textColor":{"value":"#eeeeee","edited":false},"widget-backgroundColor":{"value":"#097479","edited":false},"widget-borderColor":{"value":"#333333","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"true","lockMenu":"false","allowTempTheme":"false","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"54408c37.e2d514","type":"ui_group","z":"","name":"Wind","tab":"16f66f13.f15a51","order":2,"disp":true,"width":"4","collapse":false},{"id":"521d5fa8.b71d","type":"ui_group","z":"","name":"testy","tab":"16f66f13.f15a51","order":3,"disp":true,"width":"4","collapse":false},{"id":"16f66f13.f15a51","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"36831b65.31c7d4","type":"tls-config","z":"","name":"sdoit","cert":"","key":"","ca":"","certname":"","keyname":"","caname":"","servername":"mqtt.sdoit.de","verifyservercert":true},{"id":"af6f4e08.6205e","type":"mqtt-broker","z":"","name":"SDOIT","broker":"mqtt.sdoit.de","port":"8883","tls":"36831b65.31c7d4","clientid":"","usetls":true,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"23030cfe.278db4","type":"ui_group","z":"","name":"Thermometer","tab":"16f66f13.f15a51","order":1,"disp":true,"width":"8","collapse":true},{"id":"a3bb39e.64256c8","type":"ui_group","z":"","name":"Text","tab":"16f66f13.f15a51","order":4,"disp":false,"width":"4","collapse":false},{"id":"1c9518b1.df7fd7","type":"ui_template","z":"f55cffcf.8b0d7","group":"521d5fa8.b71d","name":"Barometer","order":1,"width":0,"height":0,"format":"\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":160,"wires":[[]]},{"id":"bc6a3316.4f6ee","type":"comment","z":"f55cffcf.8b0d7","name":"Example use of Steelseries Gauge","info":"","x":180,"y":40,"wires":[]},{"id":"fc35a9bc.e558e8","type":"link out","z":"f55cffcf.8b0d7","name":"weather_out","links":["3f5b8a45.0d9216"],"x":575,"y":100,"wires":[]},{"id":"3f5b8a45.0d9216","type":"link in","z":"e1485bac.6a7678","name":"weather_in","links":["fc35a9bc.e558e8"],"x":35,"y":100,"wires":[["d8553d27.4787b"]]},{"id":"7f11251a.0345bc","type":"mqtt out","z":"e1485bac.6a7678","name":"raspi/waether","topic":"raspi/weather","qos":"2","retain":"true","broker":"af6f4e08.6205e","x":360,"y":100,"wires":[]},{"id":"c94df5bf.499da8","type":"mqtt in","z":"f55cffcf.8b0d7","name":"","topic":"raspi/weather","qos":"2","datatype":"json","broker":"af6f4e08.6205e","x":90,"y":200,"wires":[["3b412217.f8672e","2563f968.660cd6","882effa3.ae48d","e1e2030e.90554","1c9518b1.df7fd7","209b5bc9.8bef14","ae192b1f.a60ba8","46e985f2.ba73fc","9b68311c.746a3"]]},{"id":"d769c103.82a23","type":"debug","z":"f55cffcf.8b0d7","name":"MQTT raspi/weather","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":380,"y":500,"wires":[]},{"id":"d8553d27.4787b","type":"json","z":"e1485bac.6a7678","name":"","property":"payload","action":"","pretty":true,"x":150,"y":100,"wires":[["7f11251a.0345bc"]]},{"id":"59031b34.5e2794","type":"catch","z":"e1485bac.6a7678","name":"","scope":["42cbe07.ed61f2","df0659a0.f40478","131f2e0.4cb93d2"],"uncaught":false,"x":220,"y":220,"wires":[["d951805d.8606a"]]},{"id":"d951805d.8606a","type":"debug","z":"e1485bac.6a7678","name":"Error","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":500,"y":220,"wires":[]},{"id":"f24db0a9.b6b76","type":"catch","z":"f55cffcf.8b0d7","name":"","scope":null,"uncaught":false,"x":240,"y":740,"wires":[["d4f3a783.fe7fb8"]]},{"id":"d4f3a783.fe7fb8","type":"debug","z":"f55cffcf.8b0d7","name":"Error F2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":380,"y":740,"wires":[]},{"id":"58c2cf31.f0696","type":"openweathermap","z":"f55cffcf.8b0d7","name":"Weather","wtype":"current","lon":"","lat":"","city":"Frankfurt","country":"Deutschland","language":"de","x":400,"y":100,"wires":[["fc35a9bc.e558e8"]]},{"id":"c05902a8.1f7d1","type":"ui_button","z":"f55cffcf.8b0d7","name":"","group":"a3bb39e.64256c8","order":4,"width":0,"height":0,"passthru":true,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":220,"y":100,"wires":[["58c2cf31.f0696"]]},{"id":"3d71bc36.14fd24","type":"inject","z":"f55cffcf.8b0d7","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"600","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":100,"wires":[["c05902a8.1f7d1"]]},{"id":"209b5bc9.8bef14","type":"ui_template","z":"f55cffcf.8b0d7","group":"54408c37.e2d514","name":"windir","order":1,"width":0,"height":0,"format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":200,"wires":[[]]},{"id":"3b412217.f8672e","type":"moment","z":"f55cffcf.8b0d7","name":"","topic":"","input":"","inputType":"date","inTz":"Europe/London","adjAmount":"1","adjType":"hours","adjDir":"add","format":"LL kk:mm:ss","locale":"de","output":"","outputType":"msg","outTz":"Europe/London","x":420,"y":420,"wires":[["b907f43f.f6ee88"]]},{"id":"b907f43f.f6ee88","type":"ui_text","z":"f55cffcf.8b0d7","group":"a3bb39e.64256c8","order":3,"width":0,"height":0,"name":"","label":"Last Update:","format":"{{msg.payload}}","layout":"col-center","x":630,"y":420,"wires":[]},{"id":"ae192b1f.a60ba8","type":"ui_template","z":"f55cffcf.8b0d7","group":"23030cfe.278db4","name":"Thermometer","order":1,"width":"3","height":"8","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":420,"y":240,"wires":[[]]},{"id":"46e985f2.ba73fc","type":"ui_template","z":"f55cffcf.8b0d7","group":"23030cfe.278db4","name":"Hygrometer","order":1,"width":"3","height":"8","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":410,"y":320,"wires":[[]]},{"id":"90fb1b54.6c4548","type":"http in","z":"e1485bac.6a7678","name":"Test","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":90,"y":320,"wires":[["f376ca65.08a188"]]},{"id":"686afa6f.0b93a4","type":"http response","z":"e1485bac.6a7678","name":"","statusCode":"","headers":{},"x":590,"y":320,"wires":[]},{"id":"f376ca65.08a188","type":"http request","z":"e1485bac.6a7678","name":"","method":"GET","ret":"txt","paytoqs":true,"url":"http://ubuntu.fritz.box:1880/myjs/mytest.html","tls":"","persist":false,"proxy":"","authType":"","x":330,"y":320,"wires":[["686afa6f.0b93a4"]]},{"id":"2563f968.660cd6","type":"link out","z":"f55cffcf.8b0d7","name":"mqtt_w_in","links":["3fa8fcb0.36f244"],"x":175,"y":340,"wires":[]},{"id":"3fa8fcb0.36f244","type":"link in","z":"f55cffcf.8b0d7","name":"w_in","links":["2563f968.660cd6"],"x":235,"y":500,"wires":[["d769c103.82a23","226327d7.6e4778"]]},{"id":"226327d7.6e4778","type":"change","z":"f55cffcf.8b0d7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"data","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":580,"wires":[[]]},{"id":"882effa3.ae48d","type":"debug","z":"f55cffcf.8b0d7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":180,"y":420,"wires":[]},{"id":"e1e2030e.90554","type":"ui_text","z":"f55cffcf.8b0d7","group":"a3bb39e.64256c8","order":1,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload.detail}}","layout":"row-spread","x":390,"y":280,"wires":[]},{"id":"9b68311c.746a3","type":"ui_template","z":"f55cffcf.8b0d7","group":"54408c37.e2d514","name":"Windspeed","order":2,"width":"0","height":"0","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":410,"y":360,"wires":[[]]}] \ No newline at end of file +[{"id":"f55cffcf.8b0d7","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"e1485bac.6a7678","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"8a767adb.353ab8","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","reset":false},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":false},"page-titlebar-backgroundColor":{"value":"#097479","edited":false},"page-backgroundColor":{"value":"#111111","edited":false},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#0eb8c0","edited":false},"group-borderColor":{"value":"#555555","edited":false},"group-backgroundColor":{"value":"#333333","edited":false},"widget-textColor":{"value":"#eeeeee","edited":false},"widget-backgroundColor":{"value":"#097479","edited":false},"widget-borderColor":{"value":"#333333","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"true","lockMenu":"false","allowTempTheme":"false","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"54408c37.e2d514","type":"ui_group","z":"","name":"Wind","tab":"16f66f13.f15a51","order":2,"disp":true,"width":"4","collapse":false},{"id":"521d5fa8.b71d","type":"ui_group","z":"","name":"testy","tab":"16f66f13.f15a51","order":3,"disp":true,"width":"4","collapse":false},{"id":"16f66f13.f15a51","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"36831b65.31c7d4","type":"tls-config","z":"","name":"sdoit","cert":"","key":"","ca":"","certname":"","keyname":"","caname":"","servername":"mqtt.sdoit.de","verifyservercert":true},{"id":"af6f4e08.6205e","type":"mqtt-broker","z":"","name":"SDOIT","broker":"mqtt.sdoit.de","port":"8883","tls":"36831b65.31c7d4","clientid":"","usetls":true,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"23030cfe.278db4","type":"ui_group","z":"","name":"Thermometer","tab":"16f66f13.f15a51","order":1,"disp":true,"width":"8","collapse":true},{"id":"a3bb39e.64256c8","type":"ui_group","z":"","name":"Text","tab":"16f66f13.f15a51","order":4,"disp":false,"width":"4","collapse":false},{"id":"1c9518b1.df7fd7","type":"ui_template","z":"f55cffcf.8b0d7","group":"521d5fa8.b71d","name":"Barometer","order":1,"width":0,"height":0,"format":"\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":140,"wires":[[]]},{"id":"bc6a3316.4f6ee","type":"comment","z":"f55cffcf.8b0d7","name":"Example use of Steelseries Gauge","info":"","x":180,"y":40,"wires":[]},{"id":"fc35a9bc.e558e8","type":"link out","z":"f55cffcf.8b0d7","name":"weather_out","links":["3f5b8a45.0d9216"],"x":575,"y":100,"wires":[]},{"id":"3f5b8a45.0d9216","type":"link in","z":"e1485bac.6a7678","name":"weather_in","links":["fc35a9bc.e558e8"],"x":35,"y":100,"wires":[["d8553d27.4787b"]]},{"id":"7f11251a.0345bc","type":"mqtt out","z":"e1485bac.6a7678","name":"raspi/waether","topic":"raspi/weather","qos":"2","retain":"true","broker":"af6f4e08.6205e","x":360,"y":100,"wires":[]},{"id":"c94df5bf.499da8","type":"mqtt in","z":"f55cffcf.8b0d7","name":"","topic":"raspi/weather","qos":"2","datatype":"json","broker":"af6f4e08.6205e","x":90,"y":200,"wires":[["3b412217.f8672e","2563f968.660cd6","882effa3.ae48d","1c9518b1.df7fd7","209b5bc9.8bef14","ae192b1f.a60ba8","46e985f2.ba73fc","9b68311c.746a3","71debf15.2b31a","894006a2.ef6348"]]},{"id":"d769c103.82a23","type":"debug","z":"f55cffcf.8b0d7","name":"MQTT raspi/weather","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":380,"y":500,"wires":[]},{"id":"d8553d27.4787b","type":"json","z":"e1485bac.6a7678","name":"","property":"payload","action":"","pretty":true,"x":150,"y":100,"wires":[["7f11251a.0345bc"]]},{"id":"59031b34.5e2794","type":"catch","z":"e1485bac.6a7678","name":"","scope":["42cbe07.ed61f2","df0659a0.f40478","131f2e0.4cb93d2"],"uncaught":false,"x":220,"y":220,"wires":[["d951805d.8606a"]]},{"id":"d951805d.8606a","type":"debug","z":"e1485bac.6a7678","name":"Error","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":500,"y":220,"wires":[]},{"id":"f24db0a9.b6b76","type":"catch","z":"f55cffcf.8b0d7","name":"","scope":null,"uncaught":false,"x":240,"y":740,"wires":[["d4f3a783.fe7fb8"]]},{"id":"d4f3a783.fe7fb8","type":"debug","z":"f55cffcf.8b0d7","name":"Error F2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":380,"y":740,"wires":[]},{"id":"58c2cf31.f0696","type":"openweathermap","z":"f55cffcf.8b0d7","name":"Weather","wtype":"current","lon":"","lat":"","city":"Frankfurt","country":"Deutschland","language":"de","x":400,"y":100,"wires":[["fc35a9bc.e558e8"]]},{"id":"c05902a8.1f7d1","type":"ui_button","z":"f55cffcf.8b0d7","name":"","group":"a3bb39e.64256c8","order":4,"width":0,"height":0,"passthru":true,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":220,"y":100,"wires":[["58c2cf31.f0696"]]},{"id":"3d71bc36.14fd24","type":"inject","z":"f55cffcf.8b0d7","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"600","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":100,"wires":[["c05902a8.1f7d1"]]},{"id":"209b5bc9.8bef14","type":"ui_template","z":"f55cffcf.8b0d7","group":"54408c37.e2d514","name":"windir","order":1,"width":0,"height":0,"format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":180,"wires":[[]]},{"id":"3b412217.f8672e","type":"moment","z":"f55cffcf.8b0d7","name":"","topic":"","input":"","inputType":"date","inTz":"Europe/London","adjAmount":"1","adjType":"hours","adjDir":"add","format":"LL kk:mm:ss","locale":"de","output":"","outputType":"msg","outTz":"Europe/London","x":420,"y":420,"wires":[["b907f43f.f6ee88"]]},{"id":"b907f43f.f6ee88","type":"ui_text","z":"f55cffcf.8b0d7","group":"a3bb39e.64256c8","order":3,"width":0,"height":0,"name":"","label":"Last Update:","format":"{{msg.payload}}","layout":"col-center","x":630,"y":420,"wires":[]},{"id":"ae192b1f.a60ba8","type":"ui_template","z":"f55cffcf.8b0d7","group":"23030cfe.278db4","name":"Thermometer","order":1,"width":"3","height":"8","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":420,"y":220,"wires":[[]]},{"id":"46e985f2.ba73fc","type":"ui_template","z":"f55cffcf.8b0d7","group":"23030cfe.278db4","name":"Hygrometer","order":1,"width":"3","height":"8","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":410,"y":300,"wires":[[]]},{"id":"90fb1b54.6c4548","type":"http in","z":"e1485bac.6a7678","name":"Test","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":90,"y":320,"wires":[["f376ca65.08a188"]]},{"id":"686afa6f.0b93a4","type":"http response","z":"e1485bac.6a7678","name":"","statusCode":"","headers":{},"x":590,"y":320,"wires":[]},{"id":"f376ca65.08a188","type":"http request","z":"e1485bac.6a7678","name":"","method":"GET","ret":"txt","paytoqs":true,"url":"http://ubuntu.fritz.box:1880/myjs/mytest.html","tls":"","persist":false,"proxy":"","authType":"","x":330,"y":320,"wires":[["686afa6f.0b93a4"]]},{"id":"2563f968.660cd6","type":"link out","z":"f55cffcf.8b0d7","name":"mqtt_w_in","links":["3fa8fcb0.36f244"],"x":175,"y":340,"wires":[]},{"id":"3fa8fcb0.36f244","type":"link in","z":"f55cffcf.8b0d7","name":"w_in","links":["2563f968.660cd6"],"x":235,"y":500,"wires":[["d769c103.82a23","226327d7.6e4778"]]},{"id":"226327d7.6e4778","type":"change","z":"f55cffcf.8b0d7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"data","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":580,"wires":[[]]},{"id":"882effa3.ae48d","type":"debug","z":"f55cffcf.8b0d7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":180,"y":420,"wires":[]},{"id":"9b68311c.746a3","type":"ui_template","z":"f55cffcf.8b0d7","group":"54408c37.e2d514","name":"Windspeed_m","order":2,"width":"0","height":"0","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":420,"y":380,"wires":[[]]},{"id":"f2680b8d.d68ea8","type":"uibuilder","z":"e1485bac.6a7678","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":true,"x":200,"y":460,"wires":[[],[]]},{"id":"71debf15.2b31a","type":"ui_text","z":"f55cffcf.8b0d7","group":"a3bb39e.64256c8","order":1,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload.detail}}","layout":"row-spread","x":390,"y":260,"wires":[]},{"id":"894006a2.ef6348","type":"ui_template","z":"f55cffcf.8b0d7","group":"54408c37.e2d514","name":"Windspeed_km","order":2,"width":"0","height":"0","format":"\n\n\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":420,"y":340,"wires":[[]]}] \ No newline at end of file diff --git a/uibuilder/uibuilder/src/.eslintrc.json b/uibuilder/uibuilder/src/.eslintrc.json new file mode 100644 index 0000000..53c1f2e --- /dev/null +++ b/uibuilder/uibuilder/src/.eslintrc.json @@ -0,0 +1,35 @@ +{ + "env": { + "node": false, + "browser": true, + "jquery": false, + "es6": false + }, + "globals": { + "Vue": true, + "uibuilder": true + }, + "extends": "eslint:recommended", + "rules": { + "no-console": 0, + "indent": [ + "warn", + 4, + {"SwitchCase": 1} + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "warn", + "single" + ], + "semi": [ + "warn", + "never" + ], + "comma-dangle":"off", + "no-unused-vars": "warn" + } +} diff --git a/uibuilder/uibuilder/src/index.css b/uibuilder/uibuilder/src/index.css new file mode 100644 index 0000000..1978ddf --- /dev/null +++ b/uibuilder/uibuilder/src/index.css @@ -0,0 +1,14 @@ +/* Cloak elements on initial load to hide the possible display of {{ ... }} + * Add to the app tag or to specific tags + * To display "loading...", change to the following: + * [v-cloak] > * { display:none } + * [v-cloak]::before { content: "loading…" } + */ +[v-cloak] { display: none; } + +/* Colours for Syntax Highlighted pre's */ +.syntax-highlight {color:white;background-color:black;padding:5px 10px;} +.syntax-highlight > .key {color:#ffbf35} +.syntax-highlight > .string {color:#5dff39;} +.syntax-highlight > .number {color:#70aeff;} +.syntax-highlight > .boolean {color:#b993ff;} \ No newline at end of file diff --git a/uibuilder/uibuilder/src/index.html b/uibuilder/uibuilder/src/index.html new file mode 100644 index 0000000..e0f8725 --- /dev/null +++ b/uibuilder/uibuilder/src/index.html @@ -0,0 +1,147 @@ + + + + + + + + + + Node-RED UI Builder + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +

+ UIbuilder + Vue.js + bootstrap-vue for Node-RED +

+

+ This is a uibuilder example using Vue.js as a front-end library. + See the + node-red-contrib-uibuilder + README for details on how to use UIbuilder. +

+ +

Simple input using Vue

+ +

+ You can very simply create a form using Vue & bootstrap-vue. + The form sends data back to Node-RED. + Look at the increment method in index.js to see how easy this is. +

+

+
+ + To tick or not to tick? That is the question +
+ Increment +   Click Counter: {{counterBtn}}. +

Click on the button to increment the counter. It sends the data dynamically back to Node-RED as well.

+

+ + +

Dynamic Data

+

Uses Vue to dynamically update in response to messages from Node-RED.

+

+ Check out the mounted function in index.js to See + how easy it is to update Vue data from Node-RED. +

+ + +

Socket.io Connection Status: {{socketConnectedState}}

+

Time offset between browser and server: {{serverTimeOffset}} hours

+ + + +

+ Messages: Received={{msgsReceived}}, Sent={{msgsSent}} +

+ 

+                

+                

+                    The received message is from the input to the uibuilder node.
+                    The send message will appear out of port #1 of the node.
+                

+            
+
+            
+                

+                    Control Messages: Received={{msgsControl}}, Sent={{msgsCtrlSent}}
+                

+                

+                

+                

+                    Control messages always appear out of port #2 of the uibuilder node
+                    whether they are from the server or the client. The from property
+                    of the message tells you where it came from.
+                

+            
+
+        
+    

+
+    
+    
+    
+
+    
+     
+    
+    
+    
+
+    
+    
+     
+    
+    
+
+
+
+
\ No newline at end of file
diff --git a/uibuilder/uibuilder/src/index.js b/uibuilder/uibuilder/src/index.js
new file mode 100644
index 0000000..ed9f11f
--- /dev/null
+++ b/uibuilder/uibuilder/src/index.js
@@ -0,0 +1,197 @@
+/* jshint browser: true, esversion: 5, asi: true */
+/*globals Vue, uibuilder */
+// @ts-nocheck
+/*
+  Copyright (c) 2019 Julian Knight (Totally Information)
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+'use strict'
+
+/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */
+
+// eslint-disable-next-line no-unused-vars
+var app1 = new Vue({
+    el: '#app',
+    data: {
+        startMsg    : 'Vue has started, waiting for messages',
+        feVersion   : '',
+        counterBtn  : 0,
+        inputText   : null,
+        inputChkBox : false,
+        socketConnectedState : false,
+        serverTimeOffset     : '[unknown]',
+        imgProps             : { width: 75, height: 75 },
+
+        msgRecvd    : '[Nothing]',
+        msgsReceived: 0,
+        msgCtrl     : '[Nothing]',
+        msgsControl : 0,
+
+        msgSent     : '[Nothing]',
+        msgsSent    : 0,
+        msgCtrlSent : '[Nothing]',
+        msgsCtrlSent: 0,
+    }, // --- End of data --- //
+    computed: {
+        hLastRcvd: function() {
+            var msgRecvd = this.msgRecvd
+            if (typeof msgRecvd === 'string') return 'Last Message Received = ' + msgRecvd
+            else return 'Last Message Received = ' + this.syntaxHighlight(msgRecvd)
+        },
+        hLastSent: function() {
+            var msgSent = this.msgSent
+            if (typeof msgSent === 'string') return 'Last Message Sent = ' + msgSent
+            else return 'Last Message Sent = ' + this.syntaxHighlight(msgSent)
+        },
+        hLastCtrlRcvd: function() {
+            var msgCtrl = this.msgCtrl
+            if (typeof msgCtrl === 'string') return 'Last Control Message Received = ' + msgCtrl
+            else return 'Last Control Message Received = ' + this.syntaxHighlight(msgCtrl)
+        },
+        hLastCtrlSent: function() {
+            var msgCtrlSent = this.msgCtrlSent
+            if (typeof msgCtrlSent === 'string') return 'Last Control Message Sent = ' + msgCtrlSent
+            //else return 'Last Message Sent = ' + this.callMethod('syntaxHighlight', [msgCtrlSent])
+            else return 'Last Control Message Sent = ' + this.syntaxHighlight(msgCtrlSent)
+        },
+    }, // --- End of computed --- //
+    methods: {
+        increment: function(event) {
+            console.log('Button Pressed. Event DatA: ', event)
+
+            // Increment the count by one
+            this.counterBtn = this.counterBtn + 1
+            var topic = this.msgRecvd.topic || 'uibuilder/vue'
+            uibuilder.send( {
+                'topic': topic,
+                'payload': {
+                    'type': 'counterBtn',
+                    'btnCount': this.counterBtn,
+                    'message': this.inputText,
+                    'inputChkBox': this.inputChkBox
+                }
+            } )
+
+        }, // --- End of increment --- //
+
+        // return formatted HTML version of JSON object
+        syntaxHighlight: function(json) {
+            json = JSON.stringify(json, undefined, 4)
+            json = json.replace(/&/g, '&').replace(//g, '>')
+            json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+                var cls = 'number'
+                if (/^"/.test(match)) {
+                    if (/:$/.test(match)) {
+                        cls = 'key'
+                    } else {
+                        cls = 'string'
+                    }
+                } else if (/true|false/.test(match)) {
+                    cls = 'boolean'
+                } else if (/null/.test(match)) {
+                    cls = 'null'
+                }
+                return '' + match + ''
+            })
+            return json
+        }, // --- End of syntaxHighlight --- //
+    }, // --- End of methods --- //
+
+    // Available hooks: init,mounted,updated,destroyed
+    mounted: function(){
+        //console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')
+
+        /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
+         * Pass the namespace and ioPath variables if hosting page is not in the instance root folder
+         * The namespace is the "url" you put in uibuilder's configuration in the Editor.
+         * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
+         * e.g. uibuilder.start('uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
+         */
+        uibuilder.start()
+
+        var vueApp = this
+
+        // Example of retrieving data from uibuilder
+        vueApp.feVersion = uibuilder.get('version')
+
+        /** You can use the following to help trace how messages flow back and forth.
+         * You can then amend this processing to suite your requirements.
+         */
+
+        //#region ---- Trace Received Messages ---- //
+        // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
+        // newVal relates to the attribute being listened to.
+        uibuilder.onChange('msg', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
+            vueApp.msgRecvd = newVal
+        })
+        // As we receive new messages, we get an updated count as well
+        uibuilder.onChange('msgsReceived', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange] Updated count of received msgs:', newVal)
+            vueApp.msgsReceived = newVal
+        })
+
+        // If we receive a control message from Node-RED, we can get the new data here - we pass it to a Vue variable
+        uibuilder.onChange('ctrlMsg', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:ctrlMsg] CONTROL msg received from Node-RED server:', newVal)
+            vueApp.msgCtrl = newVal
+        })
+        // Updated count of control messages received
+        uibuilder.onChange('msgsCtrl', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:msgsCtrl] Updated count of received CONTROL msgs:', newVal)
+            vueApp.msgsControl = newVal
+        })
+        //#endregion ---- End of Trace Received Messages ---- //
+
+        //#region ---- Trace Sent Messages ---- //
+        // You probably only need these to help you understand the order of processing //
+        // If a message is sent back to Node-RED, we can grab a copy here if we want to
+        uibuilder.onChange('sentMsg', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:sentMsg] msg sent to Node-RED server:', newVal)
+            vueApp.msgSent = newVal
+        })
+        // Updated count of sent messages
+        uibuilder.onChange('msgsSent', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:msgsSent] Updated count of msgs sent:', newVal)
+            vueApp.msgsSent = newVal
+        })
+
+        // If we send a control message to Node-RED, we can get a copy of it here
+        uibuilder.onChange('sentCtrlMsg', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:sentCtrlMsg] Control message sent to Node-RED server:', newVal)
+            vueApp.msgCtrlSent = newVal
+        })
+        // And we can get an updated count
+        uibuilder.onChange('msgsSentCtrl', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:msgsSentCtrl] Updated count of CONTROL msgs sent:', newVal)
+            vueApp.msgsCtrlSent = newVal
+        })
+        //#endregion ---- End of Trace Sent Messages ---- //
+
+        // If Socket.IO connects/disconnects, we get true/false here
+        uibuilder.onChange('ioConnected', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:ioConnected] Socket.IO Connection Status Changed to:', newVal)
+            vueApp.socketConnectedState = newVal
+        })
+        // If Server Time Offset changes
+        uibuilder.onChange('serverTimeOffset', function(newVal){
+            //console.info('[indexjs:uibuilder.onChange:serverTimeOffset] Offset of time between the browser and the server has changed to:', newVal)
+            vueApp.serverTimeOffset = newVal
+        })
+
+    } // --- End of mounted hook --- //
+
+}) // --- End of app1 --- //
+
+// EOF
\ No newline at end of file
diff --git a/uibuilder/uibuilder/src/manifest.json b/uibuilder/uibuilder/src/manifest.json
new file mode 100644
index 0000000..788f0ca
--- /dev/null
+++ b/uibuilder/uibuilder/src/manifest.json
@@ -0,0 +1,15 @@
+{
+    "name": "Node-RED UI Builder",
+    "short_name": "uibuilder",
+    "description": "A web template builder for Node-RED",
+    "display": "standalone",
+    "lang": "en-GB",
+    "icons": [
+        {
+            "src": "./images/node-blue-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "."
+}
diff --git a/uibuilder/uibuilder/src/uibuilder.appcache b/uibuilder/uibuilder/src/uibuilder.appcache
new file mode 100644
index 0000000..5bee2c8
--- /dev/null
+++ b/uibuilder/uibuilder/src/uibuilder.appcache
@@ -0,0 +1,37 @@
+CACHE MANIFEST
+# 2019-02-02 19:48:57
+
+# WARNING: These files will never be delivered
+# again until this file changes. If you are updating,
+# make sure you change something in this file.
+
+# The appcache isn't always good: https://alistapart.com/article/application-cache-is-a-douchebag
+
+# Resources that will be delivered from the CACHE
+# after first load.
+CACHE:
+# Required files
+images/node-blue-192x192.png
+images/node-blue.ico
+/uibuilder/socket.io/socket.io.js
+# Replace this with the non .min version if needed
+uibuilderfe.min.js
+# Specific for our app
+index.css
+index.js
+# Local vendor libraries
+vendor/normalize.css/normalize.css
+# Useful utility libraries
+#https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js
+#https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js
+
+# Resources that require the user to be online.
+NETWORK:
+*
+
+# Optional section specifying fallback pages if a resource is inaccessible
+# 1st URI is resource, 2nd is fallback if request fails or errors
+# Both must from same origin as manifest. Can use prefixes as well as file uris
+#FALLBACK:
+# e.g. display offline.html if cache is empty and we are offline
+#/ /offline.html
\ No newline at end of file