- Adafruit GFX Library
- はじめに
- 開発環境
- API
- コントール API
- 基本描画 API
- 画面塗りつぶし描画[fillScreen]
- 点描画[drawPixel]
- 縦線描画[drawFastVLine]
- 横線描画[drawFastHLine]
- 四角形塗りつぶし描画[fillRect]
- 直線描画[drawLine]
- 四角形描画[drawRect]
- 円描画[drawCircle]
- 円描画補助[drawCircleHelper]
- 円塗りつぶし描画[fillCircle]
- 円塗りつぶし描画補助[fillCircleHelper]
- 三角形描画[drawTriangle]
- 三角形塗りつぶし描画[fillTriangle]
- 角丸四角形描画[drawRoundRect]
- 角丸四角形塗りつぶし描画[fillRoundRect]
- 文字描画 API
- 状態取得 API
- おわりに
Adafruit GFX Library
はじめに
Adafruit GFX Library とは、Adafruit社が提供しているライブラリで、グラフィックスライブラリの派生元となる「コア」クラスです。
Adafruit社のすべての LCD および OLED ディスプレイと LED マトリックスに使用することができ、共通の構文とグラフィック関数のセットが提供されています。これにより、Arduino スケッチを最小限の手間でディスプレイ タイプに簡単に適応させることができます。
Adafruit GFX Library は、描画するのに便利な様々なライブラリがあり、どのように描画されるのか把握できればかなり綺麗に表示できそうです。今後も使用していくと思いますので、まとめてみました。
開発環境
OS : Windows 11 Pro
ESP32:ESP-WROOM-32
統合開発環境 : Arduino IDE 2.3.2
Arduino core for the ESP32:2.0.17
使用ライブラリ:Adafruit ST7735 and ST7789 Library(1.10.4) / Adafruit GFX Library(1.11.9)
確認時の使用パーツ
ESP32開発ボード(38Pin)
TFT(IPS)液晶ディスプレイ
API
コントール API
画面回転設定[setRotation]
virtual void setRotation(uint8_t r);
virtual void setRotation(uint8_t r);
引数
・r — 0=標準、1=時計回りに90度回転、2=時計回りに180度回転、3=時計回りに270度回転。
描画前に設定します。
※描画後に設定し画面が回転するものではありません。
反転表示設定[invertDisplay]
virtual void invertDisplay(bool i);
virtual void invertDisplay(bool i);
引数
・i — true=通常表示、false=反転表示。
描画後に設定します。
※画面全体の色が反転表示されます。
通常表示
反転表示
基本描画 API
画面塗りつぶし描画[fillScreen]
virtual void fillScreen(uint16_t color);
class Adafruit_GFX
virtual void fillScreen(uint16_t color);
引数
・color — 色設定(16-bit (‘565’) color)。
1色で画面全体を塗りつぶします。
点描画[drawPixel]
void drawPixel(int16_t x, int16_t y, uint16_t color);
class Adafruit_SPITFT
void drawPixel(int16_t x, int16_t y, uint16_t color);
引数
・x — 表示x座標。
・y — 表示y座標。
・color — 色設定(16-bit (‘565’) color)。
1ピクセルの点を描画します。
縦線描画[drawFastVLine]
void drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color);
class Adafruit_SPITFT
void drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color);
引数
・x — 表示x座標。
・y — 表示y座標。
・h — 縦線長さ。
・color — 色設定(16-bit (‘565’) color)。
(x,y) から下方向へ h の長さ線を描画します。
横線描画[drawFastHLine]
void drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color);
class Adafruit_SPITFT
void drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color);
引数
・x — 表示x座標。
・y — 表示y座標。
・w — 横線長さ。
・color — 色設定(16-bit (‘565’) color)。
(x,y) から右方向へ w の長さ線を描画します。
四角形塗りつぶし描画[fillRect]
void fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);
class Adafruit_SPITFT
void fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);
引数
・x — 表示x座標。
・y — 表示y座標。
・w — 横辺長さ。
・h — 縦辺長さ。
・color — 色設定(16-bit (‘565’) color)。
(x,y) から右方向へ w 下方向へ h の長さ分の四角形を塗りつぶし描画します。
直線描画[drawLine]
virtual void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);
class Adafruit_GFX
virtual void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);
引数
・x0 — 表示開始x座標。
・y0 — 表示開始y座標。
・x1 — 表示終了x座標。
・y1 — 表示終了y座標。
・color — 色設定(16-bit (‘565’) color)。
(x0,y0) から (x1,y1) へ 直線を描画します。
四角形描画[drawRect]
virtual void drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);
class Adafruit_GFX
virtual void drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);
引数
・x — 表示開始x座標。
・y — 表示開始y座標。
・w — 横辺長さ。
・h — 縦辺長さ。
・color — 色設定(16-bit (‘565’) color)。
(x,y) から右方向へ w 下方向へ h の長さ分の四角形を描画します。
円描画[drawCircle]
void drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);
class Adafruit_GFX
void drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);
引数
・x0 — 表示開始x座標。
・y0 — 表示開始y座標。
・r — 半径。
・color — 色設定(16-bit (‘565’) color)。
(x0,y0) を中心に半径 r の円を描画します。
円描画補助[drawCircleHelper]
※本APIを使用する場合は、「startWrite()」と「endWrite()」を使用する必要があります。
void drawCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername, uint16_t color);
class Adafruit_GFX
void drawCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername, uint16_t color);
引数
・x0 — 表示開始x座標。
・y0 — 表示開始y座標。
・r — 半径。
・cornername — コーナーを指定するマスクビット。
0x01=左上。0x02=右上。0x04=右下。0x08=左下。
・color — 色設定(16-bit (‘565’) color)。
cornername に 0x0F を指定すると、コーナー全てが描画されて円になります。
円塗りつぶし描画[fillCircle]
void fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);
class Adafruit_GFX
void fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);
引数
・x0 — 表示開始x座標。
・y0 — 表示開始y座標。
・r — 半径。
・color — 色設定(16-bit (‘565’) color)。
(x0,y0) を中心に半径 r の円を塗りつぶし描画します。
円塗りつぶし描画補助[fillCircleHelper]
※本APIを使用する場合は、「startWrite()」と「endWrite()」を使用する必要があります。
void fillCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername, int16_t delta, uint16_t color);
class Adafruit_GFX
void fillCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername, int16_t delta, uint16_t color);
引数
・x0 — 表示開始x座標。
・y0 — 表示開始y座標。
・r — 半径。
・cornername — コーナーを指定するマスクビット。
0x01=右側半分。0x02=左側半分。
・delta — 中心点からのオフセット。
・color — 色設定(16-bit (‘565’) color)。
(x0,y0) を中心に半径 r の円。
delta は下方向に指定長さ分円が伸びるイメージ。
cornername は 0x01(右側半分)と 0x02(左側半分)を指定します。
中心の縦ライン1ピクセル分空白になるため、つなげて描画する場合は別途描画する必要があります。
三角形描画[drawTriangle]
void drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);
class Adafruit_GFX
void drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);
引数
・x0 — 表示開始(頂点1)x座標。
・y0 — 表示開始(頂点1)y座標。
・x1 — 頂点2x座標。
・y1 — 頂点2y座標。
・x2 — 頂点3x座標。
・y2 — 頂点3y座標。
・color — 色設定(16-bit (‘565’) color)。
3つのx,y座標を指定して三角形を描画します。
三角形塗りつぶし描画[fillTriangle]
void fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);
class Adafruit_GFX
void fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);
引数
・x0 — 表示開始(頂点1)x座標。
・y0 — 表示開始(頂点1)y座標。
・x1 — 頂点2x座標。
・y1 — 頂点2y座標。
・x2 — 頂点3x座標。
・y2 — 頂点3y座標。
・color — 色設定(16-bit (‘565’) color)。
3つのx,y座標を指定して三角形を塗りつぶし描画します。
角丸四角形描画[drawRoundRect]
void drawRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);
class Adafruit_GFX
void drawRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);
引数
・x0 — 基点x座標。
・y0 — 基点y座標。
・w — 横幅長さ。
・h — 縦幅長さ。
・radius — 四角形の頂点を丸くする円の半径。
・color — 色設定(16-bit (‘565’) color)。
(x0,y0) を基点にして右下方向へ角丸四角形を描画します。
丸くする円の半径を radius で指定します。
角丸四角形塗りつぶし描画[fillRoundRect]
void fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);
class Adafruit_GFX
void fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);
引数
・x0 — 基点x座標。
・y0 — 基点y座標。
・w — 横幅長さ。
・h — 縦幅長さ。
・radius — 四角形の頂点を丸くする円の半径。
・color — 色設定(16-bit (‘565’) color)。
(x0,y0) を基点にして右下方向へ角丸四角形を描画します。
丸くする円の半径を radius で指定します。
文字描画 API
1文字描画[drawChar]
void drawChar(int16_t x, int16_t y, unsigned char c, uint16_t color, uint16_t bg, uint8_t size);
void drawChar(int16_t x, int16_t y, unsigned char c, uint16_t color, uint16_t bg, uint8_t size_x, uint8_t size_y);
class Adafruit_GFX
void drawChar(int16_t x, int16_t y, unsigned char c, uint16_t color, uint16_t bg, uint8_t size);
void drawChar(int16_t x, int16_t y, unsigned char c, uint16_t color, uint16_t bg, uint8_t size_x, uint8_t size_y);
引数
・x — 基点x座標。
・y — 基点y座標。
・c — 文字。
・color — 文字色。
・bg — 背景色(文字色と同じ色にすると背景色なし)。
・size — 1が標準。標準文字サイズの拡大倍数を設定する。
・(size_x) — 文字サイズ幅。1が標準。標準文字サイズ幅の拡大倍数を設定する。
・(size_y) — 文字サイズ高さ。1が標準。標準文字サイズ高さの拡大倍数を設定する。
(x,y) を基点にして右下方向へ文字を描画します。
標準文字サイズは、幅6ピクセル,高さ8ピクセル。
文字情報取得[getTextBounds]
void getTextBounds(const char *string, int16_t x, int16_t y, int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
void getTextBounds(const __FlashStringHelper *s, int16_t x, int16_t y, int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
void getTextBounds(const String &str, int16_t x, int16_t y, int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
class Adafruit_GFX
void getTextBounds(const char *string, int16_t x, int16_t y, int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
void getTextBounds(const __FlashStringHelper *s, int16_t x, int16_t y, int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
void getTextBounds(const String &str, int16_t x, int16_t y, int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
引数
・*string(*s,&str) — 文字列。
・x — 文字列表示開始x座標。
・y — 文字列表示開始y座標。
・*x1 — 描画時の左上x座標。
・*y1 — 描画時の左上y座標。
・*w — 描画時の文字列幅を返す。
・*h — 描画時の文字列高さを返す。
現在設定されているフォントとサイズで文字列を描画する時のサイズを計算してくれる関数です。
文字列とカーソル位置を渡し、描画された場合の左上座標と文字幅、文字高さを返します。
描画はされません。
文字列の中央寄せなどにも使用できそうです。
文字サイズ設定[setTextSize]
void setTextSize(uint8_t s);
void setTextSize(uint8_t sx, uint8_t sy);
class Adafruit_GFX
void setTextSize(uint8_t s);
void setTextSize(uint8_t sx, uint8_t sy);
引数
・s — 文字サイズ幅。1が標準。標準文字サイズ幅の拡大倍数を設定する。
・(sx) — 文字サイズ幅。1が標準。標準文字サイズ幅の拡大倍数を設定する。
・(sy) — 文字サイズ高さ。1が標準。標準文字サイズ高さの拡大倍数を設定する。
標準文字サイズは、幅6ピクセル,高さ8ピクセル。
文字列描画前に設定しておきます。
文字サイズ設定[setTextSize]
void setTextSize(uint8_t s);
void setTextSize(uint8_t sx, uint8_t sy);
class Adafruit_GFX
void setTextSize(uint8_t s);
void setTextSize(uint8_t sx, uint8_t sy);
引数
・s — 文字サイズ幅。1が標準。標準文字サイズ幅の拡大倍数を設定する。
・(sx) — 文字サイズ幅。1が標準。標準文字サイズ幅の拡大倍数を設定する。
・(sy) — 文字サイズ高さ。1が標準。標準文字サイズ高さの拡大倍数を設定する。
標準文字サイズは、幅6ピクセル,高さ8ピクセル。
文字列描画前に設定しておきます。
文字フォント設定[setFont]
void setFont(const GFXfont *f = NULL);
class Adafruit_GFX
void setFont(const GFXfont *f = NULL);
引数
・*f — フォント。
文字フォントを指定します。
文字列描画前に設定しておきます。
カーソル位置設定[setCursor]
void setCursor(int16_t x, int16_t y)
class Adafruit_GFX
void setCursor(int16_t x, int16_t y);
引数
・x — x座標(ピクセル単位)。
・y — y座標(ピクセル単位)。
現在のカーソル座標をピクセルで設定します。
テキスト色設定[setTextColor]
void setTextColor(uint16_t c)
void setTextColor(uint16_t c, uint16_t bg)
class Adafruit_GFX
void setTextColor(uint16_t c);
void setTextColor(uint16_t c, uint16_t bg);
引数
・c — テキスト色設定(16-bit (‘565’) color)。
・bg — 背景色設定(16-bit (‘565’) color)。
背景色を指定しない場合、またはテキスト色と背景色を同色にした場合は、背景は透明になります。
テキスト折り返し設定[setTextWrap]
void setTextWrap(bool w)
class Adafruit_GFX
void setTextWrap(bool w);
引数
・w — 折り返し設定。
true=折り返し有り。false=折り返しなし。
テキストが画面からはみ出る場合の折り返し設定をします。
状態取得 API
画面幅取得[width]
int16_t width(void)
class Adafruit_GFX
int16_t width(void);
戻り値
・画面幅。
現在の回転を考慮して画面の幅を取得します。
画面高さ取得[height]
int16_t height(void)
class Adafruit_GFX
int16_t height(void);
戻り値
・画面高さ。
現在の回転を考慮して画面の高さを取得します。
画面回転取得[getRotation]
uint8_t getRotation(void)
class Adafruit_GFX
uint8_t getRotation(void);
戻り値
・画面回転設定。
0=標準、1=時計回りに90度回転、2=時計回りに180度回転、3=時計回りに270度回転。
画面の回転設定を取得します。
カーソルx座標取得[getCursorX]
int16_t getCursorX(void)
class Adafruit_GFX
int16_t getCursorX(void);
戻り値
・カーソルx座標。
現在のカーソルx座標を取得します。
カーソルy座標取得[getCursorY]
int16_t getCursorY(void)
class Adafruit_GFX
int16_t getCursorY(void);
戻り値
・カーソルy座標。
現在のカーソルy座標を取得します。
コメント