pdf-icon

Arduino入門

2. デバイス&サンプル

M5Canvas Class

关于 M5Canvas

M5CanvasはLGFX_Spriteの派生クラスで、基本的にはTFT_eSPIのSpriteと同じように使われています。M5GFXで定義された"Sprite"ではなく"Canvas "と呼ぶのが適切ですが、TFT_eSpriteとの互換性のためにpushSpriteなどの手法は残っています。

以下に含まれていないより詳細なAPI情報についてはこちらをご参照ください。

Canvas の 利点

  • 事前にメモリ上に描画し、一度にパネルに表示できるため、迅速な表示が可能です。

  • 小さな文字などの表示に便利です。

  • 透明な色を使用して重ね合わせを提供できます。

  • ディスプレイ上で描画する際に、スケーリング、回転、アンチエイリアス処理を行うことができます。

コンストラクタ

  1. M5Canvas()
  • 引数なし
  • 引数が指定されていない場合、プッシュまたは描画時に指定する必要があり、そうしないと問題が発生します。
  1. M5Canvas(M5GFX&)
  • 引数に M5GFX を指定します。
  • M5GFX が引数として指定された場合、デフォルトで M5GFX に描画されます。

M5Canvas(M5GFX&) コンストラクタを使用して、正しい描画ターゲットが設定されることを確認することをお勧めします。

LGFX_Sprite Class

特に注意します:
カラーパレットを使用している場合、色設定に関わる関数はカラーパレットのカラーインデックスでしか設定色を達成できません。取得した色情報もカラーインデックスであり、色数値ではありません。

createSprite

Syntax:

void* createSprite(int32_t w, int32_t h)

Description:

  • キャンバスを作ります

Parameters:

  • w: キャンバスの幅
  • h: キャンバスの高さ

Return:

  • null

fillSprite

Syntax:

void fillSprite (const T& color)

Description:

  • キャンバスを塗りつぶします

Parameters:

  • color: 塗りつぶす色

Return:

  • null

pushSprite

Syntax1:

void pushSprite(int32_t x, int32_t y, const T& transp)

Syntax2:

void pushSprite(LovyanGFX* dst, int32_t x, int32_t y, const T& transp)

Syntax3:

void pushSprite(int32_t x, int32_t y)

Syntax4:

void pushSprite(LovyanGFX* dst, int32_t x, int32_t y)

Description:

  • 指定された座標を基準点としてキャンバスの左上にプッシュします。

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • x: キャンバス基準点 x 座標
  • y: キャンバス基準点 y 座標
  • transp: 透明色

Return:

  • null

deleteSprite

Syntax:

void deleteSprite(void)

Description:

  • キャンバスを削除します

Parameters:

  • null

Return:

  • null

サンプルプログラム

1.簡単な利用サンプル

cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
#include <M5GFX.h>
#include <M5Unified.h>
static int32_t Disw;
static int32_t Dish;
void setup() {
M5.begin();
Disw = M5.Lcd.width();
Dish = M5.Lcd.height();
M5.Lcd.fillScreen(TFT_WHITE);
M5Canvas canvas(&M5.Lcd);
canvas.createSprite(100, 100);//set sprite size
canvas.fillSprite(TFT_PINK);//fill sprite with color XXX
delay(1000);
canvas.fillSprite(TFT_BLACK);//fill sprite with color XXX
canvas.println("M5Canvas");
canvas.pushSprite(&M5.Lcd, Disw / 2 - 50, Dish / 2 - 50, TFT_PINK);//"&M5.Lcd" is not necessary here
canvas.deleteSprite();
//In this example, PINK will not be displayed
}
void loop() {
}

サンプルプログラムの動作例は以下の通りです:

2.複数のキャンバスを統合して描画する

cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
#include <M5GFX.h>
#include <M5Unified.h>
static int32_t Disw;
static int32_t Dish;
void setup() {
M5.begin();
Disw = M5.Lcd.width();
Dish = M5.Lcd.height();
M5.Lcd.fillScreen(TFT_WHITE);
M5Canvas canvas(&M5.Lcd);
M5Canvas can1(&M5.Lcd);
M5Canvas can2(&M5.Lcd);
canvas.createSprite(100, 100);//set sprite size
canvas.fillSprite(TFT_PINK);//fill sprite with color XXX
canvas.println("M5Canvas");
can1.createSprite(30, 30);
can1.fillSprite(TFT_BLUE);
can1.println("Can1");
can1.fillCircle(15, 15, 5, TFT_YELLOW);
can2.createSprite(30, 30);
can2.fillSprite(TFT_GREEN);
can2.println("Can2");
can2.fillTriangle(15, 10, 0, 30, 30, 30, TFT_BLUE);
canvas.pushSprite(Disw / 2 - 50, Dish / 2 - 50);
can1.pushSprite(Disw / 2 - 30, Dish / 2 - 30);
can2.pushSprite(Disw / 2, Dish / 2);
canvas.deleteSprite();
can1.deleteSprite();
can2.deleteSprite();
}
void loop() {
}

