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:
