obnizを搭載したIoTラジコンを制作しています。ハードは少し前に完成したので、今度はソフトの制作です。まずはHTMLで簡単なコントローラーを作ってみます。
十字キーとスピードスライダー
最初は簡単なコントローラーを作ります。
前進、後退、右旋回、左旋回、スピード調整ができれば十分です。
obnizを使っていると、Webの知識（HTML、CSS、JavaScript）でコントローラーを作れます。
コントローラーのHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IoT Controller</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #controller { display: flex; } #crossKey { position: relative; width: 50vmin; height: 50vmin; } #controller button { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 15vmin; height: 15vmin; font-size: 10vmin; padding: 0; cursor: pointer; } #controller button:hover { background-color: #E8F5E9; } #controller button[data-motor="flont"] { margin: 0 auto auto; } #controller button[data-motor="back"] { margin: 30vmin auto auto; } #controller button[data-motor="left"] { margin: 15vmin auto auto 0; } #controller button[data-motor="right"] { margin: 15vmin 0 auto auto; } #power { position: relative; top: 20vmin; left: 5vmin; transform: rotate(-90deg) scale(2); width: 25vmin; cursor: pointer; } </style> </head> <body> <div id="obniz-debug"></div> <main> <h1 class="hide">IoT Controller</h1> <nav id="controller"> <div id="crossKey"> <button data-motor="flont">↑</button> <button data-motor="back">↓</button> <button data-motor="left">←</button> <button data-motor="right">→</button> </div> <div id="powerLever"> <input id="power" type="range" value="50" max="100" min="20"> </div> </nav> </main> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@3.16.0/obniz.js" crossorigin="anonymous"></script> <script> const obniz = new Obniz("obniz-id"); obniz.onconnect = async () => { const dcMotor1 = obniz.wired("DCMotor", {forward:0, back:1}); const dcMotor2 = obniz.wired("DCMotor", {forward:2, back:3}); const $power = $('#power'); //const servo = obniz.wired("ServoMotor", {gnd:4,vcc:5,signal:6}); const init = () => { setUI(); setPower($power.val()); }; const setPower = (val) => { dcMotor1.power(val); dcMotor2.power(val); }; const setUI = () => { const $crossKey = $('#crossKey button'); let direction; $crossKey.on({ "mouseenter": function() { direction = $(this).attr("data-motor"); if(direction === "flont"){ dcMotor1.forward(); dcMotor2.forward(); }else if(direction === "back"){ dcMotor1.reverse(); dcMotor2.reverse(); }else if(direction === "left"){ dcMotor1.forward(); dcMotor2.reverse(); }else if(direction === "right"){ dcMotor1.reverse(); dcMotor2.forward(); } }, "mouseleave": function() { dcMotor1.stop(); dcMotor2.stop(); } }); $power.on('input change', function(){ setPower($power.val()); }); }; init(); } </script> </body> </html> |
上記のHTMLをブラウザで開けば、ラジコンをインターネット経由で動作させられます。
引き続きアームを上下に動かす機能を、次回追加します。