本教程在连接了STWI101WT-01HMI display和arduino开发板LY-F2后，将重点介绍STONE Designer提供的增强控件view、tab_view、popup、dialog、slide_view_view、list_view等。熟悉了这些增强的控件功用，你将能通过STONE HMI display完成更丰富、更多维、更灵活的界面设计，使你的产品的人机互动更人性化、更绚、更酷！

目录：

链接arduino与STONE HMI display；
Popup
Dialog
View
Tab_view
Slide_view_view
List_view
界面编程和代码

1、连接arduino与STONE HMI display：

图（11）中上方是STONE的STWI101WT-01串口 HMI display，红色的是arduino开发板LY-F2，风扇右边的是STONE的转接板V1.2。开发板LY-F2与STWI101WT-01屏是串口通讯，通过转接板V1.2，那么转接板V1.2与arduino开发板LY-F2怎么链接呢？见图（12），二者之间需要3根线相连，分别是TX、RX、GND，需要动一下电络铁，因为转换板V1.2上没有GND的引出点，用绿色、蓝色、黑色标识与图（13）中。另外，一定要注意，通讯时，两个板上都需要从USB供电DC5V。转接板V1.2的DC12V也要接上，确保串口屏点亮。STWI101WT-01串口屏后面的排线插座是“防呆”的，插进去核对显示屏和V1.2转换板两端的GND字符对应即可。

图（11）主要材料

图（12）串口通讯的3根连线

图（13）通讯3根线分别用绿色、蓝色、黑色在两个板上标出

2、popup弹窗介绍：

在stone designer的project最上面的根上单击右键，弹窗右键菜单如图（21），接着在new的下级菜单中选中popup即可生成弹窗，我们在弹窗中制作一个按钮，实现退出弹窗返回主页。设置弹窗的bg_image和bg_color，效果如图（22）。Popup目前不支持text属性。

图（21）

图（22）

3、dialog对话框介绍：

同上，在stone designer的project最上面的根上单击右键，弹窗右键菜单中选中dialog，即可生成dialog对话框，project档自动生成如图（31），视窗效果如图（32）。修改上面view的子控件label，可以展示dialog对话框的标题；修改子控件button，让点击时close_window，实现退出等功能。参照以上设置对话框dialog的bg_image和bg_color，效果如图（33）。

图（31）dialog自带子控件

图（32）原始dialog

4、View控件介绍：

我最中意的是：基础控件radio_button可通过view、tab_view分组。因为这个问题让我纠结过很久，呵呵......

当你制作一个view控件时，可在stone designer左边的project栏选中它，再点击鼠标右键，弹出右键菜单图（41），这时可移动光标到最下面的Add Widget处，即可在展开的下级菜单中选中radio_button控件，此时得到的radio_button控件将属于view控件的子控件，后面你要移动view时，子控件会随着一起移动。重复以上操作，可得到多个radio_button，注意修改radio_button的x、y坐标，让他们在正确的位置。2个view控件各添加3个radio_button的效果如图（42）。横向对齐可以使用“Shift”键分别选中，然后点击横向对齐按钮即可，见图（43）。View的border_color可以设置red，以便显示出边框。

图（41）图（42）

图（43）

5、Tab_View控件介绍：

当你拖动并制作一个tab_view控件时，stone designer工具的左边project栏自动生成见图（51），参照view控件，此时可以在pages下面的view中添加radio_button控件。图（52）是2个tab_view控件分别添加了3个radio_button控件的情况。View和tab_view页生成效果如图（53）。按需要修改tab_button子控件的text属性，效果很不错！

图（51）tab_view自带子控件

图（52）

图（53）按需要修改tab_button子控件的text属性，是不是很棒？

6、slide_view_view控件介绍：

当你拖动并制作一个slide_view_view控件时，stone designer工具的左边project栏自动生成见图（61），在slide_view1下，可以添加多个子view，每一个view下，又可以添加多个子控件。图（62）三个view效果分别为图（63）、图（64）、图（65）。View中的子控件的x、y坐标都是相对于view的左上角的。

图（61）slide_view_view自带的子控件

图（62）

图（63）view31的子控件

图（64）view32的子控件

图（65）view33的子控件

7、list_view控件介绍：

当你拖动并制作一个list_view控件时，stone designer工具的左边project栏自动生成见图（71），在scroll_view1下，可以添加多个子list_item，每一个list_item下，又可以添加多个其他基础子控件。这里的list_item一般都是作为list_view的子控件，不单独使用。图（72）的效果见图（73），每一个list_item的bg_color都设置不同，方便区分。滚动条Scroll_bar_m3的宽带默认是10，可以调整，scroll_bar_m3的fg_color也能设置。

图（71）list_view自带的子控件

图（72）

图（73）

8、界面编程和代码：

主页见图（81），由此可进入各个演示页，同时也能控制风扇开停。其中，控制风扇的switch控件name = sw1，图（82）中switch控件的name = sw2，图（65）中6个灯泡image控件的name分别是：image31、image32、image33、image34、image35、image36.

可以用指令：

ST<{"cmd_code":"set_visible","type":"widget","widget":"image31","visible":true}>ET

#使image控件可见状态为真；

ST<{"cmd_code":"set_visible","type":"widget","widget":"image31","visible":false}>ET

#使image控件可见状态为假；

switch开关sw1打开时，显示屏返回：

S T < 0x10 0x10 0x00 0x04 sw1 0x01 > E T

