node-red-contrib-dashbored/examples/dynamicWidgetOptions.json

A customizable dashboard for NodeRed

[{"id":"586f507a4e46076a","type":"dashbored-widget-node","z":"30e05a0536730f1a","name":"","widget":"b67f7ce3e2153208","onlyOutputOnInput":false,"sendSetToOutput":false,"getOutputOthers":false,"x":540,"y":380,"wires":[["0fbdb2a764d83cc4"],[]]},{"id":"215c9fd0fc8dd303","type":"function","z":"30e05a0536730f1a","name":"See options","func":"return {\n    topic: \"options\",\n    payload: {}\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":380,"wires":[["586f507a4e46076a"]]},{"id":"a8519e170510b720","type":"inject","z":"30e05a0536730f1a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":380,"wires":[["215c9fd0fc8dd303"]]},{"id":"0fbdb2a764d83cc4","type":"debug","z":"30e05a0536730f1a","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":720,"y":380,"wires":[]},{"id":"b6b1715c5e532f1d","type":"comment","z":"30e05a0536730f1a","name":"Set widget options dynamically. To see the changes refresh the dashbored","info":"","x":380,"y":340,"wires":[]},{"id":"9b420cd181d430cc","type":"function","z":"30e05a0536730f1a","name":"Set options","func":"return {\n    topic: \"options\",\n    payload: {\n        //Any options to alter here for example\n        title: \"Colours!\",\n        options: [\n            {\n                label: \"Red\",\n                value: \"red\",\n                onColor: \"red\",\n                offColor: \"gray\"\n            },\n            {\n                label: \"Green\",\n                value: \"green\",\n                onColor: \"green\",\n                offColor: \"gray\"\n            },\n            {\n                label: \"Blue\",\n                value: \"blue\",\n                onColor: \"blue\",\n                offColor: \"gray\"\n            },\n            {\n                label: \"Yellow\",\n                value: \"yellow\",\n                onColor: \"yellow\",\n                offColor: \"gray\"\n            },\n        ]\n    }\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":420,"wires":[["586f507a4e46076a"]]},{"id":"332194e32f1bdb23","type":"inject","z":"30e05a0536730f1a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":420,"wires":[["9b420cd181d430cc"]]},{"id":"b67f7ce3e2153208","type":"dashbored-widget","name":"Example Widget","server":"b4c867ea06f5361b","widgetType":"buttonSelector","widthMultiplier":"1","heightMultiplier":"1","title":"","restoreState":true,"setsState":true,"toggleButton-text":"Toggle Button","toggleButton-onValue":"on","toggleButton-offValue":"off","toggleButton-CSS":".on {\nbackground-color: #32CD32;\ncolor: white;\n}\n.off {\nbackground-color: #f2f2f2;\ncolor: black;\n}\n#button {\nwidth: calc(100% - 10px);\nheight: calc(100% - 10px);\nmargin: 5px;\n}\n#widget {}\n#title {}\n#content {}","buttonSelector-options":[{"label":"Option 0","value":"option_0","onColor":"#32cd32","offColor":"#ff3333"},{"label":"Option 1","value":"option_1","onColor":"#32cd32","offColor":"#ff3333"}],"buttonSelector-CSS":".button {\nwidth: calc(100% - 10px);\nmargin: 5px;\n}\n.on {}\n.off {}","volume-mutedValue":"on","volume-unmutedValue":"off","volume-increment":1,"volume-CSS":"#volumeLevelContainer {\ntransform: rotate(180deg);\noverflow: hidden;\nbackground-color: white;\nwidth: 20%;\nheight: 90%;\nmargin-top: 5%;\nmargin-left: 10%;\nmargin-right: 5%;\nfloat: right;\nborder-radius: 10em;\n}\n#volumeLevelTop {\nbackground-color: #01e301;\nwidth: 100%;\nheight: 100%;\n}\n#buttonContainer {\nfloat: right;\nheight: 100%;\nwidth: 60%;\n}\n.button {\ndisplay: block;\nwidth: 100%;\nheight: calc((100%/3) - (2.5px * 3));\npadding: 0;\nmargin-top: 5px;\ntransition: background-color 0.1s;\n}\n.mutedColor {\nbackground-color: red !important;\n}\n.clickColor {\nbackground-color: white !important;\n}","actionButton-text":"Action Button","actionButton-color":"#434343","actionButton-flashColor":"#f2f2f2","actionButton-CSS":"#button {\nwidth: calc(100% - 10px);\nheight: calc(100% - 10px);\nmargin: 5px;\ntransition: background-color 0.1s ease;\n}"},{"id":"b4c867ea06f5361b","type":"dashbored-server","name":"","weatherLat":"-37.8136","weatherLong":"144.9631","weatherUnit":"metric","apiKey":""}]