M5Stack用のグラフィックライブラリ M5GFX の使い方

M5GFXは、M5Stack製品の仕様の異なるディスプレイデバイスを扱うためのグラフィクスライブラリです。LCD,OLED,e-Ink Display等の違いを意識せず共通のAPIで扱うことが可能です。

M5GFXライブラリの概要
Supported device
ヘッダファイルのインクリード
M5Canvasについて
M5GFXの関数一覧
LGFX_Buttonについて
1. 関数一覧
Appendex
参考URL

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をインクルードします。

詳細は、以下の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について

m5-docs

The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Ar...

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にします。
print	カーソル位置に文字列を出力します。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)を設定します。
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) を設定します。