"Thingsboard Widget Library" Documentation
Table of Contents
- General
1.1 Requirements
1.2 Installation - Control Widgets
2.1 Switch 1
2.2 Toggle Button 1
2.3 Slider
2.4 Thermostat 1
2.5 Thermostat 2
2.6 Round Slider 1
2.7 Multi Slider 1
2.8 Switch 2
2.9 Switch 3
2.10 Switch 6
2.11 Double Slider 1 - Latest Value Widgets
3.1 Fluid Level 1
3.2 Fluid Level 2
3.3 Light Bulb 1
3.4 Gauge 1
3.5 Gauge 2
3.6 Gauge 3
3.7 Gauge 4
3.8 Funnel 1 - Static Widgets
4.1 Change Dashboard State 1 - Timeseries
5.2 Chart 2
5.3 Weekly Heatmap
5.4 3D Chart
1. General
1.1 Requirements
The widget library requires Thingsboard version greater than 3.0. This can be used for Thingsboard CE, Thinsgsboard PE or Thingsboard.cloud.
1.2 Installation
To install a widget from the Widget library:
Please login to your Thingsboard installation, or your Thingsboard.cloud account.
The complete Bundle is available in the "Bundle" drectory. To import the Bundle, open the Wdget library, choose "Add widget bundle" and select "Import widgets bundle". Drag and drop the file "collibellex.json" into the browser window.
To add a single widget:
Open the Widget Library and add a new widget Bundle.
Select "Import Widget Type" and choose the JSON File from the Git Repository and select "Import"
2. Control Widgets
2.1 Switch 1
2.2 Toggle Button 1
2.3 Slider
2.4 Thermostat 1
Widget type: Control Widget
The Thermostat Wiget allows the graphical adjustment of a value using the two arrow keys. The values will be syncronized with the device at startup and sends the current values on change. The min and max as well as the Step-width can be adjusted.
Parameters:
Change request Method
SetValue RPC Method - Default: setValue
RPC request timeout
Max. Response time for a RPC request. - Default: 500ms
Status request Method
Get Value RPC Method - Default: getValue
Minimum Value
Min. Value - Default: 0
Maximum Value
Max. Value - Default: 100
Step Width
Step Width, can be 0.1 or 1 - Default: 1
2.5 Thermostat 2
Widget type: Control Widget
The Thermostat Wiget allows the graphical adjustment of a value using the two arrow keys. The values will be syncronized with the device at startup and sends the current values on change. The min and max as well as the Step-width can be adjusted.
Parameters:
Change request Method
SetValue RPC Method - Default: setValue
RPC request timeout
Max. Response time for a RPC request. - Default: 500ms
Status request Method
Get Value RPC Method - Default: getValue
Minimum Value
Min. Value - Default: 0
Maximum Value
Max. Value - Default: 100
Step Width
Step Width, can be 0.1 or 1 - Default: 1
2.6 Round Slider
2.7 Multi Slider
2.8 Switch 2
2.9 Switch 3
2.10 Switch 6
2.11 Double Slider 1
3. Latest Value Widgets
3.1 Fluid Level 1
3.2 Fluid Level 2
3.3 Light Bulb 1
3.4 Gauge 1
3.5 Gauge 2
3.6 Gauge 3
Gauge based on Gauge.js.
Parameters:
Maximum Value
Maximum Gauge value - Default: 100
Minimum Value
Minimum Gauge value - Default: 0
Unit
Unit added to the value - Default: °C
Width
Line thickness - Default: 0.4
Min. Color
Color for Min. Value
Max. Color
Color for Max. Value
Angle
The span of the gauge arc.
3.7 Gauge 4
Gauge based on echarts.
3.8 Funnel 1
Funnel chart
4. Static Widgets
4.1 Change Dashboard State 1
5. Timeseries
5.2 Chart 2
Chart based on echarts. A picture of the chart can be exported using the upper toolbar. Each chart can de either a line chart or a bar chart. Minimum and Maximum indicators and averages values can be
5.3 Weekly Heatmap
Chart based on echarts. Shows Average values over a week for every Hour
5.4 3D Chart
Chart based on echarts. Calculates maximum values over a week for every Hour
Parameters:
Max. Z-Value
Maximum Value Z-Axis (vertical) - Default: 25
Unit Z Axis
Z-Axis Unit - Default: Pieces
Y Axis Type
Type of Y-Axis, Monday to Sunday or Monday to Friday - Default: Monday to Sunday
X-Axis Type
Type of X-Axis, 12hrs format ot 24hrs format - Default: 12hrs format
Y Axis Monday Text
Text for Y-Axis Monday - Default: Monday
Y Axis Tuesday Text
Text for Y-Axis Tuesday - Default: Tuesday
Y Axis Wednesday Text
Text for Y-Axis Wednesday - Default: Wednesday
Y Axis Thursday Text
Text for Y-Axis Thursday - Default: Thursday
Y Axis Friday Text
Text for Y-Axis Friday - Default: Friday
Y Axis Saturday Text
Text for Y-Axis Saturday - Default: Saturday
Y Axis Sunday Text
Text for Y-Axis Sunday - Default: Sunday