Loading...

You have no items in your shopping cart.

 
 
 
×

Registration

Profile Informations

Login Datas

or login

First name is required!
Last name is required!
First name is not valid!
Last name is not valid!
This is not an email address!
Email address is required!
This email is already registered!
Password is required!
Enter a valid password!
Please enter 6 or more characters!
Please enter 16 or less characters!
Passwords are not same!
Terms and Conditions are required!
Email or Password is wrong!
Captcha is required!
Captcha is wrong!

Nextion User Guide3:An Entry Application of Hotspot, Gauge and Waveform Component

In this post, 3 components are to be introduced. They are respectively hotspot component, gauge component and waveform component. With explanation of each component property, followed by a simple example, I believe you’ll quickly learn to use these components to design complex interfaces.

Hotspot Component

Hotspot component is used to create a detectable touch area.

Hotspot attribute table is very simple, there are just 6 properties. With just a look, you'll get their meanings, not to mention the explanation note below the table.

You can design hotspot to execute events when touch release. For example, design two hotspots, by touch releasing one hotspot, the page loads next image, by touch releasing another, the page loads last image. This realize image browsing effect that we often use.

Example:(Download hotspot example here)

Firstly, choose an image to be your background, we choose picture 0 here. Create a font. Then add two text components, we are going to make them indicating arrows. Below are the settings:

Next, add two hotspot components to the background, drag and drop them to desired area. Add another picture to picture library. Then set the table cells as follows:

Finally,select hospot m0, then move on to the the compiler window, select touch release event and input page0.pic=0 in User Code, as showed below. Similarly, select hotspot m1 and inputpage0.pic=1 in User Code.

Compile and debug, you can click the the left part or the right part of the image in the simulator. If everything is ok, you will successfully switch between the two background images. Effect demonstration video is at the end of this post.

Gauge Component

Gauge component is used to create a pointer, which is widely used in gauges.

Let's first learn about its attribute table.

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
crop image: crop background image to achieve transparent effect
bco Background color
val Initial angle(0-360)
wid The thickness of the pointer, maximum:5
pco Pointer color
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:(Download the example here)

We are going to make a pointer whose angle can be adjusted by two buttons. So we'll need one gauge component and two button components. Here we go.

First of all, choose a picture to be our background. Then add a pointer component in the display area, drag and drop it to desired position. And adjust the wide and length by dragging the side line or by inputting w and h.

Here we set the component attribute table as follows:

Next, add two button components. The properties are set as below:

This is how the display window hopefully look like:

You can see the example demonstration video at the end of this post.

Waveform Component

Waveform component is used to create a series of waveform that can detect all kinds of hardware working status.

Below is waveform component attribute table:

PROPERTY NAME EXPLANATION
objname Component name, double click it to rename
sta crop image: crop background image to achieve transparent effect
solid color:solid color background
image:component background is image
ch Number of channels, from 1 to 4
bco Background color
pic Background image
picc Background crop image(must be full screen image)
pco0 Foreground color of Channel 0
pco1 Foreground color of Channel 1
pco2 Foreground color of Channel 2
pco3 Foreground color of Channel 3
gdc Grid color
gdw Grid width (0=none)
gdh Grid height(0=none)
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:(Download this example from here)
In this example, we create a four-channel waveform component. The channels are in different colors. Below are the settings:

Following picture is the how the waveform look like, download the source code, let mega2560 continuously output 4 channel value to plot the curves. Demonstration video is at the end:

Demonstration Video

The three examples' effect can be demonstrated by below video: