🔰

M5Stackを学ぶ　その1(HelloWorld)

2024/07/04に公開

VS Code

はじめに

おはようございます。庭にマリーゴールドなどの花を植えて、プランターにきゅうりとトマトを植えたら梅雨が来て万事休すな人です。時期と天気、そして土を調べる大切さを学びました。次回に活かします。

さて、タイトルがM5Stackを学ぶとなっていますが、今回行うのは環境構築になります。今まで使用してきた環境はArduino IDEだったのですが、せっかくなので「VSCode + PlatformIO」で環境構築を行っていきたいと思います。HelloWorldはテストです。プログラムあるあるですね。

手順については下記サイトを参考にさせていただきました。
https://msr-r.net/m5stack-pio/

1,「VSCode + PlatformIO」のインストール

こちらも参考にさせていただいたサイトそのままの手順にて行いました。

こんな感じになっていれば問題ないと思います。経験上のお話ですが、VSCodeがバグったり、onedrive関連で問題が起きたことがあったので、不具合があった場合は再インストールや、ローカル環境での環境構築をお勧めします。

2,プロジェクトの作成

画面左下のアリの顔＞ Create New Project ＞ New Project の手順で行いました。二回目以降はアリの顔＞ PIO Home ＞ New Projectの手順になると思います。

Nameにはプロジェクト名を入れてください。今回はHelloWorldです。
今更ですが、今回私が使用しているのがM5Stack BASICになります。

本体(表)

本体(裏)

箱にESP32と書いてあったのでBoardはM5Stack Core ESP32を選択しました。
Frameworkは自動でArduinoになるかと思います。下にスクロールしてFinishでプロジェクトの作成は完了です！

3,ライブラリの追加

次に行うのがライブラリの追加になります。

1,PIO Homeタブに戻りLibrariesアイコンをクリックしm5stackで検索します。

2,「M5Stack by M5Stack」というのがあるのでクリックして「Add to Project」。

3,先ほど作成したプロジェクト名のものを選択してAddします。（今回の場合だとプロジェクト名で「Projects/HelloWorld」を選択）。

4,Addをクリックして完了です！（最初に記載させていただいたサイトを参考にするとわかりやすいです）

今回はHelloWorldのみなのでライブラリはこれだけで大丈夫です。※必要に応じて追加してください

4,プログラムの作成

VSCodeの左側にエクスプローラというアイコンがあるのでクリック。すると、先ほど作成したHelloWorldというプロジェクトが作成されていると思うので、その中のsrcを開いてください。main.cppが作成されていると思います。こちらにコードを書いていきます。

デフォルトだとこんな画面化と思います。

ちなみに実行するとエラーになります。ライブラリが足りてないからですね。今回は書き換えるので問題ないです。

これを下記のプログラムに書き換えます。

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Lcd.println("Hello World");
}

void loop() {
}

M5Stackをパソコンにつないで書き込みます。書き込みはVScodeの下にある矢印です。

成功すると[SUCCESS]と表示され、M5Stackの画面にも表示されます。

M5Stackはどうでしょう？
表示サイズをしていしていなかったため、文字のサイズがめちゃめちゃ小さくなっていますね。

一応文字の大きさを修正します。一行追加するだけですね。

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Lcd.setTextSize(7);
  M5.Lcd.println("Hello World");
}

void loop() {
}

今度は大きすぎましたが、大きさの変更は成功したので良しとします。

5,おわりに

こんな感じにゆるりと更新していくと思います。復習も兼ねて、LEDからパーツごとに順番にやっていくと思うので暇な方や、初心者でやってみたい方、もっとこうしたほうがいいなどあれば気軽にお願いします。

では、また次回お会いしましょう。お疲れさまでした。