In this post, another 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 meaning, 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 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 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 states.
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 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 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 example effect can be demonstrated by below video: