Wio Terminal の光センサーの値を画面上にグラフで表示してみた

## はじめに

5月の中旬に入手していたものの、あまり触れていなかった Wio Terminal（当時、1つか2つサンプルを動かしていたくらい）。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昼の買い出しに行った帰り道、<br>立ち寄ったコンビニで。 <a href="https://t.co/cwDVdSHGMW">pic.twitter.com/cwDVdSHGMW</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1261875735129493505?ref_src=twsrc%5Etfw">May 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

それをあらためて試し始めました。
今回の内容は公式サンプルを元にした簡単なものですが、やった内容のメモを兼ねて記事にしようと思います。

ちなみに、自分が購入したのは以下のマルツのオンラインショップでした。
　●Wio Terminal 102991299｜電子部品・半導体通販のマルツ
　　https://www.marutsu.co.jp/pc/i/1633550/

## Wio Terminal について
日本語版の公式のWiki の説明の一部を抜粋してみます。
> 「Wio Terminalは、Realtek RTL8720DNによる無線接続を備えたSAMD51ベースのマイクロコントローラで、ArduinoとMicroPythonによる開発をサポートしています。」
>
>「[Wio Terminalをはじめよう - Seeedウィキ（日本語版）](https://wiki.seeedstudio.com/jp/Wio-Terminal-Getting-Started/)」より抜粋

無線機能は「Dual Band Wi-Fi（2.4Ghz/5Ghz、802.11 a/b/g/n）と BLE 5.0」の2種類を利用可能です。
また、物理ボタンや内蔵センサー、ディスプレイなどを搭載しています。

仕様の詳細は、上記の説明文を抜粋した元である[日本語版の公式のWiki](https://wiki.seeedstudio.com/jp/Wio-Terminal-Getting-Started/) をご覧ください。

## Wio Terminal を試す
### 環境のセットアップ
今回の開発に使った環境は「Mac ＋ Arduino IDE」です。
環境のセットアップについても[日本語版の公式のWiki](https://wiki.seeedstudio.com/jp/Wio-Terminal-Getting-Started/)  に説明が書いてあるので、ここでは詳細な記載は行いません。

概略を書くと、主な内容は「Arduino IDE のボードの選択メニューで、Wio Terminal を表示させるための作業」です。

### まずは2つのサンプルをお試し（光センサーと5方向スイッチ）
最初に、日本語版の公式のWiki に掲載されているサンプルのうち「[光センサーのサンプル](https://wiki.seeedstudio.com/jp/Wio-Terminal-Light/)」と「[5方向スイッチのサンプル](https://wiki.seeedstudio.com/jp/Wio-Terminal-Switch/)」の2つを試しました。
<img width="836" alt="日本語版の公式Wiki.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3cdcbbb9-ca41-fa58-9d30-e66c87f9e849.jpeg">

どちらもシリアル通信でデータを送るサンプルで、送信される内容は「光センサーのサンプルでは、センサーの値」、「5方向スイッチのサンプルでは、スイッチ操作のイベント」となっています。

### 追加のお試し（LCD のサンプル）
さらに、[英語版の公式Wiki](https://wiki.seeedstudio.com/Wio-Terminal-Getting-Started/)のほうに書かれた「[LCDのサンプル](https://wiki.seeedstudio.com/Wio-Terminal-LCD-Overview/)」も試してみることにしました。
<img width="902" alt="英語版の公式Wiki.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/54390de3-9f31-704a-5bee-cc1debb7e752.jpeg">

LCD のカテゴリの中にサブメニューがいくつかありますが、試したのはその中の 1つである「[Line Charts](https://wiki.seeedstudio.com/Wio-Terminal-LCD-Linecharts/)」です。
<img width="1178" alt="英語版の公式Wiki_Line_Charts.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/901a96c2-3578-f24f-add1-0c4ae9e8c274.jpeg">

このサンプルは、Wio Terminal のディスプレイにグラフを表示するものです。

50ミリ秒ごとに、ソースコード中の `data.push(0.01 * random(1, 10));` という部分で乱数をベースにした値を発生させて、それをグラフで描画しています。
サンプルを実行すると、画面上に以下のような内容が表示されます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Wio Terminal のお試しで、<br>光センサーの値や5方向スイッチのイベントをシリアル通信で送るサンプルを試し、<br>その後にグラフ表示のサンプルを動かしたところ。 <a href="https://t.co/wQqTbl4X5P">pic.twitter.com/wQqTbl4X5P</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1281986632808189952?ref_src=twsrc%5Etfw">July 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なお、このサンプルを試すための大まかな手順は、以下のとおりです。

1. [GitHub上で公開されたライブラリのファイル一式](https://github.com/Seeed-Studio/Seeed_Arduino_Linechart) を ZIPファイルとしてダウンロード
2. ダウンロードした ZIPファイルを、Arduino IDE でインストール（メニューの「スケッチ」⇒「ライブラリをインクルード」→「.ZIP形式のライブラリをインストール...」を選択し、ダウンロードした ZIPファイルを選択）
3. [英語版の公式Wiki](https://wiki.seeedstudio.com/Wio-Terminal-LCD-Linecharts/) のソースコードの内容を Wio Terminal に書き込む

### 試したサンプルを組み合わせてみる
最後に、既に試した3つのサンプルのうち「[光センサーのサンプル](https://wiki.seeedstudio.com/jp/Wio-Terminal-Light/)」と「[Line Charts のサンプル](https://wiki.seeedstudio.com/Wio-Terminal-LCD-Linecharts/)」の 2つを組み合わせてみます。

行う内容はとても単純で、光センサーで取得した値を Line Charts のサンプルのグラフで描画するというものです。先に、実行結果の動画を掲載します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Wio Terminal のお試しの続き！<br><br>先ほど試したグラフを表示するサンプルは、グラフ化される値が乱数で生成されていたのですが、それを光センサーの値になるように変更。<br><br>背面に光センサーがついているので、持ち上げるとセンサーでとれる値（光の明るさを示す値）が大きくなり、グラフの値が変化。 <a href="https://t.co/PGK3DxA9cm">pic.twitter.com/PGK3DxA9cm</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1281993175846936576?ref_src=twsrc%5Etfw">July 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

動画の補足ですが、Wio Terminal の光センサーは端末の背面についているため、背面を下にして置いている状態の時はセンサーが塞がれた状態となり、グラフでプロットされる値はゼロに近い値となります。
そして、端末を手で浮かせると、端末の背面の下に隙間ができて光が差し込むため、センサーで取得される値が大きくなります（そのため、端末の傾き具合によって、グラフの値が変化）。

ここでベースにしたソースコードは「[Line Charts のサンプル](https://wiki.seeedstudio.com/Wio-Terminal-LCD-Linecharts/)」のほうで、そこに「[光センサーのサンプル](https://wiki.seeedstudio.com/jp/Wio-Terminal-Light/)」の一部を追加したりしました。

具体的に追加・変更した部分は以下のとおりです。

【↓ソースコードの setup()内と loop()内の冒頭部分】
<img width="535" alt="ソースコードの変更箇所.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3eaf4447-10d2-7747-e5fd-2b3f4e834abf.jpeg">

【↓ソースコードの loop()内の最後の部分】
<img width="482" alt="ソースコードの変更箇所2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dd1c02fe-a219-941b-2928-c8bf1762a566.jpeg">


## おわりに
Wio Terminal の公式サンプルはまだたくさんあり、そして試せてない機能も多いため、引き続きサンプルを試したり変更を加えたり、ということをやってみようと思います。