卒業研究論文 - SIT

(1)

埼玉工業大学工学部情報システム学科

卒業研究論文

題目

M5Stack によるタイマーの製作

研究室名：鯨井研究室

指導教員名：鯨井政祐

卒業研究報告者

学籍番号 1803009 氏名阿部栞佑

指導教員認印

学科検印

(2)

第

1

^章 ^緒論

1

1.1

製作の背景と目的

. . . . 2

1.2

製作の概要

. . . . 2

1.3

本論文の構成

. . . . 3

第

2

章要素技術

4 2.1

緒論

. . . . 5

2.2

タイマー

. . . . 5

2.3 Arduino . . . . 6

2.4 M5Stack . . . . 8

第

3

章

M5Stack

を用いたタイマー

10 3.1

緒論

. . . . 11

3.2

製作するタイマーの仕様

. . . . 11

3.3

実装

. . . . 12

3.3.1 Arduino IDE

の導入

. . . . 12

3.3.2 M5Display

クラスによる経過時間の表示

. . . . 19

3.3.3 Button

クラスによる状態遷移

. . . . 25

3.3.4

ベル音の再生

. . . . 29

3.3.5

マルチタスク機能の実装

. . . . 34

3.4

動作確認

. . . . 36

3.5

考察

. . . . 43

3.6

^{ソースコード}

. . . . 44

第

4

章結論

47 4.1

^まとめ

. . . . 48

4.2

今後の課題

. . . . 48

謝辞

49

参考文献

50

(3)

第 1 章

緒論

(4)

本研究室では過去に，シングルボードコンピュータ制御により実際に卓上ベルを叩くことで，正確性と大音量を兼ね備えた，卒業研究発表会で使用することを想定した自動プレゼンテーションタイマーが開発された

[1]

。しかし，これらの提案では，タイマー装置と

PC

の両方を持ち歩かなくてはならない欠点があった。そこで本製作では，

M5Stack

のみを使い，同等の機能を実現することを目的とする。

1.2 製作の概要

本製作では，

M5Stack

のみを使い卒業研究発表会で使用することを想定したプレゼンテーションタイマーを製作した。

開発環境として，

M5Stack

と互換性があり，開発が容易であるという点から，

Arduino IDE 1.8.13

で

Arduino

言語を用いて実装した。

M5Stack

では，

M5Stack

ライブラリを使用することにより，同機固有の機能が使

用できるようになる。ここでは同ライブラリに用意された関数を用いて，「

mm:ss

」形式で経過時間表示を実装した。卒業研究発表会では発表時間は限られているため，時は表示せず分と秒のみ表示すれば良いので，その分フォントを大きくして見やすい表示とした。

M5Stack

^{にはボタンが}

3

つあるため，これらを計時のスタート，ストップ，リ

セット機能にそれぞれ割り当てることにした。ただし，既存のタイマーアプリ等では計時中でもストップ状態を経ずに直接リセット状態に入れるようになっていることが多い。これを考慮して，本製作では上記各ボタンの押下で状態遷移を行うように実装した。

ベル音を鳴らす通知機能としては，ベル音の

mp3

ファイルを

microSD

カードから再生する方式とした。計時時間が

5

分，

7

分，

10

分経過するごとに

1

回，

2

回，

3

回とベル音が再生される。ただし同ライブラリの再生機能は再生中にブロックする仕様なので，その間液晶の表示更新が停止してしまうという問題がある。このた

め，

ESP32

のマルチタスク機能を使い，音の再生をメインの処理から分離するこ

とでこれを解決した。

これら各機能の実装の後，動作確認を行った。結果として，液晶画面には「

mm:ss

」形式で経過時間が表示されることを確認し，各ボタンの機能，ベル音についても仕様通りに動作したことを確認した。

(5)

1.3 本論文の構成

本論文は

M5Stack

のみを用いて，卒業研究発表会で使用することを想定したプ

レゼンテーションタイマーの製作についてまとめたものである。本文構成は以下の通りである。

•

第

1

章緒論

本製作の背景や目的を述べ，本論文の意義について述べる。

•

^第

2

^{章要素技術}

本製作で使用した技術の概要について述べる。

•

第

3

章

M5Stack

を用いたタイマー

本製作で提案するシステムの仕様，実装手法，操作方法，動作確認，考察などについて述べる。

•

第

4

章結論

本製作のまとめと今後の課題について述べる。

(6)

第 2 章

要素技術

(7)

2.1 緒論

本章では，製作に用いたタイマー，

Arduino

，

M5Stack

について説明する。

2.2 タイマー

タイマーとは，図

2.1

のように経過時間を知らせる仕組みや装置である。本製作において製作するタイマーは，計測開始時からの経過時間を数えあげていくカウントアップ式のタイマーである。指定した時間を経過するごとに音声ファイルが再生される。^*1

図

2.1:

タイマーの例

*1画像は

Web

^サイト

[11]

^{より引用した。}

(8)

2.3 Arduino

Arduino

とは，シングルボードコンピュータであり，図

