M5GFXは、M5Stack製品の仕様の異なるディスプレイデバイスを扱うためのグラフィクスライブラリです。LCD,OLED,e-Ink Display等の違いを意識せず共通のAPIで扱うことが可能です。
M5GFXライブラリの概要
M5GFXを使用すると、以下のことができます。
- ディスプレイの初期化
- 色の設定
- 図形の描画
- 文字列の描画
- 画像の描画
M5GFXは、以下のAPIで構成されています。
- M5Canvas:ディスプレイの描画領域を表すクラス
- M5Color:色を表すクラス
- M5Draw:図形の描画を行うクラス
- M5Font:文字列の描画を行うクラス
- M5Image:画像の描画を行うクラス
M5GFXは、M5Stackの公式ライブラリに含まれています。
M5GFXを使用するには、以下の手順で行います。
- M5GFXライブラリをインストールします。
- M5Canvasオブジェクトを作成します。
- 色を設定します。
- 図形や文字列を描画します。
Supported device
M5Stackシリーズの以下の製品をサポートしています。(2023/10/31時点)
- M5Stack ( Basic / Gray / GO / Fire )
- M5Stack Core2
- M5Stack CoreInk
- M5Stick C
- M5Stick C Plus
- M5Stick C Plus2
- M5Paper
- M5Tough
- M5Station
- M5ATOMS3
- M5Dial
- M5DinMeter
- M5Capsule
- M5Cardputer
- UnitOLED
- UnitMiniOLED
- UnitLCD
- UnitRCA / ModuleRCA
- UnitGLASS
- UnitGLASS2
- AtomDisplay / ModuleDisplay
ヘッダファイルのインクリード
下記のデバイスに対応したヘッダファイルをインクルードします。M5StackのコントローラーデバイスはM5GFX.h
をインクルードします。
- M5GFX.h
- M5UnitLCD.h
- M5UnitOLED.h
- M5AtomDisplay.h
詳細は、以下のHPを参照ください。
m5-docs
The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Ar...
M5Canvasについて
M5Canvasは基本的にTFT_eSPIのSpriteと同一です。メモリ上に描くという機能から考えてM5GFXではSpriteではなくCanvasという名称を利用しています。(しかし、TFT-eSPIとの互換性も考慮し、pushSpriteのようなメソッド名は残っています。)
M5Canvasについて
以下のWebページに掲載のサンプルコードです。
m5-docs
The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Ar...
簡単な利用サンプル
#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()
{
}
複数の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()
{
}
コンストラクタ引数を省略した場合
#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する際にその色は描画されず元々描かれた色が表示されます。重ね合わせた時に透明になるイメージです。
使い方 の2番目のサンプルで透明色に青を指定した場合、青色は透過して背景のピンクになります。
#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の関数一覧
M5GFXの関数一覧です。
詳細は、以下のHPを参照ください。
関数 | 説明 |
---|---|
begin | パネルを初期化します。 |
beginTransaction | パネルのトランザクションを開始します。 |
calibrateTouch | タッチパネルをキャリブレーションします。 |
clear | パネルをクリアします。引数にカラーコードを指定した場合、その色で初期化します。 |
clearClipRect | setClipRect() で指定した領域をクリアします。 |
clearDisplay | パネルをクリアします。引数にカラーコードを指定した場合、その色で初期化します。 |
clearScrollRect | setScrollRect() で指定した領域をクリアします。 |
color16to24 | RGB565(16bit)のカラーコードをRGB888(24bit)へ変換します。 |
color16to8 | RGB565(16bit)のカラーコードをRGB332(8bit)へ変換します。 |
color24to16 | RGB888(24bit)のカラーコードをRGB565(16bit)へ変換します。 |
color332 | r, g, bの値からRGB332(8bit)のカラーコードを生成します。 |
color565 | r, g, bの値からRGB565(16bit)のカラーコードを生成します。 |
color888 | r, g, bの値からRGB888(24bit)のカラーコードを生成します。 |
color8to16 | RGB332(8bit)のカラーコードをRGB565(16bit)へ変換します。 |
convertRawXY | getTouchRaw() で取得した情報を変換します。 |
copyRect | 矩形範囲をコピーします。 |
createPng | スクリーンショット機能です。パネルに表示しているデータをPNG形式でメモリに保存します。 |
createPng | スクリーンショット機能です。パネルに表示しているデータをPNG形式でメモリに保存します。 |
display | 描画データをパネルへ表示します。(M5Paper, CoreInk, OLEDUnit用の関数です。) |
displayBusy | パネルがBusyかどうかをチェックします。 |
dmaBusy | パネルのDMAがBusyかチェックします。 |
drawArc | 円弧を描きます。r0とr1を指定し厚みのある円弧を描きます。 |
drawBezier | ベジェ曲線を描きます。制御点は3点または4点を指定します。 |
drawBmp | BMP形式のビットマップデータを描きます。ファイルやStreamを指定できます。 |
drawBmpFile | bmpファイルのビットマップデータを描きます。 |
drawBmpUrl | URLで指定したBMPデータを描きます。 |
drawCenterString(drawCentreString) | テキストを中寄せで描画します。 |
drawChar | ユニコードで文字を描画します。 |
drawCircle | 円を描きます。 |
drawEllipse | 楕円を描きます。 |
drawEllipseArc | 楕円の円弧を描きます。 |
drawFastHLine | 水平方向の線を描きます。 |
drawFastVLine | 垂直方向の線を描きます。 |
drawFloat | Float型(浮動少数型)の値を描画します。 |
drawGradientHLine | 色が変化する水平方向の線を描きます。 |
drawGradientLine | 色が変化する線を描きます。 |
drawGradientVLine | 色が変化する垂直方向の線を描きます。 |
drawJpg | JPGデータを描画します。File, Stream等のデータを指定可能です。 |
drawJpgFile | JPGファイルを描画します。 |
drawJpgUrl | URLで指定したJPGデータを表示します。 |
drawLine | 線を描く。 |
drawNumber | long型(整数型)の数値を描画します。 |
drawPixel | 点を描画します。 |
drawPng | PNGデータを描画します。FileやStreamを指定することができます。 |
drawPngFile | PNGファイルを描きます。 |
drawPngUrl | 指定したURLのPNGデータを描きます。 |
drawQoi | Qoiデータを描画します。FileやStreamを指定することができます。 |
drawQoiFile | Qoiファイルを描画します。 |
drawQoiUrl | 指定したURLのQoiデータを描画します。 |
drawRect | 矩形を描きます。 |
drawRightString | 右寄せで文字列を描画します。 |
drawRoundRect | 角が丸い矩形を描画します。 |
drawString | 文字を描画します。 |
drawTriangle | 3つの点を指定して三角形を描画します。 |
effect | ユーザ定義の関数を用いて矩形範囲を変換します。 |
endTransaction | startTransaction() とペアで使用します。 |
endWrite | startWrite() とペアで使用します。 |
fillAffine | アフィン変換行列で描画した領域を塗りつぶします。 |
fillArc | 塗りつぶした円弧を描きます。 |
fillCircle | 塗りつぶした円を描きます。 |
fillEllipse | 塗りつぶした楕円を描きます。 |
fillEllipseArc | 塗りつぶした円弧を描きます。 |
fillRect | 塗りつぶした矩形を描きます。 |
fillRectAlpha | 不透明な矩形を描画します。 |
fillRoundRect | 角が丸い塗りつぶした矩形を描きます。 |
fillScreen | 画面を塗りつぶします。 |
fillTriangle | 3つの点を指定して塗りつぶした三角形を描きます。 |
floodFill | 指定した座標の色域を近似的に塗りつぶします。 |
fontHeight | Returns the height of the specified font. |
fontWidth | Returns the width of the specified font. |
getAttribute | attributeの値を取得します。 |
getBaseColor | setBaseColor() で設定されたパネルの背景色を取得します。 |
getBoard | ボードを取得します。 |
getBrightness | setBrightness() で設定した値を取得します。 |
getClipRect | setClipRectRect() で設定したx,y,w,hを取得します。 |
getColorDepth | setColorDepth() で設定されたColorDepthを取得します。 |
getCursorX | 現在のカーソルX座標を取得します。 |
getCursorY | 現在のカーソルY座標を取得します。 |
getEpdMode | setEpdMode() で設定されているE-Paperのモードを取得します。(M5Paperのみ) |
getFont | setFont() で設定されているフォントを取得します。 |
getInstance | M5GFXのインスタンスを取得します。 |
getInvert | invertDisplay() で設定した値を取得します。 |
getPalette | パレット情報を取得します。 |
getPaletteCount | パレットの数を取得します。 |
getPanel | パネルを取得します。 |
getPivotX | setPivot() で設定されたPivotのX座標を取得します。 |
getPivotY | setPivot() で設定されたPivotのY座標を取得します。 |
getRawColor | setRawColor() で設定された色を取得します。**注意:**返却値はRGB888形式です。 |
getRotation | setRotation() で設定されたローテーションの値を取得します。 |
getScrollRect | setScrollRect() で設定されたx,y,w,hを取得します。 |
getStartCount | 実行した startWrite() の回数を取得します。 |
getSwapBytes | setSwapBytes() で設定された値を取得します。 |
getTextDatum | setTextDatum() で設定された構造体を取得します。 |
getTextPadding | テキストの余白を取得します。 |
getTextSizeX | setTextSize() 設定されたテキストサイズの幅を取得します。 |
getTextSizeY | setTextSize() で設定されたテキストサイズの高さを取得します。 |
getTextStyle | setTextStyle() で設定されたテキスト情報を取得します。 |
getTouch | タッチパネルの情報を取得します。 |
getTouchRaw | タッチパネルの情報を取得します。 |
hasPalette | パレットが設定されているかどうかを返却します。 |
height | パネルの高さを取得します。 |
init | パネルを初期化します。 |
initDMA | DMAを初期化します。 |
invertDisplay | 画面の明暗及び色調を反転させて出力するかどうかを設定します。(ネガポジ反転) |
isBusShared | バスが共有されているかどうかを取得します。 |
isEPD | e-Paper displayかどうかを取得します。 |
isReadable | パネルの情報を読み込みできるかどうかを取得します。 |
isSPIShared | SPIバスが共有されているかどうかを取得します。 |
loadFont | フォントデータを読み込みます。 |
paint | floodFill() と同じ機能です。 |
panel | パネルを取得します。 |
popState | テキスト情報を一時的に待避します。待避した情報は pushState() で戻します。 |
powerSave | パワーセーブの状態を設定します。 |
powerSaveOff | パワーセーブの状態をOFFにします。 |
powerSaveOn | パワーセーブの状態をONにします。 |
カーソル位置に文字列を出力します。ArduinoのPrint.hに準拠しています。 | |
printf | カーソル位置に文字列を出力します。ArduinoのLibPrint.hに準拠しています。 |
println | カーソル位置に文字列を出力します。文字列の最後に改行コードを追加します。ArduinoのPrint.hに準拠しています。 |
progressBar | プログレスバーを表示します。色は0x09F1(暗い青)のみです。 |
pushBlock | setWindow() , setAddrWindow() で設定された領域に、行方向に指定された色を描画していきます。 |
pushImage | 画像データをPushします。 |
pushImageAffine | アフィン変換して画像を描画します。 |
pushImageAffineWithAA | アンチエイリアスとアフィン変換を行いつつ画像をpushします。 |
pushPixels | setWindow() , setAddrWindos() で設定された領域に画像データをpushします。 |
pushPixelsDMA | DMAに画像データをpushします。 |
pushState | popState() で一時待避したテキスト情報をリストアします |
qrcode | 文字列をqrcodeに変換します。 |
readData16 | 16bitのデータをパネルから読み込みます。 |
readData32 | 32bitのデータをパネルから読み込みます。 |
readData8 | 8bitのデータをパネルから読み込みます。 |
readPixel | 指定した座標のカラーコード(RGB565)を読み取ります。 |
readPixelRGB | 指定した座標のカラーコード(RGB888)を読み取ります。 |
readRect | 指定された矩形領域のデータを読み込みます。(RGB565) |
readRectRGB | 指定された矩形領域のデータを読み込みます。(RGB888) |
scroll | パネルに表示されているデータをスクロールします。 |
setAddrWindow | writePixels() , pushPixels() , pushBlock() の描画先となる範囲を指定します。 |
setAutoDisplay | M5Paper, CoreInk, UnitOLEDのみの機能です。 trueを設定すると、 display() を実行しなくても書き込みを行うと即描画されます。 |
setBaseColor | パネルの背景色を設定します。スクロール機能で描画される描画領域外の色を設定することができます。 getBaseColor() と対の関数です。 |
setBrightness | ディスプレイパネルの明るさを設定します。 |
setClipRect | 描画に使用する矩形領域を指定します。 |
setColor | 描画色を指定します。 |
setColorDepth | ColorDepthを設定します。 |
setCursor | カーソル位置を指定します。 |
setEpdMode | E-Paperのモードを指定します。(M5Paperのみ) |
setFont | デフォルトフォントを指定します。 |
setPivot | Pivot座標を設定します。 |
setRawColor | 色を指定します。 |
setResolution | M5AtomDisplayのみの機能です。 解像度の設定を行います。 |
setRotation | パネルの回転方向を指定します。 |
setScrollRect | 指定した矩形領域でテキストが溢れた場合、スクロールするようになります。 |
setSwapBytes | パネルへデータを書き込む際にスワップするかどうかを設定します。 |
setTextColor | Set TextColor. |
setTextDatum | テキストを表示するときのデフォルト基準点(datum)を設定します。 TL_DATUM = Top left TC_DATUM = Top centre TR_DATUM = Top right ML_DATUM = Middle left MC_DATUM = Middle centre MR_DATUM = Middle right BL_DATUM = Bottom left BC_DATUM = Bottom centre BR_DATUM = Bottom right |
setTextScroll | テキストスクロールを有効にします。 |
setTextSize | テキストサイズを指定します。実数で指定が可能です。 |
setTextStyle | テキストの書式を設定します。 |
setTextWrap | X軸は文字列の折返しをするかどうか、Y軸は画面下部まで表示したあと上に戻るかどうかを指定します。 |
setTouchCalibrate | calibrateTouch() で取得したタッチパネルのキャリブレーション値を設定します。 |
setWindow | writePixels() , pushPixels() , pushBlock() 等の描画先となる範囲を指定します。 |
showFont | Display the specified time font. |
sleep | パネルをスリープします。 起動は wakeup() を使います。 |
startWrite | SPIバスのCSをアサートします。 endWrite() と対で使用します。startWrite()をパネル描画の際に明示的に記述することによりDMAバッファを効率的に使用することが可能になります。 |
swap565 | M5Canvas上の描画データは、カラーコードがスワップしています。そのためgetBuffer()で取得したデータを扱う場合にswap565を利用します。 |
swap888 | M5Canvas上の描画データは、カラーコードがスワップしています。そのためgetBuffer()で取得したデータを扱う場合にswap888を利用します。 |
textLength | 指定した幅に、指定した文字列のうち表示可能な文字数を取得します。 |
textWidth | パネルに文字列を表示したときの表示幅(pixel)を取得します。フォントを省略するとデフォルトフォントで計算します。 |
touch | タッチデバイスが有効な場合、ITouchポインタを返します。 |
unloadFont | setFont() で設定されたフォントを、アンロードして初期値に戻します。(&fonts::Font0) |
waitDisplay | パネルの描画が終わるまで待機します。 |
waitDMA | DMAが使用中の場合待機します。 |
wakeup | sleep() でスリープした状態のパネルを起動します。 |
width | パネルの幅を返します。 |
writeColor | setWindow() で設定した矩形領域に指定した色を行方向に指定された長さ描画していきます。 |
writeCommand16 | パネルに16bitのコマンドを書き込みます。 |
writeData16 | パネルに16bitデータを書き込みます。 |
writeData32 | パネルに32bitデータを書き込みます。 |
writeData | パネルに8bitデータを書き込みます。 |
writeFastHLine | 水平方向の線を描きます。 |
writeFastVLine | 垂直方向の線を描きます。 |
writeFillRect | 矩形を描きます。 |
writeIndexedPixels | カラーパレット情報を利用して画像データを描画します。 |
writePixel | 指定座標に点を描画します。 |
writePixels | setWindow() , setAddrWindos() で設定された領域に画像データをpushします。 |
writePixelsDMA | setWindow() , setAddrWindos() で設定した矩形領域に画像データを指定された長さだけDMA転送します。矩形領域の左上から描画が始まります。 |
LGFX_Buttonについて
Adafruit GFX Library のAdafruit_GFX_Buttonとの互換性を取るためのクラスです。 画面上に仮想的なボタンを配置して簡単に制御できるようになります。
関数一覧
関数 | 説明 |
---|---|
contains | 指定した座標がボタンの位置に含まれるかどうかを判定します。タッチパネルでボタンが押されたかどうかの判断に利用します。 |
drawButton | ボタンを描画します。引数のinvertedをtrueにすると背景色が反転します。 |
initButton | ボタンを初期状態を設定します。 |
isPressed | press() で設定したボタンの状態を返却します。 |
justPressed | ボタンが押されたかどうか判定します。 |
justReleased | ボタンを離したかどうか判定します。 |
press | ボタンの状態を設定します。 |
setLabelDatum | ラベルの 基準点(datum) を設定します。 |
m5-docs
The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Ar...
Appendex
以下の説明が、以下のHPにあります。
- カラーコードについて
- 定義済みの色
- テキストの基準点(datum)について
- 画像の基準点(datum)について
- フォント一覧
- ユニコードフォント
- ColorDepthについて
- enum epd_mode_t
- struct TextStyle
- struct FontMetrics
- startWrite()とendWrite()
- draw/push系とwrite系の関数の違いについて
m5-docs
The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Ar...
参考URL
以下のURLも参考にしてください。
- M5GFXライブラリの始め方
- M5GFX ドキュメント
- m5stack/M5GFX Graphics library for M5Stack series
- LovyanGFX
- LovyanGFX入門 その1 基本描画系
- LovyanGFX入門 その2 フォント描画系 | Lang-ship
- LovyanGFX入門 その3 日本語フォント描画系 | Lang-ship
- LovyanGFX入門 その4 描画の仕組み | Lang-ship
- LovyanGFX入門 その5 画像描画 | Lang-ship
- LovyanGFX入門 その6 スプライトの基礎 | Lang-ship
- LovyanGFX入門 その7 スプライトの中身 | Lang-ship
- LovyanGFX入門 その8 画面キャプチャからのGIF作成 | Lang-ship
- LovyanGFX入門 その9 描画速度計測 | Lang-ship
- LovyanGFX入門 その10 外部LCD接続 | Lang-ship
- LovyanGFX入門 その11 スケッチ例解説 | Lang-ship
- LovyanGFX入門 その12 CoreInk、M5Paper対応 | Lang-ship