Customise DB2 Widgets

Dashboard
1

Hello All,

I have Node-RED running on an Raspberry Pi and I decided to take the plunge to move dashboard from Ver 1 to Ver 2. Instance has only two flows with a few pages in dashboard which use switches, text, drop-down and slider UIs. Migration script was very helpful but it could not migrate the DB1-UI Template. This template has its source in a post by HotNipi which I adapted to my simple needs. It modifies widget background colours which , at least to my taste, delimits them and makes them more visible. I add examples of the DB1 and DB2 screenshots.

I searched in the forum any posts which might have relevance to this issue in DB2 but I was unsuccessful. I attach the screenshot of displays; original DB1 template and well as the DB2 template which I managed to fill.

Does someone have any pointers as to how to customise the DB2 widgets to get similar results with Vuetify.

Thanks in advance.
Quike :grinning_face:

DB1_widgets
DB1_widgets399Ă—366 26.7 KB

DB2_widgets
DB2_widgets703Ă—492 28.2 KB

[DB1_UI_template.json|attachment](upload://wHUYQ65pinav12Kxmkz7DEJIK6H.json) (3.0 KB)

[DB2_UI_template.json|attachment](upload://rjsrzHcICKNqxz3u7zc2AFKWxQq.json) (1.8 KB)
2

I can't download either of your templates. Maybe I'm doing something wrong.

Can you copy each template's contents and paste them here between two lines of three backticks? The </> button provides the backtick lines.

3

Hi,

Here are the templates

DB1

[
    {
        "id": "9a72559c69dc880d",
        "type": "ui_template",
        "z": "09adb945826045ce",
        "group": "9398192d41ba2400",
        "name": "DB1 UI Template",
        "order": 11,
        "width": 0,
        "height": 0,
        "format": "<style>\n       <style id=\"dashboard-styles-override\">.nr-dashboard-theme md-select-menu md-option {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        color: #eeeeee;\n        height: 29px;\n        /* border-radius: 14px;*/\n        margin-left: 10px;\n        margin-right: 10px;\n        margin-top: 2px;\n        box-shadow: 0 0 6px 6px #24202133;\n        transition: 0.3s;\n    }\n    /*Testing*/\n     .nr-dashboard-theme md-content md-card {\n        background-color: #33333300;\n        color: var(--color-text-primary);\n        text-shadow: 4px 2px 4px #00000044;\n        box-shadow: inset 0px 10px 20px 0px #0000006b;\n        border-radius: 12px;\n        border: 1px solid #565655e6;\n        border-top: 2px solid #4b4b4a;\n    }\n    /*Testing*/\n    .nr-dashboard-theme md-select-menu md-option[selected] {\n        color: var(--nr-dashboard-widgetTextColor) !important;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        opacity: 0.8;\n    }\n    .nr-dashboard-theme md-select-menu md-option:last-child {\n        margin-bottom: 8px;\n    }\n    .nr-dashboard-theme md-select-menu md-option:hover {\n        background-color: var(--nr-dashboard-widgetBackgroundColor) !important;\n        padding-left: 24px;\n    }\n    .nr-dashboard-theme md-select-menu md-option>.md-ripple-container {\n        /* border-radius: 14px;*/\n    }\n    .my_label_red {\n            color: red !important;\n            font-family: ariel;\n            font-size: 125%;\n            font-weight: 600;\n        }\n    \n    .my_label_green {\n            color: green !important;\n            font-family: ariel;\n            font-size: 125%;\n            font-weight: 600;\n        }\n    </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "DDropdown",
        "x": 330,
        "y": 40,
        "wires": [
            []
        ]
    },
    {
        "id": "9398192d41ba2400",
        "type": "ui_group",
        "name": "Alarm",
        "tab": "8f736e3139054443",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "8f736e3139054443",
        "type": "ui_tab",
        "name": "Alarm",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "b73f4e8625f22f1a",
        "type": "global-config",
        "env": [],
        "modules": {
            "node-red-dashboard": "3.6.6"
        }
    }
]

DB2 Template

[
    {
        "id": "8d033a0db73b01f3",
        "type": "ui-template",
        "z": "f219297eecf0f392",
        "group": "",
        "page": "",
        "ui": "b8cf8b150092daca",
        "name": "DB2 UI Template",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "/* define any styles here - supports raw CSS */\n.my_label_red {\n    color: red;\n    font-family: Arial;\n    font-size: 24px;\n    font-weight: 900;\n}\n.my_label_green {\n    color: green;\n    font-family: Arial;\n    font-size: 24px;\n    font-weight: 900;\n}\n.my-text-style {\n    font-size: 24px;\n    color: #FF5733;\n    font-weight: bold;\n}\n.nrdb-ui-page.mytheme,\n.nrdb-ui-page.mytheme div.nrdb-ui-text > label {\n    font-family: 'Tahoma';\n}\n.mytitle div.nrdb-ui-text > label {\n    font-size:30px;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 330,
        "y": 40,
        "wires": [
            []
        ]
    },
    {
        "id": "b8cf8b150092daca",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "3a70693ddf0f0417",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]
4

Hello All.

After little elbow grease; skimming Vuetify web pages; better use of the web inspector on DB2 pages and some help with ChatGPT, I managed to get closer to what I what I was looking for on DB2. It still needs some tinkering but, in my humble opinon the switches, slider and text values are more visible. Template applies CSS styles to all pages and to all swiches/text/slider containers.
You may customize a given node if needed in your template or your template could appply to specific part of the application.

Here is my template code if someone wishes to use it.
Quike

/* define any styles here - supports raw CSS */
.my_label_red {
    color: red;
    font-family: Arial;
    font-size: 24px;
    font-weight: 900;
}
.my_label_green {
    color: green;
    font-family: Arial;
    font-size: 24px;
    font-weight: 900;
}
.nrdb-ui-switch {
border: 2px solid black !important;
border-radius: 6px;
padding: 8px;

font-size: 1.4em;
font-weight: bold;
color: #000;

background: linear-gradient(
to bottom,
rgba(128, 128, 128, 0.10) 0%,
rgba(128, 128, 128, 0.00) 100%
) !important;
box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
}
.nrdb-ui-widget.nrdb-ui-text {
border: 2px solid black;
border-radius: 6px;
padding: 8px;

font-size: 1.4em;
font-weight: bold;
color: #000;
    
background: linear-gradient(
    to bottom,
    rgba(128,128,128,0.10) 0%,
    rgba(128,128,128,0.00) 100%
);
box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
}

.nrdb-ui-widget.nrdb-ui-slider {
border: 2px solid black !important;
border-radius: 8px;
padding: 12px;

background: linear-gradient(
    to bottom,
    rgba(128,128,128,0.10) 0%,
    rgba(128,128,128,0.00) 100%
) !important;
}