Start a new topic

Image teariin when animating a progress bar

I was attempting to create an animation effect by running a for loop through setting the progressBarEdit() value, to make a smooth growing progress bar.  When I loaded the .tft I noticed that there was a lot of image tearing going on when the progress bar updated.  To see if this was just a limitation of what the display could do when trying to rapidly update, I built 31 separate frames and ran a side by side test of updating the picture to load the next and/or previous frame, side-by-side with the progress bar updates:

I can imagine this is a choke point somewhere in how the Nextion code handles updating the progress bar...  Anyone else see anything similar?

1 person has this problem

We have upgraded the Nextion Library<>. 

Please try it for your purpose.

I will take a look, though I am not using an arduino platform, so it may take me a while to port....

The problem I was having is that a flicker occurs every time a progress bar is updated. The problem is in the firmware code and not the library. For example, the command "j0.val=50" sent periodically would cause a flicker on every update.  The root problem is that the progress bar image is being completely erased and then the image repainted. So there will always be a flicker. To solve this I gave up on the Progress Bar component altogether and simply used the "picq" command to create the progress bar effect. First the "filled-in" section is displayed and then the remaining portion is filled in with the background image. In this manner the bar will never flicker.

This technique also simplifies the graphic design as one does not need to isolate the progress bar images.

 Below is the function that I used to test.

void updateProgBar1() {
  int sensor = analogRead(A0);

  if (abs(sensor - old_sensor_value) > 20) {
    old_sensor_value = sensor;
    pValue1 = map(sensor, 0, 1023, 0, widthProgBar1);
    String wipe = "picq " + String(xProgBar1) + "," + String(yProgBar1) + "," + String(pValue1) + "," + String(heightProgBar1) + ",2";
    wipe = "picq " + String(xProgBar1 + pValue1) + "," + String(yProgBar1) + "," + String(widthProgBar1 - pValue1) + "," + String(heightProgBar1) + ",0";
    set_component_text("t0", String(sensor).c_str());


2 people like this
That looks really good!! Which components picq value are you changing? Is it just an image?

I am using these three images and using image cropping for everything. Instead of updating the value of a progress bar component I just change the area and image being displayed using the picq command directly.


3 people like this

@Bentley Born

It's a good Solution.

Nice job! @Bentley Born

Could you share your HMI file here? We will be thankful:-)

@ITEAD_Looky The HMI file is attached below.


2 people like this

TKS.@Bentley Born

But I want to know how to control the temperatue with out any component?

@ITEAD_Looky I am using the PICQ command, the example code and detailled explanation is in the post above.

A good addition to the next version of the Nextion Editor:

1. Add a Crop Image option to the Progress bar component

2. Instead of erasing the entire image before repainting do the following: Paint the desired progress bar and then paint the background image to the end of the progress bar

With this technique there will be no flickering.

3 people like this

I just cant grasp setting up the bars at all

I want to use the temp readings from my k-type thermocouples displayed using bars

but the graphic parts have me stumped

Charles, you can represent the temperature with a text box and send a changeText command from your uC. Or if you want to have a graphical bar Bentley did a great write up with pictures to show the graphical base of how he accomplished this.

@Charles Iakins 

I have three full screen pictures. In the case of the progress bar the first picture (ID:0) has the progress bar empty, the third picture (ID:2) has the progress bar painted full. The progress bar is located at (56, 321), the width is 195 and the height is 8. Now I just need to do some calculations to use the picq command. To paint the progress bar 50% the raw picq command would be the following:

The x,y will not change to paint the "full" part of the progress bar. The height also will stay the same.

We need to calculate the width: total width*.5 = 98

The "2" is the ID of the screen with the full progress bar.

picq 56,321,98,8,2

Now we have to "erase" the tail end in case the previous value was higher than the current value. To do that we need to determine the new position of x to start the new paint box. This would be 56 + 98 = 154, the position where we ended the first box. Our new width would be the full box length less the width of the previous box which is 195 - 98 = 97.  The "0" is picture with ID:0 (the empty progress bar)

picq 154,321,97,8,0 

The result is this:

The calculation seems complicated at first but in a function or library it all works quick and easy. I am writing a simple library and tutorial for Arduino-type people. Hopefully the initial version of the library will be ready today and I'll publish it.

yeah the graphical bar is what I want with a text value too at the right

(see live temp page)