In this tutorial we’ll introduce slider component and timer component, and explain how to apply them to your project. As usual, we’ll show you an entry example for each component.
Slider Component
A slider component is used to create a controllable slider, from which you can vary number, time, progress, etc.
Slider Component Property Table:
| PROPERTY NAME | EXPLANATION |
|---|---|
| objname | Component name, double click it to rename |
| local:current page | |
| global:a variable can be applied to other component in any page | |
| mode | horizontal: slider in horizontal direction |
| vertical: slider in vertical direction | |
| sta | crop image: crop background image to achieve transparent effect |
| solid color:solid color background | |
| image:component background is image | |
| psta | solid: cursor in solid color |
| image: cursor in image | |
| bco | Background color |
| pco | Cursor color |
| pic | Background image |
| picc | Background cropped image(must be full screen image) |
| wid | Cursor width |
| hig | Cursor height |
| val | Initial cursor value |
| maxval | Maximum cursor value(65535) |
| minval | Minimum cursor value(0) |
| 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: (Download the example here)
We are going to create an interface with a slider to be controlled between 0 to 100.
So we need to create one slider component and a text component. Here we go.
At first, we add a slider component to the display area, drag and drop it to desired position. Then modify the attribute table as below:
Then add a text component in the middle. The settings are as below:
This is how the interface hopefully look like:
Download the source code to your mega2560, then you can control the text by the slider.
You can see the real effect demonstration from our video at the end of this post.
Timer Component
A timer component is used to create a timer, it triggers an event every circle time.
This component is very different from previous components. It can not be directly showed in the interface. With some codes, we can use it to control other components.
Let’s first look at the timer component attribute table:
| Property Name | Explanation |
|---|---|
| objname | Component name, double click it to rename |
| tim | Set initial circle time in ms (50 to 65535) |
| en | Trigger the timer (0-Disable, 1-Enable) |
Example:(Download this example here)
In this example, you can modify the circle time by buttons and the timer can be turned on and off. So we need two text components to show the time and circle time, three button components to turn on or off the timer and control the circle time.
Then we create the components and arranged as below:
The settings are as below:
Next, add a timer component and set it as below, the initial circle time is 100, which means for every 100ms, the timer adds 1. When you press ADDTIME and make it 500, which means for every 500ms, the timer adds 1.
Then upload the source code to Arduino Mega 2560. As you can see the demonstration video at the end of this post, when press ADDTIME to make the circle time value bigger, the timer becomes slower, in contrast, when press DECTIME, the timer runs faster.
Demonstration Video
So far, we have learnt all current components tutorials (variable component exceptional). I hope with these series basic tutorials, you can quickly get started using Nextion Editor to design your own interfaces. For the coming components, we’ll post related tutorials once they are available.
For variable component and if conditional statement, our library does not have any supported examples. We think it would be better if we write a sole post for them. So next post we’ll introduce them in details, stay tuned!
If you have any questions about these components, please leave your comments below the post. Or you can go to our forum. We welcome you to share your project with us!
