Start a new topic

Simple change to Nextion progress bar to make it fast

 Here is a way to simplify current implementation of Nextion progress bar component while making it work much faster for a fast update.

Drop the progress bar background picture. User will put image of "back plane" of the progress bar using photoshop or whatever into the page' background picture... Changing value of progress bar will only change the foreground part in relation to the page' background. Advantages:

1. placement of the progress bar is easier to do as it should match it's designed location on the page' background picture.

2. updates will be really fast as only one foreground picture needs to be updated and it is usually the smallest part of the Bar...


If users want to also have ability to change bar' background from MCU - then to the current implementation should be added a "no background picture" option ("comp.bpic=null"). Currently compiler throws error if this picture is missing.

2 people like this idea

Few details to the implementation: new value of the bar should be compared to the current/old value. If new value is greater, bar's foreground picture overrides the page' background in the "lengthwise difference" location. If new value is lesser than old, the "lengthwise difference" location is filled with background picture. Only this difference in length between old and new value should be redrawn. This redrawing is the same as your implementation of the crop command.


1 person likes this

Hi Vlad,
For a better understanding give us an example
All the best,

Hi Teo, here I'll give you a walk through of my Nextion screen design process which will show unnecessary redundancy and complexity in Nextion.
1. I start from creating my instrument display screen in Photoshop (or any layered imaging software) and save it in a flat JPEG file. This image represents the visual design as well as a layout of the gauges and text components (that means - this image defines the designed placement locations)
2. I create a Nextion page screen (one of many) in your editor with correct resolution and I place this designed page image as a background. (see attached file)
3. Now I place Nextion components into their respective locations in the background image to overlay my background image with gauge pointers, texts and touch areas...  (see attached) and setup all components attributes. I repeat - I ONLY expect Nextion to overlay my background with POINTERS, TEXT and TOUCH AREAS... not with other layers of images.... Am I wrong? Here the surprises come...
4. Starting from a progress bar... If my procedure is what Nextion developers had in mind then I already have the "back" of a progress bar in my page' background image - I only need to provide the overlaying striped bar covering my background to show the "progress" - that is done with "ppic" attribute... good,  yet why is "bpic" in there ? Why does Nextion redraw pixels of yet another image placed in between background image and foreground bar image ?  Do you intent to implement proper handling of multiple layers in your software? Then you need to provide all the tools to handle layers - move "forward", backward, make transparent (that brings topic of the shape of transparency, gradient of transparency...etc.)...
To keep it bug-free and fast to implement - only 2 images should be used - "ppic" image - attribute of a given component and 2nd - a background which is one and the same for all the page...
This is how screen update should work:
When progress bar value reduced - Nextion overrides "emptied" area using restored background pixels,
when bar value increases - bar image pixels override the background pixels in that area... No other images should get involved... this is the only fastest approach for a run-time.
Let's go further and you will see the same redundancy in all components:
5. Look at my RPM gauge. The gauge is already there - in background image. All I need from you is to add a pointer in right location. This is done by placing and scaling the "Gauge" component (with crop) - great!  But what is "ppic" attribute for? I already have gauge's "back" in background...
6. Look at my text field for the "Flight Time" It is nicely designed in Photoshop - all I want from Nextion is to overlay it with text. This is already done by "text" component (with crop) . But what is there "ppic" attribute for?

This attached images represent a partial sample of my new type of aircraft instrument panel based on Nextion, with many components like these sample shows...
Visually all the components already designed in Photoshop and Nextion only makes them "alive" with pointers, texts and sliders...  Yet currently in EACH COMPONENT I have to provide the same image - the same BACKGROUND image of this page either as "bpic" or as "ppic" attribute !...  I think all the Nextion code which deals with this "3rd image" is redundant...
If you intended to provide for a run-time update of the image of "back" of each component, then you don;t have facilities for using layers yet - even in the editor. Any image placed on the top of another makes the underlying image vanish from view and hence banned from editing...
I'd recommend to make it simple, fast updating screen and bug-free for now at least - drop using 3rd image in between the background and  foreground component  - deal with 2 images only and make the Nextion and it's editor bug-free, easy to use and truly fast updating screen...(only simple code design can assure run-time speed)

 If I am missing something, please let me know...

BTW - you can see in these images the problem which I see as a bug - the page image does not fit into the window and there is no way to scale it...

(292 KB)
(294 KB)
(383 KB)
(379 KB)

I am now reviewing all of the Feature Requests, this will take some time, patience please.

This recommendation is being carried for review.

Login or Signup to post a comment