はじめに
前回の記事では開発環境を整えてみました。
今回からM5Stackを使って色々と遊んでみようかと思います。なお、Arduino IDEで新しいスケッチを作りたいときは”File”>”New Sketch”でできます。新しいスケッチを開いたら、前回と同様に”File”>”Save As…”で保存しておきます。前回触れていませんでいたが、指定した保存先にフォルダが作成されています。
今回の記事はM5StackをPCに接続して、前回記事の内容をすでにやった前提で進めているのでご注意ください。
もし「それどうやってるの？」や「それ間違ってるよ！」など疑問やアドバイスがありましたら、コメントお願いいたします！
それでは遊んできましょう！
M5Stackで遊んでみよう！ 〜まずは前回の復習を！
まずは、前回の復習も兼ねてシリアルモニターにA〜Zを表示してみます。
コードは下の画像のように書きました。今回はsetup()関数の中にのみ書きました。また、ファイル名は”Sketch2.ino”としました。
ここで各コードがどのような役割を持つのか説明します。
- 3行目：Serial.begin()
M5StackとPC間でシリアル通信を始めるための役割を持ちます。カッコ内の9600は通信速度であり、9600bpsで通信するという意味です。また、このとき上の画像で右下にある青枠で囲ってある数値も9600にしておきます。
通信速度は自由に変更できますが、速すぎると通信がうまくできなかったりするエラーが発生する可能性があるようです。色々調べてみて、動作に影響がなく速度をあまり重視しない場合には9600程度で良いのかなと思いました。
なお、シリアル通信とは、1度に1bitずつデータを送るデータ通信方式のことです。 - 4行目：Serial.println(“”)
まず、Serial.println()はシリアルモニターに値を表示する場合に使用します。今回のコードで入れている理由は、見た目を良くするためだけなので必須というわけではありません。「見た目ってどういうこと？」と思う方は試しに４行目を消してUploadしてみてみると違いがわかっていただけるかと思います。 - 5行目：Serial.println(“ABCDEFGHIJKLMNOPQRSTUVWXYZ”)
これはA〜Zまでをシリアルモニターに表示するということですね。なおSerial.println()と似たものでSerial.print()があります。これらの違いの一つは表示した後に改行する(println)かしない(print)かです。4行目の時と同様にカッコ内は表示したい文字を ダブルクォーテーション「”」で囲う必要があります。
まあ、今回はシリアルモニターをあまり使わないんですけどね・・・
しかし、今後使うときのために学んでおいて損はないですよね。
それではいよいよM5Stackの画面に色々なものを表示してみたいと思います！
M5Stackで遊んでみよう！ 〜M5Stackに文字を表示したい！
最初はM5Stackに文字を表示してみたいと思います。プログラミング初期段階でよくある“Hello, World!”をM5Stackに表示してみましょう。コードは下の画像のようになります。ファイル名は”Sketch3.ino”としています。
上のコードが書けたら、M5Stackが接続されていることを確認してUploadしてみます。
すると、どうでしょうか？下の画面のようにOutput画面に“M5Stack.h: No such file or directory”とエラーが出てしまいました。これは“Sketch3.inoが保存されている場所にM5Stack.hなんてファイルもフォルダもない！”と言われてしまっているのですね。
調べた結果、ライブラリを”include”しなければならないようです。
そこで、”Sketch”>”Include Library”>”Manage Libraries…”を押して、”Library Manager”を開きます。続いて下の画面のように”M5Stack”で検索して赤枠のライブラリをINSTALLを押して、次に出てくる画面でINSTALL ALLを押します。インストールが完了するまでに少し時間がかかります。
インストーつが完了すると、これまで保存してきたフォルダと同じ階層にlibrariesというフォルダが作成されていると思います。
なお、Library Managerは青枠の本のようなアイコンを押しても開くことができます。
それでは気を取り直してUploadしてみます。少し時間はかかりますが、エラーが解消されてM5Stackの画面に”Hello, World!”という文字が表示されれば成功です！
以上のような感じで、UploadあるいはVerifyしてエラーがあれば修正して改めてUploadあるいはVeifyするということを繰り返してプログラミングします。
それでは各コードの役割を説明します。
- 1行目：#include <M5Stack.h>
M5Stackのヘッダファイルをインクルードする役割があります。いきなりヘッダファイル？インクルード？と難しそうな単語ですが、現段階では5行目のM5.begin()や6行目のM5.Lcd.setTextColor(WHITE, BLUE)といったM5Stackのさまざまな機能を使うために必要な宣言という理解でいいのかなと思っています。 - M5.begin()
M5Stackを初期化する役割を持ちます。M5Stackを使う場合はこの関数を呼び出す必要があります。
- M5.Lcd.setTextColor(文字色、背景色)
M5Stack画面上の文字の色を指定する役割を持ちます。カッコ内の２つの引数で文字色と背景色を指定できます。今回は文字色を白、背景色を青にしました。 - M5.Lcd.setTextSize(文字サイズ)
M5Stack画面上の文字サイズを指定する役割を持ちます。引数は１〜７で指定できます。今回は文字サイズ”５”にしています。 - M5.Lcd.println()
シリアルモニターに表示する際にもprintlnを使用しているので、役割はそれと同じです。なお、2023年7月時点では特別なお手当をしないと日本語を表示できないようです。
このほかにも色々な機能がありますが、今回は割愛させていただきます。
M5Stackで遊んでみよう！ 〜M5Stackに図形を表示したい！
続いては図形を表示してみます。今度は四角形、円、三角形を表示してみます。コードは下の画像のようになります。ファイル名は”Sketch4.ino”としています。
上のコードが書けたら、M5Stackが接続されていることを確認してUploadしてみます。その結果、下のような画面がM5Stackに表示されれば成功です！
※もしUploadしようとすると、”Uploading Error”が出てきて失敗する場合は、”Tools”>”Upload Speed”でUploadのスピードを遅くしてみてください。筆者は115200にしてやっています。もしかすると、デフォルトでは921600になっているかもしれません。
それでは各コードの役割を説明します。
- ６行目：M5.Lcd.fillRect(左上頂点のx, 左上頂点のy, 横幅, 縦幅, 色)
これは四角形を表示する役割を持ちます。左上の頂点を基準にして、指定した横幅、縦幅、色で四角形が表示されます。 - ７行目：M5.Lcd.fillCircle(中心のx, 中心のy, 半径, 色)
これは円を表示する役割を持ちます。中心を基準にして、指定した半径、色で四角形が表示されます。 - ８行目：M5.Lcd.fillTriangle(頂点1のx, 頂点１のy, 頂点2のx, 頂点2のx, 頂点3のx, 頂点3のy, 色)
これは三角形を表示する役割を持ちます。頂点1を基準にして、３つの頂点を持つ三角形が表示されます。
ここで図形を表示する場合に座標を指定する必要がありますので、M5Stack画面の座標について紹介します。下図のように画面左上が原点(0, 0)となります。そこから右に320、下に240となります。
また、図形によってどこを基準にして配置されるかが変わりますので、ご注意ください。
例えば、四角形の場合は左上が指定した座標に来るように配置され、円の場合は中心が指定した座標に来るように配置されます。また、三角形は３つの頂点の座標をして配置します。
これらを覚えるのは大変なので、最初に記述する座標を基準にして配置されると覚えるといいのかなと思いました。
今回は３つの図形しか扱いませんでしたが、色々な図形を表示できるので試してみると面白いかもしれません。
M5Stackで遊んでみよう！ 〜ここまでの総集編＋α
それでは、ここまでに学んだ、
・setup()関数とloop関数()の違い
・文字の表示
・図形の表示
を応用して、表示される文字と図形が3秒ごとに変化していくプログラムを書いていこうと思います。
ファイル名は先ほどのスケッチを使い回して”Sketch4.ino”としています。
今回書いたコードは以下のようになります。
今回は3秒ごとに「赤い四角形」→「緑の丸」→「青い三角」→「赤い四角形」・・・と変化するようにしています。また文字も「Red Rectangle」→「Green Circle」→「Blue Triangle」→「Red Rectangle」・・・と変化します。実際の動作は下の画像のような状態になります。
それではそれぞれのコードの役割を説明します。
- 5、6行目：M5.begin()とM5.Lcd.setTextSize()
こちらの役割はすでに説明したので省略しますが、setup()関数に書く必要性はそれほどないのかなと思いました。loop()関数の中に書いても見た目の動作は変わりませんでした。setup()関数内に書いた理由は、この２つの関数は一度だけ呼び出せればいいと思ったからです。このような理由で使い分けるべきなのかは分かりませんが、とりえあえずそのようにしてみました。 - 11、19、27行目：M5.Lcd.fillScreen()
こちらはM5Stackの画面を指定した色で埋める役割を持ちます。これがないと、各図形が残ったまま次の図形が表示されてしまいます。そのため、各図形を表示する直前にこの関数を使って画面をクリアするといった感じです。カッコ内の引数は色で、今回はBLACKで指定しています。 - 12、20、28行目：M5.Lcd.setTextColor()
こちらの役割はすでに説明したので省略しますが、各文字を図形の色に対応させるために、文字を表示する直前で文字色と背景色を指定しています。 - 13、21、29行目：M5.Lcd.setCursor()
こちらは文字を表示する座標を固定する役割があります。一度試しにM5.Lcd.setCursor()なしで動かしてみると分かりますが、文字の位置が表示のたびに下方にずれていってしまいます。そのため、文字を表示する直前で文字の位置を指定しているという感じです。カッコ内の引数はx座標、y座標となります。 - 17、25、33行目：delay()
こちらも以前説明しましたが、指定した時間だけ動作を遅らせる役割があります。ここで注意したいことが単位がミリ秒であることです。そのため、3秒遅らせたい場合はカッコ内の引数に3000を渡す必要があります。
以上で各コードの説明を終わりにしたいと思います。
最後に
いかがでしょうか。少しずつArduino IDEやM5Stackと友達になれそうな予感がしています。
もしアドバイスや間違ったことをやっていたら、コメントをいただければ嬉しいです！
おすすめの書籍
もっと詳しくM5Stackについて知りたい！という方はこちらの書籍がおすすめです。とても詳しく載っていてわかりやすいです。
とりあえず何か作ってみたい！という方にはこちらの書籍がおすすめです。書いてある通りにやるだけでお手軽にIoTデバイスを作ることができます。
他記事のご紹介
当ブログではさまざまな記事を投稿しています。特に最近は生成系AIに関する記事も上げています。
ぜひご覧ください！
コメント