这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 活动中心 » 板卡试用 » 【M5STACK TAB5 W/O BATTERY】--开发环境搭建与运行图形界

共1条 1/1 1 跳转至

【M5STACK TAB5 W/O BATTERY】--开发环境搭建与运行图形界面

菜鸟
2026-01-05 00:08:48     打赏

        本篇讲述Arduino开发环境搭建与烧录运行一个图形化界面。

一.开发环境搭建

  1. 安装板管理

    在“文件->偏好设置”URLs填写:

    https://static-cdn.m5stack.com/resource/arduino/package_m5stack_index_cn.json 

1_安装板管理.png

2.安装M5Stack

        在开发管理器搜索安装M5Stack。

2_安装M5Stack.png

3.安装M5GFX

       M5GFX 是一个为 M5Stack 产品操作显示设备的库,用户可以调用该库中的 API 实现不同的显示效果及触摸效果等。

在管理库里搜索安装,试过好多次安装失败。这里使用离线安装方式。

      首先,在m5stack官方github仓库使用代理克隆下最新版本代码

3_M5Stack仓库.png

      使用如下代理地址克隆

git clone https://gitclone.com/github.com/m5stack/M5GFX.git

      克隆完成后打包成M5GFX-0.2.17.zip

4_M5Stack仓库克隆打包.png

      在Arduino菜单Sketch->Include Library->Add .ZIP Library加载上述压缩包

5_add library.png

      加载后自动安装M5GFX,安装好后如下

6_M5GFX安装成功.png

4.安装M5Unified

        M5Unified是一个M5Stack主控设备驱动库, 该库中适配了大多数M5Stack主控的内置硬件驱动, 如LCD、Touch、按键、扬声器、麦克风等。 M5Unified提供了一套统一的API, 同一套程序能够非常方便的运行在不同的M5Stack设备上。M5Unified支持在Arduino或ESP-IDF开发平台中使用, 能够有效提供你的开发效率。

      安装好M5Unified如下,留意安装时选择安装全部,以免遗漏影响后续开发。

7_M5GFX安装成功.png

      至此,Arduino开发环境搭建基本完毕


二.图形化界面应用

1.选择开发板。这里选择M5Tab5.

8_选择开发板.png

2.选择调试烧录串口

9_选择调试烧录串口.png

3.创建工程

      这里选择M5GFX下BarGraph工程

10_选择M5GFX下BarGraph工程.png

4.工程代码

#include <M5GFX.h>
M5GFX display;
//#include <M5UnitOLED.h>
//M5UnitOLED display; // default setting
//M5UnitOLED display ( 21, 22, 400000 ); // SDA, SCL, FREQ
//#include <M5UnitLCD.h>
//M5UnitLCD display;  // default setting
//M5UnitLCD display  ( 21, 22, 400000 ); // SDA, SCL, FREQ
//#include <M5UnitGLASS2.h>
//M5UnitGLASS2 display;  // default setting
//M5UnitGLASS2 display ( 21, 22, 400000 ); // SDA, SCL, FREQ
// #include <M5AtomDisplay.h>
// M5AtomDisplay display;
static constexpr size_t BAR_COUNT = 64;
static int max_y[BAR_COUNT];
static int prev_y[BAR_COUNT];
static uint32_t colors[BAR_COUNT];
void setup(void)
{
  display.init();
  display.startWrite();
  display.fillScreen(TFT_BLACK);
  if (display.isEPD())
  {
    display.setEpdMode(epd_mode_t::epd_fastest);
  }
  if (display.width() < display.height())
  {
    display.setRotation(display.getRotation() ^ 1);
  }
  for (int x = 0; x < BAR_COUNT; ++x)
  {
    prev_y[x] = display.height();
    max_y[x] = display.height();
    int r=0,g=0,b=0;
    switch (x >> 4)
    {
    case 0:
      b = 255;
      g = x*0x11;
      break;
    case 1:
      b = 255 - (x&15)*0x11;
      g = 255;
      break;
    case 2:
      g = 255;
      r = (x&15)*0x11;
      break;
    case 3:
      r = 255;
      g = 255 - (x&15)*0x11;
      break;
    }
    colors[x] = display.color888(r,g,b);
  }
}
void loop(void)
{
  int h = display.height();
  static int i;
  ++i;
  display.waitDisplay();
  for (int x = 0; x < BAR_COUNT; ++x)
  {
    int y = (h>>1) - (sinf((float)((x-24)*i) / 3210.0f) + sinf((float)((x-40)*i) / 1234.0f)) * (h>>2);
    int xpos = x * display.width() / BAR_COUNT;
    int w = ((x+1) * display.width() / BAR_COUNT) - xpos - 1;
    if (max_y[x]+1 >= y) { max_y[x] = y-1; }
    else
    {
      if ((i & 3) ==0 )
      {
        display.fillRect(xpos, max_y[x]-3, w, 1, TFT_BLACK);
        max_y[x]++;
      }
    }
    display.fillRect(xpos, max_y[x]-3, w, 3, TFT_WHITE);
    if (prev_y[x] < y)
    {
      display.fillRect(xpos, prev_y[x], w, y - prev_y[x], TFT_BLACK);
    }
    else
    {
      display.fillRect(xpos, y, w, prev_y[x] - y, colors[x]);
    }
    prev_y[x] = y;
  }
  display.display();
}


5.编译烧录

11_编译烧录.png

6.效果

12_效果图.jpg

      

      至此,实现Arduino开发环境搭建,并创建一个工程,编译烧录运行一个图形化界面。





关键词: M5STACK     Tab5     M5GFX    

共1条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]