NEXTION USER GUIDE2: AN ENTRY APPLICATION OF PROGRESS BAR, PICTURE AND CROP COMPONENT

In this post we will introduce you three Nextion Editor components:Progress Bar Component, Picture component and Crop component, and how to apply them to project. We will show you a very simple example for each component.
Ok, so let’s get started.

Progress Bar Component

A progress bar component is used to control and view the progress. There are many properties for users to design their own progress bar.

First of all, add a progress bar component in the nextion editor HMI file. Then click to select it in order to see a progress bar table in the bottom right corner.

For detailed introduction about the three form cells in the table, please refer to our last post- An Entry Application of Text Component and Button Component.

By clicking each cell, a note that explains the meaning of the cell will pop up below the table. This table covers all the properties below:

PROPERTY NAME EXPLANATION
objname Component name, double click it to rename
vscope Local: current page
Global: A variable which can be applied to some other component in any page
sta Solid color: Solid color background
Image: Component background is image
dez Horizontal: Show in horizontal direction
Vertical: Show in vertical direction
bco Background color
pco Foreground color
bpic Background image
ppic Foreground image
val Initial value
x Coordinate X
y Coordinate Y
w Component width, when dragging the component side line to change
the width, it gets changed accordingly
h Component height, when dragging the component side line to change
the height, it gets changed accordingly

Now we change the progress bar property table as below. This example can be downloaded from our library.

In addition, we added another two button components to control the progress bar. Below are the settings:

Then this is how the interface hopefully looks like:

Picture Component

A picture component is used for adding picture-like button to the interface.
Please see the newly added picture component property table as below:

PROPERTY NAME EXPLANATION
objname Component name, double click it to rename
vscope Local: Current page
Global: A variable which can be applied to some other component in any page
pic Select a desired picture
x Coordinate X
y Coordinate Y
w Component width, when dragging the component side line to change
the width, it gets changed accordingly
h Component height, when dragging the component side line to change
the height, it gets changed accordingly

Example: Now I add two pictures to the picture library, and choose 1 in the pic. When debugging and add the Instruction p0.pic=2 in Instruction Input Area, press enter, and the component will change to pic 2. See the effect demonstration video at the end of this post.

Download this example from here.

Crop Component

A crop component can crop an image whose size is the same as resolution, and shows the cropped image directly on user’s page.
Properties of crop image component are explained below:

PROPERTY NAME EXPLANATION
objname Component name, double click it to rename
vscope Local:current page
Global: A variable which can be applied to some other component in any page
picc Select a desired picture(the image size must be the same as the resolution)
x Coordinate X
y Coordinate Y
w Component width, when drag the component side line to change
the width, it gets changed accordingly
h Component height, when drag the component side line to change
the height, it gets changed accordingly

A related example is given as below, so just set the component the same as the example. Users can download the example from here.

Finally, download the code to your mega2560. Below is the demonstration video of the three examples:

%d bloggers like this: