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音搜索，直接观看视频！
