obnizでGroveのデジタル入力（Grove ボタン）とIoTを試してみよう

こんにちは。ワンフットシーバスの田中です。

obnizでGroveのデジタル入力（Grove ボタン）とIoTを試してみようと思います。

コンテンツ

Groveとは

Groveは、Seeed Studioが開発しているハンダ付けをせずとも差すだけで扱える便利な仕組みです。様々なセンシング（現実世界のいろいろな状況を数値化して把握するデバイス）やアクチュエーター（音・光・動きなど様々な動きを起こせるデバイス）があります。

そのラインナップの豊富さは、電子工作のパーツを購入できるスイッチサイエンスさんのGroveカテゴリで確認することができます。

Grove – スイッチサイエンス

100を超えるセンサーやアクチュエーターがあり、これを眺めて、構想を練るだけで楽しくなってきます。

Grove ボタンを用意

さて、今回使うのはGrove ボタンです。こちらのON/OFFをobnizで取得してみます。

私は、スイッチサイエンスから GROVE – ボタンで購入したものを使っています。

売り切れになっていることもあるので、その場合は GROVE – ボタン(パネルタイプ) – スイッチサイエンスでも代用可能です。仕組みは一緒です。

つなぐために変換ケーブルも用意

ただ、これだけですと、obnizのコネクタにはつながりません。Groveとobnizがつながるように、Grove 4ピンコネクタ – ジャンパーピン変換ケーブルという製品も購入します。

こちらです。

私は、千石電商さんの実店舗やオンラインショップで Seeed Studio 110990210 Grove 4ピンコネクタ – ジャンパーピン変換ケーブル(5本入り) を購入しました。

obnizとGrove ボタンをつないでみる

ということで、obnizとGrove ボタンをつないでみましょう。

まず、Grove ボタンと先ほどの変換ケーブルをこのようにつなぎます。手前にツメがありますが、カチッとハマるまで差し込みましょう。もし、外す場合はこのツメを押し開きながらゆっくり引き抜くと外れます。

つづいて、変換ケーブルの4本のオスピンをそれぞれobnizのコネクタにつなぎます。

obnizの 0 番ピン
- 変換ケーブルの黄色ピン
obnizの 1 番ピン
- 変換ケーブルの白色ピン
obnizの 2 番ピン
- 変換ケーブルの赤色ピン
obnizの 3 番ピン
- 変換ケーブルの黒色ピン

という形でつなぎます。

obnizのプログラムの準備

obnizの開発者コンソールでプログラムを作ります。

以下のとおりです。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/[email protected]/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<h1>Hello Grove Button</h1>
<div id="print"></div>

<script>
var obniz = new Obniz("9944-2015");
obniz.onconnect = async function () {

  obniz.display.clear();
  obniz.display.print("Hello Grove Button");
  
  // IO3をGNDとして使う
  obniz.io3.output(false);
  // IO2をVINとして使う
  obniz.io2.drive('5v');
  obniz.io2.output(true);
  // IO0でボタンの反応を待つ
  obniz.io0.pull('5v');
  obniz.io0.input(function(value){
    console.log("changed to " + value);
    if(value){
      obniz.display.clear();
      obniz.display.print("Button = ON");
      $('#print').text("Grove Button が ON になったよ！");
    } else {
      obniz.display.clear();
      obniz.display.print("Button = OFF");
      $('#print').text("Grove Button が OFF になったよ！");
    }
  });
  
}

</script>
</body>
</html>

今回は、Groveボタンが押されると、obnizのディスプレイに「Button = ON」という文字が表示され、obnizのHTML表示では「Grove Button が ON になったよ！」と表示されるように仕組みを作っています。