GUIBuilder Walkthrough Esp8266 /nodeMCU / Wemos D1 mini版教程（官翻演示版）

GUIBuilder端基本操作
- 添加标题（title）
- 添加一个计数标签
- 添加动态计数的数值
- 添加“增加”按钮
- 添加“减少按钮”
- 生成代码
Arduino IDE 端操作
- 在Arduino IDE中更改刚刚生成的代码
- - 添加全局变量counter
  - 增加按钮的call back函数的代码
- 更改GUIslice配置
上传代码
参考文献

这个官方例程演示了如何运用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

GUIBuilder Walkthrough Esp8266 /nodeMCU / Wemos D1 mini 版教程（官翻详解演示版）相关推荐

Esp8266 / nodeMCU / wemos D1 MINI GUIslice的配置（官翻）
Esp8266 / nodeMCU / wemos D1 MINI GUIslice的配置(官翻) 确定显示屏型号扩展版类(shield) 转接板类(breakout Board) 目前支持的显示屏 ...
ESP8266/ESP32/nodeMcu/wemos D1 MINI开发板用TFT_eSPI库驱动ST7789（240*240）TFT显示屏
ESP8266/ESP32/nodeMcu/wemos D1 MINI开发板用TFT_eSPI库驱动ST7789(240*240)TFT显示屏材料硬件连接引脚连接表引脚连接图安装TFT_eS ...
阿里云IOT入门教程（三）阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 ）板载灯亮灭
阿里云IOT入门教程(一)阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 )板载灯亮灭概述所需材料 Mqtt预备知识 hacklab端开发 * 硬件端上报 ...
WeMOS D1 MIni（Esp8266）、NodeMCU与ST7789 TFT液晶显示屏绘制图形
WeMOS D1 MIni(Esp8266).NodeMCU与ST7789 TFT液晶显示屏绘制图形材料硬件连接图 Arduino IDE支持Wemos D1 Mini. 库安装 Arduino_ ...
物联网-wemos D1 Mini （esp8266）实验十 ---服务器版温度计
物联网-wemos D1 Mini (esp8266)实验十 ---服务器版温度计概述实验材料硬件连接图引脚对照表 DHT库的引入网页代码 Arduino端代码效果展示概述 Wemos ...
wemos D1 Mini （esp8266）实验九 --- blynk APP远程控制格力空调开机并显示温湿度DHT22
物联网-wemos D1 Mini (esp8266)实验九 --- blynk APP远程控制格力空调开机并显示温湿度概述实验材料硬件硬件连接图引脚连接对照表 Arduino端软件编写测 ...
傻乖透明小电视（最近在苦逼实习，实习结束整理发布，先来点彩蛋，关注后不会错过哦~）——ESP8266 NodeMCU+OLED+DFPlayer Mini+小喇叭
傻乖透明小电视(最近在苦逼实习,实习结束整理发布,先来点彩蛋,关注后不会错过哦~)--ESP8266 NodeMCU+OLED+DFPlayer Mini+小喇叭显示 ESP8266 NodeMCU ...
nodemcu/ESP12F土壤湿度传感器使用效果及代码详解
nodemcu/ESP12F土壤湿度传感器使用效果及代码详解我所使用的土壤湿度传感器引脚如图某宝详情土壤湿度传感器与nodemcu接线(ESP12F/ESP8266也可参考) 代码中所读取的是模 ...
c语言线性表库函数大全,数据结构(C语言版)-线性表习题详解
<数据结构(C语言版)-线性表习题详解>由会员分享,可在线阅读,更多相关<数据结构(C语言版)-线性表习题详解(23页珍藏版)>请在人人文库网上搜索. 1.数据结构 ,线 ...

GUIBuilder Walkthrough Esp8266 /nodeMCU / Wemos D1 mini 版教程（官翻详解演示版）