日記とか、工作記録とか

自分に書けることを何でも書いてゆきます。作った物、買ったもの、コンピュータ系の話題が多くなるかもしれません。

Visual Studio CodeでM5stack開発

最近は、M5stackで遊んだりなどしています。

f:id:WindVoice:20190827195949j:plain
M5stack Gray

M5Stackは、Raspberry piよりさらに小さい本体に機能が詰まった小さなコンピュータです。
ラズパイのようにOSはありませんが、その分反応速度は速いです。

しかも小さなモニター、3つのボタン、スピーカー、WiFiBluetoothまでついていてPCとUSB接続もできます。小さなバッテリーもついているので、少しの間はケーブルレスで動作することもできます。

ラズパイのようにI/Oポートが付いているので、自分でハードウェアを拡張することもできますし、モジュールを購入して積み重ねる(Stack)することで手軽な機能拡張も可能です。

Visual Studio CodeでM5stack開発

世の中には、M5stackでいろいろ遊んでいる人がすでにたくさんいます。いまさら私が書くことはなさそうだ、とも思ったのですが、Visual Studio Codeからの開発の人はまだ少ない様子です。準備も難しくないのでメモをまとめておきます。Visual Studio CodeからUSB経由接続で開発する方法は、これまでの開発とまったく違和感がなくおすすめです。

M5Burnerを使ってUIFlow-v1.3.2をM5Stackに書き込む

こちらは、通常のUIFlowの導入手順と変わりません。ほかの方の詳しい説明にお任せすることにします。PCへのデバイスドライバ(CP210x)のインストールと、M5Burnerを使ってファームウェアを書き込むところまで実行します。

raspberrypi.mongonta.com

M5StackをUSBモードにする

M5stackを再起動後、素早くCボタンを押してSETUPモードに入り、Switch to USB modeを選択します。これによって、PCとUSBケーブルで接続してPCから操作ができるようになります。再起動後はWindowsのデバイスマネージャで、COMポートに接続されているように認識されます。私の環境では、COM3ですね。

f:id:WindVoice:20190907140336j:plain

Visual Studio CodeにExtensionをインストール

Extensionsから、vscode-m5stack-mpyを検索してインストールします。

Visual Studio CodeにM5stackを認識させる

VSCodeの下にAdd M5stackという表示がでますので、これをクリックします。

f:id:WindVoice:20190907140741j:plain

するとウインドウの上にどのCOMポートと接続するか選択する表示がでますので、M5stackを選択します。私の場合はCOM3です。

f:id:WindVoice:20190907140823j:plain

開発を始める

ここまでくると、VSCodeExplorerでM5STACK DEVICEという表示がでるようになります。リロードアイコンを押すとM5stackの内容が参照できます。コードを新しいファイルで書き始めるときは+ボタン、何かリソースをM5Stackに転送するときはアップロードボタンです。ここでappsフォルダに *.pyファイルを置いておけば、起動時にアプリケーションとして選択できます。

f:id:WindVoice:20190907140948j:plain

できたコードを実行するときは、コードを右クリックしてRun In M5Stackです。

f:id:WindVoice:20190907141314j:plain

ここまでくれば簡単。いつもの感覚でお手軽開発ができて便利です。これで作業も進むかなぁ。