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.簡単な利用サンプル
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
#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に描画することも可能です。
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
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.コンストラクタ引数を省略した場合
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
#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する際にその色は描画されず元々描かれた色が表示されます。重ね合わせた時に透明になるイメージです。
使い方の２番目のサンプルで透明色に青を指定した場合、青色は透過して背景のピンクになります。
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
#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(){}拡大縮小と回転
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
#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の両方に表示をするサンプルです。
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
#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;}