2.2

の

Arduino Uno

はその一種である。図

2.3

の統合開発環境である

Arduino IDE

により，

C

言語をベースに開発された

Arduino

言語を用いて開発が可能である。また，

Arduino

言語を用いたプログラムによって容易にセンサやアクチュエータのプログラムを制御が可能である。本製作では，

Arduino

^{と互換性を持つ}

M5Stack

^{と開発環境として}

Arduino IDE

を用いて開発を行っている。

図

2.2: Arduino Uno

(9)

図

2.3: Arduino IDE

(10)

2.4 M5Stack

図

2.4

の

M5Stack

は，シングルボードコンピュータの一種である。液晶画面，

ボタン，スピーカ，

microSD

スロットなどを備えているため，追加部品無しである程度の装置を作れるという特長がある。開発言語は

Arduino

と互換性があり，開発もしやすい。

CPU

に図

2.5

の

ESP32

を採用しているため，同チップ用のライブラリも使用できる。図

2.6

^のように

Type-C USB

^で

PC

と接続することで開発したプログラムを書き込むことが可能である。

図

2.4: M5Stack

(11)

図

2.5: ESP32

図

2.6: Type-C USB

の接続

(12)

第 3 章

M5Stack を用いたタイマー

(13)

3.1 緒論

本章では，本製作のタイマーの仕様，製作，動作確認について説明する。

3.2 製作するタイマーの仕様

本製作のタイマーは，卒業研究発表会で使用する事を目的としている。そのため，

•

液晶画面に「

mm:ss

」形式で経過時間が表示される。

• 3

つのボタンにスタート，ストップ，リセット機能を実装する。

• 5

^分，

7

^分，

10

分経過するごとにそれぞれ

1

^回，

2

^回，

3

^{回とベル音が鳴る。}

以上の機能を持つタイマーを

M5Stack

のみを使い実現する。

(14)

3.3 実装

3.3.1 Arduino IDE の導入

M5Stack

^{で開発を行うために，}

Arduino

^{統合開発環境}

(IDE)

^{のインストール及}

び設定構築を行った。本製作では，

Arduino IDE 1.8.13

を使用した。以下にインストール手順を示す。

•

図

3.1

の

Arduino

公式サイトのダウンロードページから

Arduino IDE 1.8.13

のインストーラ

(Windows Win 7 and newer)

を選択する。→

arduino- 1.8.13-windows.exe

をダウンロードした。

•

インストーラを実行→図

3.2

のようにライセンス契約の画面が表示されるた

め，「

I Agree

」を選択して同意した。→図

3.3

のようにオプションを選択す

る画面が表示されるので，チェックボックスは初期値のままで「

Next >

」を選択した。→図

3.4

のようにインストールするフォルダを選択する画面が表示されるので，インストール先を選択して「

Install

」で開始した。→インストール完了後，

Arduino IDE

^{を起動した。}

図

3.1: Arduino IDE

ダウンロードページ

(15)

図

3.2:

ライセンス契約

図

3.3:

オプション選択

(16)

図

3.4:

^{インストール先の選択}

(17)

次に，

M5Stack

と

PC

を繋ぐためには

USB

シリアルドライバの導入が必要である。従って以下に導入の過程を示す。

•

図

3.5

の

M5Stack

公式サイトの

Arduino IDE Development

から

Windows

用の

USB

^ドライバ

(CP210x_VCP_Windows.zip)

^{をダウンロードした。}

•

ファイル展開後，図

3.6

の

64bit

用のインストーラ

(CP210xVCPInstaller_x64_v6.7.0.0.exe)

を選択→

USB

シリアルドライバをインストールした。

•

^{インストール完了後，}

M5Stack

^と

PC

^{を繋ぎ，図}

3.7

^のように

Windows

^の設定から「デバイス」選択し，インストールされたドライバが表示されているか確認した。

図

3.5:

ドライバのダウンロードページ

図

3.6: 64bit

用のインストーラ

(18)

図

3.7:

インストールされたドライバ

(19)

Arduino IDE

はボードマネージャを選択することで，使用するボードにコードを書き込む事が可能になる。ダウンロード直後の

Arduino IDE

には

M5Stack

に付

属する

ESP32

の情報が登録されていないため，

Arduino IDE

にボードマネージャ

を追加して

ESP32

を認識可能にした。以下に手順を示す。

• Arduino IDE

を起動し、図

3.8

の「ファイル」→「環境設定」→「行番号を表

示する」にチェックを入れる→「追加のボードマネージャの

URL

」→図

3.9

のように「

http://dl.espressif.com/dl/package_esp32_index.json

^」を入力した。

• Arduino IDE

の「ツール」→「ボード

:Arduino/Genuino UNO

」→「ボードマネージャ」を選択した。→検索窓に「

esp32

」を入力する。→図

3.10

の

「

esp32 by Espressif System

」を選択し最新バージョン

(

バージョン

1.0.6)

をインストールした。

•

インストール後，「ツール」→図

3.11

のようにパラメータを指定した。

