##obnizIDを設定するだけで動作するサンプルプログラムです。
やっとM5StickCにobnizOSが来ました。これでHTML/javaScriptから、簡単にM5StickCを操作できるようになったわけです。ということで、M5StickCで大人気のBeetleCをobnizOSで動かしてみました。I2Cを使います。
#■こんな感じで動きます
操作画面
画面のボタンで前後左右に動かします。ボタンを押している間その動作を、離すと停止をします。
動作に応じてLEDの色がかわります。
動画
#obnizOS で #M5StickC の #BeetleC を動かしてみた。Qiita投稿準備中。 pic.twitter.com/0pf36gaFcj
— Google Homer (@google_homer_) October 20, 2019
#■簡単な解説
###I2Cの宣言
M5StickCの上面のHATの0番と26番をI2C端子として使います。
obniz.i2c0.start({mode:"master", sda:0, scl:26, clock:400000});
###モーターの制御
下記は30のパワーで前進させる例です。
obniz.i2c0.write(0x38, [0x00,30]);
obniz.i2c0.write(0x38, [0x01,30]);
BeetleCのI2Cアドレスは0x38。
左車輪のレジスタは0x00、右車輪0x01。
前進の値1(遅)～127(速)、後進の値128(速)～255(遅)、停止の値0。
###LEDの制御
下記は全LEDを緑色で最も明るく光らせる例です。
for ( n=0; n<7; n++ ){
obniz.i2c0.write(0x38, [0x02,n,0,255,0]);
}
LEDのレジスタは0x02。
底面に7個のLEDがあり、no(0～6)でLED番号を指定。
R,G,Bの組み合わせで色指定。0(暗)～255(明)で各色の輝度を指定。
#■サンプルプログラム
obnizのID部分を自分のIDに書き換えれば動くはず。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>
</head>
<body>
<div id="obniz-debug"></div><br>
<font size="7">BeetleC Controller</font><br><br>
<button id="FORWARD" class="btn btn-warning" style="width:50%;height:80px;font-size:60px;">↑</button><br><br>
<button id="BACK" class="btn btn-warning" style="width:50%;height:80px;font-size:60px;">↓</button><br><br>
<button id="LEFT" class="btn btn-warning" style="width:50%;height:80px;font-size:60px;">←</button><br><br>
<button id="RIGHT" class="btn btn-warning" style="width:50%;height:80px;font-size:60px;">→</button><br><br>
<button id="STOP" class="btn btn-warning" style="width:50%;height:80px;font-size:60px;">STOP</button>
<script>
var obniz = new M5StickC("XXXX-XXXX");
obniz.onconnect = async function () {
obniz.i2c0.start({mode:"master", sda:0, scl:26, clock:400000});
$("#FORWARD").on('touchstart mousedown' ,async ()=> { await FORWARD(); })
$("#FORWARD").on('touchend mouseup' ,async ()=> { await STOP(); })
$("#LEFT").on('touchstart mousedown' ,async ()=> { await LEFT(); })
$("#LEFT").on('touchend mouseup' ,async ()=> { await STOP(); })
$("#RIGHT").on('touchstart mousedown' ,async ()=> { await RIGHT(); })
$("#RIGHT").on('touchend mouseup' ,async ()=> { await STOP(); })
$("#BACK").on('touchstart mousedown' ,async ()=> { await BACK(); })
$("#BACK").on('touchend mouseup' ,async ()=> { await STOP(); })
$("#STOP").on('touchend mouseup' ,async ()=> { await STOP(); })
async function FORWARD(){
obniz.i2c0.write(0x38, [0x00,30]);
obniz.i2c0.write(0x38, [0x01,30]);
for ( n=0; n<7; n++ ){
obniz.i2c0.write(0x38, [0x02,n,0,255,0]);
}
}
async function BACK(){
obniz.i2c0.write(0x38, [0x00,255-30]);
obniz.i2c0.write(0x38, [0x01,255-30]);
for ( no=0; no<7; no++ ){
obniz.i2c0.write(0x38, [0x02,no,255,0,0]);
}
}
async function LEFT(){
obniz.i2c0.write(0x38, [0x00, 10]);
obniz.i2c0.write(0x38, [0x01,100]);
for ( no=0; no<7; no++ ){
obniz.i2c0.write(0x38, [0x02, no,0,0,255]);
}
}
async function RIGHT(){
obniz.i2c0.write(0x38, [0x00,100]);
obniz.i2c0.write(0x38, [0x01, 10]);
for ( no=0; no<7; no++ ){
obniz.i2c0.write(0x38, [0x02,no,0,255,255]);
}
}
async function STOP(){
obniz.i2c0.write(0x38, [0x00,0]);
obniz.i2c0.write(0x38, [0x01,0]);
for ( no=0; no<7; no++ ){
obniz.i2c0.write(0x38, [0x02,no,0,0,0]);
}
}
}
</script>
</body>
</html>
#まとめ
ネイティブのM5StickCでも技を駆使すれば画面からコントロールできますが、やはりobnizのHTML/JavaScriptの手軽さは群を抜いているという感じです。M5StickCの小型/電池内蔵の機動力とobnizOSの画面操作系のお手軽さのタッグでますます楽しくなりそうな予感。