テキストのAPI

テキストの描画はお馴染みの
print(),println(),printf()
が使えます。
M5Stackはグラフィック液晶なので X座標100、Y座標200のように座標を指定してテキストを描画することもできます。

表示位置の左側をpoX,poYで指定するAPI
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でいうフォントではなく文字の大きさを何倍にするかを指定します。


表示位置の中央をpoX,poYで指定するAPI
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)


表示位置の右側をpoX,poYで指定するAPI
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)


テキストの幅と高さを取得するAPI
                    
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)


カーソルAPI
 
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で指定します。


文字色API
void setTextColor(uint16_t color)
void setTextColor(uint16_t color, uint16_t backgroundcolor) 


文字の大きさAPI
void setTextSize(uint8_t)


画面右端で文字の折り返しAPI
void setTextWrap(boolean wrapX, boolean wrapY = false)


テキストの表示方法API
void setTextDatum(uint8_t datum)

引数
リテラル 説明
TL_DATUM uint8_t Top left (default)
TC_DATUM uint8_t Top centre
TR_DATUM uint8_t Top right
ML_DATUM uint8_t Middle left
MC_DATUM uint8_t Middle centre
MR_DATUM uint8_t Middle right
BL_DATUM uint8_t Bottom left
BC_DATUM uint8_t Bottom centre
BR_DATUM uint8_t Bottom right

1文字表示API
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(){
}
    


よくわからなかったAPI
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