Arduino Web EditorでGenuino 101を使ってみた

現在仕事は夏休みで、しかも暑くて出歩くどころではない、ということで、日頃の余暇不足を取り戻すべく連日ブログを更新しているわけですが、もう一つ放置していたボードがあったのを思い出しました。

Genuino 101です。

genuino101.jpg

これはインテルのCurieというチップを使ったボードで、「Arduino UNOの後継」という触れ込みです。
CPUも全く異なるのですが、ボード単体の機能面としては

・Bluetooth Low Energyを標準搭載
・6軸加速度センサを標準搭載

といったあたりが目新しいところです。
詳しい解説としては下記の記事があります。

Curie搭載の開発ボード「Genuino 101」を試す – Arduino UnoやGalileoとの比較から性能を検証する (1) Intelが注力するIoT分野の新製品 | マイナビニュース

私は単に新製品、というだけで発売時(3月の末ごろでした)に購入したのですが、仕事が忙しく、放置したまま忘れていました。
まあ、上記の新機能だけでは実はそれほど情熱が湧かなかったというのも本音なのですが・・・。

さてそれとは別に、先日新しく「Arduino Create」なるサービスが開始されました。
これはmbedなどと同じく、Arduinoの開発をオンラインで行えるというサービスです。
こちらの記事で知りました。

Arduino Createが正式リリースされました | スイッチサイエンス マガジン

サービスとしては開発環境「Web Editor」の他に、Arduinoから接続できるクラウドサービスなどもあるようです。

arduinocreate.png

しかし、クラウドのほうは対応ボード(現在のところYUN Shield、MKR1000、WiFi Shield 101)が必要なようです。
クラウドはMKR1000が国内発売されたら考えることにして、まずはWeb EditorでGenuino 101を動かしてみました。

現在、Web Editorは「招待制」になっていますが、実際には招待を希望すると翌日にはアカウントがもらえました。
立ち上げると、こんな感じの画面です。
左側がメニュー、右側が編集領域になっています。
mbedの環境よりもデザインは整理されている印象です。

webeditor01b.png

この状態では、まだボードが認識されていません。
Web Editorは、開発はWeb上ですが、ボードとWeb Editorを接続するために、PCに常駐ソフト(プラグイン)のインストールが必要です。
証明書の警告が出るなど、相変わらず微妙な感じではありますが、とにかくインストールします。
あとは普通にボードをUSBでPCに接続すると、常駐ソフトが認識してくれました。

ボードの種類と接続先のシリアルポートを選択できたら、まずはLチカです。
画面左の「Examples」から「01.Basics」を選ぶと、その中に「Blink」があります。

webeditor02b.png

コンパイルとボードへの書き込みは、右側のエディット領域の上部の「→」のボタンです。
このあたりは、IDEと同じなので、IDEに慣れていれば分かりやすいですね。

ボタンをクリックすると、コンパイルから書き込みまで自動で行われます。
処理中はボタンがBUSYの表示に変わります。

webeditor03b.png

これだけで、ボードにスケッチをアップロードできました。
mbedに比べるとファイルコピーの手間がない分、お手軽な感じです。

ちなみにGenuino101はLEDが緑色でした。

genuino101b.jpg

Lチカの次は、Genuino101特有の機能を試してみました。
画面左のLibrariesを選択し、検索フィールドに「Curie」と入力するとCurieの機能をサポートするライブラリとサンプルがいろいろ出てきます。

webeditor04b.png

まずは加速度センサを試してみます。
ライブラリ「CURIEIMU」の例題から「Accelerometer」を選びます。

webeditor05b.png

そして先ほど同様、ボードにアップロードします。

このスケッチは、シリアルポートに結果を出力しています。
シリアルポートの出力も、Web Editorから確認することができます。
画面左の「Serial Monitor」を選択すると、ボードのシリアルポートの出力がリアルタイムに表示されます。
これはなんだか不思議な感じです。

webeditor06b.png

なお、シリアルポートに出力するスケッチの場合、Web Editor側でSerial Monitorを表示するまで、動作がブロックされるようです。
最初いくつかのスケッチがうまく動作せず、悩んでしまいましたが、原因はこれでした。

ローカルでシリアルポートの出力を確認したい場合は、常駐ソフト(タスクバーにアイコンがあります)のメニューからシリアルモニタを開くことができます。
これは実際には常駐ソフトへブラウザからアクセスすることで実現されているようです。
下はサンプル「ASCIITable」の出力をローカルの画面で確認した様子です。

webeditor07b.png
webeditor08b.png

Bluetoothのサンプルも試してみました。
ライブラリ「CURIEBLE」にサンプルがあります。

webeditor09b.png

「LED」はスマホのアプリからBLE経由でGenuino101のLEDをオン・オフするものです。
下記に非常に分かりやすい記事がありますので、ここでは省略します。

Genuino (Arduino) 101 で BLE 経由でLチカさせる – Qiita

さて、ちょっと使ってみての感想です。
まずmbedと比べると後発ですが、その分よくできているように思います。
IDEでできることは、大体できるようです。

また、純正のライブラリやツールが常に最新の状態に保たれることも大きなメリットです。
最近もGenuino 101関連のアップデートがあったようです。

Arduino Blog – Intel releases an improved version of the Arduino 101 core!

