テキストのAPI | ||||||||||||||||||||||||||||||
テキストの描画はお馴染みの print(),println(),printf() が使えます。 M5Stackはグラフィック液晶なので X座標100、Y座標200のように座標を指定してテキストを描画することもできます。 int16_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でいうフォントではなく文字の大きさを何倍にするかを指定します。 int16_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) int16_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) int16_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) void 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で指定します。 void setTextColor(uint16_t color) void setTextColor(uint16_t color, uint16_t backgroundcolor) void setTextSize(uint8_t) void setTextWrap(boolean wrapX, boolean wrapY = false) void setTextDatum(uint8_t datum) 引数
void 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(){ } void 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 |