M5Stack 液晶表示の使い方まとめ – 完全版 -（Arduinoコマンド）

// 初期設定
void setup(void) {
  M5.begin();                 // 本体初期化

  M5.Lcd.begin();             // 画面初期化
  M5.Lcd.setRotation(1);      // 画面向き設定（0～3で設定、4～7は反転)※初期値は1
  M5.Lcd.setTextWrap(false);  // 画面端での改行の有無（true:有り[初期値], false:無し）※print関数のみ有効
}

M5.Lcd.fillScreen(BLACK);           // 画面背景(指定色で画面全体を塗りつぶす。表示を更新する場合にも使用)
M5.Lcd.setTextColor(ORANGE, BLACK); // テキスト色(文字色, 文字背景)
M5.Lcd.setTextFont(4);              // フォント(フォント番号：0,2,4,6,7,8の中から指定)
M5.Lcd.setCursor(0, 0);             // テキスト表示座標(x座標, y座標)
M5.Lcd.setCursor(0, 0, 2);          // テキスト表示座標(x座標, y座標, フォント番号)※フォント指定も可
M5.Lcd.setTextSize(1);              // テキストサイズ倍率(整数で指定)

M5.Lcd.setCursor(0, 0);  // 表示座標を指定(x座標, y座標)

// print関数では、setCursor関数で指定した座標 (またはprint関数で最後に描画した文字の続き)に描画
M5.Lcd.print("Hello!");    // 改行なしで文字表示

// println関数では、文字列を描画後に改行します。print("\n");と同じ効果
M5.Lcd.println("Hello!");  // 改行ありで文字表示

// printf関数では、第２引数以降の内容を描画(複数指定可、C言語のprintfと同じように表示)
int value = 123;
M5.Lcd.printf("value =  %d\n", value);  // %dの部分にvalueの値（整数）が表示される

float value = 3.14;              // float型の変数「value」に3.14を格納

M5.Lcd.printf("|%f|\n", value);     // |3.140000| そのまま表示
M5.Lcd.printf("|%.2f|\n", value);   // |3.14|     小数点2桁まで表示
M5.Lcd.printf("|%6.2f|\n", value);  // | 3.14|   6文字分の幅で表示（右揃え）
M5.Lcd.printf("|%06.2f|\n", value); // |003.14|   6文字分の幅で0埋め表示
M5.Lcd.printf("|%-6.2f|\n", value); // |3.14 |   6文字分の幅で表示（左揃え）

// 文字の表示
M5.Lcd.drawString("Hello!", 10, 0, 2);   // (文字列, x座標, y座標, フォント番号)
M5.Lcd.drawString("Hello!", 10, 20);     // (文字列, x座標, y座標) ※フォント省略可

// 整数の表示
M5.Lcd.drawNumber(123, 10, 50, 6);     // (数値, x座標, y座標, フォント)
M5.Lcd.drawNumber(123, 10, 100);       // (数値, x座標, y座標) ※フォント省略可

// 浮動小数点数の表示
M5.Lcd.drawFloat(3.14, 2, 10, 130, 7); // (浮動小数点数, 小数点以下の桁数, x座標, y座標, フォント)
M5.Lcd.drawFloat(3.14, 2, 10, 190);    // (浮動小数点数, 小数点以下の桁数, x座標, y座標) ※フォント省略可

// 左揃え（標準）
M5.Lcd.drawString("Hello!", 160, 10, 4);       // (文字列, x座標, y座標, フォント番号)

// 中央揃え
M5.Lcd.drawCentreString("Hello!", 160, 40, 4); // (文字列, x座標, y座標, フォント番号)

// 右揃え
M5.Lcd.drawRightString("Hello!", 160, 70, 4);  // (文字列, x座標, y座標, フォント番号)

char buff[20];                              // 表示用文字列格納バッファ
// sprintf関数使用による文字列フォーマット変換後表示
sprintf(buff, "%4.2f", 3.14159);            // (文字列格納用バッファ, フォーマット指定, 変換する変数)
M5.Lcd.drawCentreString(buff, 160, 10, 6);  // 中央揃え　(文字列, x座標, y座標, フォント)

