クリエイター手抜きプロジェクト[577]IoT M5 Stack編 グラフィックの描画/古籏一浩

投稿:  著者:  読了時間:9分(本文:約4,000文字)



今回は、M5 Stackを使ってグラフィックを描画させてみます。前回と同じく、まずはブロックを使ってプログラムを作成します。と書いてみたものの、四角形と円、画像に関してはブロックを配置しなくても表示することができます。

まず、UI.Flowのページにアクセスします。表示するM5 Stackのデバイス番号(Api Key)などを入力します。すでに、一度設定してあれば自動的にプログラムを組み立てる画面になります。

http://flow.m5stack.com





最初に四角形をひとつ表示してみましょう。画面左上に「Title」「label」「Rect」「Circle」「Image」のアイコンがあります。この中から「Rect」アイコンをドラッグして、その下にあるM5 Stackの画面上にドロップします。

すると、四角形が表示されます。四角形の位置を変えたい場合は、配置した四角形をドラッグします。また、配置した四角形をクリックするとダイアログが表示され、より細かい座標や色を設定できます。設定できる項目は、以下の8つがあります。

name:四角形の名前でブロックプログラムでアクセスする時に使います
x:四角形の左のX座標です
y:四角形の上のY座標です
width:四角形の横幅です
height:四角形の縦幅です
borderColor:四角形の枠の色です。入力欄をクリックするとカラーピッカーが表示されます
backgroundColor:四角形の中の色です。入力欄をクリックするとカラーピッカーが表示されます
layer:レイヤー番号です。重なり順を示します。0がM5の背景なので1以上を指定します。値が大きいほど手前に表示されます

四角形の設定が終わったら、画面右上にある実行ボタン(▼)をクリックして動作を確認してみましょう。無事に四角形が表示されればOKです。

なお、M5 Stackがネットワークで接続されていない場合や、ブロックエディタ側で認識されていない場合には、ブロックエディタ画面の左下にあるApi Keyの右側に[Disconnected]などステータスが表示されています。

Connectedと表示されていない場合は、M5 Stackとの接続が切れています。[Connected] version :V1.0.1の文字の右側にある、リロードボタンをクリックしてください。すると、M5 Stackとの接続をチェックしてくれます。

四角形はいくつでも配置できるので、先ほどと同様にドラッグ&ドロップしてみてください。レイヤーの番号を変えて重なり順も確認してみてください。

四角形と同様に円もドラッグ&ドロップで配置できます。「Rect」のアイコンをM5画面にドラッグドロップします。四角形と同様にドラッグして表示座標を変更できます。また、円をクリックすると、以下の項目を設定することができます。

name:円の名前でブロックプログラムでアクセスする時に使います
x:円の中心X座標です
y:円の中心Y座標です
radius:円の半径です
borderColor:円の枠の色です。入力欄をクリックするとカラーピッカーが表示されます
backgroundColor:四角形の中の色です。入力欄をクリックするとカラーピッカーが表示されます
layer:レイヤー番号です。重なり順を示します。0がM5の背景なので1以上を指定します。値が大きいほど手前に表示されます

円を配置したら実行ボタンをクリックして、期待通り表示されるかどうか確認しましょう。

配置した四角形や円を削除したい場合は、M5画面にある図形をドラッグするとM5画面の上にゴミ箱アイコンが赤い背景で表示されます。このゴミ箱アイコンに、図形をドラッグ&ドロップします。まとめて消すことはできないので、一つずつ消してください。

それでは次に、画像を表示させてみましょう。画像の場合、いくつか注意点があります。画像形式はBMPかJPEGのみです。また、ファイルサイズに制限があり、25KB以内となっています。ファイルサイズが大きいとエラーで転送できません。

ここで、注意しないといけないのは、表示する画像はクラウド(サーバー)にアップロードされるわけではない、ということです。画像のアップロード先はM5 Stack本体になります。

また、環境や設定にもよるのかもしれませんが、PhotoshopでJPEG画像を保存すると(Webで保存も同様)、M5 Stackでは画像が表示されません。

グラフィックコンバーターなどを使えば表示されますが、変換時に画像がかなり劣化したり、ファイルサイズが大きくなってしまうことがあります。そこで、定番(?)の画像処理ソフトのひとつであるGIMPを使います。GIMPであれば問題なく表示されます。

https://www.gimp.org/

Photoshopで作って、GIMPでJPEG保存するのがいいかもしれません。画像の準備ができたら、M5 Stackに画像を転送します。開発画面の右上にあるMANAGERアイコンをクリックします。雲から紙が出ているようなアイコンです。実行ボタンの左側にあります。

MANAGERアイコンをクリックすると、Resource Managerのダイアログが表示されます。「Add Image」のボタンをクリックします。ファイル選択ダイアログが表示されるので、用意したファイルを選択します。

すると、自動的にM5 Stackに画像がアップロードされます。正常にアップロードされると、画像のファイル名の右側に「Delete」のボタンが表示されます。もし、間違ってアップロードした場合は、「Delete」ボタンをクリックすると削除されます。

画像のアップロードが失敗した場合には、エラーが表示されます。画像のファイルサイズなどを確認してください。JPEG画像がグレーカラーやCMYKカラーになっている場合も駄目です。無事に画像のアップロードが終了したら、「キャンセル」ボタンをクリックします。これで準備完了です。

画像を表示するには、開発画面の左上にある「Image」のアイコンを、M5画面にドラッグドロップします。配置したらクリックします。すると、ダイアログが表示されますので、表示する画像などを設定します。

name:画像の名前でブロックプログラムでアクセスする時に使います
x:画像の左上のX座標です
y:画像の左上のY座標です
imagePath:画像のファイル名です。アップロードしたファイルを選択します

visibility:画像を表示するかどうかです。Trueなら表示、Falseなら表示されません。

layer:レイヤー番号です。重なり順を示します。0がM5の背景なので1以上を指定します。値が大きいほど手前に表示されます。

無事に画像が開発画面に表示されれば、準備完了です。あとは、実行ボタンをクリックして、M5 Stack本体に画像が表示されるか確認してみましょう。画像が表示されない場合は、他の画像で試してみてください。

表示する画像にdefault.jpgを指定し、デフォルト画像が表示されるのであれば、用意した画像に問題があります。確認してみてください。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

ダイドーの自動販売機は、缶コーヒーなどを買うとポイントが付くのですが、ついに3月末でカードタイプのが終了してしまいました。4月からはポイント溜めるにはスマホ必須。

専用アプリでポイントを溜めるのですが、iPhone SEだとポイント取得後の画面を閉じる×の位置とサイズが悪く、うまくタッチできない状態。どうも、連続して購入する人が少ないのか、そこらへん使いにくい感じはあります。

でも、溜めたポイントをnanacoとかAmazonとか他に移行できるようになったのは、ありがたいなあと思ってます。今までは無理矢理景品に交換していたので。

・InDesign自動化サンプルプログラム逆引きリファレンス上/下
https://www.amazon.co.jp/dp/4844396846/
https://www.amazon.co.jp/dp/4844396854/

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/