In this post we’ll introduce you 3 Nextion Editor components：progress bar Component, picture component and crop component, and how to apply them to your project. We will show you a very simple example for each component.
Ok, let’s get started.
Progress Bar Component
A progress bar component is used to control and view the progress. There are many properties for you to design your own progress bar.
First of all, add a progress bar component in the nextion editor HMI file. Then click to select it, you’ll 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 can be applied to 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 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 |
Now we change the progress bar property table as below. This example can be downloaded from our library: https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples/CompProgressBar
In addition, we add another two button components to control the progress bar. Below are the settings:
Then this is how the interface hopefully look like:
Picture Component
A picture component is used for adding picture-like button to the interface.
Please see the new-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 can be applied to other component in any page | |
| pic | select a desired picture |
| 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 |
Example: now I add two pictures to picture library, and choose 1 in pic. When debug and add the Instruction p0.pic=2 in Instruction Input Area, press enter, the component will change to pic 2. See the effect demonstration video at the end of this post.
Download this example from here: https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples/CompPicture
Crop Component
A crop component can crop a image whose size is the same as resolution, and shows the cropped image directly on your page.
Properties of crop image component are as show below:
| PROPERTY NAME | EXPLANATION |
|---|---|
| objname | Component name, double click it to rename |
| vscope | Local:current page |
| Global:a variable can be applied to 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 |
Related example is as below, just set the component same as the example. You can download the example from here:
https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples/CompCrop
Finally, download the code to your mega2560. Below is effect demonstration video of the three examples: