GUIBuilder Walkthrough Esp8266 /nodeMCU / Wemos D1 mini版教程(官翻演示版)
这个官方例程演示了如何运用GUIBuilder在几分钟内创建一个界面。这个例子在界面上放置了两个按钮和一个文本框。一个按钮控制文本框里的数字增加,一个按钮控制文本框里的数字减少。
TIPS:在使用GUIBuilder创建GUI开发前,务必确认Arduino IDE中的GUIslice例程已经可以正常运行。
GUIBuilder端基本操作
添加标题(title)
- 双击运行GUIBuilder
- 在屏幕的顶端中间位置新建一个文本框
- 点菜单栏的
Text Inpue
按钮,黑色屏幕上出现了一个Text Input。在右侧“property view”
栏选择“Text”
选项,在它对应的右侧空白处双击,进入编辑状态,输入你想要输入的内容,回车进行确认。 - 选择
“font”
选项,将字号改为10
。
添加一个计数标签
- 在菜单栏选择
“Text”
选项 - 将其拖拽在屏幕的合适位置。在右侧
“property view”
中选择“Text”
选项,双击右侧空白处,输入“current count”
,回车确定。 - 点击
“Text Color”
选项,在其右侧颜色出双击弹出颜色选择框。选择“GSLC_COL_BLUE_LT4”
。
添加动态计数的数值
- 菜单栏选择
"Text"
- 拖拽到屏幕上一步的计数标签右侧对齐。
- 在
“property view”
的"Text"
右侧空白处双击进入输入状态,输入"0"
回车确定。 - 在
“property view”
的" External Storage Size"
右侧双击,将数值从零改成12。
tips: 此处的数值为零代表着这是个静态的数值显示,不可变。而将他改为非零数字则代表着这里面数值是可以动态改变的,且输入的数值的大小代表着该文本框内允许的最大字符串长度。我们这里改的时12,所以字符串的长度最大就是12。 - 对
“property view”
的" External Storage Size"
的更改令我们可以对“property view”
的"ElementRef "
这个参数进行重命名,为了后续程序的易读性,我们这里将他默认的"m_pElemTxt3"
改为"m_pElemCounterZ"
。 - 同样为了程序的易读性,我们将
“property view”
的" ENUM from E_TXT3"
更改为" E_COUNTER"
。 - 最后我们将
“property view”
的"Text "
属性改成"0"
。 这是动态文本框的默认显示值。
添加“增加”按钮
- 菜单栏点击
"TextButton"
按钮 - 在黑色屏幕区域,将按钮拖拽到合适的位置
- 在
"Property view"
区域将"height"
的值更改为20
- 在
"Property view"
区域将"ENUM"
的值改为"E_BTN_INC"
(方便记忆) - 在
"Property view"
区域将"Label
的值改为"Increment"
添加“减少按钮”
- 菜单栏点击
"TextButton"
按钮 - 在黑色屏幕区域,将按钮拖拽到合适的位置
- 在
"Property view"
区域将"height"
的值更改为20
- 在
"Property view"
区域将"ENUM"
的值改为"E_BTN_DEC"
(方便记忆) - 在
"Property view"
区域将"Label
的值改为"Decrement"
生成代码
Save project with File → Save As
-
点击菜单选择
"File"
->"save as"
。为了方便演示选择位置为桌面,新建一个文件夹。将新建的文件夹命名为"SimpCount"
,选择"Select Folder"
按钮,GUIslice会自动创建一个名为’SimpleCount.prj“
的项目文件在刚刚创建的这个文件夹内。之后我们生成的代码也将存放在该文件夹内。
-
点击
"File"
->"Generate Code"
或者直接在菜单栏点击下图所示的按钮。这将在上一步创建的那个名为"SimpleCount"'的文件夹内自动生成一个名为
"SimpleCount.ino"`的文件。
-
至此你建立的名为
"SimpleCount"
的文件夹内的目录应该如下图所示:
Arduino IDE 端操作
在Arduino IDE中更改刚刚生成的代码
在Arduino IDE中打开刚刚生成的"SimpleCount.ino"
文件。
添加全局变量counter
我们需要在文件中添加一个名为"m_nCount"
全局变量来保存这个上下计数的数值。将下面的代码添加到代码中文件声明的附近。
int16_t m_nCount = 0;
Add code to button callback functions
Now we want to define what we want the buttons to do. Add code to the auto-generated callback functions, including a string that we use for converting from the integer count value.
增加按钮的call back函数的代码
-
在自动生成的按钮回调函数
"bool CbBtnCommon(void* pvGui,void *pvElemRef,gslc_teTouch eTouch,int16_t nX,int16_t nY)"
中的声明位置添加" char acTxt[MAX_STR];"
-
在自动生成的按钮回调函数
"bool CbBtnCommon(void* pvGui,void *pvElemRef,gslc_teTouch eTouch,int16_t nX,int16_t nY)"
中,找到之前自定义的"case E_BTN_INC"
代码段,在它里面添加如下的代码。
m_nCount++;//点击按钮后计数值加一
snprintf(acTxt, MAX_STR, “%d”, m_nCount);//屏幕上显示增加的数值
gslc_ElemSetTexStr(&m_gui, m_pElemCounter, acTxt);
- 在自动生成的按钮回调函数
"bool CbBtnCommon(void* pvGui,void *pvElemRef,gslc_teTouch eTouch,int16_t nX,int16_t nY)"
中,找到之前自定义的"case E_BTN_DEC"
代码段,在它里面添加如下的代码。
m_nCount–;
snprintf(acTxt, MAX_STR, “%d”, m_nCount);//屏幕上显示增加的数值
gslc_ElemSetTexStr(&m_gui, m_pElemCounter, acTxt);
- 在Arduino IDE中按
"ctrl+S"
保存更改后的代码。
更改GUIslice配置
根据终端设备不同GUIslice的配置文件有两个:
"src\GUIslice_config_ard.h"
:
(for Arduino, ESP8266, ESP32, and related devices)- "
src\GUIslice_config_linux.h "
:
(for LINUX devices, such as Raspberry Pi)
我们需要使用的时的第一个,这个文件的默认配置是针对Arduino UNO/ATmega2560+2.8’'TFT+STMPE610使用Adafruit-GFX库。所以为了能在Esp8266 / nodeMCU / Wemos D1 Mini上使用我们需要进行下面基础更改。
上传代码
在Arduino IDE中直接点击菜单栏的剪头,上传程序到开发板。
参考文献
- 官方Builder-Walkthrough英文教程:https://github.com/ImpulseAdventure/GUIslice/wiki/Builder-_-Walkthrough
2.官方GUIslice配置英文教程: https://github.com/ImpulseAdventure/GUIslice/wiki/Configuring-GUIslice