"Thingsboard Widget Library" Documentation

Table of Contents

1. General
   1.1 Requirements
   1.2 Installation
2. 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
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
   3.7 Gauge 4
   3.8 Funnel 1
   3.9 PV System 1
4. Static Widgets
   4.1 Change Dashboard State 1
5. 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

3.9 PV System 1

Energy flow animation for Photovoltaik systems. The Telemetry which is assigned for the Grid, Solar, House, Car, Battery can be chosen from the settings menu:

Grid Value Telemetry

Power from/to Grid

PV Value Telemetry

Power produced from PV-System

Consumption Value Telemetry

Power consumption from house

Car Consumption Telemetry

Power consumption from car charger

Battery Consumption Telemetry

Power from/to Battery

Car Charging State Telemetry

Car Battery level in %

Battery Charging State Telemetry

Battery level in %

PV System 1

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