Is there a way to toggle an outline round all dashboard widgets?

Dashboard
1

I would like to have a button on a dashboard which for debug purposes draws a 1px outline around all widgets of a particular type on the page.

Drawing an outline is easy enough:

<style>
.experiment .nrdb-ui-button {
    outline: 1px solid red;
}
</style>

But what I can't achieve, even with the expert guidance of chatgpt, is to toggle the .experiment class on the ui-page.

Any suggestions?

2

Use a ui scoped template and a little script.

chrome_kzX85PWTEO

<template>
</template>

<script>
    export default {
        watch: {
            msg: function () {
                if (this.msg?.topic === 'add' || this.msg?.topic === 'remove') {
                    const fn = this[this.msg.topic] // add or remove
                    const selector = this.msg.selector || 'div.nrdb-ui-page'
                    const className = this.msg.payload
                    fn(selector, className)
                }
            }
        },
        methods: {
            add: function (selector, className) {
                const el = document.querySelector(selector)
                el.classList.add(className)
            },
            remove: function (selector, className) {
                const el = document.querySelector(selector)
                el.classList.remove(className)
            }
        }
    }
</script>

<style>
.experiment .nrdb-ui-button {
    outline: 1px solid red;
}
</style>

[
    {
        "id": "55c91fc564c5e385",
        "type": "ui-template",
        "z": "a83e61b1c4f28b0f",
        "group": "",
        "page": "",
        "ui": "03482f22997a66ac",
        "name": "outliner",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <div>\n        \n    </div>\n</template>\n\n<script>\n    export default {\n        watch: {\n            msg: function () {\n                if (this.msg?.topic === 'add' || this.msg?.topic === 'remove') {\n                    const fn = this[this.msg?.topic] // add or remove\n                    const selector = this.msg.selector || 'div.nrdb-ui-page'\n                    const className = this.msg.payload\n                    fn(selector, className)\n                }\n            }\n        },\n        methods: {\n            add: function (selector, className) {\n                const el = document.querySelector(selector)\n                el.classList.add(className)\n            },\n            remove: function (selector, className) {\n                const el = document.querySelector(selector)\n                el.classList.remove(className)\n            }\n        }\n    }\n</script>\n<style>\n.experiment .nrdb-ui-button {\n    outline: 1px solid red;\n}\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "d-hide",
        "x": 670,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "93fa3861654794f8",
        "type": "inject",
        "z": "a83e61b1c4f28b0f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "add",
        "payload": "experiment",
        "payloadType": "str",
        "x": 470,
        "y": 260,
        "wires": [
            [
                "55c91fc564c5e385"
            ]
        ]
    },
    {
        "id": "85d6b814e347f95c",
        "type": "inject",
        "z": "a83e61b1c4f28b0f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "remove",
        "payload": "experiment",
        "payloadType": "str",
        "x": 479,
        "y": 311,
        "wires": [
            [
                "55c91fc564c5e385"
            ]
        ]
    },
    {
        "id": "03482f22997a66ac",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-chat"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "331cacc43bd6528d",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.29.0"
        }
    }
]
1 Like
3

Outstanding. Thanks!