Arduino入門
2. デバイス＆サンプル
3. M5Unified
5. 拡張モジュール＆サンプル
Atom DTU
Hat
M5Canvasについて
M5Canvasは基本的にTFT_eSPIのSpriteと同一です。メモリ上に描くという機能から考えてM5GFXではSpriteではなくCanvasという名称を利用しています。(しかし、TFT-eSPIとの互換性も考慮し、pushSpriteのようなメソッド名は残っています。)
このドキュメントはM5Canvasを簡単に利用できる説明をします。詳細なAPIドキュメントについてはこちらを参照してください。
キャンバスを使用する利点
メモリに描き、一気にディスプレイにデータを転送するため速く描画することが可能です。
小さいキャラクタやオブジェクトを描く場合に便利です。
透明色を利用して重ね合わせを利用することが可能です。
キャンバスからディスプレイに描画する際に、拡大縮小・回転・アンチエイリアスといった変換処理を行うことが可能です。
コンストラクタ
Syntax:
- 引数なし
引数を省略した場合は、Canvasをpushや描画する際に描画先を指定しないと再起動します。
M5Canvas()
- M5GFXを指定する。
コンストラクタ引数にM5GFXを指定した場合、デフォルトの描画先がM5GFXになります。
M5Canvas(M5GFX&)
- M5Canvasを指定する。
M5Canvas間で親子関係を持った描画も可能です。
M5Canvas(M5Canvas&)
使い方
- 1.簡単な利用サンプル
#include <Arduino.h>
#include <M5GFX.h>
M5GFX display;
M5Canvas canvas(&display);
int32_t x;
int32_t y;
void setup()
{
display.begin();
display.fillScreen(TFT_BLACK);
x = display.width() / 2;
y = display.height() / 2;
canvas.createSprite(50, 50);
canvas.fillSprite(TFT_PINK);
canvas.fillRect(10, 10, 20, 20, TFT_RED);
canvas.println("M5Canvas");
// Only the following process is actually drawn on the panel.
display.startWrite();
display.println("Display");
canvas.pushSprite(x, y);
display.endWrite();
}
void loop()
{
}- 2.複数のCanvasを組み合わせた例
Canvasを別のCanvasに描画することも可能です。
include <Arduino.h>
#include <M5GFX.h>
M5GFX display;
M5Canvas canvas(&display);
M5Canvas sub_canvas1(&canvas);
M5Canvas sub_canvas2(&canvas);
int32_t x;
int32_t y;
void setup()
{
display.begin();
display.fillScreen(TFT_BLACK);
x = display.width() / 2;
y = display.height() / 2;
canvas.createSprite(80, 80);
canvas.fillSprite(TFT_PINK);
canvas.fillRect(10, 10, 10, 10, TFT_RED);
canvas.println("M5Canvas");
sub_canvas1.createSprite(30, 30);
sub_canvas1.fillSprite(TFT_BLUE);
sub_canvas1.println("sub1");
sub_canvas1.fillCircle(15, 15, 5, TFT_YELLOW);
sub_canvas2.createSprite(30, 30);
sub_canvas2.fillSprite(TFT_GREEN);
sub_canvas2.println("sub2");
sub_canvas2.fillTriangle(15, 10, 0, 30, 30, 30, TFT_BLUE);
sub_canvas1.pushSprite(5, 30);
sub_canvas2.pushSprite(40, 30);
// Only the following process is actually drawn on the panel.
display.startWrite();
display.println("Display");
canvas.pushSprite(x, y);
display.endWrite();
}
void loop()
{
}- 3.コンストラクタ引数を省略した場合
#include <Arduino.h>
#include <M5GFX.h>
M5GFX display;
M5Canvas canvas;
int32_t x;
int32_t y;
void setup()
{
display.begin();
display.fillScreen(TFT_BLACK);
x = display.width() / 2;
y = display.height() / 2;
canvas.createSprite(50, 50);
canvas.fillSprite(TFT_PINK);
canvas.fillRect(10, 10, 20, 20, TFT_RED);
canvas.println("M5Canvas");
// Only the following process is actually drawn on the panel.
display.startWrite();
display.println("Display");
canvas.pushSprite(&display, x, y);
display.endWrite();
}
void loop()
{
}透明色
透明色を指定した場合、pushする際にその色は描画されず元々描かれた色が表示されます。重ね合わせた時に透明になるイメージです。
使い方の２番目のサンプルで透明色に青を指定した場合、青色は透過して背景のピンクになります。
#include <Arduino.h>
#include <M5GFX.h>
M5GFX display;
M5Canvas canvas(&display);
M5Canvas sub_canvas1(&canvas);
M5Canvas sub_canvas2(&canvas);
int32_t x;
int32_t y;
void setup()
{
display.begin();
display.fillScreen(TFT_BLACK);
x = display.width() / 2;
y = display.height() / 2;
canvas.createSprite(80, 80);
canvas.fillSprite(TFT_PINK);
canvas.fillRect(10, 10, 10, 10, TFT_RED);
canvas.println("M5Canvas");
// Draw on a small canvas 1.
sub_canvas1.createSprite(30, 30);
sub_canvas1.fillSprite(TFT_BLUE);
sub_canvas1.println("sub1");
sub_canvas1.fillCircle(15, 15, 5, TFT_YELLOW);
// Draw on a small canvas 2.
sub_canvas2.createSprite(30, 30);
sub_canvas2.fillSprite(TFT_GREEN);
sub_canvas2.println("sub2");
sub_canvas2.fillTriangle(15, 10, 0, 30, 30, 30, TFT_BLUE);
// Draw two smaller canvases on the canvas.
sub_canvas1.pushSprite(5, 30, TFT_BLUE);
sub_canvas2.pushSprite(40, 30, TFT_BLUE);
// Only the following process is actually drawn on the panel.
display.startWrite();
display.println("Display");
canvas.pushSprite(x, y);
display.endWrite();
}
void loop()
{
}拡大縮小と回転
#include <Arduino.h>
#include <M5GFX.h>
static M5GFX display;
static M5Canvas canvas1(&display);
static M5Canvas canvas2(&canvas1);
static int32_t width = 100;
static size_t count = 0;
void setup(void)
{
display.init();
display.fillScreen(TFT_RED);
width = std::min(width, (std::max(display.width(), display.height())+10)) | 1;
canvas1.setColorDepth(8);
canvas1.createSprite(width + 30, width + 30);
canvas1.fillSprite(TFT_RED);
canvas2.setColorDepth(8);
canvas2.createSprite(width, width);
canvas2.fillSprite(TFT_RED);
canvas2.fillRect(0, width>>1, width>>1, width>>1, TFT_BLUE);
}
float scale = 0.0f;
void loop(void)
{
++count;
canvas1.fillSprite(TFT_RED);
scale += 0.01f;
canvas2.pushRotateZoom(0, scale, scale);
// Only the following process is actually drawn on the panel.
canvas1.pushRotateZoom(count * 0.5f, 1.0, 1.0);
if (scale > 1.0f) scale = 0.0f;
}より高度な例
M5GFX + OLEDUnit
OLEDUnitを接続して、M5デバイスとOLEDの両方に表示をするサンプルです。
#include <Arduino.h>
#include <M5GFX.h>
#include <M5UnitOLED.h>
static M5GFX display;
static M5UnitOLED oled;
static M5Canvas canvas1(&display);
static M5Canvas canvas2(&canvas1);
static int32_t width = 100;
static size_t count = 0;
void setup(void)
{
display.init();
oled.init();
display.fillScreen(TFT_RED);
width = std::min(width, (std::max(display.width(), display.height())+10)) | 1;
canvas1.setColorDepth(8);
canvas1.createSprite(width + 30, width + 30);
canvas1.fillSprite(TFT_RED);
canvas2.setColorDepth(8);
canvas2.createSprite(width, width);
canvas2.fillSprite(TFT_RED);
canvas2.fillRect(0, width>>1, width>>1, width>>1, TFT_BLUE);
}
float scale = 0.0f;
void loop(void)
{
++count;
canvas1.fillSprite(TFT_RED);
scale += 0.01f;
canvas2.pushRotateZoom(0, scale, scale);
canvas1.pushRotateZoom(count * 0.5f, 1.0, 1.0);
canvas1.pushRotateZoom(&oled, count * 0.5f, 1.0, 1.0);
if (scale > 1.0f) scale = 0.0f;
}