図

3.8:

環境設定

図

3.9:

追加のボードマネージャの

URL

(20)

図

3.10: esp32 by Espressif System

のインストール

図

3.11:

パラメータの指定

(21)

3.3.2 M5Display クラスによる経過時間の表示

M5Stack

^では，

M5Stack

ライブラリを使用することにより，

M5Stack

^固有の機能が使用できるようになる。以下に導入の手順を示す。

•

図

3.12

のように

Arduino IDE

の「ツール」→「ライブラリを管理」を選択

しライブラリマネージャを起動した。

•

検索窓に「

m5stack

」を入力する。→図

3.13

の「

M5Stack by M5Stack

」を選択し最新バージョン

(

バージョン

0.31)

をインストールした。

図

3.12:

ライブラリマネージャ

図

3.13: M5Stack

ライブラリのインストール

(22)

過時間を「

mm:ss

」形式で表示するプログラムを実装した。以下に，経過時間を表示するプログラムの内容を示す。また，このタイマーは卒業研究発表会で使用することを想定しており，発表時間は限られているため，「時」は表示せず「分」と「秒」

のみを表示すれば良いので，その分フォントを大きくして見やすい表示とした。

リスト

3.1

のように，まず，液晶画面の背景色を定める関数

M5.Lcd.ﬁllScreen()

を用いて背景色を黒に設定した。また，テキストの文字サイズを定める関数

M5.Lcd.setTextSize()

やテキストの色を定める関数

M5.Lcd.setTextColor()

を用いてテキストの初期値を設定した。

しかし，上記の操作のみでは経過時間を描画することはできないため，「分」，

「：」，「秒」を表示するプログラムが必要になる。リスト

3.2

に「分」，「秒」，「：」

を表示する操作をそれぞれ示す。

本製作では，「

mm:ss

」形式表示のタイマーを実装する。そのため，仮に「

1

分

2

秒」の場合には「

01:02

」と表示する必要がある。

まず，「分」，「秒」については関数

M5.Lcd.drawChar()

を用いて一の位の値が

10

より小さい場合に「

09

」のように十の位に「

0

」を表示し，関数

M5.Lcd.drawNumber()

を用いて，「分」，「秒」の値を表示するようにした。「：」についても表示は同様に関数

M5.Lcd.drawChar()

を用い，関数

M5.Lcd.setTextColor()

によって

2

秒に一度テキストの色を変更することで，図

3.14

^，図

3.15

のように「：」が点滅して見えるようにした。

ここで表示されるテキストは液晶画面の中央から離れて位置しているため，

図

3.16

のようにテキストの表示座標を液晶画面の中央に位置するように設定を行った。以上より，

M5Display

クラスを使用することにより，「

mm:ss

」形式表示を実装した。

リスト

3.1:

^{背景とテキストの設定}

1 void setup(void) {

2

3 M5.begin(); //M5Stackオブジェクトを初期化

4 M5.Lcd.fillScreen(TFT_BLACK); //背景色設定

5 M5.Lcd.setTextSize(1); //テキストのサイズ設定

6 M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK); //テキストの色設定

(23)

リスト

3.2:

^「分」，^「秒」^，^{「：」の表示}

1 if (omm != mm) { // 毎分再描画する

2 omm = mm;

3

4 if (mm < 10) xpos += M5.Lcd.drawChar(’0’, xpos, ypos, 8); //10分より前のとき「09」と前に「0」を表示する

5 xpos += M5.Lcd.drawNumber(mm, xpos, ypos, 8); // 「分」を表示する

6 xsecs = xpos; // 更新のため秒のx座標を指定する

7 }

8

9 if (oss != ss) { //毎秒再描画する

10 oss = ss;

11 xpos = xsecs;

12

13 if (ss % 2) { // 2秒に1回「：」を点滅

14 M5.Lcd.setTextColor(0x39C4, TFT_BLACK); // 「：」の色設定

15 xpos += M5.Lcd.drawChar(’:’, xsecs, ysecs, 8); // 分と秒の間に「：」を表示する

16 M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK); // 「：」の色設定

17 }

18 else {

20 }

21

22 if (ss < 10) xpos += M5.Lcd.drawChar(’0’, xpos, ysecs, 8); // 10秒より前のとき「09」

と前に「0」を表示する

23 M5.Lcd.drawNumber(ss, xpos, ysecs, 8); // 「秒」を表示する

24 }

図

3.14:

「

:

」の点滅

(1)

(24)

図

3.15:

「

:

」の点滅

(2)

図

3.16:

変更後の経過時間の表示

(25)

次に，タイマーの計時機能について以下に示す。計時機能はリスト

3.3

のように，初期値「

00:00

」から

1

秒ごとに経過時間の「秒」の値を増加させていき，図

3.17

図

3.18

のように

60

秒経過するごとに「分」の値を代入して増加，「秒」の値を

0

にする操作を繰り返すことで実装した。また，図

3.19

のように，本製作のタイマー

は「

mm:ss

」形式表示の最大値として「

