Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget
https://github.com/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget
- Owner: SchweizerischeBundesbahnen
- License: apache-2.0
- Created: 2022-02-16T08:52:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-03-01T07:56:46.000Z (over 2 years ago)
- Last Synced: 2024-03-09T06:34:06.835Z (4 months ago)
- Language: JavaScript
- Size: 2.33 MB
- Stars: 9
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-thingsboard - ATAW - Advanced Thingsboard Attribute Widget (Widgets)
README
# Advanced Thingsboard Attribute Widget (ATAW)
## Description
Looking for an advanced dashboard widget in Thingsboard to edit attributes. Look no more. ATAW is very flexible. You can choose one ore many of the input field to let the user edit attribute values. The following input types are possible:
- textfield (opt. pattern check with regex)
- slider / range slider (min,max,step)
- checkbox (true|false)
- multifield (array|list)
## Installation
1. Import advanced_thingsboard_attribute_widget__ataw_.json to widget Library
OR (if you want to make changes to the widget specific stuff and only want to import the class)
1. create new Widget (type: control widget, call it ATAW)
2. add resources:
- https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/gh/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget/src/class.inputfield.js
4. copy content of src/html.html to "HTML" tab
5. copy content of src/style.css to "CSS" bab
6. copy content of src/javascript.js to javascript section
7. copy content of src/settings-schema.json to "Settings schema"
8. save widget
At step 2. you can also specify the version of the class by adding the github version behind an "@", for example: https://cdn.jsdelivr.net/gh/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget@bc0c2280f271f915b411d9949654ccf82e172bf1/src/class.inputfield.js to get commit version "bc0c2280f271f915b411d9949654ccf82e172bf1".
## Usage
1. Create new Dashboard
2. create new entity alias
3. add new widget > select ATAW Widget
4. go to advanced tab and edit "Button label"
5. set a device command (this can be used to filter in Rules)
6. select attribute type (server|shared)
7. Set parameters via json
Example:
```
[
{
"title": "LED einschalten?",
"type": "checkbox",
"key": "led_on"
},
{
"title": "Max Temp 1: %s °C",
"type": "range",
"key": "temp_max",
"min": -50,
"max": 100,
"step": 1
},
{
"title": "Min Temp 1: %s °C",
"type": "range",
"key": "temp_min",
"min": -50,
"max": 100,
"step": 1
},
{
"title": "Waypoint %s: ",
"key": "waypoints",
"type": "text",
"default": "0",
"multi": true,
"multitype": "array",
"pattern":"^[+-]?([0-9]+\\.?[0-9]*|\\.[0-9]+)$"
},
{
"title": "E-Mail Alarm %s: ",
"key": "alert_email",
"type": "text",
"default": "0",
"multi": true,
"multitype": "array",
"pattern":"[^@ \\t\\r\\n]+@[^@ \\t\\r\\n]+\\.[^@ \\t\\r\\n]+"
}
]
```
8. Save widget
9. Save dashboard
10. Try widget!
## Code Documentation
https://schweizerischebundesbahnen.github.io/thingsboard-advanced-attribute-widget/
## Tests
The directory "test" contains a simple framework to locally test the widget and debug in a Thingsboard independent enviroment.