This module provides a set of nodes in Node-RED to configure dashboard.
These nodes require node.js version 16.17.1 and Node-RED version 3.0.2.
With these nodes, you can easily configure a fancy dashboard.
Just add a node on the palette, and freely customize your own dashboard.
You can bind nodes as a group, and groups as a tab.
Also, You can arrange each group, just drag & drop it on the dashboard.
Moreover, you can control devices with our nodes such as button, slider, and so on.
Furthermore, you can visualize data with our nodes such as chart, gauge, and so on.
The Node-RED-Soop-Dashboard requires Node-RED to be installed.
cd ~/.node-red/
npm install @soop-sasm/node-red-soop-dashboard
Restart your Node-RED instance and you should have dashboard nodes available in the palette.
The dashboard interface is available at http://localhost:1880/dashboard
Basically, in a resolution environment with a width greater than 1200px, the dashboard consists of 12 columns. The width of each grid may vary depending on resolution. And the height of each grid is fixed at 75px.
The gap of each grid is 10px for width and height, and the gap of each widget is 20px, 10px for width and height.
According to our stacking algorithm, groups are placed in order from the large area group to the top left.
If drag and drop option is activated, all groups are aligned up to the top compactly.
This is a brief description of each node.
If you want a more detailed description of nodes, check out our Wiki.
-
Button: A widget that delivers a specific message when pressed by a user.
-
Chart: A widget that receives data from a user and displays it in a chart.
- Line: Plot a time-series data as a line chart on the dashboard.
- Bar: Plot a time-series or non-time-series data as a bar chart on the dashboard.
- Pie: Plot a non-time-series data as a pie chart on the dashboard.
-
Dropdown: A widget that shows the value entered by the user in a drop-down format.
-
Gauge: A widget that shows the percentage of the total value that a user receives.
- Gauge: Plot a data as a gauge graph on the dashboard.
- Donut: Plot a data as a donut graph on the dashboard.
- Liquid: Plot a data as a liquid fill gauge chart on the dashboard.
-
Image: A widget that shows images through an image file or image URL.
-
List: A widget that shows the values entered by the user in list form.
- Ordered: Show an ordered list on the dashboard.
- Unordered: Show an unordered list on the dashboard.
- Checkbox: Show a checkbox list on the dashboard.
-
Slider: A slider-type widget that allows users to set values.
-
Switch: A widget that allows the user to toggle (on/off) values.
-
Text: A widget that shows the value entered by the user in text format.
-
Dashboard Config: A configuration node for soop dashboard.
-
Data Format: A node for labeling each dataset to use chart nodes.
-
Group: A set of widgets. It will be sorted automatically.
-
Tab: A set of groups. The default name is given as
Tab # number. It doesn't matter if the name is duplicated.
Here are some example flows configured with our dashboard nodes.
Use GitHub Issues to ask questions or to discuss new features.
SoopSASM in SSAFY(Samsung Software Academy for Youth) 7th
Copyright Samsung Automation Studio Team under the Apache 2.0 license