---
title: Overview
tags: Widgets
image:
---

# Overview

:::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

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

* ==A mini online IDE designed to develop custom widget definitions.==
* Top toolbar and
* Four main sections


### Section 1

#### Resources

* 可匯入外部 js library
* https://cdnjs.com/
* https://www.jsdelivr.com/

    Everyone loves the Google CDN? Even Microsoft runs their own CDN. The problem is, they only host the most popular libraries. We host it all JavaScript, CSS, SWF, images, etc! Powered by CloudFlare.

    jsDelivr is a free CDN for open source developers, with advanced features for javascript projects with access to NPM and Github It uses multiple CDN providers, resulting in the best possible uptime and performance. 

#### HTML

#### CSS

### Section 2: JavaScript

### Section 3

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

#### Settings schema

* Schema
* form

#### Data key settings schema

#### Latest Data key settings schema

#### Widget settings

### Section 4: Widget preview