99:59

」まで計時可能である。

リスト

3.3:

^{計時機能の実装}

1 if (targetTime < millis() && measuring) { //1秒ごとに更新

2 targetTime = millis() + 1000;

3

4 if (ss == 59 && mm == 99) { // 99：59でカウント停止

5 measuring = false;

6 }

7 else {

8 ss = ss + 1; //「秒」の値を1増加させる

9

10 if (ss == 60) { // 60秒を超えるとき「分」の値を1増加させる

11 ss = 0;

12 omm = mm;

13 mm++;

14 }

15 }

16 }

図

3.17:

^{「分」の値の増加}

1

(26)

図

3.18:

^{「分」の値の増加}

2

図

3.19:

最大値「

99:59

」

(27)

3.3.3 Button クラスによる状態遷移

M5Stack

^には，図

3.20

^{のようにボタンが}

3

つ付属している。本製作は，卒業

研究発表会で使用することを想定しているため，

1

人

10

分の発表時間ごとにタイマーをリセットする必要がある。従って，スタート，ストップ，リセットの機能を

3

つのボタンにそれぞれ割り当てることにした。ただし，既存のタイマーアプリ等では計時中でもストップ状態を経ずに直接リセット状態にはいれるようになっていることが多い。これを考慮して，本製作では，上記各ボタンの押下で図

3.21

の状態遷移図のように状態遷移を行うように実装した。

本項では，

M5Stack

ライブラリのボタンの状態管理用クラスである

Button

^クラスを使用することにより，

3

つのボタンに操作を割り当てるプログラムを実装した。以下に，ボタンの押下で状態遷移するプログラムの内容を示す。

初めに，計時状態と停止状態をリスト

3.4

^の変数

measuring

^を定め

true

^と

false

で判別できるようにした。

次に左ボタンにスタート機能，中央ボタンにストップ機能を割り当て実装した。

リスト

3.5

^の関数

M5.BtnA.wasReleased()

^，

M5.BtnB.wasReleased()

^{を使用するこ} とで，図

3.22

と図

3.23

のようにそれぞれ指定したボタンが押されたときに計時状態が切り替わるようにした。

右ボタンについても関数

M5.BtnC.wasReleased()

を使用しリスト

3.6

のボタンが押されたとき，図

3.24

のように初期状態である「

00:00

」で停止状態に遷移する操作を実装した。

本項で使用した関数は厳密にはボタンが離されたかどうかを判別するものであるが，仮に関数

M5.BtnA.wasPressed()

のように押されたかどうかを判別する場合，

押し続けたときにも条件を満たしてしまい不具合が起こる場合がある。そのため，

本製作では，ボタンが離されたかどうかを判別する関数を使用した。

(28)

図

3.20: 3

つのボタン

計時状態停止状態

初期状態

右ボタンを押す

（リセット）

右ボタンを押す

（リセット）

左ボタンを押す

（計測開始）

左ボタンを押す

（計測開始）

中央ボタンを押す

（停止）

図

3.21:

各ボタン押下による状態遷移図

リスト

3.4:

^{状態を判別する変数}

1 //時間計測切り替えの変数(プログラム開始時00：00で停止状態)

2 boolean measuring = false;

(29)

リスト

3.5:

左ボタン中央ボタンの割り当て

1 M5.update(); //M5Stackの更新

2 if (M5.BtnA.wasReleased()) { //停止状態からカウント中状態に遷移

3 measuring = true;

4 delay(1);

5 }

6

7 if (M5.BtnB.wasReleased()) { //ある時間で停止状態に遷移

9 delay(1);

10 }

図

3.22:

^{左ボタン押下の反応}

リスト

3.6:

^{右ボタンの割り当て}

1 if (M5.BtnC.wasReleased()) { //00：00で停止状態に遷移

2 ss = 0;

3 mm = 0;

5 }

(30)

図

3.23:

^{中央ボタン押下の反応}

図

3.24:

右ボタン押下の反応

(31)

3.3.4 ベル音の再生

経過時間が

5

^分，

7

^分，

10

^{分のときに，それぞれ}

1

^回，

2

^回，

3

^{回とベル音を鳴} らす通知機能を実装した。本製作では，図

3.25

のダウンロードしたベル音の

mp3

ファイル

[2]

を図

3.26

の

microSD

カードを図

3.27

のスロットに挿入，図

3.28

のスピーカを通じて再生する方式とした。

また，ベル音を鳴らすライブラリとして

ESP8266Audio

ライブラリを使用した。

以下に導入の手順を示す。

図

3.29

に示すように

Arduino IDE

を起動し、「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」→ライブラリマネージャを起動した。その後，

図

3.30

のように

,

検索窓に「

ESP8266Audio

^{」を入力→「}

ESP8266Audio

^{」を選択し} 最新バージョン

(

バージョン

1.9.2)

でインストールした。

ESP8266Audio

^{ライブラリの関数}

AudioFileSourceSD()

^，

Au- dioFileSourceID3()

^，

AudioOutputI2S,AudioGeneratorMP3()