// 浮動小数点を整形して文字列に変換後表示（Arduino専用関数）
dtostrf(3.14159, 4, 2, buff);               // (浮動小数点数, 表示文字数, 小数点以下の桁数, 文字列格納用バッファ)
M5.Lcd.drawRightString(buff, 160, 60, 6);   // 右揃え(文字列, x座標, y座標, フォント)

M5.Lcd.setTextDatum(0);                                 // 左上基準(初期値)
M5.Lcd.drawString("Hello!", M5.Lcd.width()/2, 10, 4);   // 左揃え(文字列, x座標, y座標, フォント)
M5.Lcd.setTextDatum(1);                                 // 上中央基準
M5.Lcd.drawString("Hello!", M5.Lcd.width()/2, 40, 4);   // 中央揃え(文字列, x座標, y座標, フォント)
M5.Lcd.setTextDatum(2);                                 // 右上基準
M5.Lcd.drawString("Hello!", M5.Lcd.width()/2, 70, 4);   // 右揃え(文字列, x座標, y座標, フォント)

// 1.文字色を色名で「オレンジ」に、文字背景を「黒」に指定
M5.Lcd.setTextColor(ORANGE, BLACK);   // テキスト色(文字色, 背景)

// 2.文字色を色の3原色で「オレンジ」に、文字背景を「黒」に指定
M5.Lcd.setTextColor(M5.Lcd.color565(255, 165, 0), M5.Lcd.color565(0, 0, 0));   // テキスト色(文字色, 背景)

// 登録色一覧           //   R,   G,   B
BLACK       = 0x0000; //   0,   0,   0
NAVY        = 0x000F; //   0,   0, 128
DARKGREEN   = 0x03E0; //   0, 128,   0
DARKCYAN    = 0x03EF; //   0, 128, 128
MAROON      = 0x7800; // 128,   0,   0
PURPLE      = 0x780F; // 128,   0, 128
OLIVE       = 0x7BE0; // 128, 128,   0
LIGHTGREY   = 0xC618; // 192, 192, 192
DARKGREY    = 0x7BEF; // 128, 128, 128
BLUE        = 0x001F; //   0,   0, 255
GREEN       = 0x07E0; //   0, 255,   0
CYAN        = 0x07FF; //   0, 255, 255
RED         = 0xF800; // 255,   0,   0
MAGENTA     = 0xF81F; // 255,   0, 255
YELLOW      = 0xFFE0; // 255, 255,   0
WHITE       = 0xFFFF; // 255, 255, 255
ORANGE      = 0xFD20; // 255, 165,   0
GREENYELLOW = 0xAFE5; // 173, 255,  47
PINK        = 0xF81F; // 255,   0, 255

M5.Lcd.drawPixel     (x, y, color);            // 点（x：x座標、y：y座標、color：色）

M5.Lcd.drawLine      (x0, y0, x1, y1, color);  // 2点間の直線
M5.Lcd.drawFastVLine (x, y, h       , color);  // 指定座標から垂直線（h：長さ）
M5.Lcd.drawFastHLine (x, y, w       , color);  // 指定座標から水平線（w：長さ）

M5.Lcd.drawRect      (x, y, w, h   , color);  // 四角（w：幅、h：高さ）
M5.Lcd.fillRect      (x, y, w, h   , color);  // 四角塗り潰し
M5.Lcd.drawRoundRect (x, y, w, h, r, color);  // 角丸四角（r：角アール半径）
M5.Lcd.fillRoundRect (x, y, w, h, r, color);  // 角丸四角塗り潰し

M5.Lcd.drawCircle    (x, y, r      , color);  // 円（r：半径）
M5.Lcd.fillCircle    (x, y, r      , color);  // 円塗り潰し
M5.Lcd.drawEllipse   (x, y, rx, ry , color);  // 楕円（rx：x方向半径、ry：y方向半径）
M5.Lcd.fillEllipse   (x, y, rx, ry , color);  // 楕円塗り潰し

M5.Lcd.drawTriangle  (x0, y0, x1, y1, x2, y2, color);  // 3点間の三角形（3点の座標指定）
M5.Lcd.fillTriangle  (x0, y0, x1, y1, x2, y2, color);  // 三角形塗り潰し

// 画面サイズ表示
int w;
int h;
w = M5.Lcd.width();
h = M5.Lcd.height();
M5.Lcd.printf("LCD SIZE: %d x %d\n", w, h);

// 出力結果
// LCD SIZE: 320 x 240

// カーソル座標表示
int x;
int y;
M5.Lcd.println("");
M5.Lcd.print("Hello!");
x = M5.Lcd.getCursorX();  // 現在のカーソルの「x座標」取得
y = M5.Lcd.getCursorY();  // 現在のカーソルの「y座標」取得
M5.Lcd.printf("\n(x, y) = (%d, %d)\n", x, y); // 座標表示

// 出力結果(フォント4の場合)
// Hello!
// (x, y) = (67, 26)

// 現在のフォントでの文字列幅、文字高さ取得
M5.Lcd.println(M5.Lcd.textWidth("hello!"));     // 文字列幅(文字列, フォント番号)
M5.Lcd.println(M5.Lcd.fontHeight());            // 文字高さ(フォント番号)
// 指定したフォントの場合の文字列幅、文字高さ取得
M5.Lcd.println(M5.Lcd.textWidth("hello!", 6));  // 文字列幅(文字列, フォント番号)
M5.Lcd.println(M5.Lcd.fontHeight(7));           // 文字高さ(フォント番号)
// 文字表示基準座標（データム）取得
M5.Lcd.println(M5.Lcd.getTextDatum());
// ベース画面の向きを取得
M5.Lcd.println(M5.Lcd.getRotation());

// 出力結果(初期フォント4の場合)
// 64
// 26
// 72
// 48
// 1
// 1

#include <M5Core2.h>    // Core2のヘッダーを準備
#include <M5GFX.h>      // M5GFXライブラリのインクルード
M5GFX lcd;              // 直接表示のインスタンスを作成（M5GFXクラスを使ってlcdコマンドでいろいろできるようにする）
M5Canvas canvas(&lcd);  // メモリ描画領域表示（スプライト）のインスタンスを作成(必要に応じて複数作成)

// 初期設定
void setup(void) {
  M5.begin();         // 本体初期化
  lcd.begin();        // 画面初期化
  // メモリ描画領域の初期設定（スプライト）
  canvas.setColorDepth(8); // カラーモード設定（書かなければ初期値16bit。24bit（パネル性能によっては18bit）は対応していれば選択可）
                           // CORE2,Basic はメモリ描画領域サイズを大きく（320x173以上?）すると16bit以上で表示されないため8bit推奨
  canvas.createSprite(lcd.width(), lcd.height()/2); // メモリ描画領域サイズを縦半分の画面サイズで準備(必要に応じて複数作成)
}

// メイン処理
void loop(void) {
  // 指定した内容をその都度直接画面に表示（チラツキあり）--------------------------------------------------
  lcd.fillRect(0, 0, lcd.width(), 120, BLACK);  // 塗り潰し四角(指定色で画面上半分を塗りつぶす)
  lcd.setTextColor(WHITE);                      // テキスト色(文字色)
  lcd.setFont(&fonts::lgfxJapanGothic_40);      // フォント
  // テキスト表示
  lcd.setCursor(0, 0);                          // テキスト表示座標
  lcd.println("直接表示");
  lcd.println("チラツキあり");
  // グラデーション表示（直接表示）
  for (int i = 0; i < 20; i++) {
    lcd.drawGradientHLine( 0, 90 + i, 107, RED, GREEN);    // 赤から緑へのグラデーション水平線
    lcd.drawGradientHLine( 107, 90 + i, 107, GREEN, BLUE); // 緑から青へのグラデーション水平線
    lcd.drawGradientHLine( 214, 90 + i, 107, BLUE, RED);   // 青から赤へのグラデーション水平線
  }

  // メモリ内に描画した画面を一括出力（チラツキなし）-------------------------------------------------------
  canvas.fillRect(0, 0, lcd.width(), 120, BLACK); // 塗り潰し四角(指定色で範囲を塗りつぶす)
  canvas.setTextColor(WHITE);                     // テキスト色(文字色)
  canvas.setFont(&fonts::lgfxJapanGothic_40);     // フォント
  // テキスト表示
  canvas.setCursor(0, 0);                         // テキスト表示座標(メモリ描画領域)
  canvas.println("ﾒﾓﾘ描画領域表示");
  canvas.println("チラツキなし");
  // グラデーション表示（メモリ描画領域）
  for (int i = 0; i < 20; i++) {
    canvas.drawGradientHLine( 0, 90 + i, 107, RED, GREEN);   // 赤から緑へのグラデーション水平線
    canvas.drawGradientHLine( 107, 90 + i, 107, GREEN, BLUE);// 緑から青へのグラデーション水平線
    canvas.drawGradientHLine( 214, 90 + i, 107, BLUE, RED);  // 青から赤へのグラデーション水平線
  }
  // メモリ描画領域を座標を指定して一括表示（スプライト）
  canvas.pushSprite(&lcd, 0, lcd.height()/2); // スプライト画面が下半分に表示されるようy座標は高さの半分を指定 （全画面なら0）
  
  delay(100); // 遅延時間
}

