This tutorial, after connecting STWI101WT-01 HMI display and Arduino development board LY-F2, will focus on the enhanced controls view, tab_view, popup, dialog, slide_view_view, list_view, etc. provided by STONE Designer. Familiar with these enhanced controls, you will be able to accomplish richer, more multi-dimensional, and flexible interface design through the STONE HMI display, making your product’s human-computer interaction more humane, more gorgeous, and cooler!
Contents.
- Linking the Arduino with the STONE HMI display.
- Popup
- Dialog
- View
- Tab_view
- Slide_view_view
- List_view
- Interface programming and code
1、Connecting the Arduino to the STONE HMI display.
In Figure (11), the top is STONE’s STWI101WT-01 serial HMI display, the red is Arduino development board LY-F2, and the right of the fan is STONE’s adapter board V1.2. development board LY-F2 and STWI101WT-01 screen are serial communication, through adapter board V1.2, so how to link the adapter board V1.2 with Arduino development board LY-F2 how to link? See Figure (12), the two need to be connected to 3 wires, respectively TX, RX, and GND, you need to move the electric complex iron, because there is no GND lead on the adapter board V1.2, marked with green, blue, black with Figure (13) in. The DC12V of the V1.2 adapter board should also be connected to ensure that the serial screen is lit. GND characters on both sides of the display and the V1.2 converter board.
2. popup introduces.
Right-click on the topmost root of the project in stone designer, popup right-click menu as shown in Figure (21), then select popup in the lower menu of new to generate a popup, we create a button in the popup to achieve exit popup back to the home page. Set the bg_image and bg_color of the popup, the effect is shown in Figure (22). popup currently does not support the text property.
3. Introduction to the dialog box.
As above, right-click on the topmost root of the project in stone designer, and select dialog in the pop-up right-click menu to generate dialog dialog dialog, the project file is automatically generated as Figure (31), and the window effect is as Figure (32). Modify the above view’s sub-control label to show the title of the dialog box; modify the sub-control button to close_window when clicked to achieve exit and other functions. Refer to the above-set dialog box dialog’s bg_image and bg_color, the effect is shown in Figure (33).
4. Introduction to the View control.
What I like most: the base control radio_button can be grouped by the view, tab_view. Because this issue has stumped me for a long time, lol ……
When you make a view control, you can select it in the project column on the left of stone designer, and then click the right mouse button to bring up the right-click menu (41), then you can move the cursor to the bottom of the Add Widget, you can select the radio_button control in the expanded submenu. button control will be a child control of the view controller, and when you move the view later, the child control will move with it. Repeat the above operation to get more than one radio_button, and pay attention to modifying the x and y coordinates of the radio_button so that they are in the right position. 2 view controls with 3 radio_buttons each will look like Figure (42). The border_color of the View can be set to red to show the border.
5. Tab_View control introduction.
When you drag and make a tab_view control, the left project bar of the stone designer tool is automatically generated see Figure (51), with reference to the view controller, at which point you can add the radio_button control to the view under pages. Figure (52) shows two tab_view controls with three radio_button controls added respectively. view and tab_view pages are generated as shown in Figure (53). Modify the text property of the tab_button child control as needed… works great!
6. slide_view_view control Introduction.
When you drag and make a slide_view_view control, the left project bar of the stone designer tool is automatically generated see Figure (61), under slide_view1, you can add multiple child views, and under each view, you can add multiple child controls. The three view effects in Figure (62) are shown in Figure (63), Figure (64), and Figure (65). x and y coordinates of the child controls in the View are relative to the upper left corner of the view.
7、Introduction to the list_view control.
When you drag and make a list_view control, the project bar on the left side of the stone designer tool is automatically generated See Figure (71), under scroll_view1, you can add multiple child list_item, and under each list_item, you can add multiple other base child controls. The list_item here is generally used as a child control of the list_view and is not used separately. The effect of Figure (72) is shown in Figure (73), where the bg_color of each list_item is set differently for easy differentiation. The default wideband of the scroll bar Scroll_bar_m3 is 10, which can be adjusted, and the fg_color of scroll_bar_m3 can be set.
8、Interface programming and code.
The home page is shown in Figure (81), from which you can access the individual demo pages and also control the fan on and off. The switch control name = sw1 for the fan control, the switch control name = sw2 in Figure (82) and the six-light bulb image controls names in Figure (65) are: image31, image32, image33, image34, image35, image36.
This can be done with the command.
ST<{“cmd_code”: “set_visible”, “type”: “widget”, “widget”: “image31”, “visible”:true}>ET
# Make the visible state of the image control true.
ST<{“cmd_code”: “set_visible”, “type”: “widget”, “widget”: “image31”, “visible”:false}>ET
# Make the visible state of the image control false.
When switch switch sw1 is on, the display returns.
S T < 0x10 0x10 0x00 0x04 sw1 0x01 > E T
Hexadecimal data :
53 54 3C 10 10 00 04 73 77 31 01 3E 45 54 AB 54
When switch switch sw1 is off, the display returns.
S T < 0x10 0x10 0x00 0x04 sw1 0x00 > E T
Hexadecimal data :
53 54 3C 10 10 00 04 73 77 31 00 3E 45 54 57 55
In particular, the child control switch located in list_item3 in Figure (73) is the same return effect!
Presentation Notes
The LY-F2 development board communicates with the STWI101WT-01 display through the serial converter board V1.2, which enables the interaction between the development board and the display. The switching delay on the home page controls the start/stop of the fan attached to IO6 on the Arduino board, and the switch on the slide_viw_view sliding window page controls the animation start/stop of the six sub-controls images in view33, see figure (82) and the accompanying demo video.
Conversion board V1.2 is required DC12V, a USB dual power supply, and a USB supply DC5V for the 232 chip, otherwise, the serial communication will be abnormal!
Code List
The development board Arduino source code is transcribed as follows.
// widget view \ tab view \ slide view \ list view \ popup \ dialog
// by Frank for STONE in 2022.06.03
/*
fan with switch control name = sw1.
switch control Run with name = sw2.
The names of the 6 bulb image controls are: image31, image32, image33, image34, image35, image36.
the word of CMD:
ST<{"cmd_code": "set_visible", "type": "widget", "widget": "image31", "visible":true}>ET
When switch switch sw1 is on, the display returns.
S T < 0x10 0x10 0x00 0x04 sw1 0x01 > E T
Hexadecimal data :
53 54 3C 10 10 00 04 73 77 31 01 3E 45 54 AB 54
When switch switch sw1 is off, the display returns.
S T < 0x10 0x10 0x00 0x04 sw1 0x00 > E T
Hexadecimal data :
53 54 3C 10 10 00 04 73 77 31 00 3E 45 54 57 55
*/
// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;
int fan = 6;
int flagFan = 0; // Fan : 0 = stop 1 = play
int flagRun = 0;
int runNum = 1;
int iflag0 = 1;
int num3 = 0;
void setup()
{
pinMode(led, OUTPUT); // initialize the digital pin as an output.
pinMode(fan, OUTPUT);
digitalWrite(led, LOW);
digitalWrite(fan, LOW);
flagFan = 0;
Serial.begin(115200); // Open the serial communication function and wait for the serial port to open
while (!Serial) {
Needed for Leonardo only
}
}
void loop()
{
int inChar;
if(iflag0 == 1){ //only once!
iflag0 = 0;
//-------set all lamps on!------
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image31\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image32\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image33\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image34\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image35\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image36\",\"visible\":true}>ET");
delay (2000);
digitalWrite(fan, HIGH);
digitalWrite(led, HIGH);
delay (2000);
delay (2000);
digitalWrite(fan, LOW);
} //end if iflag0 = 1
//------- flagRun = 1 -------------
if(flagRun == 1)
{
if(runNum == 1) {
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image31\",\"visible\":false}>ET");
}
if(runNum == 2) {
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image32\",\"visible\":false}>ET");
}
if(runNum == 3) {
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image33\",\"visible\":false}>ET");
}
if(runNum == 4) {
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image34\",\"visible\":false}>ET");
}
if(runNum == 5) {
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image35\",\"visible\":false}>ET");
}
if(runNum == 6) {
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image36\",\"visible\":false}>ET");
}
if(runNum == 7) {
runNum = 0;
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image31\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image32\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image33\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image34\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image35\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image36\",\"visible\":true}>ET");
}
delay(10); // waits 1s
num3 += 1;
if(num3 >= 30){
runNum += 1;
num3 = 0;
}
}
// Read the information sent by the serial port:
if (Serial.available() > 0) { inChar = Serial.read(); }
//-------CMD jie ma begin-------
if (inChar == 0x73) // s
{
if (Serial.available() > 0){inChar = Serial.read();}
if (inChar == 0x77) // sw
{
if (Serial.available() > 0){ inChar = Serial.read();}
if (inChar == 0x31) // sw1
{
if (Serial.available() > 0){ inChar = Serial.read();}
if (inChar == 0x01) // sw1 = 1
{
if(flagFan == 0){
delay (2000);
digitalWrite(fan, HIGH);
flagFan = 1;
}
}else if (inChar == 0x00) // sw1 = 0
{
if(flagFan == 1){
delay (2000);
digitalWrite(fan, LOW);
flagFan = 0;
}
}
}else if (inChar == 0x32) // sw2
{
if (Serial.available() > 0){ inChar = Serial.read();}
if (inChar == 0x01) // sw2 = 1
{
flagRun = 1;
runNum = 1;
}else if (inChar == 0x00) //sw2 = 0
{
flagRun = 0;
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image31\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image32\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image33\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image34\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image35\",\"visible\":true}>ET");
Serial.println("ST<{\"cmd_code\":\"set_visible\",\"type\":\"widget\",\"widget\":\"image36\",\"visible\":true}>ET");
}
}
}
}
//----- CMD jie ma end ---------
if (inChar==85) { //55H=85="U" speed = 1
digitalWrite(led, HIGH); // turn the LED on (HIGH is the voltage level)
//digitalWrite(fan, HIGH);
} // end if.
if (inChar==86) { //56H=86="V" speed = 2
//digitalWrite(fan, LOW);
digitalWrite(led, LOW); // turn the LED off by making the voltage LOW
} // end if
delay(3); // waits 1s
delay(5); // waits 1s
}