|
||||||||||||||||||||||||||||||
| テキストのAPI | ||||||||||||||||||||||||||||||
|
テキストの描画はお馴染みの print(),println(),printf() が使えます。 M5Stackはグラフィック液晶なので X座標100、Y座標200のように座標を指定してテキストを描画することもできます。 表示位置の左側をpoX,poYで指定するAPIint16_t drawString(const char *string, int32_t poX, int32_t poY, uint8_t font) int16_t drawString(const char *string, int32_t poX, int32_t poY) int16_t drawString(const String& string, int32_t poX, int32_t poY, uint8_t font) int16_t drawString(const String& string, int32_t poX, int32_t poY)fontはゴシックなどのWidowsでいうフォントではなく文字の大きさを何倍にするかを指定します。 表示位置の中央をpoX,poYで指定するAPIint16_t drawCentreString(const char *string, int32_t dX, int32_t poY, uint8_t font) int16_t drawCentreString(const char *string, int32_t dX, int32_t poY) int16_t drawCentreString(const String& string, int32_t dX, int32_t poY, uint8_t font) int16_t drawCentreString(const String& string, int32_t dX, int32_t poY) 表示位置の右側をpoX,poYで指定するAPIint16_t drawRightString(const char *string, int32_t dX, int32_t poY, uint8_t font) int16_t drawRightString(const char *string, int32_t dX, int32_t poY) int16_t drawRightString(const String& string, int32_t dX, int32_t poY, uint8_t font) int16_t drawRightString(const String& string, int32_t dX, int32_t poY int16_t textWidth(const char *string, uint8_t font) テキストの幅と高さを取得するAPIint16_t textWidth(const char *string) int16_t textWidth(const String& string, uint8_t font) int16_t textWidth(const String& string) int16_t fontHeight(int16_t font) int16_t fontHeight(void) カーソルAPIvoid setCursor(int16_t x, int16_t y) void setCursor(int16_t x, int16_t y, uint8_t font) int16_t getCursorX() int16_t getCursorY()実際カーソルは表示されません。print()で描画する文字の開始位置をx,yで指定します。 文字色APIvoid setTextColor(uint16_t color) void setTextColor(uint16_t color, uint16_t backgroundcolor) 文字の大きさAPIvoid setTextSize(uint8_t) 画面右端で文字の折り返しAPIvoid setTextWrap(boolean wrapX, boolean wrapY = false) テキストの表示方法APIvoid setTextDatum(uint8_t datum) 引数
1文字表示APIvoid drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_t size) bgは背景(back ground) です。 これらを使ったサンプルプログラムです。
/*
*******************************************************************************
* M5Stack prototype
* date:2022/7/04
* Author Sadajejeje
*******************************************************************************
*/
#include <M5Core2.h>
const char* msg = "Hello world.";
void setup(){
M5.begin(); //Init M5Core2
//x=50, y=20の座標に2倍の大きさで文字を描画
M5.Lcd.setTextWrap(true);
M5.Lcd.drawString(msg, 50, 20, 2);
//x=160, y=50の位置をセンターにして2倍の大きさで文字を描画
M5.Lcd.drawCentreString("center string XXXXXXXXXXXX", 160, 50, 2);
//x=319, y=80の位置を右端として2倍の大きさで文字を描画
M5.Lcd.drawRightString("right string", 319, 80, 2);
//x=0, y=120の位置に文字色 青、背景色 黄色,4倍の大きさで文字を描画
M5.Lcd.drawChar(0, 120, 'A', M5.Lcd.color565(255, 0, 0), M5.Lcd.color565(255, 255, 0), 4);
//テキストの描画方法をセンターにする drawCentreStringと同じ処理となる
M5.Lcd.setTextDatum(TC_DATUM);
M5.Lcd.drawString("TC_DATUM_____________",180,140,2);
M5.Lcd.setCursor(160,160);
M5.Lcd.print("cursor is here.\n\n");
M5.Lcd.setTextWrap(true);
M5.Lcd.print("1234567890abcdefghijklmn1234567890abcdefghijklmnABCDEFGHIJK");
}
void loop(){
}
![]() よくわからなかったAPIvoid setTextPadding(uint16_t x_width) HTMLのpaddingのように想像していたのですが、違いました。例えばx=0,y=0に温度データを表示するとします。 冬場など温度が1桁,2桁になることがあります。温度が10から9になったとき、9だけ表示すると、0が残って 90になってしまいます。setTextPadding()でこの問題は解決します。setTextPadding()で符号も含めて3文字分の 長さを設定ます。9を表示する前に3文字分の領域を消去するので9だけが表示されます。
/*
*******************************************************************************
* M5Stack prototype
* date:2022/7/04
* Author Sadajejeje
*******************************************************************************
*/
#include <M5Core2.h>
void setup(){
M5.begin(); //Init M5Core2
//x=50, y=20の座標に2倍の大きさで文字を描画
M5.Lcd.drawString("12345", 0, 0, 2);
M5.Lcd.drawString("6", 0, 0, 2);
M5.Lcd.drawString("12345", 0, 100, 2);
M5.Lcd.setTextPadding(70);
M5.Lcd.drawString("6", 0, 100, 2);
}
void loop(){
}
下記のサイトに解説があります。 m5stack/m5-docs |