雖然說 Node-RED 的 Dashboard 內建介面所提供的 tab 切換功能很方便，左上角點開「≡」就可以選擇要切換的 tab，但若可以做一個首頁，上頭佈滿要連結的 tab 按鈕，一定會非常方便！因此這次要運用 Dashboard 內建的節點 button 和 ui control 來切換 tab！

▲ 先拉兩個 button 與一個 ui control，請接在一起，然後編輯節點，重點在這！button 的 Label 與 Payload 都改成其中一個 tab 的名稱，這樣就代表這個按鈕點下去會到那個 tab，很容易理解吧！另外 ui control 基本上用預設的選項即可。最後請記得在 Dashboard 新增好相關的 tab、group，以製作出首頁。

▲ 大致上 Dashboard 首頁最後會長這樣，點擊按鈕就可以連到指定 tab。

flow.json

僅供參考。

[
    {
        "id": "b80494bdcb98cbee",
        "type": "ui_button",
        "z": "0d05fa1bc18157f3",
        "name": "",
        "group": "80c78d71fd175fbf",
        "order": 1,
        "width": "4",
        "height": "4",
        "passthru": false,
        "label": "測試",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "測試",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 60,
        "wires": [
            [
                "bd19f4282b1404ac"
            ]
        ]
    },
    {
        "id": "bd19f4282b1404ac",
        "type": "ui_ui_control",
        "z": "0d05fa1bc18157f3",
        "name": "",
        "events": "all",
        "x": 240,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "0668f0062590e2ed",
        "type": "ui_button",
        "z": "0d05fa1bc18157f3",
        "name": "",
        "group": "80c78d71fd175fbf",
        "order": 2,
        "width": "4",
        "height": "4",
        "passthru": false,
        "label": "測試2",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "測試2",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 100,
        "wires": [
            [
                "bd19f4282b1404ac"
            ]
        ]
    },
    {
        "id": "80c78d71fd175fbf",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "fc4acb4da1369f93",
        "order": 1,
        "disp": false,
        "width": "24",
        "collapse": false,
        "className": ""
    },
    {
        "id": "fc4acb4da1369f93",
        "type": "ui_tab",
        "name": "首頁",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Brackets 擴充功能「Beautify & Indent Guides」：自動縮排美化與縮排層次標記
📆 2018-09-20
📁 軟體應用, 網站技術

Node-RED：讀取及查詢 MySQL 資料庫中的資料表
📆 2021-11-18
📁 網站技術, 資料庫, Node.js, SQL, Node-RED

Node.js：Gulp 運行 gulp-connect 套件，建立前端開發伺服器（Gulp 大展身手！）
📆 2019-03-25
📁 網站技術, 伺服器, 學業筆記, JavaScript, Node.js, Gulp

Node-RED：啟用使用者身分驗證、建立帳號密碼以保護資訊安全
📆 2021-11-18
📁 網站技術, 資訊安全, Node.js, Node-RED

PHP：glob() 取得匹配之檔案路徑、filesize() 取得指定檔案大小
📆 2021-10-22
📁 網站技術, PHP

instascan：純前端掃描 QR Code
📆 2019-09-26
📁 網站技術, JavaScript, jQuery

XAMPP：本機上安裝 SSL 憑證以建立 HTTPS 開發測試環境
📆 2021-11-09
📁 軟體應用, 網站技術, 伺服器

HTTP/3 Check：快速線上檢測指定網站是否支援最新的 HTTP/3 協議
📆 2024-04-28
📁 網路應用, 網站技術, 伺服器

《上一篇》米家自動感應洗手機+小衛質品泡沫抗菌洗手液(三瓶裝) 《下一篇》DURACELL 金頂鹼性電池3號 AA (4入裝)