M5StickCで文字列をスクロール表示する

概要

M5StickCの表示領域が小さくて辛いので、横スクロール表示させてみました。
Arduino IDEを使いました。

以下の図のように「Hellooo Wooorld!」という文字列を右端から左端に横スクロールさせました。

図：スクロールの様子

環境構築

こちらのQiita記事の通りに行いました。（カンタン！）

Arduinoのスケッチ

Arduinoのスケッチは下に載せた「M5StickMoveText.ino」の通りです。

スケッチの中では、下の「図：スクロール領域の指定」のようにスクロールする領域(Spriteの領域)のパラメータをdefine定義しています。

その他のスクロールに関するパラメータもdefine定義しているので、お試しになりたい方はそこを変更していただけると良いかと思います。
　

図：スクロール領域の指定

M5StickMoveText.ino

#include <M5StickC.h>

TFT_eSprite scrollText = TFT_eSprite(&M5.Lcd); // Sprite object

int tcount;
int dispLength;
int scrollWidth;
int startOffset;

#define M5STICK_TFT_W 160
#define M5STICK_TFT_H 80

#define TFT_BG_COLOR TFT_BLACK
#define TEXT_SPRITE_H M5STICK_TFT_H
#define TEXT_SPRITE_W M5STICK_TFT_W*4
#define TEXT_SCROLL_H M5STICK_TFT_H
#define TEXT_SCROLL_W M5STICK_TFT_W
#define TEXT_SCROLL_PIXEL 2
#define TFT_TEXT_POSI_X 30 // vertical position
#define TFT_TEXT_POSI_Y 0 // horizontal position
#define TEXT_SPRITE_POSI_X 0 // vertical position
#define TEXT_SPRITE_POSI_Y 0 // horizontal position
#define TEXT_FONT_SIZE 4
#define TEXT_SPRITE_COLOR TFT_BLACK
#define SCROLL_INTERVAL_MS 50

void setup() {
  M5.begin();
  M5.Lcd.setRotation(3);
  M5.Lcd.fillScreen(TFT_BG_COLOR);

  // Create a sprite for Hello World
  scrollText.setColorDepth(8);
  scrollText.createSprite(TEXT_SPRITE_W, TEXT_SPRITE_H);
  scrollText.fillSprite(TEXT_SPRITE_COLOR);
  scrollText.setTextColor(TFT_WHITE); // White text, no background

  tcount = 0;
  dispLength = 0;
  scrollWidth = 0;
  startOffset = 0;
}

void loop() {
  // Push the sprites onto the TFT at specied coordinates
  scrollText.pushSprite(TFT_TEXT_POSI_Y, TFT_TEXT_POSI_X);

  if (tcount > 0) {
    scrollText.scroll(-TEXT_SCROLL_PIXEL); // scroll text left
    tcount--;
  }
  else {
    startOffset = M5STICK_TFT_W; //start position is edge of tft
    if (dispLength > 0) {
      scrollWidth = dispLength + startOffset;
    }
    else {
      scrollWidth = 0;
    }
    tcount = scrollWidth / TEXT_SCROLL_PIXEL;
    String drawStr = "Hellooo Wooorld!";
    dispLength = scrollText.drawString(drawStr, TEXT_SPRITE_POSI_Y + startOffset, TEXT_SPRITE_POSI_X, TEXT_FONT_SIZE);
    if (TEXT_SPRITE_W <= dispLength) {
      dispLength = TEXT_SPRITE_W; // disp length is too long -> TEXT_SPRITE_W
    }
    scrollText.setScrollRect(0, 0, dispLength + startOffset, TEXT_SCROLL_H, TEXT_SPRITE_COLOR); // Update ScrollRect
  }

  delay(SCROLL_INTERVAL_MS); // wait so things do not scroll too fast

}

参考記事

• M5StickCを動かしてみる

• https://qiita.com/itiB_S144/items/7a232c1a31151fcb5e5b

• M5Stackのサンプルスケッチ (文字スクロール)

• https://github.com/m5stack/M5Stack/blob/master/examples/Advanced/Display/Sprite/Sprite_scroll/Sprite_scroll.ino

• M5StickCの小ネタ (144Labグループ開発者ブログ)

• https://tech.144lab.com/entry/M5StickC_Tips

更新履歴

• 2019-07-07：新規作成
• 2019-07-07：概要の図を追加＆スケッチを修正