サンプルプログラムの動作例は以下の通りです:

createFromBmp

Syntax1:

bool createFromBmp(const uint8_t *bmp_data, uint32_t bmp_len = ~0u)

Description:

  • BMP データからキャンバスを作成します

Parameters:

  • bmp_data: BMP データポインタ
  • bmp_len: BMP データ長(デフォルトは ~0u)

Syntax2:

bool createFromBmp(T &fs, const char *path)

Description:

  • BMP ファイルからキャンバスを作成します

Parameters:

  • fs: ファイルシステムオブジェクト
    • SPIFFS
    • SD
      etc
  • path: BMP ファイルパス

Return:

  • bool
    • true: 作成成功
    • false: 作成失敗

createFromBmpFile

Syntax1:

bool createFromBmpFile(const char *path)

Syntax2:

bool createFromBmpFile(T &fs, const char *path)

Description:

  • BMPファイルからキャンバスを作成します

Parameters:

  • path: BMP ファイルパス
  • fs: ファイルシステムオブジェクト
    • SPIFFS
    • SD
      etc

Return:

  • bool
    • true: 作成成功
    • false: 作成失敗

このサンプルプログラムでは、FAT32形式でフォーマットされたMicroSDカードを用意し、ルートディレクトリに2つのPNG画像を配置し、それぞれLGFX_Canavs_Test01.bmpLGFX_Canavs_Test02.bmpという名前を付ける必要があります。サンプルプログラムはM5Fireデバイスをターゲットとしており、画像の解像度は320*240です。以下のリンクから直接サンプル画像1サンプル画像2をダウンロードできます。画像の解像度が320*240でない場合、プログラムはプリセットに基づいて表示方法を決定し、表示の異常が発生する可能性があります。

注意事項:
下記のコードでは、ヘッダーファイルSD.h<M5Unified.h>の前に配置する必要があります。そうしないと、コンパイルに失敗します。

サンプルプログラム

cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
#include <Arduino.h>
#include <SD.h>//This header file must before M5Unified.h
#include <SPI.h>
#include <M5GFX.h>
#include <M5Unified.h>
#define SD_SPI_CS_PIN 4
#define SD_SPI_SCK_PIN 18
#define SD_SPI_MOSI_PIN 23
#define SD_SPI_MISO_PIN 19
static int32_t Disw;
static int32_t Dish;
void setup() {
M5.begin();
Disw = M5.Lcd.width();
Dish = M5.Lcd.height();
M5.Lcd.fillScreen(TFT_BLACK);
M5.Display.setTextFont(&fonts::Orbitron_Light_24);
M5.Display.setTextSize(1);
// SD Card Initialization
SPI.begin(SD_SPI_SCK_PIN, SD_SPI_MISO_PIN, SD_SPI_MOSI_PIN, SD_SPI_CS_PIN);
if (!SD.begin(SD_SPI_CS_PIN, SPI, 25000000)) {
// Print a message if SD card initialization failed or if the SD card does not exist.
M5.Display.print("\n SD card not detected\n");
while (1); ;
} else {
M5.Display.print("\n SD card detected\n");
}
delay(1000);
M5.Display.print("\n SD card read test...\n");
if (SD.open("/LGFX_Canavs_Test01.bmp", FILE_READ, false)) {
M5.Display.print(" BMP file 01 detected\n");
} else {
M5.Display.print(" BMP file 01 not detected\n");
}
if (SD.open("/LGFX_Canavs_Test02.bmp", FILE_READ, false)) {
M5.Display.print(" BMP file 01 detected\n");
} else {
M5.Display.print(" BMP file 01 not detected\n");
}
delay(2000);
}
void loop() {
M5Canvas canvas(&M5.Lcd);
if (canvas.createFromBmp(SD, "/LGFX_Canavs_Test01.bmp")) {
canvas.pushSprite(0, 0);
} else {
M5.Display.print("\ncreateFromBmp failed\n");
}
delay(1000);
if (canvas.createFromBmpFile(SD, "/LGFX_Canavs_Test02.bmp")) {
canvas.pushSprite(0, 0);
} else {
M5.Display.print("\ncreateFromBmpFile failed\n");
}
delay(1000);
canvas.deleteSprite();
}

例プログラム効果は、2枚のピクチャを交互に表示するもので、1枚目が LGFX_Canavs_Test01.bmp 、2枚目が LGFX_Canavs_Test02.bmp となります。

setBitmapColor

Syntax:

void setBitmapColor(uint16_t fgcolor, uint16_t bgcolor)

Description:

  • ビットマップの色を設定します。1ビットのみに適用されます。

Parameters:

  • fgcolor: 前景色
  • bgcolor: 背景色

Return:

  • null

setColorDepth

Syntax1:

void setColorDepth(uint8_t bpp)

Description:

  • 色の深さを設定します

Parameters:

  • bpp: 各ピクセルのビット数
    • 1: 1 ビット
    • 2: 2 ビット
    • 4: 4 ビット
    • 8: 8 ビット
    • 16: 16 ビット
    • 24: 24 ビット
    • 32: 32 ビット

Syntax2:

void* setColorDepth(color_depth_t depth)

Description:

  • 色の深さを設定します

Parameters:

  • depth: 色深度
注意事項:
1.パレットを使用する場合,bppdepth は1、2、4、8ビットのみとなります。
2.createPaletteを呼び出す前にsetColorDepthを呼び出して色深度を設定する必要があります。そうしないとパレットの作成に失敗します。
3.setColorDepth でカラーデプスを 1 ビットに設定した場合、createPalette() でパレットを作成するしかできず、createPalette(const uint16_t* colors, uint32_t count) または createPalette(const uint32_t* colors, uint32_t count) を使用することはできません。

Return:

  • null

createPalette

Syntax1:

bool createPalette(void)

Syntax2:

bool createPalette(const uint16_t* colors, uint32_t count)

Syntax3:

bool createPalette(const uint32_t* colors, uint32_t count)

Description:

  • パレットを作成します

Parameters:

  • colors: カラー配列ポインタです
    • uint16_t: RGB565 16 ビットカラー
    • uint32_t: RGB888/ARGB8888 24 ビットカラー/32 ビットカラー
  • count: カラー数

Return:

  • bool
    • true: 作成成功
    • false: 作成失敗

setPaletteGrayscale

Syntax:

void setPaletteGrayscale(void)

Description:

  • パレットをグレースケールに設定します

Parameters:

  • null

Return:

  • null

setPaletteColor

Syntax1:

void setPaletteColor(uint32_t index, uint32_t color)

Description:

  • パレットの色を設定します

Parameters:

  • index: パレットインデックス
  • color: 色

Syntax2:

void setPaletteColor(size_t index, const bgr888_t& rgb)

Description:

  • パレットの色を設定します

Parameters:

  • index: パレットインデックス
  • rgb: RGB 颜色

Syntax3:

void setPaletteColor(size_t index, uint8_t r, uint8_t g, uint8_t b)

Description:

  • パレットカラーを設定します。

Parameters:

  • index: パレットインデックス
  • r: 赤色成分
  • g: 緑色成分
  • b: 青色成分

Return:

  • null

getPaletteIndex

Syntax:

int32_t getPaletteIndex(const T& color)

Description:

  • パレットインデックスを取得します

Parameters:

  • color: 色

Return:

  • res: 色インデックス
  • -1: 関数実行失敗

deletePalette

Syntax:

void deletePalette(void)

Description:

  • パレットを削除します

Parameters:

  • null

Return:

  • null

サンプルプログラム

cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
#include <M5Unified.h>
#include <M5GFX.h>
#define ROYAL_BLUE 0X435C
#define LAVENDER_PURPLE 0xE73F
#define SADDLE_BROWN 0x8A22
#define INDIA_RED 0xCAEB
#define FOREST_GREEN 0x2444
#define SALMON_PINK 0xFC0E
static int32_t Disw;
static int32_t Dish;
static uint16_t pale[] = {WHITE, ROYAL_BLUE, LAVENDER_PURPLE, SADDLE_BROWN, BLUE, INDIA_RED,FOREST_GREEN, SALMON_PINK};
// static uint16_t pale[256];
M5Canvas canvas(&M5.Lcd);
void setup() {
M5.begin();
Disw = M5.Lcd.width();
Dish = M5.Lcd.height();
canvas.createSprite(Disw, Dish);
canvas.setColorDepth(lgfx::v1::palette_8bit);//This must be cited before createPalette
canvas.setTextDatum(top_center);
canvas.drawString("M5Canvas Palette", Disw / 2, 0, &fonts::FreeMonoBold24pt7b);
canvas.drawString("Palette Color 0", Disw / 2, 100, &fonts::FreeMonoBold24pt7b);
canvas.drawString("is background color", Disw / 2, 150, &fonts::FreeMonoBold24pt7b);
canvas.createPalette(pale, 256);
// If you choose "static uint16_t pale[256];", following code must be used
// canvas.setPaletteColor(0, WHITE);
// canvas.setPaletteColor(1, ROYAL_BLUE);
// canvas.setPaletteColor(2, LAVENDER_PURPLE);
// canvas.setPaletteColor(3, SADDLE_BROWN);
// canvas.setPaletteColor(4, INDIA_RED);
// canvas.setPaletteColor(5, FOREST_GREEN);
// canvas.setPaletteColor(6, SALMON_PINK);
canvas.setTextColor(canvas.getPaletteIndex(ROYAL_BLUE));
canvas.drawString("Palette Color 1", Disw / 2, 300, &fonts::FreeMonoBold24pt7b);
canvas.setTextColor(canvas.getPaletteIndex(LAVENDER_PURPLE));
canvas.drawString("Palette Color 2", Disw / 2, 350, &fonts::FreeMonoBold24pt7b);
canvas.setTextColor(canvas.getPaletteIndex(SADDLE_BROWN));
canvas.drawString("Palette Color 3", Disw / 2, 400, &fonts::FreeMonoBold24pt7b);
canvas.setTextColor(canvas.getPaletteIndex(INDIA_RED));
canvas.drawString("Palette Color 4", Disw / 2, 450, &fonts::FreeMonoBold24pt7b);
canvas.setTextColor(canvas.getPaletteIndex(FOREST_GREEN));
canvas.drawString("Palette Color 5", Disw / 2, 500, &fonts::FreeMonoBold24pt7b);
canvas.setTextColor(canvas.getPaletteIndex(SALMON_PINK));
canvas.drawString("Palette Color 6", Disw / 2, 550, &fonts::FreeMonoBold24pt7b);
canvas.pushSprite(0,0);
canvas.deletePalette();//must behind pushSprite()
canvas.deleteSprite();
}
void loop() {
}

サンプルプログラムの動作例は以下の通りです:

readPixelValue

Syntax:

uint32_t readPixelValue(int32_t x, int32_t y)

Description:

  • 指定した座標のピクセル値を読み取ります。

Parameters:

  • x: ピクセル x 座標
  • y: ピクセル y 座標

Return:

  • uint32_t: ピクセル値
    • 0-1 (1 bpp)
    • 0-255 (8 bpp)
    • 0-0xFFFF (RGB565-16 bpp)
    • 0-0xFFFFFF (RGB888-24 bpp)

setPsram

Syntax:

void setPsram( bool enabled )

Description:

  • PSRAMの使用を設定します。

Parameters:

  • enabled: PSRAM使用フラグ
    • true: PSRAMを使用
    • false: PSRAMを使用しない

Return:

  • null

setBuffer

Syntax:

void setBuffer(void* buffer, int32_t w, int32_t h, uint8_t bpp = 0)

Description:

  • バッファを設定します。

Parameters:

  • buffer: バッファポインタ
  • w: 幅
  • h: 高さ
  • bpp: 各ピクセルのビット数(デフォルトは 0)
    • 0: デフォルト値を使用
    • 1: 1 ビット
    • 2: 2 ビット
    • 4: 4 ビット
    • 8: 8 ビット
    • 16: 16 ビット

Return:

  • null

pushRotated

Syntax1:

void pushRotated(float angle, const T& transp)

Syntax2:

void pushRotated(LovyanGFX* dst, float angle, const T& transp)

Syntax3:

void pushRotated(float angle)

Syntax4:

void pushRotated(LovyanGFX* dst, float angle)

Description:

  • キャンバスを指定の角度で回転させます

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • angle: 回転角度
  • transp: 透明色

Return:

  • null

pushRotatedWithAA

Syntax1:

void pushRotatedWithAA(float angle, const T& transp)

Syntax2:

void pushRotatedWithAA(LovyanGFX* dst, float angle, const T& transp)

Syntax3:

void pushRotatedWithAA(float angle)

Syntax4:

void pushRotatedWithAA(LovyanGFX* dst, float angle)

Description:

  • キャンバスを指定の角度で回転させます

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • angle: 回転角度
  • transp: 透明色

Return:

  • null

pushRotateZoom

Syntax1:

void pushRotateZoom(float angle, float zoom_x, float zoom_y, const T& transp)

Syntax2:

void pushRotateZoom(LovyanGFX* dst, float angle, float zoom_x, float zoom_y, const T& transp)

Syntax3:

void pushRotateZoom(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)

Syntax4:

void pushRotateZoom(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)

Syntax5:

void pushRotateZoom(float angle, float zoom_x, float zoom_y)

Syntax6:

void pushRotateZoom(LovyanGFX* dst, float angle, float zoom_x, float zoom_y)

Syntax7:

void pushRotateZoom(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)

Syntax8:

void pushRotateZoom(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)

Description:

  • キャンバスを指定の角度とスケールで回転させます

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • dst_x: 目標 x 座標
  • dst_y: 目標 y 座標
  • angle: 回転角度
  • zoom_x: x 軸スケール
  • zoom_y: y 軸スケール
  • transp: 透明色

Return:

  • null

pushRotateZoomWithAA

Syntax1:

void pushRotateZoomWithAA(float angle, float zoom_x, float zoom_y, const T& transp)

Syntax2:

void pushRotateZoomWithAA(LovyanGFX* dst , float angle, float zoom_x, float zoom_y, const T& transp)

Syntax3:

void pushRotateZoomWithAA(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)

Syntax4:

void pushRotateZoomWithAA(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)

Syntax5:

void pushRotateZoomWithAA(float angle, float zoom_x, float zoom_y)

Syntax6:

void pushRotateZoomWithAA(LovyanGFX* dst, float angle, float zoom_x, float zoom_y)

Syntax7:

void pushRotateZoomWithAA(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)

Syntax8:

void pushRotateZoomWithAA(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)

Description:

  • 指定された角度とスケールでキャンバスを回転させます

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • dst_x: 目標 x 座標
  • dst_y: 目標 y 座標
  • angle: 回転角度
  • zoom_x: x 軸スケール
  • zoom_y: y 軸スケール
  • transp: 透明色

Return:

  • null

pushAffine

Syntax1:

void pushAffine(const float matrix[6], const T& transp)

Syntax2:

void pushAffine(LovyanGFX* dst, const float matrix[6], const T& transp)

Syntax3:

void pushAffine(const float matrix[6])

Syntax4:

void pushAffine(LovyanGFX* dst, const float matrix[6])

Description:

  • 指定された行列でアフィン変換を行います

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • matrix: 変換行列
    • [a, c, e]
    • [b, d, f]
    • [0, 0, 1]
  • transp: 透明色

Return:

  • null

pushAffineWithAA

Syntax1:

void pushAffineWithAA(const float matrix[6], const T& transp)

Syntax2:

void pushAffineWithAA(LovyanGFX* dst, const float matrix[6], const T& transp)

Syntax3:

void pushAffineWithAA(const float matrix[6])

Syntax4:

void pushAffineWithAA(LovyanGFX* dst, const float matrix[6])

Description:

  • 指定された行列をアフィン変換しアンチエイリアスを使います

Parameters:

  • dst: 目標 LovyanGFX オブジェクト
  • matrix: 変換行列
    • [a, c, e]
    • [b, d, f]
    • [0, 0, 1]
  • transp: 透明色

Return:

  • null

サンプルプログラム

cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
#include <M5GFX.h>
#include <M5Unified.h>
static int32_t Disw;
static int32_t Dish;
static float Affine_mat[9] = {1, 0, 60,
0, 1, 20,
0, 0, 1 };
void setup() {
M5.begin();
Disw = M5.Lcd.width();
Dish = M5.Lcd.height();
M5.Lcd.fillScreen(TFT_WHITE);
M5Canvas canvas(&M5.Lcd);
canvas.createSprite(100, 100);//set sprite size
canvas.fillSprite(TFT_BLACK);//fill sprite with color XXX
canvas.pushSprite(Disw / 2 - 50, Dish / 2 - 50);
delay(1000);
canvas.fillSprite(TFT_PINK);
// Rotate 45°
canvas.pushRotated(45);
// canvas.pushRotatedWithAA(45);
// Rotate 90° Reduce to 80%
// canvas.pushRotateZoom(90, 0.8, 0.8);
// canvas.pushRotateZoomWithAA(90, 0.8, 0.8);
// Shift 10 units from the origin using the affine matrix
// canvas.pushAffine(Affine_mat);
// canvas.pushAffineWithAA(Affine_mat);
canvas.deleteSprite();
}
void loop() {
}

サンプルプログラムの動作例は以下の通りです:

On This Page