---
title: Custom Widgets
tags: ThingsBoard
image: https://i.imgur.com/P9hcbKO.png
disqus: hackmd
---

Widgets 開發
===
:::info
Widget 最主要用於 Dashboard 開發，每個 Widget 都提供一項具體的功能，例如:
* 資料視覺化(Time series, Latest values)
* 遠端控制(Control widget)
* 告警管理(Alarm widget)
* 顯示靜態自訂内容(Static widget)。
:::

[toc]

Widgets Bundles
---
Widgets bundles 目的在將同性質的 Widget 分類管理；
* TB 3.5 CE 版本預設提供 15 個 System Widgets bundles。

Widgets Library/
└── Widgets (system built-in) Bundles
    ├── Alarm widgets
    ├── Analogue gauges
    ├── Cards
    ├── Charts
    ├── Control widgets
    ├── Date
    ├── Digital gauges
    ├── Edge widgets
    ├── Entity admin widgets
    ├── Gateway widgets
    ├── GPIO widgets
    ├── Home page widgets
    ├── Input widgets
    ├── Maps
    └── Navigation widgets

* TB 3.5 PE 版本預設額外提供 2 個 System Widgets bundles。

Widgets Library/
└── Widgets (system built-in) Bundles
    ├── Files
    └── Scheduling 

## Widget Editor

:::info
* A mini IDE designed to develop custom widget definitions.
* It consists of
* Top toolbar and
* Four main sections

Widget 開發方式，兩種方式如下:

- 線上開發
- 優點: 開發速度快，比較直觀。
- 缺點: 如果組件的邏輯過多，就不適用 (每次開發組件都要寫這些繁瑣的HTML、CSS和Javascript)。
- 本機開發
- 優點: 元件的參數項可以使用 TypeScript Class類包裝好，線上編輯器，引用 ng 元件。
- 缺點: 速度較慢，需在前端工程中使用 Angular 封裝好的元件。
:::

## Section 1

### Resources

### HTML

### CSS

## Section 2: JavaScript

## Section 3

### Settings schema

### Data key settings schema

### Widget settings

* [react-schema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/)
* [builder](http://networknt.github.io/react-schema-form/)

**Settings schema** JSON 結構分為兩部分。
- Sch

## Section 4: Widget preview

## Widget types 入門樣板
1. **Widget Editor: Time series入門樣板**
2. **Widget Editor: Latest values入門樣板**
3. **Widget Editor: Control widget入門樣板**
4. **Widget Editor: Alarm widget入門樣板**
5. **Widget Editor: Static widget入門樣板**

:::info
Widget bundle和Widget皆可匯入匯出(Import/Export)，格式為JSON。
:::

## 客製 Widgets
1. System health check widget: statistics on the current project status
2. Inventory widget: number and type of devices
3. Tickets widget: new/open tickets (failures) --- 目前 TB 沒有!
4. Status ==trend== widget: number of device failures, outage trend, error rates --- 目前 TB 可以再加強!
5. Application buttons: open each system feature/application
6. Status map widget: geographical map with overview of device states
7. Latest reported active failures widget: latest failure reports
8. Widget store: add new widgets to the dashboard

Resource(s)
---
* [Facebook ThingsBoard Taiwan Group](https://facebook.com/groups/thingsboard)
* https://thingsboard.io/docs/user-guide/ui/widget-library/
* https://thingsboard.io/docs/user-guide/entities-and-relations/
* https://thingsboard.io/docs/user-guide/contribution/widgets-development/
* https://github.com/rossmann-engineering/Thingsboard-Widget-Library
* https://space.bilibili.com/384354888/article
* https://www.bilibili.com/read/cv12746673
* https://www.bilibili.com/read/cv12746373
* https://www.bilibili.com/read/cv12639313
* https://www.bilibili.com/s/video/BV1qK4y1d7jM
* https://github.com/blackstar-baba/how-2-use-thingsboard --- 這篇好好K!!!