How to make a circular progress component?

Ignition
1

I want to make a circular component to display analog value, similar to the built-in “Level Indicator” component but I want to use a circle instead. The color of the outer circle will fill based on the value, let’s say, from 0 to 100%. I have attached a picture of what I have in mind.
Any suggestion will be greatly appreciated.

2

Hi, welcome to the forums!

This was done using (from bottom to top):

-A pie chart
-A circle
-A label

The label has a custom property called progress. In the attached window you can import into your project, this is bound to a timer component. As the value changes, a propertyChange event script runs to update the values in the pie chart.

This will need to be in Preview Mode in the Designer for it to work (the scripts won’t run otherwise!).
Circular Progress Meter_2015-05-14_1110.proj (14.1 KB)

3

All right, I knew I couldn’t leave it alone! :laughing:

Redid it so that it can be used as a group (also moved custom properties and scripts to the group).

Also popped it into a custom pallet, which is attached. :wink:
JC Custom Pallette_2015-05-14_1246.proj (8.25 KB)

4

  1. Is it possible to import this project resource into Ignition 8.1.1?

  2. Where does the imported resource get placed in the project?

image

I have not been able to figure out how to use this resource…

5

Huh. The import works, But the pallette doesn’t show. :cry:

Here’e the sample window with the grouping.
CircularProgressMeter_2022-02-07_1134.zip (11.2 KB)

2 Likes
6

Something appears to have regressed with custom palette import…

2 Likes
7

I’ll start a new thread for that.

8

Thanks, this resource works just fine for my purposes.

1 Like