Arduino Tutorial： STONE STWI101WT-01 HMI Display and Arduino
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.
Figure (11) Main materials
Figure (12) 3 wires for serial communication
Figure (13) Communication 3 wires are marked in green, blue, and black on both boards
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.
Figure (21)
Figure (22)
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).
Figure (31) dialog comes with child controls
Figure (32) originaldialog
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.
Figure (41)
Figure (42)
Figure (43)
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!
Figure (51) tab_view comes with child controls
Figure (52)
Figure (53) Modify the text property of the tab_button child control as needed, isn’t that 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.
Figure (61) slide_view_view comes with a child control
Figure (62)
Figure (63) Sub-control of view31
Figure (64) child control of view32
Figure (65) child control of view33
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.
Figure (71) List_view comes with child controls
Figure (72)
Figure (73)
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!
Figure (81) Home
Figure (82) Sliding viewport page
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
Related posts:
Touch Screen for Automated Feeding System
Record Medical Surgery Notes with STONE Serial LCD Screen
STONE TFT Screen ventilator Project: HMI Design, Control Creation, Hardware Connection and Command Testing
Tutorial: STONE HMI display for EV charging infrastructure project
Portable Monitor with STONE serial Touch Screen and ESP32
Arduino Tutorial for Beginners LY-F2 of Seven Star Bug +STONE Serial Screen
Thermal Print Head for a Parking Management System Based on Raspberry Pi Pico and STONE TFT LCD
STM32 Board Tutorial: Use STONE LCD Development BEAUTY DEVICES
Arduino uno +STONE LCD + Display data read by MFRC522
LCD Arduino + STONE HMI + Display Heart Rate
.webp "Arduino Tutorial： STONE STWI101WT-01 HMI Display and Arduino")