十六进制数据:

53 54 3C 10 10 00 04 73 77 31 01 3E 45 54 AB 54

switch开关sw1关闭时，显示屏返回：

S T < 0x10 0x10 0x00 0x04 sw1 0x00 > E T

十六进制数据:

53 54 3C 10 10 00 04 73 77 31 00 3E 45 54 57 55

特别说明，图（73）中，位于list_item3中的子控件switch是同样的返回效果！

图（81）主页

图（82）滑动视窗页

演示说明

LY-F2开发板通过串口转换板V1.2与STWI101WT-01显示屏相连通讯，实现开发板与显示屏的互动。主页的switch延时控制arduino开发板外接在IO6上的风扇启停，slide_viw_view滑动视窗页的switch控制view33中的6个子控件image的动画启停，参见图（82）和随附的演示视频。

转换板V1.2是需要DC12V、USB 双电源，USB供的DC5V是为232芯片的，否则串口通讯会异常！

代码清单

开发板arduino源代码抄录如下：

// widget view \ tab view \ slide view \list view \popup \ dialog

// by Frank for STONE in 2022.06.03

fan 的switch控件name = sw1，

switch控件Run 的name = sw2，

6个灯泡image控件的name分别是：image31、image32、image33、image34、image35、image36.

the word of CMD:

ST<{"cmd_code":"set_visible","type":"widget","widget":"image31","visible":true}>ET

switch开关sw1打开时，显示屏返回：

S T < 0x10 0x10 0x00 0x04 sw1 0x01 > E T

十六进制数据:

53 54 3C 10 10 00 04 73 77 31 01 3E 45 54 AB 54

switch开关sw1关闭时，显示屏返回：

S T < 0x10 0x10 0x00 0x04 sw1 0x00 > E T

十六进制数据:

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); // 打开串口通讯功能等待串口打开

while (!Serial) {

; // wait for serial port to connect. Needed for Leonardo only

}

void loop()

{

int inChar;

if(iflag0 == 1){ //only once!

iflag0 = 0;

//-------set all lamp 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);

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;

}

// 读取串口发送的信息:

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

}

Arduino教程: 斯通恩 STWI101WT-01 人机交互显示屏和Arduino相关推荐

服务器.esp文件,ESP32 Arduino教程：通过软接入点(soft AP)实现HTTP服务器-esp文件
在本ESP32(http://www.dfrobot.com.cn/goods-1359.html)教程中,我们将检查如何设置一个异步HTTP web服务器,该设备作为软访问点运行. 本ESP32教程 ...
arduino教程-01. Arduino 板的说明
目录 1.1 课程说明 1.2 器材 1.3 UNO电路: UNO参数 1.4 详细内容: 数字电平 Arduino Uno引脚 - 整体 Arduino Uno引脚 - 电源 Arduino Uno ...
OLED显示屏与Arduino接口
原文:https://circuitdigest.com/microcontroller-projects/arduino-ssd1306-oled-display 将SSD1306 OLED显示屏与 ...
串口监视软件_ESP32 Arduino教程：软件重置
简介该esp32 arduino教程旨在解释如何使用Arduino核心在ESP32开发板上执行软件重置. 本ESP32教程的测试是使用集成在ESP32开发板中的DFRobot的ESP-WROOM-3 ...
Arduino教程资料汇总(8月22日悄悄跟新了一下)
http://www.geek-workshop.com/thread-985-1-1.html 本帖最后由迷你强于 2013-8-31 12:36 编辑 =====F-101 arduino基础 ...
Java-Runoob-高级教程-实例-数组：01. Java 实例 – 数组排序及元素查找
ylbtech-Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找 1.返回顶部 1. Java 实例 - 数组排序及元素查找 Java 实例以下实例演示 ...
esp32 micropython web服务器_ESP32 Arduino教程：Websocket server（服务器）
本文主要介绍如何使用Arduino内核作为编程架构在ESP32(上创建Websocket server(服务器).所创建的Websocket server(服务器)将作为回发服务器使用,也就是说它会把 ...
Xilinx Vitis HLS教程1--Vitis HLS概述[01/12]
Xilinx Vitis HLS教程1--Vitis HLS概述[01/12] 前言 1 软件工程师的设计原则 1.1 简介 1.2 吞吐量和性能 1.3 架构问题 1.4 FPGA编程的3大范式 1 ...
Proteus简单入门教程以及使用Proteus仿真STM32F103单片机和Arduino单片机
工欲善其事必先利其器,有条件的朋友直接使用开发板学习即可,但有时候手边没有实物开发板可以用,那么可以借助一些仿真软件运行我们的程序,Proteus算是使用的比较多的一种仿真软件,我们使用它来做STM3 ...
Arduino教程1：什么是Arduino？
先列出了本文目录,方便大家阅读目录背景特点硬件相关网站 arduino的历史背景简单概括就是意大利lvrea小镇有一所叫Interaction Design Institute Ivrea ...

Arduino教程: 斯通恩 STWI101WT-01 人机交互显示屏和Arduino

1、连接arduino与STONE HMI display：

2、popup弹窗介绍：

3、dialog对话框介绍：

4、View控件介绍：

5、Tab_View控件介绍：

6、slide_view_view控件介绍：

7、list_view控件介绍：

8、界面编程和代码：

Arduino教程: 斯通恩 STWI101WT-01 人机交互显示屏和Arduino相关推荐

最新文章

热门文章