^を使用し

mp3

ファイルを

SD

カードから呼び出して再生するシステムを実装した。

上記のシステムを経過時間ごとにベル音を鳴らすようにした。リスト

3.8

^より，

•

「

ss

」の値が

0

かつ「

mm

」の値が

5

のとき

playMP3()

でベル音を

1

回鳴らす。

•

「

ss

」の値が

0

かつ「

mm

」の値が

7

のとき

playMP3()

^{でベル音を}

2

回鳴らす。

•

「

ss

」の値が

0

かつ「

mm

」の値が

10

のとき

playMP3()

でベル音を

3

回鳴らす。

上記の条件を満たす操作を実装した。

(32)

図

3.25:

ダウンロードした

mp3

ファイル

図

3.26: microSD

カード

(33)

図

3.27: microSD

^スロット

図

3.28:

スピーカ

(34)

図

3.29:

ライブラリマネージャの起動

図

3.30: ESP8266Audio

ライブラリの導入

(35)

リスト

3.7: mp3

^{ファイルの再生}

1 void playMP3(char *filename) { //mp3ファイルを再生する

2

3 file = new AudioFileSourceSD("/yobidashi-bell-2.mp3"); //mp3ファイルをSDカードから呼び出す

4

5 id3 = new AudioFileSourceID3(file);

6 out = new AudioOutputI2S(0, 1); // builtInDACへ出力

7 out->SetOutputModeMono(true);

8 mp3 = new AudioGeneratorMP3();

9 mp3->begin(id3, out);

10

11 while (mp3->isRunning()) {

12 if (!mp3->loop()) mp3->stop();

13

14 }

15 }

リスト

3.8:

^{通知機能の実装}

1 if (ss == 0 && mm == 5) { //05：00のとき1回鳴らす

2 playMP3("/yobidashi-bell-2.mp3");

3 }

4

5 if (ss == 0 && mm == 7) { //07：00のとき2回鳴らす

8 }

9

10 if (ss == 0 && mm == 10) { //10：00のとき3回鳴らす

14 }

(36)

3.3.5 マルチタスク機能の実装

ベル音を鳴らす処理において，

ESP8266Audio

^{ライブラリの}

mp3

^{ファイル再生} 機能は再生中にブロックする仕様である。そのため，ベル音が鳴る間液晶画面の表示更新が停止してしまうという問題がある。

この状態を解決するため，

ESP32

の

FreeRTOS

のマルチタスク機能を使用することにした。マルチタスク機能は，

xTaskCreatePinnedToCore()

^{関数を使用するこ} とで実装した。並列処理させる機能としてはリスト

3.9

のように計時機能と通知機能を選んだ。

また，リスト

3.10

とリスト

3.11

のように計時機能と通知機能を関数として分割

して

while

文でループさせた。このとき，

while

文の最後に

delay

を追加すること

でタスクを切り替えられるようにした。

リスト

3.9: xTaskCreatePinnedToCore()

関数

1 /マルチタスク機能(タイマー機能)

2 xTaskCreatePinnedToCore(timer, "timer", 4096, NULL, 1, NULL, 0);

3 //マルチタスク機能(通知機能)

4 xTaskCreatePinnedToCore(notification, "notification", 4096, NULL, 1, NULL, 1);

(37)

リスト

3.10:

変更後の計時機能の関数

1 void timer(void *arg) { //タイマーの時間計測機能

2

3 while (1) { //マルチタスクの処理は無限ループさせる

4

7 measuring = true;

8 delay(1);

9 }

10

13 delay(1);

14 }

15

17 ss = 0;

18 mm = 0;

20 delay(1);

21 }

22

25

26 if (ss == 59 && mm == 99) { // 99：59でカウント停止

28 }

29 else {

31

33 ss = 0;

34 omm = mm;

35 mm++;

36 }

37 }

38 }

39 delay(1);

40 }

41 }

リスト

3.11:

変更後の通知機能の実装

1 void notification(void *arg) { //通知機能

2

3 while (1) {//マルチタスクの処理は無限ループさせる

4 if (ss == 0 && mm == 5) { //05：00のとき1回鳴らす

6 }

7

8 if (ss == 0 && mm == 7) { //07：00のとき2回鳴らす

11 }

12

13 if (ss == 0 && mm == 10) { //10：00のとき3回鳴らす

17 }

18 delay(1);

19 }

20 }

(38)

3.4 動作確認

M5Stack

にプログラムの書き込みを行い，

microSD

カードを挿入し次の手順で

動作確認を行った。

•

^図

3.31

^，図

3.32

^，図

3.33 M5Stack

の電源を入れ，液晶画面の経過時間が

「

mm:ss

」形式かつ「

00:00

」で停止していることを確認する。

•

図

3.34

左ボタンを押してスタート，図

3.35

中央ボタンを押してストップ，

図

3.36

左ボタンを押してリセット機能がそれぞれ動作することを確認する。

図

3.37

，図

3.38

，図

3.39

，図

3.40