#include <M5Core2.h>    // Core2のヘッダーを準備
#include <M5GFX.h>      // M5GFXライブラリのインクルード
M5GFX lcd;              // 直接表示のインスタンスを作成（M5GFXクラスを使ってlcdコマンドでいろいろできるようにする）
M5Canvas canvas(&lcd);  // メモリ描画領域表示（スプライト）のインスタンスを作成(必要に応じて複数作成)

// 初期設定
void setup(void) {
  M5.begin();         // 本体初期化
  lcd.begin();        // 画面初期化
  // メモリ描画領域の初期設定（スプライト）
  canvas.setColorDepth(8); // カラーモード設定（書かなければ初期値16bit。24bit（パネル性能によっては18bit）は対応していれば選択可）
                           // CORE2,Basic はメモリ描画領域サイズを大きく（320x173以上?）すると16bit以上で表示されないため8bit推奨
  canvas.createSprite(lcd.width(), lcd.height()/2); // メモリ描画領域サイズを縦半分の画面サイズで準備(必要に応じて複数作成)
}

// メモリ描画領域の初期設定（スプライト）
canvas.createSprite(lcd.width(), lcd.height()/2); // メモリ描画領域サイズを縦半分の画面サイズで準備(必要に応じて複数作成)

// メモリ描画領域を座標を指定して一括表示（スプライト）
canvas.pushSprite(&lcd, 0, lcd.height()/2); // スプライト画面が下半分に表示されるようy座標は高さの半分を指定 （全画面なら0）

// setFont でフォントを指定
canvas.setFont(&fonts::lgfxJapanMinchoP_16);

// setTextColor で文字色と背景を指定
canvas.setTextColor(WHITE, RED);  //（文字色, 背景色）
canvas.println("文字白色、文字背景赤色");

// 背景は省略できますが更新時に前の文字と重なる場合は背景指定推奨
canvas.setTextColor(WHITE);         //（文字色）
canvas.println("文字白色、文字背景塗り潰しなし");

Font0  // 8px ASCII文字
Font2  // 16px ASCII文字
Font4  // 26px ASCII文字
Font6  // 36(48)px 数字と時計用文字のみ（1234567890apm.:-）
Font7  // 48px 7セグ風数字と記号のみ（1234567890.:-）
Font8  // 75px 数字と記号のみ（1234567890.:-）

// 以下は文字サイズ 8,12,16,20,24,28,32,36,40 が選択できます
lgfxJapanMincho_8    // 明朝体 固定幅フォント
lgfxJapanMinchoP_8   // 明朝体 プロポーショナルフォント
lgfxJapanGothic_8    // ゴシック体 固定幅フォント
lgfxJapanGothicP_8   // ゴシック体 プロポーショナルフォント

efontJA_10     // 日本語 サイズ10
efontCN_12_b   // 簡体字 サイズ12 ボールド
efontTW_14_bi  // 繁体字 サイズ14 ボールドイタリック
efontKR_16_i   // 韓国語 サイズ16 イタリック

Font8x8C64
AsciiFont8x16
AsciiFont24x48
TomThumb
Orbitron_Light_24
Orbitron_Light_32
Roboto_Thin_24
Satisfy_24
Yellowtail_32

