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

A customizable dashboard for NodeRed

[
    {
        "id": "48a3768dde4ecff9",
        "type": "dashbored-node",
        "z": "9d2201f90439822a",
        "name": "Kitchen Dashbored",
        "dashbored": "f9a3e522a3bc9bc4",
        "x": 710,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "e8ca25985a0a9cd4",
        "type": "dashbored-node",
        "z": "9d2201f90439822a",
        "name": "Bedroom Dashbored",
        "dashbored": "a69033f005c277fa",
        "x": 720,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "da8309ce2e3616a6",
        "type": "debug",
        "z": "9d2201f90439822a",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 880,
        "y": 400,
        "wires": []
    },
    {
        "id": "0c2cae46797cc096",
        "type": "dashbored-widget-node",
        "z": "9d2201f90439822a",
        "name": "Outside Light",
        "widget": "2284f18eaae9557a",
        "onlyOutputOnInput": false,
        "sendSetToOutput": false,
        "getOutputOthers": false,
        "x": 700,
        "y": 340,
        "wires": [
            [
                "da8309ce2e3616a6"
            ],
            []
        ]
    },
    {
        "id": "8ee9cbdaa01f409c",
        "type": "dashbored-widget-node",
        "z": "9d2201f90439822a",
        "name": "Kitchen Lights",
        "widget": "bcb3ebede0646b6d",
        "onlyOutputOnInput": false,
        "sendSetToOutput": false,
        "getOutputOthers": false,
        "x": 700,
        "y": 380,
        "wires": [
            [
                "da8309ce2e3616a6"
            ],
            []
        ]
    },
    {
        "id": "fab4e8f553fa7bbe",
        "type": "dashbored-widget-node",
        "z": "9d2201f90439822a",
        "name": "Lights",
        "widget": "f005357d44e7b545",
        "onlyOutputOnInput": false,
        "sendSetToOutput": false,
        "getOutputOthers": false,
        "x": 670,
        "y": 420,
        "wires": [
            [
                "da8309ce2e3616a6"
            ],
            []
        ]
    },
    {
        "id": "041d810db157c601",
        "type": "dashbored-widget-node",
        "z": "9d2201f90439822a",
        "name": "Bedroom AC",
        "widget": "612525f5de37fb2e",
        "onlyOutputOnInput": false,
        "sendSetToOutput": false,
        "getOutputOthers": false,
        "x": 690,
        "y": 460,
        "wires": [
            [
                "da8309ce2e3616a6"
            ],
            []
        ]
    },
    {
        "id": "f9a3e522a3bc9bc4",
        "type": "dashbored-dashbored",
        "name": "Kitchen Dashbored",
        "server": "",
        "endpoint": "kitchen",
        "password": "",
        "headerImage": "",
        "headerText": "Kitchen",
        "showClock": true,
        "showWeather": true,
        "showHeader": true,
        "showNav": true,
        "alwaysShowLockButton": false,
        "htmlToDOM": false,
        "navMode": "bottom",
        "baseHeight": "150px",
        "baseWidth": "200px",
        "headerHeight": "60px",
        "navHeight": "100px",
        "HTML": "<page name=\"Home\" icon=\"fa-home\">\n    <widget name=\"Kitchen Lights\" id=\"bcb3ebede0646b6d\"></widget>\n</page>\n<page name=\"House\" icon=\"fa-building\">\n    <widget name=\"Lights\" id=\"f005357d44e7b545\"></widget>\n    <widget name=\"Bedroom AC\" id=\"612525f5de37fb2e\"></widget>\n</page>",
        "CSS": "/* You can add custom CSS styling here, see https://github.com/haydendonald/NodeRed-Dashbored/wiki/Dashbored#css-classes */"
    },
    {
        "id": "a69033f005c277fa",
        "type": "dashbored-dashbored",
        "name": "Bedroom Dashbored",
        "server": "",
        "endpoint": "bedroom",
        "password": "",
        "headerImage": "",
        "headerText": "Bedroom",
        "showClock": true,
        "showWeather": true,
        "showHeader": true,
        "showNav": true,
        "alwaysShowLockButton": false,
        "htmlToDOM": false,
        "navMode": "bottom",
        "baseHeight": "150px",
        "baseWidth": "200px",
        "headerHeight": "60px",
        "navHeight": "100px",
        "HTML": "<page name=\"Home\" icon=\"fa-home\">\n    <widget name=\"Outside Light\" id=\"2284f18eaae9557a\" title=\"Lights\"></widget>\n    <widget name=\"Bedroom AC\" id=\"612525f5de37fb2e\"></widget>\n</page>",
        "CSS": "/* You can add custom CSS styling here, see https://github.com/haydendonald/NodeRed-Dashbored/wiki/Dashbored#css-classes */"
    },
    {
        "id": "2284f18eaae9557a",
        "type": "dashbored-widget",
        "name": "Outside Light",
        "server": "",
        "widgetType": "toggleButton",
        "widthMultiplier": "1",
        "heightMultiplier": "1",
        "title": "",
        "restoreState": true,
        "setsState": true,
        "toggleButton-text": "Outside Light",
        "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 {}",
        "horizontalStack-widgetsHTML": [],
        "verticalStack-widgetsHTML": [],
        "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}",
        "HVAC-auto": true,
        "HVAC-heat": true,
        "HVAC-cool": true,
        "HVAC-CSS": ".button {\nwidth: calc(100% - 10px);\nmargin: 5px;\n}\n.div {\nheight: 100%;\nwidth: 50%;\nfloat: left;\n}\n.tempDiv {\ntext-align: center;\nwidth: calc(100% - 10px);\npadding: 5px;\n}\n.innerTempDiv {\nbackground-color: gray;\nborder-radius: 20px;\npadding: 20px;\n}\n.button h1 {\nfont-size: 150%;\n}\n.button h2 {\nfont-size: 100%;\nmargin-top: 10px;\n}\n.autoColor {\nbackground-color: rgb(50, 205, 50);\n}\n.heatColor {\nbackground-color: rgb(205, 50, 50);\n}\n.coolColor {\nbackground-color: rgb(50, 100, 205);\n}\n.offColor {\nbackground-color: gray;\n}",
        "draggableVolume-mutedValue": "on",
        "draggableVolume-unmutedValue": "off",
        "draggableVolume-increment": 1,
        "draggableVolume-CSS": ".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}\n#volumeLevelContainer {\ntransform: rotate(180deg);\noverflow: hidden;\nbackground-color: white;\nwidth: 100%;\nheight: 90%;\nborder-radius: 0.5em;\n}\n#volumeLevelTop {\nbackground-color: #01e301;\nwidth: 100%;\nheight: 100%;\n}\n#volumeLevelHandle {\nbackground-color: gray;\nheight: 20px\n}"
    },
    {
        "id": "bcb3ebede0646b6d",
        "type": "dashbored-widget",
        "name": "Kitchen Lights",
        "server": "",
        "widgetType": "toggleButton",
        "widthMultiplier": "1",
        "heightMultiplier": "1",
        "title": "",
        "restoreState": true,
        "setsState": true,
        "toggleButton-text": "Kitchen Lights",
        "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 {}",
        "horizontalStack-widgetsHTML": [],
        "verticalStack-widgetsHTML": [],
        "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}",
        "HVAC-auto": true,
        "HVAC-heat": true,
        "HVAC-cool": true,
        "HVAC-CSS": ".button {\nwidth: calc(100% - 10px);\nmargin: 5px;\n}\n.div {\nheight: 100%;\nwidth: 50%;\nfloat: left;\n}\n.tempDiv {\ntext-align: center;\nwidth: calc(100% - 10px);\npadding: 5px;\n}\n.innerTempDiv {\nbackground-color: gray;\nborder-radius: 20px;\npadding: 20px;\n}\n.button h1 {\nfont-size: 150%;\n}\n.button h2 {\nfont-size: 100%;\nmargin-top: 10px;\n}\n.autoColor {\nbackground-color: rgb(50, 205, 50);\n}\n.heatColor {\nbackground-color: rgb(205, 50, 50);\n}\n.coolColor {\nbackground-color: rgb(50, 100, 205);\n}\n.offColor {\nbackground-color: gray;\n}",
        "draggableVolume-mutedValue": "on",
        "draggableVolume-unmutedValue": "off",
        "draggableVolume-increment": 1,
        "draggableVolume-CSS": ".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}\n#volumeLevelContainer {\ntransform: rotate(180deg);\noverflow: hidden;\nbackground-color: white;\nwidth: 100%;\nheight: 90%;\nborder-radius: 0.5em;\n}\n#volumeLevelTop {\nbackground-color: #01e301;\nwidth: 100%;\nheight: 100%;\n}\n#volumeLevelHandle {\nbackground-color: gray;\nheight: 20px\n}"
    },
    {
        "id": "f005357d44e7b545",
        "type": "dashbored-widget",
        "name": "Lights",
        "server": "",
        "widgetType": "verticalStack",
        "widthMultiplier": "1",
        "heightMultiplier": "1",
        "title": "Lights",
        "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 {}",
        "horizontalStack-widgetsHTML": [],
        "verticalStack-widgets": "bcb3ebede0646b6d,2284f18eaae9557a",
        "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}",
        "HVAC-auto": true,
        "HVAC-heat": true,
        "HVAC-cool": true,
        "HVAC-CSS": ".button {\nwidth: calc(100% - 10px);\nmargin: 5px;\n}\n.div {\nheight: 100%;\nwidth: 50%;\nfloat: left;\n}\n.tempDiv {\ntext-align: center;\nwidth: calc(100% - 10px);\npadding: 5px;\n}\n.innerTempDiv {\nbackground-color: gray;\nborder-radius: 20px;\npadding: 20px;\n}\n.button h1 {\nfont-size: 150%;\n}\n.button h2 {\nfont-size: 100%;\nmargin-top: 10px;\n}\n.autoColor {\nbackground-color: rgb(50, 205, 50);\n}\n.heatColor {\nbackground-color: rgb(205, 50, 50);\n}\n.coolColor {\nbackground-color: rgb(50, 100, 205);\n}\n.offColor {\nbackground-color: gray;\n}",
        "draggableVolume-mutedValue": "on",
        "draggableVolume-unmutedValue": "off",
        "draggableVolume-increment": 1,
        "draggableVolume-CSS": ".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}\n#volumeLevelContainer {\ntransform: rotate(180deg);\noverflow: hidden;\nbackground-color: white;\nwidth: 100%;\nheight: 90%;\nborder-radius: 0.5em;\n}\n#volumeLevelTop {\nbackground-color: #01e301;\nwidth: 100%;\nheight: 100%;\n}\n#volumeLevelHandle {\nbackground-color: gray;\nheight: 20px\n}"
    },
    {
        "id": "612525f5de37fb2e",
        "type": "dashbored-widget",
        "name": "Bedroom AC",
        "server": "",
        "widgetType": "HVAC",
        "widthMultiplier": "1",
        "heightMultiplier": "1",
        "title": "AC",
        "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 {}",
        "horizontalStack-widgetsHTML": [],
        "verticalStack-widgetsHTML": [],
        "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}",
        "HVAC-auto": true,
        "HVAC-heat": true,
        "HVAC-cool": true,
        "HVAC-CSS": ".button {\nwidth: calc(100% - 10px);\nmargin: 5px;\n}\n.div {\nheight: 100%;\nwidth: 50%;\nfloat: left;\n}\n.tempDiv {\ntext-align: center;\nwidth: calc(100% - 10px);\npadding: 5px;\n}\n.innerTempDiv {\nbackground-color: gray;\nborder-radius: 20px;\npadding: 20px;\n}\n.button h1 {\nfont-size: 150%;\n}\n.button h2 {\nfont-size: 100%;\nmargin-top: 10px;\n}\n.autoColor {\nbackground-color: rgb(50, 205, 50);\n}\n.heatColor {\nbackground-color: rgb(205, 50, 50);\n}\n.coolColor {\nbackground-color: rgb(50, 100, 205);\n}\n.offColor {\nbackground-color: gray;\n}",
        "draggableVolume-mutedValue": "on",
        "draggableVolume-unmutedValue": "off",
        "draggableVolume-increment": 1,
        "draggableVolume-CSS": ".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}\n#volumeLevelContainer {\ntransform: rotate(180deg);\noverflow: hidden;\nbackground-color: white;\nwidth: 100%;\nheight: 90%;\nborder-radius: 0.5em;\n}\n#volumeLevelTop {\nbackground-color: #01e301;\nwidth: 100%;\nheight: 100%;\n}\n#volumeLevelHandle {\nbackground-color: gray;\nheight: 20px\n}"
    }
]