Skip to content

rossmann-engineering/Collibellex-Thingsboard-Widgets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

"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.

image info

Select "Import Widget Type" and choose the JSON File from the Git Repository and select "Import"

image info image info

2. Control Widgets

2.1 Switch 1

image info image info
image info

2.2 Toggle Button 1

image info image info

2.3 Slider

image info image info

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

image info

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

image info

2.6 Round Slider

image info

2.7 Multi Slider

image info

2.8 Switch 2

image info image info
image info
image info

2.9 Switch 3

image info image info
image info

2.10 Switch 6

image info image info

2.11 Double Slider 1

image info image info

3. Latest Value Widgets

3.1 Fluid Level 1

image info

3.2 Fluid Level 2

image info

3.3 Light Bulb 1

image info

3.4 Gauge 1

image info
image info

3.5 Gauge 2

image info

3.6 Gauge 3

image info

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

image info

Gauge based on echarts.

3.8 Funnel 1

image info

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 %

image info

PV System 1

4. Static Widgets

4.1 Change Dashboard State 1

image info

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

image info
image info
image info

5.3 Weekly Heatmap

Chart based on echarts. Shows Average values over a week for every Hour

image info

5.4 3D Chart

Chart based on echarts. Calculates maximum values over a week for every Hour

image info

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