それぞれのボタンを同時に押したとき不具合が生じないか確認する。

•

図

3.41

，図

3.42

，図

3.43

タイマーを経過時間が「

05:00

」，「

07:00

」，「

10:00

」，の時にベル音がそれぞれ

1

回，

2

回，

3

回と鳴ることを確認する。

図

3.31: M5Stack

の電源ボタン

(39)

図

3.32:

^「

mm:ss

^{」形式の確認}

図

3.33:

タイマーの初期状態

(40)

図

3.34:

^{タイマーの開始}

図

3.35:

タイマーの停止

(41)

図

3.36:

^{タイマーのリセット}

図

3.37:

左，中央ボタンの同時押し

(42)

図

3.38:

中央，右ボタンの同時押し

図

3.39:

左，右ボタンの同時押し

(43)

図

3.40: 3

^{つのボタンの同時押し}

図

3.41:

経過時間「

05:00

」

(44)

図

3.42:

^{経過時間「}

07:00

^」

図

3.43:

経過時間「

10:00

」

(45)

3.5 考察

動作確認の結果，液晶画面への経過時間の表示については，初期状態，図

3.32

のいずれの場合も「

mm:ss

」形式で表示されることを確認した。

3

つのボタンへのスタート，ストップ，リセット機能の割り当ては仕様通り動作し同時にボタンを押した場合においても，押されたいずれかのボタンの操作が動作したため不具合を確認することはなかった。

microSD

カード内のベル音

mp3

ファイルによる通知機能については経過時間が

「

05:00

」，「

07:00

」，「

10:00

」の時に

1

回，

2

回，

3

回と鳴ることを確認した。

以上のそれぞれが仕様通りに動作することを確認した。

また，マルチタスク機能についてもベル音が鳴るときに，液晶画面の表示に問題がないことを確認しため動作していることを確認した。

(46)

3.6 ソースコード

Arduino IDE

を使用し，言語は

Arduino

言語により製作を行った。

リスト

3.12:

^{ソースコード}

(timer.ino)

1 /*

2 * M5Stackによるタイマーの製作メインソース

3 *

5 * [email protected], http://kujiraiken.sit.ac.jp/

6 */

7 8

9 #pragma mark - Depend ESP8266Audio and ESP8266_Spiram libraries

10

11 #include <M5Stack.h>

12 #include "AudioFileSourceSD.h"

13 #include "AudioFileSourceID3.h"

14 #include "AudioGeneratorMP3.h"

15 #include "AudioOutputI2S.h"

16

17 #define TFT_GREY 0x5AEB

18

19 AudioGeneratorMP3 *mp3;

20 AudioFileSourceSD *file;

21 AudioOutputI2S *out;

22 AudioFileSourceID3 *id3;

23

24 uint32_t targetTime = 0; // 1秒間タイムアウト

25

26 static uint8_t conv2d(const char* p); //IDE 1.6.xに必要な前方宣言

27

28 uint8_t mm = 0, ss = 0; // タイマーの初期値00：00

29 boolean measuring = false; //時間計測切り替えの変数(プログラム開始時00：00で停止状態)

30 byte omm = 99, oss = 99; //byte型の変数の宣言と初期値の指定

31 byte xcolon = 0, xsecs = 0; //byte型の変数の宣言と初期値の指定

32 unsigned int colour = 0; //符号なし整数の宣言と初期値の指定。

33 34

35 void timer(void *arg) { //タイマーの時間計測機能

36

37 while (1) { //マルチタスクの処理は無限ループさせる

38

41 measuring = true;

42 delay(1);

43 }

44

47 delay(1);

48 }

49

51 ss = 0;

52 mm = 0;

54 delay(1);

55 }

56

59

(47)

60 if (ss == 59 && mm == 99) { // 99：59でカウント停止

62 }

63 else {

65

67 ss = 0;

68 omm = mm;

69 mm++;

70 }

71 }

72 }

73 delay(1);

74 }

75 }

76 77

78 void notification(void *arg) { //通知機能

79

80 while (1) {//マルチタスクの処理は無限ループさせる

81 if (ss == 0 && mm == 5) { //05：00のとき1回鳴らす

83 }

84

85 if (ss == 0 && mm == 7) { //07：00のとき2回鳴らす

88 }

89

90 if (ss == 0 && mm == 10) { //10：00のとき3回鳴らす

94 }

95 delay(1);

96 }

97 }

98 99

100 void setup(void) {

101

102 M5.begin(); //M5Stackオブジェクトを初期化

103 M5.Lcd.fillScreen(TFT_BLACK); //背景色設定

104 M5.Lcd.setTextSize(1); //テキストのサイズ設定

105 M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK); //テキストの色設定

106

107 xTaskCreatePinnedToCore(timer, "timer", 4096, NULL, 1, NULL, 0); //マルチタスク機能(タイマー機能)

108 xTaskCreatePinnedToCore(notification, "notification", 4096, NULL, 1, NULL, 1); //マルチタスク機能(通知機能)

109 110 }

111 112