// 以下は文字サイズ 9pt,12pt,18pt,24pt が選択できます
FreeMono9pt7b
FreeMonoBold9pt7b
FreeMonoOblique9pt7b
FreeMonoBoldOblique9pt7b
FreeSans9pt7b
FreeSansBold9pt7b
FreeSansOblique9pt7b
FreeSansBoldOblique9pt7b
FreeSerif9pt7b
FreeSerifItalic9pt7b
FreeSerifBold9pt7b
FreeSerifBoldItalic9pt7b

// 以下は文字サイズ 9,12,18,24,40,56,72 が選択できます
DejaVu9

// setTextSize で文字の倍率を指定
canvas.setTextSize(2.5, 3);     //（横方向倍率, 縦方向倍率）
canvas.println("文字 横2.5倍、 縦3倍");

// 第２引数を省略した場合は、第１引数の倍率が縦と横の両方に反映されます。
canvas.setTextSize(2.5);        //（横縦方向倍率）
canvas.println("文字 縦横2.5倍");

canvas.setTextDatum( top_left        );  // 上左(0)（初期値）
canvas.setTextDatum( top_center      );  // 上中央(1)
canvas.setTextDatum( top_right       );  // 上右(2)
canvas.setTextDatum( middle_left     );  // 中左(4)
canvas.setTextDatum( middle_center   );  // 真ん中(5)
canvas.setTextDatum( middle_right    );  // 中右(6)
canvas.setTextDatum( bottom_left     );  // 下左(8)
canvas.setTextDatum( bottom_center   );  // 下中央(9)
canvas.setTextDatum( bottom_right    );  // 下右(10)
canvas.setTextDatum( baseline_left   );  // ベースライン左(16)　※ベースラインは文字の基準ライン（gやjは下にはみ出る）
canvas.setTextDatum( baseline_center );  // ベースライン中央(17)
canvas.setTextDatum( baseline_right  );  // ベースライン右(18)

// 描画したい範囲を四角い範囲で指定します。
canvas.setClipRect(10, 10, 100, 100);  //（x座標, y座標, 横幅, 縦長さ）

// ベジェ曲線（波線）
canvas.drawBezier (x0, y0, x1, y1, x2, y2, color);         // 3点間のベジエ曲線（0:起点、1:近接点、2:終点）
canvas.drawBezier (x0, y0, x1, y1, x2, y2, x3, y3, color); // 4点間のベジエ曲線（0:起点、1:近接点1、2:近接点2、3:終点）

// 円弧
// x = 中心のx座標, y = 中心のy座標, r0 = 外円半径、r1 = 内円半径、angle0 = 開始角度、angle1 = 終了角度[左回転]
canvas.drawArc ( x, y, r0, r1, angle0, angle1, color);  // 円弧の外周
canvas.fillArc ( x, y, r0, r1, angle0, angle1, color);  // 円弧の塗り

// 楕円の円弧
// x = 中心のx座標, y = 中心のy座標, r0x = 内側の円の半径x, r1x = 外側の円の半径x,
// r0y = 内側の円の半径y, r1y = 外側の円の半径y, angle0 = 開始角度, angle1 = 終了角度[左回転], color = 色）
canvas.drawEllipseArc (x, y, r0x, r1x, r0y, r1y, angle0, angle1, color);  // 楕円の円弧の外周
canvas.fillEllipseArc (x, y, r0x, r1x, r0y, r1y, angle0, angle1, color);  // 楕円の円弧の塗り潰し

// グラデーション（color1 から color2 へ変化）ライン
canvas.drawGradientHLine (x, y, w, color1, color2 );       // 指定座標から水平(w = 幅)のグラデーションライン
canvas.drawGradientVLine (x, y, h, color1, color2 );       // 指定座標から垂直(h = 高さ)のグラデーションライン
canvas.drawGradientLine (x0, y0, x1, y1, color1, color2 ); // 指定した2点間のグラデーションライン

// 囲まれた図形の中の座標を適当に指定すると囲まれた範囲を塗りつぶす
canvas.paint (x, y, color);  // 囲まれた範囲内の座標をx,yで指定