This post I`m going to teach you to build a gradient progress bar project. Gradient progress bar has been widely applied to many places like refresh page, buffer zone. For HMI designing, I think it is a very important and practical project.
Download the HMI project file from here.

I`m going to build a project containing 3 kinds of Old Sankey like progress bar, and make them switchable. We all know that there is a progress bar component available in the software, but that is only single bar, which is not helpful because what I need is gradient progress bar that combined with many bars.

Picture Preparation

To begin this project, I design progress bar of three size. And to make their color changeable, I use PS to design different color. I make word “LOADING” five yellow color: 0% yellow (black), 25% yellow, 50% yellow, 75% yellow, 100% yellow. I make the rectangle bar five yellow colors: 0% yellow (black), 25% yellow, 50% yellow, 75% yellow, 100% yellow. And another yellow rounds in five colors: 0% yellow (black), 25% yellow, 50% yellow, 75% yellow, 100% yellow. All background are in black color. I will use the bar pictures from 0% yellow (black) to 100% yellow, then from 100% yellow to 0% yellow (black) to make gradient effect. This means I will use all pictures except those 100% yellow twice, so remember to add them twice to the picture library.

Building Project

As you can see from my HMI file, there are two pages that can be switched between. In page0, I make a switch button b0, and make it touch release to jump to page1. Then for the p0, I make it a loading bar. To make this component automatically refresh to show different pictures, a variable component va2 and timer component tm1 have created. Please see the codes. To build the circle progress bar, I add a p1 component, then copy and paste p1 for 11 time, adjust their position . And to make the progress bar refreshing among the pictures, two variable components va3 and va 4 as well as a timer component tm2 have created. Please see the codes for details. The page1 has two progress bars, so copying and pasting the first component will reduce your workload greatly. Regarding to the codes, just check out from my HMI file.

Demonstration Video

And below video shows the demonstration effect:

Gradient Progress Bar Project from ITEAD on Vimeo.

Leave a Reply

%d bloggers like this: