M5StackとScratchのより良い関係:覚醒編

https://gyazo.com/807246e683f3e68c3682f11cb9c4e3a9

2022/03/15 IoT縛りの勉強会! IoTLT vol.85

by むとうたけし(/610t/610t)

むとうたけしって?

むとうたけし(武藤武士): 専業主夫(51歳)＠奈良

610t

https://gyazo.com/39cde8d185f70093c10881c8b366f7d8

全部の情報:

むとうたけし(武藤武士)

専業主夫(51歳)＠奈良

所属コミュニティ

M5Stack User Group Japan

CoderDojo奈良

関西*BSD ユーザ会

アカウント一覧

twitter: @610t http://twitter.com/610t

Github: 610t https://github.com/610t

YouTube:https://www.youtube.com/channel/UCdf9QaIb7T1qmzJjl3C-iiA

はじめに

ScratchとM5Stackで遊ぶ(2021/10/28 ビジュアルプログラミングIoTLT vol.9)のつづき

ついに、M5Stackの機能を使えるようにM5bitLessに魔改造を…

Scratchと拡張機能

https://gyazo.com/6bfac9414a50aad4016dd02c42289099

Scratchは、みんな大好き全ての年齢の子供たちのための…

ビジュアルプログラミング環境

変態的な言語: オブジェクト指向, 並行処理, イベント(メッセージ)ベース

シェア/フォーク(リミックス)のためのプラットフォーム

Scratch専用SNS環境も

サーバーソース: https://github.com/LLK/scratch-gui

解説: Scratch を改造しよう 3章まで無料公開

拡張機能: Scratchに色々な機能を追加して拡張するもの

JavaScript(Node.js)で記述する

公式のScratchで利用可能な拡張機能

https://gyazo.com/0c8cf6ab7b821ee210eed25fbf53f687

独自拡張機能が追加されたStretch3の拡張機能

これからお話するMicrobit Moreはこの環境などで利用可能(赤枠)

Xcratchでも独自拡張機能が利用可能

https://gyazo.com/7b0248fd46a8fa5dc9c50cb9da87449f

Microbit More拡張機能

https://gyazo.com/a71c664d6d5a535dd895844981e3f7f1

Microbit More

Yengawa Labさんが開発

Stretch3やXcratchなどで使える

Scratch3からmicro:bitの全ての機能を使うための拡張機能

公式micro:bit拡張機能は、ジェスチャーなど限られた機能しか使えない

ソース

micro:bitファームウエア側: https://github.com/yokobond/pxt-mbit-more-v2/

Scratchサーバー拡張機能側: https://github.com/yokobond/mbit-more-v2/

Microbit Moreのラベルとデータ

https://gyazo.com/f9f58876653f02ebc4a321156132e507

micro:bitとScratchの間で情報をやり取りする仕組

ラベルlabel-01という名前のついたデータdataを送ったり、受け取ったりできる

1番目のブロック: ラベル名label-01だけを使って、micro:bit->Scratchへのイベントとして扱う

2番目のブロック: micro:bit->Scratchへのデータ受信(ラベル名label-01のデータ値を受け取る)

3番目のブロック: Scratch->micro:bitへのデータ送信(ラベル名label-01のデータdataを送る)

ラベルとデータの制限

ラベル: 文字列で、最長8文字

データ: 以下のどちらか

32bit浮動小数点の数値

文字列(最長11文字)

M5Stack一家

こんな感じのかわいいマイコンです!!

https://gyazo.com/0371c74f4489b6454fbc0141ae5c36eb

ハードウエアの特徴(赤字は今回使ったもの)

CPU:ESP32, K210など

ディスプレイ:320x240TFT(Core,Core2), 80×160TFT(M5StickC), 135x240TFT(C Plus), 5x5フルカラーLED(ATOM Matrix)

バッテリー:150mAh(Core), 390mAh(Core2), 80or95mAh(C), 120mAh(C Plus)

ネットワーク:Wi-Fi(2.4G) + BLE

センサー:加速度センサー、ジャイロ、ボタンスイッチ、温度センサーなど

オーディオ:マイク, スピーカー

その他I/O:Grove A(I2C), B(A/D,GPIO), C(UART), M-BUSなど

付属物:キーボード、腕時計バンド、LEGOマウント

M5bitLessってなぁに?

https://gyazo.com/e24c1dc68f8f61d2a0cdefa378498428

M5bitLess=M5Stack一家をmicro:bitのようにふるまわせてMicrobit More(↔︎Less)を使う

Microbit Moreの寄生虫

ソース: https://github.com/610t/M5bit-less

動作機種 (リンク先はSWITCHSCIENCE)

M5Stack Basic/Gray/Core2

