VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm

freeFree Technical Resource

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

The progress bar is a classic visual element: it precisely quantifies the progress of work and can be displayed horizontally/vertically. It supports three effects: solid color, gradient, and texture, with range alarms.

1. Attribute Introduction

1.1 Function Settings

AttributesDescription
Read AddressBound Address
Data TypeUINT16/INT16/UINT32/INT32/UINT64/INT64/FLOAT/DOUBLE
Numerical RangeFixed Range (Minimum/Maximum Values, must be integers) / Variable Range (Minimum/Maximum Value Addresses)

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图

1.2 Appearance Settings

  • Display Direction: From Left to Right/From Right to Left/From Bottom to Top/From Top to Bottom
  • Display Effect: Pure Color (Foreground Color + Circular Ends + Display Background Color)/Gradient (Start Color + End Color)/Texture (Progress Gallery + Background Gallery)
  • Range Alarm: Fixed/Variable Range, Set Alarm Upper and Lower Limit Progress Bar Colors

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图1

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图2

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图3

2. Application Cases

2.1 Fixed Range

ReadLW1001(INT16), Fixed Range 0~100, Direction From Left to Right, Texture Effect (Progress progress.xico/17, Background progress.xico/5). Button with Text Settings + / - Adjustment, Numerical Limit 0~100.

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图4

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图5

2.2 Variable Range

ReadLW1002(INT16), lower limit addressLW1003, upper limit addressLW1004. Set the maximum to 1000 and the minimum to 100. The value changes in real-time as the slider is dragged.

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图6

VisualHMI progress bar: fixed/variable range, solid color/gradient/texture mapping, and range alarm插图7

The progress bar and slider look similar but have different functions:the progress bar is for display (read-only), while the slider is for adjustment (writable). Use the progress bar to view the percentage, and use the slider to change the set value. The upper and lower limits of the range alarm can be made in three colors: green (normal), yellow (warning), and red (alarm).

Compiled from the VisualHMI development document of Guangzhou Dacai Technology (hmi-doc.gz-dc.com), the configuration control tutorial "Progress Bar", copyright belongs to 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 *.