M5Stack使用GUIslice库2 使用buider画UI并添加控件事件
作者：互联网
guisilce有对应的拖曳式画ui工具 buider 是java写的 需要安装jdk 并且配置环境变量。话说lvgl也有同样的设计器，官方squareline stdio，nxp的gui guider
主页GUIslice Builder · ImpulseAdventure/GUIslice Wiki · GitHub
官方的入门例程
生成器 _ 演练 ·ImpulseAdventure/GUIslice Wiki ·GitHub 基本照着谷歌翻译做就行
注意修改目标平台为m5stack
最终样式
在把生成的.h文件复制到main.cpp同一文件夹下，。ino全文拷贝到maincpp里 然后添加按钮事件
再加入m5s用的按键映射
最后修改过的文件
main.cpp
//<App !Start!>
// FILE: [test.ino]
// Created by GUIslice Builder version: [0.17.b11]
//
// GUIslice Builder Generated File
//
// For the latest guides, updates and support view:
// https://github.com/ImpulseAdventure/GUIslice
//
//<App !End!>
// ------------------------------------------------
// Headers to include
// ------------------------------------------------
#include <Arduino.h>
#include "test_GSLC.h"
int16_t m_nCount = 0;
// ------------------------------------------------
// Program Globals
// ------------------------------------------------
// Save some element references for direct access
//<Save_References !Start!>
gslc_tsElemRef* m_pElemCounter = NULL;
gslc_tsElemRef* m_pElemOutTxt2 = NULL;
//<Save_References !End!>
// Define debug message function
static int16_t DebugOut(char ch) { if (ch == (char)'\n') Serial.println(""); else Serial.write(ch); return 0; }
// ------------------------------------------------
// Callback Methods
// ------------------------------------------------
// Common Button callback
bool CbBtnCommon(void* pvGui,void *pvElemRef,gslc_teTouch eTouch,int16_t nX,int16_t nY)
{
// Typecast the parameters to match the GUI and element types
gslc_tsGui* pGui = (gslc_tsGui*)(pvGui);
gslc_tsElemRef* pElemRef = (gslc_tsElemRef*)(pvElemRef);
gslc_tsElem* pElem = gslc_GetElemFromRef(pGui,pElemRef);
char acTxt[MAX_STR]; //引入显示用的字符串
if ( eTouch == GSLC_TOUCH_UP_IN ) {
// From the element's ID we can determine which button was pressed.自动判断是哪个部件的事件
switch (pElem->nId) {
//<Button Enums !Start!>
case E_ELEM_BTN_INC:
m_nCount++;
snprintf(acTxt,MAX_STR,"%d",m_nCount);
Serial.println(acTxt);
gslc_ElemSetTxtStr(&m_gui,m_pElemCounter,acTxt);
break;//这里是用户事件
case E_ELEM_BTN_Dec:
m_nCount--;
snprintf(acTxt,MAX_STR,"%d",m_nCount);
gslc_ElemSetTxtStr(&m_gui,m_pElemCounter,acTxt);
Serial.println(acTxt);
break;
//<Button Enums !End!>
default:
break;
}
}
return true;
}
//<Checkbox Callback !Start!>
//<Checkbox Callback !End!>
//<Keypad Callback !Start!>
//<Keypad Callback !End!>
//<Spinner Callback !Start!>
//<Spinner Callback !End!>
//<Listbox Callback !Start!>
//<Listbox Callback !End!>
//<Draw Callback !Start!>
//<Draw Callback !End!>
//<Slider Callback !Start!>
//<Slider Callback !End!>
//<Tick Callback !Start!>
//<Tick Callback !End!>
void setup()
{
// ------------------------------------------------
// Initialize
// ------------------------------------------------
Serial.begin(9600);
// Wait for USB Serial
//delay(1000); // NOTE: Some devices require a delay after Serial.begin() before serial port can be used
// ------------------------------------------------
// Create graphic elements
// ------------------------------------------------
InitGUIslice_gen();
}
// -----------------------------------
// Main event loop
// -----------------------------------
void loop()
{
// ------------------------------------------------
// Update GUI Elements
// ------------------------------------------------
//TODO - Add update code for any text, gauges, or sliders
// ------------------------------------------------
// Periodically call GUIslice update function
// ------------------------------------------------
gslc_Update(&m_gui);
}
.h文件 注意添加了按键映射
//<File !Start!>
// FILE: [test_GSLC.h]
// Created by GUIslice Builder version: [0.17.b11]
//
// GUIslice Builder Generated GUI Framework File
//
// For the latest guides, updates and support view:
// https://github.com/ImpulseAdventure/GUIslice
//
//<File !End!>
#ifndef _GUISLICE_GEN_H
#define _GUISLICE_GEN_H
// ------------------------------------------------
// Headers to include
// ------------------------------------------------
#include "GUIslice.h"
#include "GUIslice_drv.h"
// Include any extended elements
//<Includes !Start!>
//<Includes !End!>
// ------------------------------------------------
// Headers and Defines for fonts
// Note that font files are located within the Adafruit-GFX library folder:
// ------------------------------------------------
//<Fonts !Start!>
#include <M5Stack.h>
//<Fonts !End!>
// ------------------------------------------------
// Defines for resources
// ------------------------------------------------
//<Resources !Start!>
//<Resources !End!>
// ------------------------------------------------
// Enumerations for pages, elements, fonts, images
// ------------------------------------------------
//<Enum !Start!>
enum {E_PG_MAIN};
enum {E_COUNTER,E_ELEM_BTN_Dec,E_ELEM_BTN_INC,E_ELEM_TEXT1,E_ELEM_TEXT2};
// Must use separate enum for fonts with MAX_FONT at end to use gslc_FontSet.
enum {E_BUILTIN10X16,E_BUILTIN15X24,E_BUILTIN5X8,MAX_FONT};
//<Enum !End!>
// ------------------------------------------------
// Instantiate the GUI
// ------------------------------------------------
// ------------------------------------------------
// Define the maximum number of elements and pages
// ------------------------------------------------
//<ElementDefines !Start!>
#define MAX_PAGE 1
#define MAX_ELEM_PG_MAIN 5 // # Elems total on page
#define MAX_ELEM_PG_MAIN_RAM MAX_ELEM_PG_MAIN // # Elems in RAM
//<ElementDefines !End!>
// ------------------------------------------------
// Create element storage
// ------------------------------------------------
gslc_tsGui m_gui;
gslc_tsDriver m_drv;
gslc_tsFont m_asFont[MAX_FONT];
gslc_tsPage m_asPage[MAX_PAGE];
//<GUI_Extra_Elements !Start!>
gslc_tsElem m_asPage1Elem[MAX_ELEM_PG_MAIN_RAM];
gslc_tsElemRef m_asPage1ElemRef[MAX_ELEM_PG_MAIN];
#define MAX_STR 100
//声明输入映射表
#define MAX_INPUT_MAP 5
gslc_tsInputMap m_asInputMap[MAX_INPUT_MAP];
//<GUI_Extra_Elements !End!>
// ------------------------------------------------
// Program Globals
// ------------------------------------------------
// Element References for direct access
//<Extern_References !Start!>
extern gslc_tsElemRef* m_pElemCounter;
extern gslc_tsElemRef* m_pElemOutTxt2;
//<Extern_References !End!>
// Define debug message function
static int16_t DebugOut(char ch);
// ------------------------------------------------
// Callback Methods
// ------------------------------------------------
bool CbBtnCommon(void* pvGui,void *pvElemRef,gslc_teTouch eTouch,int16_t nX,int16_t nY);
bool CbCheckbox(void* pvGui, void* pvElemRef, int16_t nSelId, bool bState);
bool CbDrawScanner(void* pvGui,void* pvElemRef,gslc_teRedrawType eRedraw);
bool CbKeypad(void* pvGui, void *pvElemRef, int16_t nState, void* pvData);
bool CbListbox(void* pvGui, void* pvElemRef, int16_t nSelId);
bool CbSlidePos(void* pvGui,void* pvElemRef,int16_t nPos);
bool CbSpinner(void* pvGui, void *pvElemRef, int16_t nState, void* pvData);
bool CbTickScanner(void* pvGui,void* pvScope);
// ------------------------------------------------
// Create page elements
// ------------------------------------------------
void InitGUIslice_gen()
{
gslc_tsElemRef* pElemRef = NULL;
if (!gslc_Init(&m_gui,&m_drv,m_asPage,MAX_PAGE,m_asFont,MAX_FONT)) { return; }
// Create the GUI input mapping (pin event to GUI action) 创建 GUI 输入映射（将按键事件关联到到 GUI 操作，M5s特有）
gslc_InitInputMap(&m_gui, m_asInputMap, MAX_INPUT_MAP);
gslc_InputMapAdd(&m_gui, GSLC_INPUT_PIN_DEASSERT, GSLC_PIN_BTN_A, GSLC_ACTION_FOCUS_PREV, 0);
gslc_InputMapAdd(&m_gui, GSLC_INPUT_PIN_DEASSERT, GSLC_PIN_BTN_B, GSLC_ACTION_SELECT, 0);
gslc_InputMapAdd(&m_gui, GSLC_INPUT_PIN_DEASSERT, GSLC_PIN_BTN_C, GSLC_ACTION_FOCUS_NEXT, 0);
gslc_InputMapAdd(&m_gui, GSLC_INPUT_PIN_ASSERT, GSLC_PIN_BTN_A_LONG, GSLC_ACTION_SET_REL, -10);
gslc_InputMapAdd(&m_gui, GSLC_INPUT_PIN_ASSERT, GSLC_PIN_BTN_C_LONG, GSLC_ACTION_SET_REL, +10);
gslc_InitDebug(&DebugOut);
// ------------------------------------------------
// Load Fonts
// ------------------------------------------------
//<Load_Fonts !Start!>
if (!gslc_FontSet(&m_gui,E_BUILTIN10X16,GSLC_FONTREF_PTR,NULL,2)) { return; }
if (!gslc_FontSet(&m_gui,E_BUILTIN15X24,GSLC_FONTREF_PTR,NULL,3)) { return; }
if (!gslc_FontSet(&m_gui,E_BUILTIN5X8,GSLC_FONTREF_PTR,NULL,1)) { return; }
//<Load_Fonts !End!>
//<InitGUI !Start!>
gslc_PageAdd(&m_gui,E_PG_MAIN,m_asPage1Elem,MAX_ELEM_PG_MAIN_RAM,m_asPage1ElemRef,MAX_ELEM_PG_MAIN);
// NOTE: The current page defaults to the first page added. Here we explicitly
// ensure that the main page is the correct page no matter the add order.
gslc_SetPageCur(&m_gui,E_PG_MAIN);
// Set Background to a flat color
gslc_SetBkgndColor(&m_gui,GSLC_COL_BLACK);
// -----------------------------------
// PAGE: E_PG_MAIN
// Create E_ELEM_TEXT1 text label
pElemRef = gslc_ElemCreateTxt(&m_gui,E_ELEM_TEXT1,E_PG_MAIN,(gslc_tsRect){33,20,253,26},
(char*)"simple counter",0,E_BUILTIN15X24);
// Create E_ELEM_TEXT2 text label
pElemRef = gslc_ElemCreateTxt(&m_gui,E_ELEM_TEXT2,E_PG_MAIN,(gslc_tsRect){30,80,73,10},
(char*)"Current count",0,E_BUILTIN5X8);
gslc_ElemSetTxtCol(&m_gui,pElemRef,GSLC_COL_BLUE_LT2);
m_pElemOutTxt2 = pElemRef;
// Create E_COUNTER runtime modifiable text
static char m_sDisplayText3[13] = "0";
pElemRef = gslc_ElemCreateTxt(&m_gui,E_COUNTER,E_PG_MAIN,(gslc_tsRect){147,80,145,18},
(char*)m_sDisplayText3,13,E_BUILTIN10X16);
m_pElemCounter = pElemRef;
// create E_ELEM_BTN_INC button with text label
pElemRef = gslc_ElemCreateBtnTxt(&m_gui,E_ELEM_BTN_INC,E_PG_MAIN,
(gslc_tsRect){30,120,80,40},(char*)"+1",0,E_BUILTIN10X16,&CbBtnCommon);
// create E_ELEM_BTN_Dec button with text label
pElemRef = gslc_ElemCreateBtnTxt(&m_gui,E_ELEM_BTN_Dec,E_PG_MAIN,
(gslc_tsRect){210,120,80,40},(char*)"-1",0,E_BUILTIN10X16,&CbBtnCommon);
gslc_ElemSetCol(&m_gui,pElemRef,GSLC_COL_BLUE_DK2,GSLC_COL_CYAN,GSLC_COL_BLUE_DK1);
gslc_ElemSetTxtEnc(&m_gui,pElemRef,GSLC_TXT_ENC_UTF8);
//<InitGUI !End!>
//<Startup !Start!>
//<Startup !End!>
}
#endif // end _GUISLICE_GEN_H
实际效果 另外这个串口依旧是115200波特率 代码里的设置没有生效
2.07 ZZz:/ guislice自动生成的代码加上人工添加按键回调函数# 单片机开发 https://v.douyin.com/jBPomaQ/ 复制此链接，打开Dou音搜索，直接观看视频！
标签：------------------------------------------------,控件,MAX,gui,gslc,UI,M5Stack,void 来源： https://www.cnblogs.com/kyo413/p/16586231.html