113 void playMP3(char *filename) { //mp3ファイルを再生する

114

115 file = new AudioFileSourceSD("/yobidashi-bell-2.mp3"); //mp3ファイルをSDカードから呼び出す

116

117 id3 = new AudioFileSourceID3(file);

118 out = new AudioOutputI2S(0, 1); // builtInDACへ出力

119 out->SetOutputModeMono(true);

120 mp3 = new AudioGeneratorMP3();

121 mp3->begin(id3, out);

122

123 while (mp3->isRunning()) {

124 if (!mp3->loop()) mp3->stop();

125 }

126 }

(48)

129 void loop() {

130

131 int xpos = 35; //タイマーの表示する座標を設定する。

132 int ypos = 85;

133 int ysecs = ypos;

134

135 if (omm != mm) { // 毎分再描画する

136 omm = mm;

137

138 if (mm < 10) xpos += M5.Lcd.drawChar(’0’, xpos, ypos, 8); //10分より前のとき「09」と前に「0」を表示する

139 xpos += M5.Lcd.drawNumber(mm, xpos, ypos, 8); // 「分」を表示する

140 xsecs = xpos; // 更新のため秒のx座標を指定する

141 }

142

143 if (oss != ss) { //毎秒再描画する

144 oss = ss;

145 xpos = xsecs;

146

147 if (ss % 2) { // 2秒に1回「：」を点滅

148 M5.Lcd.setTextColor(0x39C4, TFT_BLACK); // 「：」の色設定

150 M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK); // 「：」の色設定

151 }

152 else {

154 }

155

156 if (ss < 10) xpos += M5.Lcd.drawChar(’0’, xpos, ysecs, 8); // 10秒より前のとき「09」

と前に「0」を表示する

157 M5.Lcd.drawNumber(ss, xpos, ysecs, 8); // 「秒」を表示する

158 }

159 delay(5);

160 }

161

162 static uint8_t conv2d(const char* p) { //コンパイル時に文字列から数値を抽出する

163 uint8_t v = 0;

164 if (’0’ <= *p && *p <= ’9’)

165 v = *p - ’0’;

166

167 return 10 * v + *++p - ’0’;

168 }

(49)

第 4 章

結論

(50)

本製作では，

M5Stack

のみを使い卒業研究発表会で使用することを想定したプレゼンテーションタイマーを製作した。

開発環境として，

M5Stack

と互換性があり，開発が容易であるという点から，

Arduino IDE 1.8.13

で

Arduino

言語を用いて実装した。

M5Stack

では，

M5Stack

ライブラリを使用することにより，同機固有の機能が

使用できるようになる。ここでは同ライブラリの

M5Display

^{クラスに用意された} 関数を用いて，経過時間表示を実装した。卒業研究発表会では発表時間は限られているため，時は表示せず分と秒のみ表示すれば良いので，その分フォントを大きくして見やすい表示とした。

M5Stack

にはボタンが

3

つあるため，これらを計時のスタート，ストップ，リ

セット機能にそれぞれ割り当てることにした。ただし，既存のタイマーアプリ等では計時中でもストップ状態を経ずに直接リセット状態に入れるようになっていることが多い。これを考慮して，本製作では上記各ボタンの押下で状態遷移を行うように実装した。こちらは

Button

クラスを利用した。

ベル音を鳴らす通知機能としては，ベル音の

mp3

ファイルを

microSD

カードから再生する方式とした。計時時間が

5

^分，

7

^分，

10

^{分経過するごとに}

1

^回，

2

^回，

3

回とベル音が再生される。ただし同ライブラリの再生機能は再生中にブロックする仕様なので，その間液晶の表示更新が停止してしまうという問題がある。このた

め，

ESP32

^の

FreeRTOS

のマルチタスク機能を使い，音の再生をメインの処理か

ら分離することでこれを解決した。

これら各機能の実装の後，動作確認を行った。結果として，液晶画面には「

mm:ss

」形式で経過時間が表示されることを確認し，各ボタンの機能はボタンを同時押しした場合にもいずれかの機能が正常に動作し，ベル音についても時間経過ごとに仕様通り動作したことを確認した。

4.2 今後の課題

今後の課題として，本製作で製作したタイマーは一目で操作を理解できるような工夫が不十分であったため，それぞれのボタンの意味説明の表示を追加すること，

「

05:00

」，「

07:00

」，「

10:00

」でタイマーを停止させたときベル音が鳴り続けたため，

ベル音の鳴る条件の改善が挙げられる。

(51)

謝辞

本製作を行うにあたり，御指導頂いた鯨井政祐教授，御協力頂いた研究室の皆様に感謝申し上げます。

(52)

参考文献

[1]

^武弓晃大

, “RingableTimer Mini:

実鳴動型プレゼンテーションタイマーの小型化

”,

埼玉工業大学卒業論文

, 2018

年度

.

[2] On-Jin

〜音人〜

,

https://on-jin.com

[3] Arduino

日本語リファレンス

,

http://www.musashinodenpa.com/arduino/ref/

