Python-LEGO MindstormsでLCDのスクリーンショットを撮る

LEGO Mindstorms EV3(以降EV3)を使った記事など書く際に、画像を差し込むことがある。EV3をBluetooth接続する際など状況を説明するのにEV3の画面の表示を用いて説明したい時もあるだろう。今回はそうしたEV3のLCD画面のスクリーンショットの撮影方法を記していく。

## EV3について
教育版 [LEGO® MINDSTORMS EV3](https://afrel.co.jp/product/ev3-introduction)


## 本記事内での環境  
* PC
Windows10
Python 3.7.3
開発環境 VisualStudioCode  

* EV3
ev3dev
[APIリファレンス](https://ev3dev-lang.readthedocs.io/projects/python-ev3dev/en/stable/spec.html)

※環境構築やVSCodeでのソース作成やEV3への転送・実行方法は以下を参照
　[EV3×Pyrhon　機械学習その1　環境構築編](https://qiita.com/Hiroki-Fujimoto/items/6ce278411ca151fee750)
　スクリーンショットを撮影するにはVSCodeが必須なので注意。

## 無線での接続~撮影
まずはEV3とPCをBluetooth接続する。
接続方法は[こちら](https://qiita.com/Hiroki-Fujimoto/items/6ce278411ca151fee750#pc%E3%81%A8ev3%E3%81%AEbluetooth%E6%8E%A5%E7%B6%9A)を参照。

その後VSCodeのev3dev拡張機能よりEV3にアクセスする。  
<img width="700" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/81168873-d9d5-e437-a7d7-cd25e1153c41.png">
アクセスが完了すると緑の丸が表示される。
アクセスしているEV3名の上で左クリックをするとメニューが表示されるので`Take Screenshot`を選択。
<img width="400" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/2f85368b-c3c6-e40e-0d8f-9be744de55a4.png">

すると撮影結果のウィンドウがVSCode上に表示される。
ウィンドウ上部にPNG画像が格納されているフォルダーのパスが表示される。
<img width="700" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/e01c9723-0bf6-a399-38ec-e90de8f66453.png">
※このフォルダーはVSCodeの一時ファイルなのでVSCodeを閉じると消えることに注意！
　VSCodeを閉じる前にPNG画像を移動するなどバックアップを取る必要がある。

実際のPNGファイルは以下のように出力される。
LCDの白黒画面とは変わって、選択している箇所は青色で表示される。
<img width="200" alt="3-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/a3e8fb7c-b508-0dc4-8db9-9a02801d3702.png">

## 有線での接続~撮影
Bluetooth接続時の手順解説の際など、無線接続前の状態のLCD画面を撮影したい場合
EV3とPCをUSBケーブルで接続することで同じようにVSCodeからアクセスすことができる。

まずはEV3とPCをUSBケーブルを用いて接続する。Bluetooth接続時のような設定は特に不要。
<img width="500" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/30dad8e1-dce6-0f3c-6758-f4ec2d705cd9.png">
その後、VSCodeのev3devよりEV3にアクセスする。
Bluetooth時には`Bluetooth ネットワーク接続`となっていた表記がUSB接続時は`イーサネット 7`の表記になっている。
<img width="700" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/1feea14c-e827-5df4-0853-08462ceac15e.png">

同じようにアクセスしているEV3名の上で左クリックし、メニューから`Take Screenshot`を選択することでUSB接続時のLCD画面のスクリーンショットが撮影できる。
<img width="800" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/a8ae3914-cce3-37b7-d528-5e1e1744820a.png">

実際のPNGファイルは以下のように出力される。
<img width="200" alt="5-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/f7f74fdb-4274-656d-7ab7-5d551c326217.png">

## プログラム実行時のLCD画面撮影
上記2つの手順をプログラム実行時に行えば、LCDに表示させている文字なども撮影可能である。

今回は以下のようなプログラムをVSCode上で作成し、EV3で実行した際のLCD画面の撮影を行う。
プログラムの作成方法や転送方法は[こちら](https://qiita.com/Hiroki-Fujimoto/items/6ce278411ca151fee750#%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E4%BD%9C%E6%88%90)を参照。

~~~ display.py
from ev3dev2.display import Display
import ev3dev2.fonts as fonts
import time

screen = Display()
screen.clear()
font = fonts.load('luBS12')

def main():
    screen.draw.text((10, 10), 'Test1 Display String!', font=font)
    screen.draw.text((10, 30), 'Test2!', font=font)
    screen.update()
    time.sleep(5.0)
    screen.clear()

if __name__ == "__main__":
    main()
~~~

プログラムを作成したらVSCode上で以下のマークをクリックしてEV3にWorkspaceを転送する。
<img width="200" alt="5-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/d48dddee-aefb-c337-763e-b59fb354cd25.png">

転送後、SSHターミナルを開き、`cd ev3workspace/`(cd ワークスペース名/)を実行し
`python3 display.py`を実行する。
<img width="400" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/ad6cfce9-99cf-20b7-3963-d97328daf169.png">
<img width="600" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/b26a1e8f-843d-1e5e-b6a6-54e3feed687f.png">

プログラムが実行されたら5秒間LCD画面に文字列が表示されるのでその間に`Take Screenshot`を選択する。
<img width="500" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/680db018-d1d4-7f0b-9376-c7c83ab7e125.png">

プログラムによってLCD画面に文字列が表示されている状態のスクリーンショットが撮影される。
<img width="800" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/b623b128-06fa-15f3-9076-d092b5e13194.png">

実際のPNGファイルは以下のように出力される。
プログラム実行時の背景は黄色で表示される。
<img width="200" alt="9-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/3b77afe6-d0c3-749c-3b4a-83b236b0ca04.png">