ESP8266も、Arduinoからモデムとして使うだけであれば、そのうちライブラリが整備されそうです。

一方で、ESP8266をArduinoボードとして使うような、非純正のボードは現在サポートされていないようです。
ESP8266のCPUは他のボードとは異なりますので、専用のコンパイラが必要です。
ということは、オンラインコンパイラにESP8266用のコンパイラとライブラリを用意しなければならないわけで、ここらへんが課題なのではないかと思います。

オープンソースで公開されている様々なライブラリや、非純正のボードなども、Arduino環境の魅力の一つです。
そちらを重視するのであれば、まだIDE環境のほうに分があるようです。

Arduino Web Editor、純正のボードとライブラリだけで開発するには、結構良さそうな開発環境です。
リリースされたばかりのツールですから、今後に期待です。

GitHubを利用開始、Arduboy用ブロック崩しを公開

Arduboy用に作ったブロック崩しですが、せっかく作ったのでArduboyのコミュニティに投稿してみました。

ガイドラインを読むと、コードの公開先はGitHubを推奨されていましたので、昨日アップロードしたのと同じコードを拙い英語の説明をつけて以下で公開しました。

boochow/breakout-v: Simple breakout game for Arduboy

コミュニティに投稿したページはこちらです。

Breakout-v – vertical screen breakout – Arduboy / Games/Apps – Community

GitHubのアカウントはだいぶ以前に作ってあったのですが、活用していませんでした。
今回再びチュートリアルからやり直しました。
マークダウン記法もずっと昔は使っていたのですが、すっかり忘れていました・・・。

Arduboyでブロック崩し

arduboy07.jpg
Arduboyのプログラムは基本的にはArduinoと同じです。
Arduboyのハードウェアにあわせたライブラリが提供されていますので、それを使います。
Arduboyに依存した処理はArduboyクラスで定義されています。

ライブラリの解説は正式なものはまだ内容ですが、Arduino用TFTライブラリなどを使ったことがあれば、それほど難しくはありません。
ヘッダファイルを見ればなんとなく使い方は分かります。

グラフィックス関連のヘッダファイルはこちら。

Arduboy/Arduboy.h at master · Arduboy/Arduboy

サウンド関連のヘッダファイルはこちらです。

Arduboy/audio.h at master · Arduboy/Arduboy

とりあえず何か作ってみようということで、まずは以前作ったブロック崩しを移植してみました。
ゲームの基本的な処理は変わっていませんが、ゲームとして完結するよう、ミス5回でゲームオーバーとし、スコア表示も追加しています。
また、隠しコマンドとしてゲーム開始時(AまたはBボタン)に左ボタンを押しているとデモモード、右ボタンを押していると高速モードになるようにしています。

Arduboyでの基本的なプログラムは以下のようになります。

#include "Arduboy.h"

Arduboy arduboy;

void setup() {
arduboy.begin();
arduboy.setFrameRate(30);
}

void loop() {
if (!(arduboy.nextFrame()))
return;

// いろいろな処理や描画命令など

arduboy.display();
}

Arduboyでは、描画命令は画面に対してではなく仮想スクリーンに対して行い、仮想スクリーンの内容を

 arduboy.display();

で一気にOLEDに転送しているようです。

それは結構重い処理なのではないかと思ったのですが、考えてみると白黒で128×64ピクセルしかないので、1024バイトの転送で済みます。毎秒60回処理しても60KBの転送量ですから、まあなんとかなりそうです。
カラーLCDだと1ピクセルで2バイトのデータですので、ピクセルあたり1/16のデータ量しかありません。

ただ、少ないArduinoのRAMの半分を仮想スクリーンに使ってしまいますので、メモリの使い方には注意が必要かもしれません。

移植するブロック崩しは、内部的には30×40ピクセルのマップ内で処理を行っており、使用するLCDの解像度に合わせて描画時に拡大することを想定しています。
今回は、Arduboyのスクリーンを90度回転し、マップを縦横2倍に拡大することにしました。
また、スクリーンの縦横比が1:2と大きいので、内部のマップを30×50ピクセルに引き伸ばしました。

128×64ドットのスクリーンの内側の100×60ドットをゲーム画面に使い、残りを枠やスコアなどの表示に使います。

Arduboy特有の命令で今回使ったのは、以下のものです。

・入力関係

arduboy.pressed(A_BUTTON) // ボタンが押されていればtrue
arduboy.notPressed(A_BUTTON) // ボタンが押されていなければtrue
// 他のボタンは、B_BUTTON、UP_BUTTON、DOWN_BUTTON、LEFT_BUTTON、RIGHT_BUTTON

・描画関係

arduboy.clear() // 全消去
arduboy.drawRect(x, y, w, h, color) // 矩形を描画
arduboy.fillRect(x, y, w, h, color) // 塗りつぶした矩形を描画
arduboy.fillCircle(x, y, r, color) // 塗りつぶした円を描画

・音関係

arduboy.tunes.tone(frequency, duration) // frequencyはHz、durationはmsec

このほか、テキスト表示を90度回転させるために、Arduboy.cppの中で定義されているdrawChar()を改変して使っています。

最後に、今回作ったスケッチと動作の様子のビデオを載せておきます。