Help us understand the problem. What is going on with this article?

obnizOS搭載のM5StickCのBeetleCをスマホ画面から操縦

obnizIDを設定するだけで動作するサンプルプログラムです。

やっとM5StickCにobnizOSが来ました。これでHTML/javaScriptから、簡単にM5StickCを操作できるようになったわけです。ということで、M5StickCで大人気のBeetleCをobnizOSで動かしてみました。I2Cを使います。

■こんな感じで動きます

操作画面
画面のボタンで前後左右に動かします。ボタンを押している間その動作を、離すと停止をします。
動作に応じてLEDの色がかわります。
image.png
動画

■簡単な解説

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の画面操作系のお手軽さのタッグでますます楽しくなりそうな予感。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした