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月21日 佐藤恭一 https://kyoutan.jpn.org

# LCDへの図形描画関数一覧
#
# color16to8(color)                                # 16bitカラーから8bitカラーへ変換 (RRRGGGBB)
# color565(R, G, B)                                # 24bitカラーから16bitカラーへ変換 (RRRRRGGGGGGBBBBB)
# fillScreen(color)                                # 画面の塗りつぶし
# drawPixel(x, y, color)                           # 1pixelの点を描く
# drawLine(x1, y1, x2, y2, color)                  # 直線を描く
# drawFastVLine(x, y, height, color)               # 垂直線を描く
# drawFastHLine(x, y, width, color)                # 水平線を描く
# drawRect(x, y, width, height, color)             # 四角形を描く
# fillRect(x, y, width, height, color)             # 塗りつぶした四角形を描く
# drawRoundRect(x, y, width, height, r, color)     # 角が丸い四角形を描く
# fillRoundRect(x, y, width, height, r, color)     # 角が丸い塗りつぶした四角形を描く
# drawCircle(x, y, r, color)                       # 円を描く
# drawCircleHelper(x, y, r, cornername, color)     # 円の一部を描く cornernameでどこを描くかを指定(1~15)
# fillCircle(x, y, r, color)                       # 塗りつぶした円を描く
# fillCircleHelper(x, y, r, cornername, color, 0)  # 塗りつぶした円の一部を描く
# drawEllipse(x, y, rx, ry, color)                 # 楕円を描く
# fillEllipse(x, y, rx, ry, color)                 # 塗りつぶした楕円を描く
# drawTriangle(x1, y1, x2, y2, x3, y3, color)      # 三角形を描く
# fillTriangle(x1, y1, x2, y2, x3, y3, color)      # 塗りつぶした三角形を描く
# pushImage(x, y, width, height, data)             # 矩形の画像を描画する
#
# setPivot(0,0)         # イメージを回転させるときの中心座標を設定したり、取得する関数だけど
# getPivotX()           # ArduPyに pushRotateZoom() のような回転させる関数がないので使い道がない
# getPivotY()
#
# 役立つ資料
# 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
wait = 4
lcd = LCD()                            # LCDを初期化してバックライト点灯
color = lcd.color.BLUE                 # 色は 16bitカラー RGB565
                                       # 色の別名一覧は >>> help(lcd.color)
lcd.fillScreen(color)                  # 画面の塗りつぶし
                                       # LCDの関数など一覧は >>> help(lcd)
                                       #                    >>> dir(lcd)
color = lcd.color16to8(color)          # 16bitカラーから8bitカラーへ変換
R, G, B = 255, 255, 255
color = lcd.color565(R, G, B)          # 24bitカラーから16bitカラーへ変換


x = lcd.width // 4     # "//"は結果を整数で返す割り算
y = lcd.height // 4
color = lcd.color.WHITE
lcd.drawPixel(x, y, color)               # 1pixelの点を描く

x1 , y1 = lcd.width // 2 + 20, 20
x2 , y2 = lcd.width - 20, lcd.height // 2 - 20
lcd.drawLine(x1, y1, x2, y2, color)      # 直線を描く

x, y = lcd.width // 4, lcd.height // 2 + 20
height = lcd.height // 2 - 40
lcd.drawFastVLine(x, y, height, color)   # 垂直線を描く データ転送の都合で drawLineより高速

x, y = lcd.width // 2 + 20 , lcd.height // 4 * 3
width = lcd.width // 2 - 40
lcd.drawFastHLine(x, y, width, color)    # 水平線を描く データ転送の都合で drawLineより高速


time.sleep(wait)
lcd.fillScreen(lcd.color.BLUE)
x, y = 10, 10
width, height = lcd.width // 2 - 40, lcd.height // 2 - 40
lcd.drawRect(x, y, width, height, color)               # 四角形を描く

x = lcd.width // 2 + 20
lcd.fillRect(x, y, width, height, color)               # 塗りつぶした四角形を描く

x, y = 10, lcd.height // 2 + 20
r = 10    # 角の半径
lcd.drawRoundRect(x, y, width, height, r, color)  # 角が丸い四角形を描く

x = lcd.width // 2+ 20
lcd.fillRoundRect(x, y, width, height, r, color)  # 角が丸い塗りつぶした四角形を描く


time.sleep(wait)
lcd.fillScreen(lcd.color.BLUE)
x, y = lcd.width // 4, lcd.height // 4
r = lcd.height // 4 - 10
lcd.drawCircle(x, y, r, color)                       # 円を描く

x *= 3
cornername  = 5  # 1=左上 2=右上 3=左右上 4=右下 5=左上右下 6=右上下 7=左上右上右下 8=左下
                 # 9=左上下 10=右上左下 12=左上下右上 13=左上下右下 14=左右下右上 15=全周
lcd.drawCircleHelper(x, y, r, cornername, color)     # 円の一部を描く cornernameでどこを描くかを指定(1~15)
x, y = lcd.width // 4, y * 3

lcd.fillCircle(x, y, r, color)                       # 塗りつぶした円を描く
x *= 3
r=r//2
cornername  = 1 # 1=下 2=上 3=上下
lcd.fillCircleHelper(x, y, r, cornername, color, 0)  # 塗りつぶした円の一部を描く
                                                     # 引数が6個必要だけど、6番目の引数の用途が不明

time.sleep(wait)
lcd.fillScreen(lcd.color.BLUE)
x, y = lcd.width // 4, lcd.height // 4
rx = lcd.height // 4
ry = rx // 2
lcd.drawEllipse(x, y, rx, ry, color)              # 楕円を描く

x *= 3
lcd.fillEllipse(x, y, rx, ry, color)              # 塗りつぶした楕円を描く

x1, y1 = 20, lcd.height - 20
x2, y2 = lcd.width // 3, lcd.height // 2 + 20
x3, y3 = lcd.width // 2 -20, lcd.height // 4 * 3
lcd.drawTriangle(x1, y1, x2, y2, x3, y3, color)   # 三角形を描く

x1 += lcd.width //2
x2 += lcd.width //2
x3 += lcd.width //2
lcd.fillTriangle(x1, y1, x2, y2, x3, y3, color)   # 塗りつぶした三角形を描く

import random
time.sleep(wait)
lcd.fillScreen(lcd.color.BLUE)
data = bytes([
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xE0, 0xFF, 0xFF, 0xE0, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xFF, 0xFF, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xFF, 0xFF, 0x00, 0x00, 0x00,
  0x00, 0x00, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x1C, 0x1C, 0x1C, 0x1C, 0xFF, 0xFF, 0x1C, 0x1C, 0x1C, 0x1C, 0x00, 0x00, 0x00
])
width, height = 16, 16
for count in range(500):
  x = random.randrange(lcd.width - 16)
  y = random.randrange(lcd.height - 16)
  lcd.pushImage(x, y, width, height, data)   # 矩形の画像を描画する
                                             # dataは 8bitカラー

"""
transparent = 0x00
for count in range(200):
  x = random.randrange(lcd.width - 16)
  y = random.randrange(lcd.height // 2, lcd.height - 16)
  lcd.pushImage(x, y, width, height, data, transparent)    # 透明色の指定はできなかった
"""

"""
lcd.setPivot(0,0)         # イメージを回転させるときの中心座標を設定したり、取得する関数だけど
PivotX = lcd.getPivotX()  # ArduPyに pushRotateZoom() のような回転させる関数がないので使い道がない
PivotY = lcd.getPivotY()
"""

"""
>>> from machine import LCD
>>> lcd = LCD()
>>> help(lcd)
object <LCD> is of type LCD
  deinit -- <function>
  __enter__ -- <function>
  __exit__ -- <function>
G  fillScreen -- <function>
TG  setRotation -- <function>
TG  getRotation -- <function>
TG  invertDisplay -- <function>
T  drawRightString -- <function>
T  drawChar -- <function>
T  drawString -- <function>
T  drawCentreString -- <function>
T  setTextFont -- <function>
G  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>
G  drawLine -- <function>
G  drawFastVLine -- <function>
G  drawFastHLine -- <function>
G  drawRect -- <function>
G  fillRect -- <function>
G  drawRoundRect -- <function>
G  fillRoundRect -- <function>
G  drawCircle -- <function>
G  drawCircleHelper -- <function>
G  fillCircle -- <function>
G  fillCircleHelper -- <function>
G  drawEllipse -- <function>
G  fillEllipse -- <function>
G  drawTriangle -- <function>
G  fillTriangle -- <function>
T  getCursorX -- <function>
T  getCursorY -- <function>
G  getPivotX -- <function>
G  getPivotY -- <function>
TG  color16to8 -- <function>
TG  color565 -- <function>
G  getPivotX -- <function>
T  setCursor -- <function>
G  setPivot -- <function>
G  pushImage -- <function>
TG  color -- <class 'color'>
T  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
>>>
"""


点と直線の描画

x = lcd.width // 4     # "//"は結果を整数で返す割り算
y = lcd.height // 4
color = lcd.color.WHITE
lcd.drawPixel(x, y, color)               # 1pixelの点を描く

x1 , y1 = lcd.width // 2 + 20, 20
x2 , y2 = lcd.width - 20, lcd.height // 2 - 20
lcd.drawLine(x1, y1, x2, y2, color)      # 直線を描く

x, y = lcd.width // 4, lcd.height // 2 + 20
height = lcd.height // 2 - 40
lcd.drawFastVLine(x, y, height, color)   # 垂直線を描く データ転送の都合で drawLineより高速

x, y = lcd.width // 2 + 20 , lcd.height // 4 * 3
width = lcd.width // 2 - 40
lcd.drawFastHLine(x, y, width, color)    # 水平線を描く データ転送の都合で drawLineより高速


四角形の描画

x, y = 10, 10
width, height = lcd.width // 2 - 40, lcd.height // 2 - 40
lcd.drawRect(x, y, width, height, color)               # 四角形を描く

x = lcd.width // 2 + 20
lcd.fillRect(x, y, width, height, color)               # 塗りつぶした四角形を描く

x, y = 10, lcd.height // 2 + 20
r = 10    # 角の半径
lcd.drawRoundRect(x, y, width, height, r, color)  # 角が丸い四角形を描く

x = lcd.width // 2+ 20
lcd.fillRoundRect(x, y, width, height, r, color)  # 角が丸い塗りつぶした四角形を描く


円の描画

x, y = lcd.width // 4, lcd.height // 4
r = lcd.height // 4 - 10
lcd.drawCircle(x, y, r, color)                       # 円を描く

x *= 3
cornername  = 5  # 1=左上 2=右上 3=左右上 4=右下 5=左上右下 6=右上下 7=左上右上右下 8=左下
                 # 9=左上下 10=右上左下 12=左上下右上 13=左上下右下 14=左右下右上 15=全周
lcd.drawCircleHelper(x, y, r, cornername, color)     # 円の一部を描く cornernameでどこを描くかを指定(1~15)
x, y = lcd.width // 4, y * 3

lcd.fillCircle(x, y, r, color)                       # 塗りつぶした円を描く
x *= 3
r=r//2
cornername  = 1 # 1=下 2=上 3=上下
lcd.fillCircleHelper(x, y, r, cornername, color, 0)  # 塗りつぶした円の一部を描く
                                                     # 引数が6個必要だけど、6番目の引数の用途が不明


楕円と三角形の描画

x, y = lcd.width // 4, lcd.height // 4
rx = lcd.height // 4
ry = rx // 2
lcd.drawEllipse(x, y, rx, ry, color)              # 楕円を描く

x *= 3
lcd.fillEllipse(x, y, rx, ry, color)              # 塗りつぶした楕円を描く

x1, y1 = 20, lcd.height - 20
x2, y2 = lcd.width // 3, lcd.height // 2 + 20
x3, y3 = lcd.width // 2 -20, lcd.height // 4 * 3
lcd.drawTriangle(x1, y1, x2, y2, x3, y3, color)   # 三角形を描く

x1 += lcd.width //2
x2 += lcd.width //2
x3 += lcd.width //2
lcd.fillTriangle(x1, y1, x2, y2, x3, y3, color)   # 塗りつぶした三角形を描く


矩形画像の描画

data = bytes([
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xE0, 0xFF, 0xFF, 0xE0, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xFF, 0xFF, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xFF, 0xFF, 0x00, 0x00, 0x00,
  0x00, 0x00, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0xE0, 0xE0, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0xE0, 0xE0, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0xE0, 0xFF, 0xFF, 0xE0, 0xE0, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x00, 0x00, 0x00, 0x1C, 0x1C, 0x1C, 0x1C, 0xFF, 0xFF, 0x1C, 0x1C, 0x1C, 0x1C, 0x00, 0x00, 0x00
])
width, height = 16, 16
for count in range(500):
  x = random.randrange(lcd.width - 16)
  y = random.randrange(lcd.height - 16)
  lcd.pushImage(x, y, width, height, data)   # 矩形の画像を描画する
                                             # dataは 8bitカラー


MicroPythonで使うWio Terminal - 目次


このブログの人気の投稿

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

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

X68000実機のROMを保存