M5StickC/C Plus

ATOM Matrix/Lite

Wio Terminal

その他の情報

説明など

ビジュアルプログラミングでブルブルブルッ(2022/02/15(火): IoT縛りの勉強会! IoTLT vol.84 @Youtube)

M5bit Less: M5Stack x Scratch3 = So Fun!!: M5bitLessの説明 (2021/09/16 ProtoPedia)

デモ

時を超えて…: いつでもオリンピック: (2022/02/19 ツクってアソぶハッカソン(ProtoPedia))

発表資料: 「/610t/時を超えて…」

ドラムを叩こう!!:ScratchとM5bitLessで遊ぶhapStak: (2022/01/21 ProtoPedia)

対応しているブロック(赤枠部分)

Label&Dataに対応していることに注目!!

https://gyazo.com/001ea88f95d81b1bfa9de4a9d5250562

M5bitLessラベル&データ拡張

github: https://github.com/610t/M5bit-less/tree/demo

予約語ができてしまうので、demoブランチで展開中

特定のラベルに意味づけをして、M5Stackの描画命令(など)を使う

例: (x0,y0):座標、r:半径、c:色など

例:cmdラベルのデータは描画命令; drawLine: 線の描画、fillCircle:塗った円の描画など

Scratch -> M5Stack

円を描く場合: 中心座標(x0,y0), 半径r, 色cで、fillCirclecmdを実行

https://gyazo.com/e91da89fa1d56302960c521efe8971d6

table:予約語

ラベル名意味値

label ラベルとデータの表示 0:表示しない(デフォルト)、それ以外:表示する

led LEDのオンオフ 'on':オン, それ以外:オフ

x0,y0,x1,y1,x2,y2 座標(x,y) 整数

w,h 幅と高さ整数

r 半径整数

c 色(24bit) 整数

xc,yc 文字列表示位置整数

str 表示する文字列文字列

size 文字サイズ整数(1-7)

tc 文字色(16bit) 整数

cmd 描画コマンド文字列(下表参照)

table:コマンド一覧

cmdのデータ意味実際のコマンド

drawPixel 点を描画 M5.Lcd.drawPixel(x0, y0, c)

drawLine 線を描画 M5.Lcd.drawLine(x0, y0, x1, y1, c)

drawRect 四角を描画 M5.Lcd.drawRect(x0, y0, w, h, c)

drawTriangl 三角を描画 M5.Lcd.drawTriangle(x0, y0, x1, y1, x2, y2, c)

drawRoundRe 角丸四角を描画 M5.Lcd.drawRoundRect(x0, y0, w, h, r, c)

fillScreen 全画面を単色で塗る M5.Lcd.fillScreen(c)

fillRect 塗った四角を描画 M5.Lcd.fillRect(x0, y0, w, h, c)

fillCircle 塗った円を描画 M5.Lcd.fillCircle(x0, y0, r, c)

fillTriangl 塗った三角を描画 M5.Lcd.fillTriangle(x0, y0, x1, y1, x2, y2, c)

fillRoundRe 塗った角丸四角を描画 M5.Lcd.fillRoundRect(x0, y0, w, h, r, c)

print 文字列を描画 M5.Lcd.setCursor(xc, yc);M5.Lcd.setTextColor(tc);M5.Lcd.setTextSize(size);M5.Lcd.print(str)

M5Stack -> Scratch

キーが押された時に、文字を表示する

https://gyazo.com/18dad02cfe4320f5174ee339529041e5

table:予約語

ラベル意味実際の値

Key Grayのキーボードで入力された文字コード 'a', 'b', 'A', ...

a ランダムな'a'-'z'の文字を返す 'a', 'b', 'c', ...

デモ

画面にM5Stackの描画命令で、❤️を表示

https://youtu.be/Vk8FoH25KJg

https://gyazo.com/db7acf01d0633a8144770b10069964fe

画面にM5Stackの描画命令で、ランダムに円や四角や文字列を表示

https://youtu.be/FYaJ7QR_N-g

https://gyazo.com/5b4a8e5d8401c286d40c97b00bf80540

おわりに

とうとう、Microbit Moreの機能を実装するだけではなく、M5bitLessに独自拡張をしてしまいました

M5Stackへの描画関係

キーボード入力

他にどんな機能が欲しいですか?

当日の情報へのリンク

イベントページ: IoT縛りの勉強会! IoTLT vol.85(資料)

Togetter: ポン出しシステム初稼働！＠IoTLT vol.85

レポート: 【イベントレポ】IoT縛りの勉強会! IoTLT vol.85 @Youtube

YouTube: むとう発表開始時間 33:37-

https://www.youtube.com/watch?v=V5J7a7PEP3k&t=2544s