Generic Progress Bar can be either an input or an output widget. When the knob is enabled, it is an intput widget; otherwise it’s an input widget.
Generic Progress Bar can be horizontal or vertical when setting different high/width ratio by the users. In addition, this widget allows users to background, bar, and knob color and styles.
This widget is very resource thrifty and requires little amount of system resources. When users want to include a greater quantity of progress bar in their HMI design, this widget is a better candidate.
An educational vidoe is availble to get users started:
Generic Progress Par
| Property |
Description |
Operation |
| Widget Name |
Widget displayed name |
Name |
| Link to User Manual |
Link to IOT’s website for User Manual |
|
Visibility Control
| Property |
Description |
Operation |
| Binding Hidden Control Register |
Select a binding register to control the visibility of this widget |
Checkbox |
| Hidden Control Register |
Choose a binding regsiter |
Register Selector |
Behavior Setting
| Property |
Description |
Operation |
| Minimum Data Value |
The value for the starting point of the progress bar |
Number Editor |
| Maximum Data Value |
The value for the ending point of the progress bar |
Number Editor |
| Value Binding Register |
If the value of this binding regsiter is less than the Minimum Data value, the progress bar displays the starting point. |
|
|
On the other hand, if the value of this register is larger than the Maximum Data Value, then the progress bar is set at the ending point. |
Register Selector |
|
| Preview Segment |
Select the segment for previewing |
Dropdown List |
Bar Line Style Setting
| Property |
Description |
Operation |
| Main Color |
Select a main color for the progress bar |
Color Selector |
| Gradient Color |
Select a gradient color for the progress bar |
Color Selector |
| Bar Opacity % |
Set the progress bar’s opacity (0-100%) |
Number Editor |
| Corner Radius |
Set the radius for the progress bar corners |
Number Editor |
| Border Color |
Select a color for the bar’s border |
Color Selector |
| Border Width |
Set the width of the progress bar |
Number Editor |
| Shadow Color |
Select a color for the shadow |
Color Selector |
| Shadow Width |
Set the shadow width |
Number Editor |
Segment 2 Style Setting
| Property |
Description |
Operation |
| Enable Data Segment 2 |
Enable Segment 2 of the progress bar |
Checkbox |
| Segment Starting Value |
When the value of the binding register reach this value, then the Segment 2 start to display.
And the binding register’s value must be less than the Segment 3’s starting value. |
Number Editor |
| Main Color |
Select a main color for Segment 2 |
Color Selector |
| Gradient Color |
Select a gradient color for Segment 2 |
Color Selector |
| Bar Opacity % |
Set the opacity(0-100%) for Segment 2 |
Number Editor |
| Corner Radius |
Set the radius for Segment 2’s corners |
Number Editor |
| Border Color |
Select a color for Segment 2’s border |
Color Selector |
| Border Width |
Set the width for the Segment 2’s border |
Number Editor |
| Shadow Color |
Select a color for Segment 2’s shadow |
Color Selector |
| Shadow Width |
Set the Segment 2’s shadow width |
Number Editor |
Segment 3 Style Setting
| Property |
Description |
Operation |
| Enable Data Segment 3 |
Enable Segment 3 of the progress bar |
Checkbox |
| Segment Starting Value |
When the value of the binding register reach this value, then the Segment 3 start to display. |
Number Editor |
| Main Color |
Select a main color for Segment 3 |
Color Selector |
| Gradient Color |
Select a gradient color for Segment 3 |
Color Selector |
| Bar Opacity % |
Set the opacity(0-100%) for Segment 3 |
Number Editor |
| Corner Radius |
Set the radius for Segment 3’s corners |
Number Editor |
| Border Color |
Select a color for Segment 3’s border |
Color Selector |
| Border Width |
Set the width for the Segment 3’s border |
Number Editor |
| Shadow Color |
Select a color for Segment 3’s shadow |
Color Selector |
| Shadow Width |
Set the Segment 3’s shadow width |
Number Editor |
Slider Knob Style Setting
| Property |
Description |
Operation |
| Enable Slider Knob |
Enable Slider Knob. Enabling the knob turns this widget from an output one into an input one. |
Checkbox |
| Main Color |
Select a main color for the knob |
Color Selector |
| Gradient Color |
Select a gradient color for the knob |
Color Selector |
| Knob Opacity % |
Set the opacity(0-100%) for the knob |
Number Editor |
| Corner Radius |
Set the radius for the knob |
Number Editor |
| Border Color |
Select a color for the knob’s border |
Color Selector |
| Border Width |
Set the width for the knob’s border |
Number Editor |
| Shadow Color |
Select a color for the knob’s shadow |
Color Selector |
| Shadow Width |
Set the width for the knob’s shadow |
Number Editor |
Line Padding Setting
| Property |
Description |
Operation |
| Padding Top/Botton |
Select a padding value for the space between the progress bar border and top/botton edges of the background. The max/min value is set according to the actual size of the widget. |
Number Editor |
| Padding Left/Right |
Select a padding value for the space between the progress bar border and left/right edges of the background. The max/min value is set according to the actual size of the widget. |
Number Editor |
Bar Background Setting
| Property |
Description |
Operation |
| Main Color |
Select a main color for the bar background |
Color Selector |
| Gradient Color |
Select a graident color for the bar background |
Color Selector |
| Background Opacity % |
Set the opacity(0-100%) for the bar background |
Number Editor |
| Corner Radius |
Set the corner radius for the bar background |
Number Editor |
| Border Color |
Select a color for the bar backgound’s border |
Color Selector |
| Border Width |
Set the width for the bar background’s border |
Number Editor |
| Shadow Color |
Select a color for the bar background’s shadow |
Color Selector |
| Shadow Width |
Set the width for the bar background’s shadow |
Number Editor |
Background Padding Setting
| Property |
Description |
Operation |
| Padding Top/Botton |
Select a padding value for the space between the background’s border and top/botton edges of the widget. The max/min value is set according to the actual size of the widget. |
Number Editor |
| Padding Left/Right |
Select a padding value for the space between the background’s border and left/right edges of the widget. The max/min value is set according to the actual size of the widget. |
Number Editor |
Preview Segment
| Property |
Description |
Operation |
| Preview Segment |
Select a segment for previewing |
|
| Property |
Description |
Operation |
| Link to User Manual… |
Connect to the education video and play it |
|
