修改遠端水質監測器Node-Red dashboard(儀錶板)背景與外觀

LHB阿好伯, 2021/11/20

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

tags: `Node-RED`

修改遠端水質監測器Node-Red dashboard(儀錶板)背景與外觀
修改方法
增加時間顯示
Image Not Showing Possible Reasons The image file may be corruptedThe server hosting the image is unavailableThe image path is incorrectThe image format is not supported Learn More → 全部文章列表

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

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

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

參考網頁
Changing background of any widgetkvramji
Customize dashboard CSShotNipi
View and change CSSKayce Basques

研究一下最後製作出下面的成果
還有一些地方需要加強但這也是我第一次接觸CSS
能做到這樣也很滿足了XD

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

修改方法

匯入 Changing background of any widget文章中網友分享的節點


[{"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}]