[4] M5Stack

ライブラリ

,

https://knt60345blog.com/m5stack_api_list/

[5] M5Stack

を使ったタイマー製作

,

http://kyokucho1989.chillout.jp/2019/10/02/

[6] M5Stack

で

SD

カードから

mp3

を再生

,

https://qiita.com/ktansai/items/f0096495e2ca7fa38eb7

[7] Arduino-ESP32

のマルチタスク

,

https://www.mgo-tec.com/blog-entry-arduino-esp32-multi-task-dual- core-01.html

[8] M5Stack

でマルチタスク

,

https://qiita.com/Teppei_s/items/74f76725ad27304131fa

[9] M5Stack

でマルチタスク処理の実行

,

https://qiita.com/nnn112358/items/733b5f52957980bb9fb1

[10] ESP32

で並列処理

,

https://labo.mycabin.net/electronics/arduino-esp32/450/

[11] Web

タイマー

,

https://timer.onl.jp/

[12]

下島健彦

, “

みんなの

M5Stack

入門

”,

リックテレコム

, 2019.

卒 業 研 究 論 文 - SIT

埼玉工業大学 工学部 情報システム学科

題 目

M5Stack によるタイマーの製作

研究室名 ： 鯨井研究室

卒業研究報告者

3.3.3 Button

謝 辞

第 1 章

本研究室では過去に，シングルボードコンピュータ制御により実際に卓上ベルを 叩くことで，正確性と大音量を兼ね備えた，卒業研究発表会で使用することを想定 した自動プレゼンテーションタイマーが開発された

M5Stack

本製作では，

M5Stack

開発環境として，

M5Stack

用できるようになる。ここでは同ライブラリに用意された関数を用いて，「

M5Stack

microSD

とでこれを解決した。

1.3 本論文の構成

本論文は

M5Stack

レゼンテーションタイマーの製作についてまとめたものである。本文構成は以下の 通りである。

M5Stack

本製作で提案するシステムの仕様，実装手法，操作方法，動作確認，考察な どについて述べる。

第 2 章

本章では，製作に用いたタイマー，

Arduino

タイマーとは，図

2.3 Arduino

ボタン，スピーカ，

microSD

本章では，本製作のタイマーの仕様，製作，動作確認について説明する。

3.2 製作するタイマーの仕様

本製作のタイマーは，卒業研究発表会で使用する事を目的としている。その ため，

M5Stack

び設定構築を行った。本製作では，

Arduino IDE 1.8.13

る画面が表示されるので，チェックボックスは初期値のままで「

Next >

次に，

M5Stack

属する

Arduino IDE

を追加して

• Arduino IDE

示する」にチェックを入れる→「追加のボードマネージャの

http://dl.espressif.com/dl/package_esp32_index.json

M5Stack

しライブラリマネージャを起動した。

m5stack

過時間を「

M5.Lcd.ﬁllScreen()

しかし，上記の操作のみでは経過時間を描画することはできないため，「分」，

まず，「分」，「秒」については関数

M5.Lcd.drawChar()

0

ここで表示されるテキストは液晶画面の中央から離れて位置しているため，

M5Display

次に，タイマーの計時機能について以下に示す。計時機能はリスト

0

3.3.3 Button クラスによる状態遷移

研究発表会で使用することを想定しているため，

M5Stack

初めに，計時状態と停止状態をリスト

measuring

次に左ボタンにスタート機能，中央ボタンにストップ機能を割り当て実装した。

M5.BtnA.wasReleased()

右ボタンについても関数

M5.BtnC.wasReleased()

本項で使用した関数は厳密にはボタンが離されたかどうかを判別するものであ るが，仮に関数

M5.BtnA.wasPressed()

押し続けたときにも条件を満たしてしまい不具合が起こる場合がある。そのため，

3.3.4 ベル音の再生

経過時間が

microSD

また，ベル音を鳴らすライブラリとして

ESP8266Audio

以下に導入の手順を示す。

Arduino IDE

卒業研究論文 - SIT

埼玉工業大学工学部情報システム学科

題目

研究室名：鯨井研究室

謝辞

本研究室では過去に，シングルボードコンピュータ制御により実際に卓上ベルを叩くことで，正確性と大音量を兼ね備えた，卒業研究発表会で使用することを想定した自動プレゼンテーションタイマーが開発された

レゼンテーションタイマーの製作についてまとめたものである。本文構成は以下の通りである。

本製作で提案するシステムの仕様，実装手法，操作方法，動作確認，考察などについて述べる。

本製作のタイマーは，卒業研究発表会で使用する事を目的としている。そのため，

本項で使用した関数は厳密にはボタンが離されたかどうかを判別するものであるが，仮に関数

今後の課題として，本製作で製作したタイマーは一目で操作を理解できるような工夫が不十分であったため，それぞれのボタンの意味説明の表示を追加すること，

謝辞

本製作を行うにあたり，御指導頂いた鯨井政祐教授，御協力頂いた研究室の皆様に感謝申し上げます。

参考文献