M5Stick-c 内置时钟显示和TFT设计

M5Stick-c 内置时钟显示和TFT设计

概述

在使用M5Stick-c进行屏幕设计的时候，主要需要注意屏幕显示的方式。M5Stick-c采用彩色TFT LCD屏幕，分辨率为80*160，并且屏幕提供了各种颜色函数，可以供给用户的彩色需求。

时钟显示

M5Stick-c的RTC采用BM8563芯片提供CPU时钟，使用时通过millis（）函数在初始化的时候调用：

void setup(void) {
  M5.begin();
  // M5.Lcd.setRotation(0);
  
  //M5.Lcd.fillScreen(TFT_BLACK);
  //M5.Lcd.fillScreen(TFT_RED);
  //M5.Lcd.fillScreen(TFT_GREEN);
  //M5.Lcd.fillScreen(TFT_BLUE);
  //M5.Lcd.fillScreen(TFT_BLACK);
  M5.Lcd.fillScreen(TFT_GREY);
  
  M5.Lcd.setTextColor(TFT_WHITE, TFT_GREY);  
  M5.Lcd.fillCircle(40, 40, 40, TFT_GREEN);
  M5.Lcd.fillCircle(40, 40, 36, TFT_BLACK);
  for(int i = 0; i<360; i+= 30) {
    sx = cos((i-90)*0.0174532925);
    sy = sin((i-90)*0.0174532925);
    x0 = sx*38+40;
    yy0 = sy*38+40;
    x1 = sx*32+40;
    yy1 = sy*32+40;
    M5.Lcd.drawLine(x0, yy0, x1, yy1, TFT_GREEN);
  }
  for(int i = 0; i<360; i+= 6) {
    sx = cos((i-90)*0.0174532925);
    sy = sin((i-90)*0.0174532925);
    x0 = sx*34+40;
    yy0 = sy*34+40;
    // Draw minute markers
    M5.Lcd.drawPixel(x0, yy0, TFT_WHITE);
    
    if(i==0 || i==180) M5.Lcd.fillCircle(x0, yy0, 2, TFT_WHITE);
    if(i==90 || i==270) M5.Lcd.fillCircle(x0, yy0, 2, TFT_WHITE);
  }
  M5.Lcd.fillCircle(40, 40, 2, TFT_WHITE); targetTime = millis() + 1000; 
}

这里初始化设计了表盘作为钟的外观，大家也可设计其他内容，比如数字型的。
然后loop循环中，每秒钟刷新一下秒针，在用逢60进1的方式控制分针和时针：

void loop() {
  if (targetTime < millis()) {
    targetTime += 1000;
    ss++;              // Advance second
    if (ss==60) {
      ss=0;
      mm++;            // Advance minute
      if(mm>59) {
        mm=0;
        hh++;          // Advance hour
        if (hh>23) {
          hh=0;
        }
      }
    }

    // Pre-compute hand degrees, x & y coords for a fast screen update
    sdeg = ss*6;                  // 0-59 -> 0-354
    mdeg = mm*6+sdeg*0.01666667;  // 0-59 -> 0-360 - includes seconds
    hdeg = hh*30+mdeg*0.0833333;  // 0-11 -> 0-360 - includes minutes and seconds
    hx = cos((hdeg-90)*0.0174532925);    
    hy = sin((hdeg-90)*0.0174532925);
    mx = cos((mdeg-90)*0.0174532925);    
    my = sin((mdeg-90)*0.0174532925);
    sx = cos((sdeg-90)*0.0174532925);    
    sy = sin((sdeg-90)*0.0174532925);

    if (ss==0 || initial) {
      initial = 0;
      // Erase hour and minute hand positions every minute
      M5.Lcd.drawLine(ohx, ohy, 40, 40, TFT_BLACK);
      ohx = hx*15+40;    
      ohy = hy*15+40;
      M5.Lcd.drawLine(omx, omy, 40, 40, TFT_BLACK);
      omx = mx*20+40;    
      omy = my*20+40;
    }

      // Redraw new hand positions, hour and minute hands not erased here to avoid flicker
      M5.Lcd.drawLine(osx, osy, 40, 40, TFT_BLACK);
      osx = sx*25+40;    
      osy = sy*25+40;
      M5.Lcd.drawLine(osx, osy, 40, 40, TFT_RED);
      M5.Lcd.drawLine(ohx, ohy, 40, 40, TFT_WHITE);
      M5.Lcd.drawLine(omx, omy, 40, 40, TFT_WHITE);
      M5.Lcd.drawLine(osx, osy, 40, 40, TFT_RED);

    M5.Lcd.fillCircle(40, 40, 2, TFT_RED);
  }
}

页面设计

M5Stick-c的屏幕有80*160个像素点，既可以对点进行操作，也可以对线进行操作，还可以直接全屏刷新，函数功能很齐全。这里给出一个小的字符页面设计的代码片段。

M5.Lcd.fillScreen(TFT_BLACK);
  M5.Lcd.fillRect(0, TFTH2 +5, TFTW, 1, TFT_WHITE);
  M5.Lcd.fillRect(0, TFTH2 +65, TFTW, 1, TFT_WHITE);
  M5.Lcd.fillRect(0, TFTH2 +18, TFTW, 1, TFT_WHITE);
  M5.Lcd.setTextColor(TFT_WHITE);
  M5.Lcd.setTextSize(1);
  M5.Lcd.setCursor( TFTW2-25, TFTH2+25);
  M5.Lcd.println("HEALTH");
  M5.Lcd.setTextSize(1);
  M5.Lcd.setCursor( TFTW2-30, TFTH2+40 );
  M5.Lcd.println("INSTRUCMENT");
  M5.Lcd.setTextSize(1);
  M5.Lcd.setCursor( 16, TFTH2+10);
  M5.Lcd.println("MY DEVICE");