obnizと超音波距離センサー「HC-SR04」で測った数値を、ブラウザを使ってメーター表示します。可視化すると電子工作で検証がしやすくなるメリットがあります。
obnizとHC-SR04距離センサー
obnizボードの7～8番ピンに、超音波距離センサー「HC-SR04」を直刺ししています。（ブザーが0～2番ピンに刺さっていますが、今回は使っていません。）
障害物までの距離を可視化
距離センサーから障害物までの距離を、メーターで可視化しています。
近づくとメーターが下がります。
小さくて見えませんが、メーター左下あたりに距離の数字も出力しています。
距離の可視化コード
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>距離の可視化</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@3.18.0/obniz.js" crossorigin="anonymous"></script> <style> .distView { width: 95%; margin: 20px 2.5%; overflow: hidden; } .distView dd:first-child { background-color: #EEE; } .distView .bar { display: block; height: 20px; background-color: #D81B60; transition: width 0.2s; } </style> </head> <body> <main> <dl class="distView"> <dt>距離</dt> <dd><span class="bar"></span></dd> <dd><span class="num"></span> mm</dd> </dl> </main> <script> const obniz = new Obniz("obniz-ID"); const $distBar = $(".distView .bar"); const $distNum = $(".distView .num"); obniz.onconnect = async () => { const hcsr04 = obniz.wired("HC-SR04", {gnd:8, echo:9, trigger:10, vcc:11}); const MAX_DIST = 500; let dist; const writeDist = (dist) => { $distNum.text(Math.round(dist)); $distBar.css("width", dist/MAX_DIST*100 + "%"); }; while(true) { dist = await hcsr04.measureWait(); writeDist(dist); await obniz.wait(200); } }; </script> </body> </html> |
const MAX_DISTは、メーターが100％幅になる距離の数字を入れます。上のコードでは500mmでメーターが100%になります。
距離センサーのテストなどで、ご利用ください。