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:
Property
Description
Operation
Widget Name
Widget displayed name
Name
Link to User Manual
Link to IOT’s website for User Manual
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
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.
Register Selector
Preview Segment
Select the segment for previewing
Dropdown List
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
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.
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
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
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
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
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
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
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
