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
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值