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中直接点击菜单栏的剪头，上传程序到开发板。

参考文献

1. 官方Builder-Walkthrough英文教程：https://github.com/ImpulseAdventure/GUIslice/wiki/Builder-_-Walkthrough
   2.官方GUIslice配置英文教程： https://github.com/ImpulseAdventure/GUIslice/wiki/Configuring-GUIslice