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
#IoTLT
#M5bitLess
#Scratch
#M5Stack