公共發布和 UI 細節修改
GET到新技能了，想給兄弟們演示，需要給他們每個人一個賬號么？
答案肯定是：不需要！
ThingsBoard 用 公共發布 解決了這個問題。
一、公共發布
首先我們來看一下路燈設備現在在誰名下？
如下圖，路燈都是customerA的，
目前只有它和它的租戶可以看到，其他人需要看就需要設為公有。
如圖操作：
對於設備詳情儀表盤，我們也需要設為公有，這樣他們才能自由跳轉。
這時候是看不到界面的，我們需要設置公共用戶的設備：
搞定，現在路燈已經被公開了。
復制儀表板的公有鏈接看一看：
不想公開了?
也簡單，撤銷公開就好，點一下按鈕的事。
二、UI優化
在一些特殊情況下，需要去掉一些系統默認的標識，
下圖中有三點看起來比較礙眼~
- 網頁icon
- 網頁標題
- 右下角標志
由於需要修改一點代碼，這也可以算作簡單的二次開發。
要二開，首先得下載源碼~
下載
- 查看項目
https://github.com/thingsboard/thingsboard - Git下載
- 復制地址
git@github.com:thingsboard/thingsboard.git - 打開命令行下載
git clone git@github.com:thingsboard/thingsboard.git
- 單獨復制
ui-ngx文件夾
cp -r thingsboard/ui-ngx thingsboard-ui-ngx
運行
需要安裝
nodejs和yarn
下載依賴包
yarn
本地啟動：
yarn start
注意：
由於前端默認的后端是localhost, 先改下地址
項目下找到文件proxy.conf.js
const forwardUrl = "http://IP:9090/";
const wsForwardUrl = "ws://IP:9090";
修改
- logo
logo的文件地址是
src/assets/logo_title_white.svg
可以自己畫一個
https://c.runoob.com/more/svgeditor/ - icon
icon的文件地址是src/thingsboard.ico - title
title的文件地址是src/index.html
找到：
<title>ThingsBoard</title>
替換為：
<title>自己的項目名</title>
找到源碼目錄src\environments\下的environment.ts和environment.prod.ts文件
修改appTitle = “主題名稱”
修改defaultLang = “默認語言”
修改后效果如下：
export const environment = {
appTitle: “主題名稱”,
production: false,
tbVersion: TB_VERSION,
supportedLangs: SUPPORTED_LANGS,
defaultLang: “主題名稱”
};
-
powered by
找到
src/app/modules/home/components/dashboard-page/dashboard-page.component.html
直接刪除有 power by的那行就可以了。 -
修改程序主題顏色
找到源碼src\theme.scss文件:
修改$tb-primary-color: 主題顏色
修改$tb-secondary-color: 主題顏色
修改$tb-hue3-color: 主題顏色
可以參考目前國內流行的配色比如 ElementUI。 -
注釋頁面“幫助問號？”
找到文件：src\app\shared\components\help.component.htmls
注釋有問號的button源碼
經過修改，UI界面已經基本符合我們的要求。
三、下一步還可以做什么？
現在我已經有了一個定制化的物聯網平台。
下一步，我們還可以做什么？
更好的UI
現在要接甲方的項目, 界面這一塊兒還是需要多下功夫，畢竟是整個系統的門面。想要更魔幻的界面UI，有兩條路：
- 基於ThingBoard部件庫魔改
基本的思路是依然使用ThingBoard本身的可視化系統，通過修改ThingBoard部件庫來達成該界面的優化。 - 使用三方UI庫對接ThingsBoard
如果已經有第三方的UI大屏，只需要數據對接ThingBoard就可以h把設備數據傳到你的大屏上，同時還能實現設備遙測數據的實時更新。
更豐富的系統模塊
- 設備接入
除了三種默認的數據傳輸協議HTTP/MQTT/COAP，ThingBoard 官方還提供了對其他數據協議的支持，也就是網關項目。 - 儀表盤
ThingBoard 儀表盤的功能非常強大，我們甚至可以基於儀表盤開發完整的基於物聯網的應用系統。 - 規則引擎
ThingBoard 內置規則引擎，可以接收設備的信息，還可以通過自定義的規則實現處理和轉發。設備透傳、設備關聯控制也是小菜一碟。規則引擎是Thingsboard高級開發繞不開的話題。