---
# System prepended metadata

title: 修改遠端水質監測器Node-Red dashboard(儀錶板)背景與外觀
tags: [Node-RED]

---

---
disqus: ahb0222
GA : G-VF9ZT413CG
---
# 修改遠端水質監測器Node-Red dashboard(儀錶板)背景與外觀
> [color=#40f1ef][name=LHB阿好伯, 2021/11/20][:earth_africa:](https://www.facebook.com/LHB0222/)
###### tags: `Node-RED`

[TOC]

適用Node-RED Dashboard 2.0
:::spoiler
```
<script>
if (!window.nrdbStylesLoaded) {
    window.nrdbStylesLoaded = true;

    // 建立樣式容器
    var customStyles = document.createElement('style');
    customStyles.id = 'nrdb-custom-styles';
    document.head.appendChild(customStyles);

    // 建立時鐘容器
    var clockContainer = document.createElement("div");
    clockContainer.id = "nrdb-custom-clock";
    clockContainer.style.position = "fixed";
    clockContainer.style.top = "12px";
    clockContainer.style.right = "16px";
    clockContainer.style.zIndex = "9999";
    document.body.appendChild(clockContainer);

    // 啟動時鐘
    startClock();

    // 預設主題（淺色）
    applyTheme("light");

    console.log("Dashboard 2.0 自訂主題已載入 (支援 light/dark 切換 + 時鐘 + 背景圖)");
}

// 定義兩種主題
function getThemeCSS(theme) {
    if (theme === "dark") {
        return `
        /* ===========================
           Node-RED Dashboard Dark 主題
           =========================== */
        body, .v-application {
            background: url("https://picsum.photos/1920/1080?grayscale") no-repeat center center fixed !important;
            background-size: cover !important;
            color: #e2e8f0 !important;
        }
        .v-app-bar, .v-toolbar {
            background: rgba(30, 41, 59, 0.9) !important;
            border-bottom: 1px solid #334155 !important;
            box-shadow: none !important;
        }
        .v-toolbar-title, .v-app-bar-title {
            color: #e2e8f0 !important;
            font-weight: 600 !important;
        }
        .v-card {
            background: rgba(30, 41, 59, 0.9) !important;
            border-radius: 12px !important;
            border: 1px solid #334155 !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
        }
        .v-card-title {
            background: rgba(15, 23, 42, 0.9) !important;
            color: #e2e8f0 !important;
            font-weight: 600 !important;
            border-bottom: 1px solid #334155 !important;
        }
        .v-btn {
            background: linear-gradient(45deg, #38bdf8, #0ea5e9) !important;
            color: #ffffff !important;
            border-radius: 18px !important;
            min-height: 36px !important;
        }
        .v-btn:hover {
            background: linear-gradient(45deg, #0284c7, #38bdf8) !important;
        }
        .v-navigation-drawer {
            background: rgba(15, 23, 42, 0.9) !important;
            border-right: 1px solid #334155 !important;
        }
        .v-list-item {
            color: #e2e8f0 !important;
            border-radius: 8px !important;
        }
        .v-list-item:hover {
            background: rgba(30, 41, 59, 0.8) !important;
        }
        .v-list-item--active {
            background: #0ea5e9 !important;
            color: #ffffff !important;
        }
        .nrdb-ui-gauge-title {
            color: #e2e8f0 !important;
        }
        .nrdb-ui-gauge-value span {
            color: #38bdf8 !important;
            font-weight: 700 !important;
        }
        #nrdb-custom-clock {
            background: rgba(30, 41, 59, 0.85);
            color: #e2e8f0;
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 13px;
            font-family: monospace;
        }
        .v-text-field {
            background: rgba(30, 41, 59, 0.9) !important;
            border: 1px solid #334155 !important;
            border-radius: 8px !important;
            color: #e2e8f0 !important;
        }
        `;
    } else {
        return `
        /* ===========================
           Node-RED Dashboard Light 主題
           =========================== */
        body, .v-application {
            background: url("https://picsum.photos/1920/1080") no-repeat center center fixed !important;
            background-size: cover !important;
            color: #495057 !important;
        }
        .v-app-bar, .v-toolbar {
            background: rgba(255, 255, 255, 0.9) !important;
            border-bottom: 1px solid #e0e0e0 !important;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
        }
        .v-toolbar-title, .v-app-bar-title {
            color: #1e3a5f !important;
            font-weight: 600 !important;
        }
        .v-card {
            background: rgba(255, 255, 255, 0.9) !important;
            border-radius: 12px !important;
            border: 1px solid #dee2e6 !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        }
        .v-card-title {
            background: rgba(241, 243, 245, 0.9) !important;
            color: #1e3a5f !important;
            font-weight: 600 !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        .v-btn {
            background: linear-gradient(45deg, #00b4d8, #48cae4) !important;
            color: white !important;
            border-radius: 18px !important;
            min-height: 36px !important;
        }
        .v-btn:hover {
            background: linear-gradient(45deg, #0096c7, #38bdf8) !important;
        }
        .v-navigation-drawer {
            background: rgba(255, 255, 255, 0.9) !important;
            border-right: 1px solid #e0e0e0 !important;
        }
        .v-list-item {
            border-radius: 8px !important;
            margin: 2px 6px !important;
        }
        .v-list-item:hover {
            background: rgba(241, 243, 245, 0.8) !important;
        }
        .v-list-item--active {
            background: #e3f2fd !important;
            color: #0288d1 !important;
        }
        .nrdb-ui-gauge-title {
            color: #495057 !important;
        }
        .nrdb-ui-gauge-value span {
            color: #0288d1 !important;
            font-weight: 700 !important;
        }
        #nrdb-custom-clock {
            background: rgba(241, 243, 245, 0.85);
            color: #495057;
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 13px;
            font-family: monospace;
        }
        .v-text-field {
            background: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid #dee2e6 !important;
            border-radius: 8px !important;
        }
        `;
    }
}

// 套用主題
function applyTheme(theme) {
    var styleTag = document.getElementById("nrdb-custom-styles");
    if (styleTag) {
        styleTag.innerHTML = getThemeCSS(theme);
        console.log("已套用主題:", theme);
    }
}

// 啟動時鐘
function startClock() {
    function updateClock() {
        var now = new Date();
        var timeStr = now.toLocaleTimeString("zh-TW", { hour12: false });
        var dateStr = now.toLocaleDateString("zh-TW", { weekday: "short", year: "numeric", month: "2-digit", day: "2-digit" });
        document.getElementById("nrdb-custom-clock").innerText = timeStr + " | " + dateStr;
    }
    updateClock();
    setInterval(updateClock, 1000);
}

// 監聽 Node-RED 訊息
(function(scope) {
    if (scope && scope.$watch) {
        scope.$watch('msg', function(msg) {
            if (msg && msg.topic === "theme" && msg.payload) {
                applyTheme(msg.payload);
            }
        });
    }
})(scope);
</script>

```
:::

之前分享過一版[LilyGo T-Call  SIM 連接 MQTT & Node-Red & Telegram 製作遠端pH監測器(ESP32 SIM800L)_分享](/FlpNFLrxSpSbFl_CLTch-A)
最近完成新的一版遠端水質連續偵測器
上面除了原本的pH計這次還新增了TDS電極
使用Node-Red收集數據後當然就是製作儀表板

![](https://hackmd.io/_uploads/H1R2HSrdF.png)


之前曾看到益師傅分享過才知道原來儀表板也可以在做美化
利用了一些時間找到下面的資料

>參考網頁
>[Changing background of any widget](https://discourse.nodered.org/t/changing-background-of-any-widget/30005)[name=kvramji]
>[Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139)[name=hotNipi]
>[View and change CSS](https://developer.chrome.com/docs/devtools/css/)[name=Kayce Basques]


研究一下最後製作出下面的成果
還有一些地方需要加強但這也是我第一次接觸CSS
能做到這樣也很滿足了XD
![](https://hackmd.io/_uploads/S1WZrSruK.png)

# 修改方法
匯入 [Changing background of any widget](https://discourse.nodered.org/t/changing-background-of-any-widget/30005)文章中網友分享的節點



:::spoiler
```json=
[{"id":"ec59b076.d8389","type":"ui_template","z":"6af0f382.7eae1c","group":"d7d53078.9580c","name":"Tab Stylesheet","order":1,"width":0,"height":0,"format":"<style>\n\n:root {\n  --color-green-primary: rgb(51, 204, 51);\n  --color-green-secondary: rgb(26, 101, 26);\n  --color-red-primary: rgb(255, 0, 0);\n  --color-red-secondary: rgba(153,0,0,1);\n  --color-gray-primary:rgba(40,40,40,1);\n  --color-gray-secondary:rgba(65,65,65,1);\n  --color-text-primary: rgb(230, 226, 209);\n  --color-widget-border: rgb(84, 78, 78);\n}\n\nbody {\n  background-image: url(https://images.hdqwalls.com/wallpapers/raspberry-pi-logo-h0.jpg);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n#Control_Panel_System {\n  background: transparent;\n  border: transparent; \n}\n\nbody.nr-dashboard-theme md-content md-card {\n    background-color: #33333300;\n    color: #ffffff;\n    text-shadow: 4px 2px 4px #00000045;\n    box-shadow: 0 -1px 5px 1px #00000045;\n    border-radius: 12px;\n    border: 1px solid var(--color-widget-border);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":220,"y":80,"wires":[[]]},{"id":"d7d53078.9580c","type":"ui_group","z":"","name":"System","tab":"b0c27d05.c92f7","order":1,"disp":true,"width":30,"collapse":false},{"id":"b0c27d05.c92f7","type":"ui_tab","z":"","name":"Control Panel","icon":"fa-cogs","order":1,"disabled":false,"hidden":false}]
```
:::

![](https://hackmd.io/_uploads/By5OYHSuF.png)

![](https://hackmd.io/_uploads/S1ylcrHuF.png)

就可以得到相關背景樣式的修改
![](https://hackmd.io/_uploads/rkx-5SSdY.png)

如果想修改成自己的照片只需要修改第15行的網址即可
![](https://hackmd.io/_uploads/HJ48qBH_K.png)

# 增加時間顯示

![](https://hackmd.io/_uploads/rJdgFWUuY.png)

https://discourse.nodered.org/t/example-flow-of-three-clocks-in-title-bar-could-use-some-cleanup/44241




🌟全文可以至下方連結觀看或是補充


全文分享至

https://www.facebook.com/LHB0222/

https://www.instagram.com/ahb0222/

有疑問想討論的都歡迎於下方留言

喜歡的幫我分享給所有的朋友 \o/

有所錯誤歡迎指教

# [:page_with_curl: 全部文章列表](https://hackmd.io/@LHB-0222/AllWritings)



![](https://i.imgur.com/nHEcVmm.jpg)


