VisualHMI circular progress bar: inner ring value, starting and ending angles, and slider adjustment

freeFree Technical Resource

This content is free to read, suitable for basic learning and search traffic.

The circular progress bar integrates the value/unit into the ring, forming an integrated view of "graph + data", which naturally fits with circular data such as electricity, completion, and threshold warnings.

1. Core Advantages

  • Central Focus: The value/unit is within the ring, reducing visual jumps
  • Circular Semantics: The expression of electricity/completion/cycle data is more intuitive
  • Dynamic Feedback: Color gradient (mapping green→yellow→red threshold warning)

VisualHMI circular progress bar: inner ring value, starting and ending angles, and slider adjustment插图

Typical Scenarios: Battery electricity/SOC, task completion progress (percentage displayed in the center), process parameter monitoring (pressure/temperature simulation instruments).

2. Attribute Introduction

2.1 Function Settings

AttributesDescription:
The monitoring addressvalue represents the rotation angle of the progress bar; it only responds within the range of the starting value to the ending value.
Data type:INT16/INT32/INT64/FLOAT/DOUBLE
Starting value/Ending valueAngle correspondence range
Sliding adjustmentTouchable adjustment angle; touch area (slider/progress bar); notify when released
Slider gallery/sizeSlider style; display size

VisualHMI circular progress bar: inner ring value, starting and ending angles, and slider adjustment插图1

2.2 Appearance settings

  • Thickness: Progress bar thickness
  • Starting angle/Ending angle: Clockwise, with 0° at 3 o'clock on the clock face, increasing clockwise (6 o'clock = 90°);A complete circle requires 135 to 495
  • Display effect: Pure color or image; pure color can be paired with circular endpoints

VisualHMI circular progress bar: inner ring value, starting and ending angles, and slider adjustment插图2

3. Application case

ReadLW1001(INT16), 0~100, sliding adjustment + touch area = progress bar, slider gallery lamp.xico/36, size 32, thickness 20, starting angle 135, ending angle 45 (complete circle), pure color foreground yellow + circular endpoints.

VisualHMI circular progress bar: inner ring value, starting and ending angles, and slider adjustment插图3

Operation: By default, LW1001=0 corresponds to 135°; slide the slider to refresh the value in real time; PLC set to 50 displays a half-circle effect.

VisualHMI circular progress bar: inner ring value, starting and ending angles, and slider adjustment插图4

The angle is3 o'clock = 0°, increasing clockwise. To form a complete circle, start at 135° and end at 495° (for one full rotation). Don't confuse 'starting value' with 'starting angle' - the starting value corresponds to the lower limit of the angle range.

Compiled from Guangzhou Dacai Technology VisualHMI development documentation (hmi-doc.gz-dc.com) configuration control tutorial 'Circular Progress Bar', copyright reserved by Dacai Technology.

Put this resource to use in a real project?

Go to the Tool Center for message parsing, CRC verification and device debugging, or submit your requirements for selection and integration advice.

Engineer Membership

Turn this article into actionable debugging resources

After activation, you can use advanced message parsing, resource pack downloads, code examples, engineering cases and priority technical support, suitable for real project delivery.

Unlimited Advanced Tools
Resource & Code Packs
Complete Engineering Case Library
Priority Technical Support

Leave a Reply

Your email address will not be published. Required fields are marked *.