MicroPythonで使うWio Terminal - LCD 文字表示

MicroPythonで使うWio Terminal - 目次

Wio Terminalの ArduPyで使える、LCD描画関数の利用例と実行結果一覧を作りました。

サンプルコード全体。コピペして実行してみてください。

# Wio Terminal 液晶画面表示のサンプル
# This code is provided under a CC0 Public Domain License.
# http://creativecommons.org/publicdomain/zero/1.0/
# 2022年5月20日 佐藤恭一 https://kyoutan.jpn.org

# LCDへの文字表示関数一覧
#
# drawString("文字列", x, y[, font])        文字列表示
# drawRightString("文字列", x, y[, font])   文字列の右上を原点に表示
# drawCentreString("文字列", x, y[, font])  文字列の中心を原点に表示
# drawNumber(整数, x, y[, font])            整数の表示
# drawFloat(小数, 桁数, x, y[, font])       小数の表示 小数点以下何桁で表示するか指定する
# drawChar(code, x, y[, font])              一文字表示
#                                           font は 1, 2, 4, 6, 7, 8 が選べる (初期値 1)
#                                           表示関数では、フォントの指定は省略できる
#
# setTextPadding(width)            文字背景の幅を設定する
# textWidth("文字列")              文字列の幅 (pixel) を求める
# setTextSize(magnification)       文字サイズ(倍率)の設定
# setTextDatum(Datum)              文字位置を指定する原点の設定 0~11 (初期値 0)
# getTextDatum()                   現在のDatumを取得する
# setTextFont(font)                フォント指定省略時のフォントを設定する
# fontHeight(0)                    現在設定されているフォントの高さ (pixel) を取得する
# setTextColor(color[, bgcolor])   文字色の設定 背景色は省略できる
# color565(R, G, B)                R,G,B 24bitカラーから16bitカラーへ変換
# fillScreen(color)                画面の塗りつぶし
# setRotation(Direction)           描画方向の設定(画面の回転) 0~7 (初期値 3)
# getRotation()                    現在の描画方向を取得する
# invertDisplay(bool)              画面の色を反転する。表示内容は消えない。 True=反転 False=非反転
# width                            画面幅 (pixel)
# height                           画面高さ (pixel)
#
# setCursor(x, y)      カーソル位置の設定       ArduPyに lcd.print()が無いので意味無し?
# getCursorX()         現在のカーソル位置を得る ArduPyに lcd.print()が無いので意味無し?
# getCursorY()         現在のカーソル位置を得る ArduPyに lcd.print()が無いので意味無し?
# setTextWrap(True)    長い文字列を画面の端で折り返すかの設定だけど効果が無いみたい。ArduPyに lcd.print()が無いからかも
# drawString("TextWrap TextWrap TextWrap TextWrap", x, y, font)
# バックライトは GPIOの 72番で on / off できるようなんだけど、BACKLIGHT = Pin(72, Pin.OUT) で invalid pin エラーになる
# バックライト制御は seeed-ardupy-WTbacklightライブラリを使う必要があるみたい
#
# 役立つ資料
# ArduPy Get Started https://wiki.seeedstudio.com/ArduPy/#pin-and-gpio
# ArduPyのソースコード https://github.com/Seeed-Studio/ArduPy
# Wio Terminal (Arduino) https://wiki.seeedstudio.com/Wio-Terminal-Getting-Started/
# Arduinoのライブラリとサンプルスケッチ C:\Users\<USER>\AppData\Local\Arduino15\packages\Seeeduino\hardware\samd\1.8.2\libraries
# MicroPython ドキュメンテーション https://micropython-docs-ja.readthedocs.io/ja/latest/index.html
# Python チュートリアル https://docs.python.org/ja/3/tutorial/index.html
# Python 言語リファレンス https://docs.python.org/ja/3/reference/index.html
# ArduinoのTFT_eSPIを呼び出すようになっているので、関数の引数がわからない時は TFT_eSPIを見ると良い
# TFT_eSPI https://github.com/Bodmer/TFT_eSPI
# M5StickCと同じくTFT_eSPI ライブラリが使われている様子 https://lang-ship.com/reference/M5StickC/latest/class_t_f_t__e_s_p_i.html

import time
from machine import LCD

lcd = LCD()                            # LCDを初期化してバックライト点灯
color = lcd.color.BLACK                # 色は 16bitカラー RGB565
                                       # 色の別名一覧は >>> help(lcd.color)
lcd.fillScreen(color)                  # 画面の塗りつぶし
                                       # LCDの関数など一覧は >>> help(lcd)
                                       #                    >>> dir(lcd)


# いろいろなフォント
wait = 4
x, y = 0, 0
lcd.drawString("Font test テスト", x, y)  # 日本語は表示できない

y += lcd.fontHeight(0)                    # fontHeightで現在設定されているフォントの高さを得られる。引数が何なのか不明
                                          # 引数に何を指定しても結果は変わらないようにみえる
lcd.drawString("0123456789", x, y)

y += lcd.fontHeight(0)
font = 1                                         # Font 1は 6x8ドットフォント
lcd.drawString("Font 1 0123456789", x, y, font)  
y += 8
font = 2                                         # Font 2は 16ドットフォント
lcd.drawString("Font 2 0123456789", x, y, font)  
y += 16
font = 4                                         # Font 4は 26ドットフォント
color, bgcolor = lcd.color.BLACK, lcd.color.GREEN
lcd.setTextColor(color, bgcolor)                 # 文字色の設定 文字色, 背景色
lcd.drawString("Font 4 01234", x, y, font)  
y += 26
font = 6                                         # Font 6は数字だけ表示 48ドットフォント
color, bgcolor = lcd.color.WHITE, lcd.color.BLUE
lcd.setTextColor(color, bgcolor)
lcd.drawString("Font 6 01234", x, y, font)  
y += 48
font = 7                                         # Font 7は 7セグ風フォント 数字だけ表示 48ドット
color = lcd.color.GREEN
bgcolor = lcd.color565(100, 100, 100)            # color565で24bitカラーから16bitカラーへ変換できる
lcd.setTextColor(color, bgcolor)
lcd.drawString("7 01234", x, y, font)  
y += 48
font = 8                                         # Font 8は数字だけ表示 高さ75ドットくらい Font 8が最大
color, bgcolor = lcd.color565(255, 120, 100), lcd.color.GREEN
lcd.setTextColor(color, bgcolor)
lcd.drawString("8 0123", x, y, font)  
                                                 # Font 0, 3, 5は表示されない


# setTextSize(倍率)  文字サイズの設定
time.sleep(wait)
color, bgcolor = lcd.color.WHITE, lcd.color.BLACK
lcd.setTextColor(color)
lcd.fillScreen(bgcolor)
x, y = 3, 1
font = 0
lcd.setTextFont(font)                  # フォント指定省略時のフォントを設定する
lcd.drawString("Font0 0123", x, y)     # フォントの指定は省略できる
y+=lcd.fontHeight(0)
lcd.setTextSize(2)                     # 文字サイズの設定 2倍になる
lcd.drawString("Font0 0123", x, y)
y+=lcd.fontHeight(0)                   # fontHeightは setTextSizeの倍率も反映される
lcd.setTextFont(2)
lcd.setTextSize(1)                     # 文字サイズの設定 1倍になる
lcd.drawString("Font2 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextSize(2)                     # 文字サイズの設定 2倍になる
lcd.drawString("Font2 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextSize(3)                     # 文字サイズの設定 3倍になる
lcd.drawString("Font2 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextFont(4)
lcd.setTextSize(1)      
lcd.drawString("Font4 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextSize(2)      
lcd.drawString("Font4 0123", x, y)


# setRotation(方向) 描画方向の設定(画面の回転)
time.sleep(wait)
lcd.fillScreen(lcd.color.BLACK)
lcd.setTextSize(1)
x, y = 0, 0
lcd.setTextFont(4)
lcd.setRotation(0)                          # 描画方向の設定(画面の回転) 0~7
                                            # 方向の設定を変えても表示内容は保持する
lcd.drawString("Rotation(0) 0123", x, y)
lcd.setRotation(1)
lcd.drawString("Rotation(1) 0123", x, y)
lcd.setRotation(2)
lcd.drawString("Rotation(2) 0123", x, y)
lcd.setRotation(3)
lcd.drawString("Rotation(3) 0123", x, y)
y += lcd.fontHeight(0)
x += lcd.fontHeight(0)
lcd.setRotation(4)                          # 鏡像にもできる
lcd.drawString("Rotation(4) 01", x, y)
lcd.setRotation(5)
lcd.drawString("Rotation(5) 01", x, y)
lcd.setRotation(6)
lcd.drawString("Rotation(6) 01", x, y)
lcd.setRotation(7)
lcd.drawString("Rotation(7) 01", x, y)
lcd.setRotation(3)                          # 描画方向を元に戻す
rotation = lcd.getRotation()                # getRotation()で現在のRotationを取得できる
x, y = lcd.width // 2, lcd.height // 2      # heightと widthで画面サイズを取得できる
                                            # "//"は結果を整数で返す割り算
lcd.setTextDatum(lcd.datum.CC_DATUM)               # 文字位置を指定する原点の設定 CC_DATUM(中央)を指定して
lcd.drawString("Rotation " + str(rotation), x, y)  # 画面中央の座標に文字を表示すると、ど真ん中に表示される
                                                   # +-----+
                                                   # |0 1 2| 左上から 012...
                                                   # |3 4 5| >>> help(lcd.datum) で CC_DATUMなど別名の一覧
                                                   # |6 7 8|
                                                   # +-----+

datum = lcd.getTextDatum()                         # getTextDatum()で現在のDatumを取得できる
y += lcd.fontHeight(0)
lcd.drawString("Datum " + str(datum), x, y)
lcd.setTextDatum(lcd.datum.TL_DATUM)               # 原点を左上に戻す

time.sleep(wait)
lcd.invertDisplay(True)   # 画面の色を反転する。表示内容は消えない。
time.sleep(wait)
lcd.invertDisplay(False)  # 色反転を元に戻す


# 文字表示関数いろいろ fontは省略できる
lcd.fillScreen(lcd.color.BLACK)
x, y = lcd.width // 2, 0
font = 4
lcd.drawChar(ord("a"), x, y, font)               # 一文字表示
y += lcd.fontHeight(0)
lcd.drawString("drawString", x, y, font)         # 文字列の左上を原点に表示
y += lcd.fontHeight(0)
lcd.drawRightString("RightString", x, y, font)   # 文字列の右上を原点に表示
y += lcd.fontHeight(0)
lcd.drawCentreString("CentreString", x, y, font) # 文字列の中心を原点に表示
y += lcd.fontHeight(0)
lcd.setTextColor(lcd.color.WHITE, lcd.color.BLUE)
lcd.setTextPadding(280)                              # TextPaddingは文字背景の幅を設定する
                                                     # 文字列の幅より大きい値にしないと効果は見えない
lcd.drawCentreString("TextPadding 280", x, y, font)
lcd.setTextPadding(0)                                # TextPaddingの初期値 0に戻す
y += lcd.fontHeight(0) + 2
lcd.setTextColor(lcd.color.WHITE, lcd.color.BLACK)
text = "abcde"
textWidth = lcd.textWidth(text)               # textWidth 文字列の幅 (pixel) を求める
lcd.drawCentreString(text + " textWidth " + str(textWidth), x, y, font)
y += lcd.fontHeight(0)
lcd.setTextPadding(140)
lcd.setTextColor(lcd.color.WHITE, lcd.color.RED)
i = 123
lcd.drawNumber(i, x, y, font)                  # 整数の表示
y += lcd.fontHeight(0)
f = 123.45
decimalPlaces = 3                              # 小数点以下の桁数
lcd.drawFloat(f, decimalPlaces, x, y, font)    # 小数の表示

lcd.drawFastVLine(x, 0, lcd.height, lcd.color.RED)  # 基準位置に線を引く

"""
>>> from machine import LCD
>>> lcd = LCD()
>>> help(lcd)
object <LCD> is of type LCD
  deinit -- <function>
  __enter__ -- <function>
  __exit__ -- <function>
T  fillScreen -- <function>
T  setRotation -- <function>
T  getRotation -- <function>
T  invertDisplay -- <function>
T  drawRightString -- <function>
T  drawChar -- <function>
T  drawString -- <function>
T  drawCentreString -- <function>
T  setTextFont -- <function>
  drawPixel -- <function>
T  fontHeight -- <function>
T  textWidth -- <function>
T  drawNumber -- <function>
T  drawFloat -- <function>
T  setTextColor -- <function>
T  setTextSize -- <function>
T  setTextWrap -- <function>
T  setTextDatum -- <function>
T  getTextDatum -- <function>
T  setTextPadding -- <function>
  drawLine -- <function>
  drawFastVLine -- <function>
  drawFastHLine -- <function>
  drawRect -- <function>
  fillRect -- <function>
  drawRoundRect -- <function>
  fillRoundRect -- <function>
  drawCircle -- <function>
  drawCircleHelper -- <function>
  fillCircle -- <function>
  fillCircleHelper -- <function>
  drawEllipse -- <function>
  fillEllipse -- <function>
  drawTriangle -- <function>
  fillTriangle -- <function>
T  getCursorX -- <function>
T  getCursorY -- <function>
  getPivotX -- <function>
  getPivotY -- <function>
  color16to8 -- <function>
TG  color565 -- <function>
  getPivotX -- <function>
T  setCursor -- <function>
  setPivot -- <function>
  pushImage -- <function>
  color -- <class 'color'>
  datum -- <class 'datum'>
>>>

>>> help(lcd.color)
object <class 'color'> is of type type
  BLACK -- 0
  NAVY -- 15
  DARKGREEN -- 992
  DARKCYAN -- 1007
  MAROON -- 30720
  PURPLE -- 30735
  OLIVE -- 31712
  LIGHTGREY -- 50712
  DARKGREY -- 31727
  BLUE -- 31
  GREEN -- 2016
  CYAN -- 2047
  RED -- 63488
  MAGENTA -- 63519
  YELLOW -- 65504
  WHITE -- 65535
  ORANGE -- 64928
  GREENYELLOW -- 47072
  BLACK -- 0
  PINK -- 64671

>>> help(lcd.datum)
object <class 'datum'> is of type type
  TL_DATUM -- 0
  TC_DATUM -- 1
  TR_DATUM -- 2
  ML_DATUM -- 3
  CL_DATUM -- 3
  MC_DATUM -- 4
  CC_DATUM -- 4
  MR_DATUM -- 5
  CR_DATUM -- 5
  BL_DATUM -- 6
  BC_DATUM -- 7
  BR_DATUM -- 8
  L_BASELINE -- 9
  C_BASELINE -- 10
  R_BASELINE -- 11
>>>
"""

"""
from machine import Pin, Map
LED = Pin(Map.LED_BUILTIN, Pin.OUT)


while True:
    LED.on()
    time.sleep(1)
    LED.off()
    time.sleep(1)
"""    


いろいろなフォント

lcd.drawString("Font test テスト", x, y)  # 日本語は表示できない
y += lcd.fontHeight(0)                    # fontHeightで現在設定されているフォントの高さを得られる。引数が何なのか不明
                                          # 引数に何を指定しても結果は変わらないようにみえる
lcd.drawString("0123456789", x, y)

y += lcd.fontHeight(0)
font = 1                                         # Font 1は 6x8ドットフォント
lcd.drawString("Font 1 0123456789", x, y, font)  
y += 8
font = 2                                         # Font 2は 16ドットフォント
lcd.drawString("Font 2 0123456789", x, y, font)  
y += 16
font = 4                                         # Font 4は 26ドットフォント
color, bgcolor = lcd.color.BLACK, lcd.color.GREEN
lcd.setTextColor(color, bgcolor)                 # 文字色の設定 文字色, 背景色
lcd.drawString("Font 4 01234", x, y, font)  
y += 26
font = 6                                         # Font 6は数字だけ表示 48ドットフォント
color, bgcolor = lcd.color.WHITE, lcd.color.BLUE
lcd.setTextColor(color, bgcolor)
lcd.drawString("Font 6 01234", x, y, font)  
y += 48
font = 7                                         # Font 7は 7セグ風フォント 数字だけ表示 48ドット
color = lcd.color.GREEN
bgcolor = lcd.color565(100, 100, 100)            # color565で24bitカラーから16bitカラーへ変換できる
lcd.setTextColor(color, bgcolor)
lcd.drawString("7 01234", x, y, font)  
y += 48
font = 8                                         # Font 8は数字だけ表示 高さ75ドットくらい Font 8が最大
color, bgcolor = lcd.color565(255, 120, 100), lcd.color.GREEN
lcd.setTextColor(color, bgcolor)
lcd.drawString("8 0123", x, y, font)  
                                                 # Font 0, 3, 5は表示されない


フォントサイズ

font = 0
lcd.setTextFont(font)                  # フォント指定省略時のフォントを設定する
lcd.drawString("Font0 0123", x, y)     # フォントの指定は省略できる
y+=lcd.fontHeight(0)
lcd.setTextSize(2)                     # 文字サイズの設定 2倍になる
lcd.drawString("Font0 0123", x, y)
y+=lcd.fontHeight(0)                   # fontHeightは setTextSizeの倍率も反映される
lcd.setTextFont(2)
lcd.setTextSize(1)                     # 文字サイズの設定 1倍になる
lcd.drawString("Font2 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextSize(2)                     # 文字サイズの設定 2倍になる
lcd.drawString("Font2 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextSize(3)                     # 文字サイズの設定 3倍になる
lcd.drawString("Font2 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextFont(4)
lcd.setTextSize(1)      
lcd.drawString("Font4 0123", x, y)
y+=lcd.fontHeight(0)
lcd.setTextSize(2)      
lcd.drawString("Font4 0123", x, y)


描画方向の設定(画面の回転)

lcd.setRotation(0)                          # 描画方向の設定(画面の回転) 0~7
                                            # 方向の設定を変えても表示内容は保持する
lcd.drawString("Rotation(0) 0123", x, y)
lcd.setRotation(1)
lcd.drawString("Rotation(1) 0123", x, y)
lcd.setRotation(2)
lcd.drawString("Rotation(2) 0123", x, y)
lcd.setRotation(3)
lcd.drawString("Rotation(3) 0123", x, y)
y += lcd.fontHeight(0)
x += lcd.fontHeight(0)
lcd.setRotation(4)                          # 鏡像にもできる
lcd.drawString("Rotation(4) 01", x, y)
lcd.setRotation(5)
lcd.drawString("Rotation(5) 01", x, y)
lcd.setRotation(6)
lcd.drawString("Rotation(6) 01", x, y)
lcd.setRotation(7)
lcd.drawString("Rotation(7) 01", x, y)
lcd.setRotation(3)                          # 描画方向を元に戻す
rotation = lcd.getRotation()                # getRotation()で現在のRotationを取得できる
x, y = lcd.width // 2, lcd.height // 2      # heightと widthで画面サイズを取得できる
                                            # "//"は結果を整数で返す割り算
lcd.setTextDatum(lcd.datum.CC_DATUM)               # 文字位置を指定する原点の設定 CC_DATUM(中央)を指定して
lcd.drawString("Rotation " + str(rotation), x, y)  # 画面中央の座標に文字を表示すると、ど真ん中に表示される
                                                   # +-----+
                                                   # |0 1 2| 左上から 012...
                                                   # |3 4 5| >>> help(lcd.datum) で CC_DATUMなど別名の一覧
                                                   # |6 7 8|
                                                   # +-----+

datum = lcd.getTextDatum()                         # getTextDatum()で現在のDatumを取得できる
y += lcd.fontHeight(0)
lcd.drawString("Datum " + str(datum), x, y)
lcd.setTextDatum(lcd.datum.TL_DATUM)               # 原点を左上に戻す


画面の色反転

lcd.invertDisplay(True)   # 画面の色を反転する。表示内容は消えない。
time.sleep(wait)
lcd.invertDisplay(False)  # 色反転を元に戻す


文字表示いろいろ

font = 4
lcd.drawChar(ord("a"), x, y, font)               # 一文字表示
y += lcd.fontHeight(0)
lcd.drawString("drawString", x, y, font)         # 文字列の左上を原点に表示
y += lcd.fontHeight(0)
lcd.drawRightString("RightString", x, y, font)   # 文字列の右上を原点に表示
y += lcd.fontHeight(0)
lcd.drawCentreString("CentreString", x, y, font) # 文字列の中心を原点に表示
y += lcd.fontHeight(0)
lcd.setTextColor(lcd.color.WHITE, lcd.color.BLUE)
lcd.setTextPadding(280)                              # TextPaddingは文字背景の幅を設定する
                                                     # 文字列の幅より大きい値にしないと効果は見えない
lcd.drawCentreString("TextPadding 280", x, y, font)
lcd.setTextPadding(0)                                # TextPaddingの初期値 0に戻す
y += lcd.fontHeight(0) + 2
lcd.setTextColor(lcd.color.WHITE, lcd.color.BLACK)
text = "abcde"
textWidth = lcd.textWidth(text)               # textWidth 文字列の幅 (pixel) を求める
lcd.drawCentreString(text + " textWidth " + str(textWidth), x, y, font)
y += lcd.fontHeight(0)
lcd.setTextPadding(140)
lcd.setTextColor(lcd.color.WHITE, lcd.color.RED)
i = 123
lcd.drawNumber(i, x, y, font)                  # 整数の表示
y += lcd.fontHeight(0)
f = 123.45
decimalPlaces = 3                              # 小数点以下の桁数
lcd.drawFloat(f, decimalPlaces, x, y, font)    # 小数の表示


関数の使い方をすぐに忘れるので、関数の使い方と表示例の一覧を作りました。


MicroPythonで使うWio Terminal - 目次

このブログの人気の投稿

windowsで「インターネット接続の共有」の設定

月刊 I/O 記事リスト 1976~1989

X68000実機のROMを保存