Thingsboard二開(kāi)系列拷貝篇-08widget(01簡(jiǎn)介)

素材和版本

tb-release:3.2.2

ThingsBoard 小部件是附加的 UI 模塊,可以輕松集成到任何IoT 儀表板中。它們提供最終用戶功能,例如數(shù)據(jù)可視化、遠(yuǎn)程設(shè)備控制、警報(bào)管理和靜態(tài)自定義 html 內(nèi)容的顯示。根據(jù)提供的功能,每個(gè)小部件定義代表一個(gè)特定的小部件類型。

目標(biāo)

分析widget實(shí)現(xiàn)的原理,怎么開(kāi)發(fā)自己的widget

部件編輯器分為四部分:



  1. 資源/ HTML / CSS窗口。(可在資源窗口cdn引入外部資源)

  2. JavaScript窗口(Widget API的所有與窗口小部件相關(guān)的JavaScript代碼)

  3. 設(shè)置窗口。(用于為使用react-schema-form builder生成的UI表單自動(dòng)指定小部件設(shè)置的json模式。生成的UI表單顯示在窗口小部件設(shè)置的“ 高級(jí)”選項(xiàng)卡中。通過(guò)此模式序列化的Settings對(duì)象用于存儲(chǔ)特定的窗口小部件設(shè)置,并且可以從窗口小部件JavaScript代碼訪問(wèn))

  4. 小部件預(yù)覽窗口。(預(yù)覽部件)

添加widget入口

一般從屬性數(shù)據(jù)和遙感數(shù)據(jù)中選擇數(shù)據(jù)后,再選擇“在部件上顯示”然后進(jìn)行建立數(shù)據(jù)源和部件的關(guān)系。


添加widget,需要建立widget和dashboard的一個(gè)關(guān)聯(lián)關(guān)系

涉及的代碼頁(yè)面:

srcappmoduleshomecomponentsattributeattribute-table.component.html

srcappmoduleshomecomponentsattributeattribute-table.component.ts

widget的數(shù)據(jù)顯示邏輯

所有與小部件相關(guān)的代碼都位于JavaScript 部分。作為對(duì)小部件實(shí)例的引用的內(nèi)置變量self也是可用的。每個(gè)小部件函數(shù)都應(yīng)該定義為self變量的一個(gè)屬性。 self變量具有WidgetContext類型的屬性ctx - 對(duì)具有小部件實(shí)例使用的所有必要 API 和數(shù)據(jù)的小部件上下文的引用。以下是小部件上下文屬性的簡(jiǎn)要說(shuō)明:

訂閱對(duì)象?

Subscription object

小部件訂閱對(duì)象是IWidgetSubscription 的實(shí)例,根據(jù)小部件類型包含所有訂閱信息,包括當(dāng)前數(shù)據(jù)。根據(jù)小部件類型,訂閱對(duì)象提供不同的數(shù)據(jù)結(jié)構(gòu)。對(duì)于最新值和時(shí)間序列小部件類型,它提供以下屬性:

datasources?-此訂閱使用的數(shù)據(jù)源數(shù)組 (Array<?Datasource?>),使用以下結(jié)構(gòu):

data?-在此訂閱范圍內(nèi)收到的最新數(shù)據(jù)數(shù)組 (Array<?DatasourceData?>),使用以下結(jié)構(gòu):


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容