obniz ブログ
このブログは過去の記事のアーカイブです。最新情報は iot.obniz.com のニュース をご覧ください。

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

(更新2021.05.17)ColumnParts

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

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

Groveとは

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

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

Grove – スイッチサイエンス

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

Grove ボタンを用意

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

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

image

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

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

image

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

image

こちらです。

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

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

image

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

image

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

image

つづいて、変換ケーブルの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/obniz@2.0.3/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 になったよ！」と表示されるように仕組みを作っています。

動かしてみる

では、実際に動かしてみましょう。先ほどのプログラムを実行してみます。

image

まず、起動時には、ボタンはOFFではじまるので、このように表示されます。

image

ボタンを押してみるとobnizのディスプレイに「Button = ON」という文字が表示され、

image

obnizのHTML表示では「Grove Button が ON になったよ！」と表示されます。

このように、Groveのデジタル入力 ON/OFF を取得することができます。たとえば、obnizのHTML表示がスマートフォンの画面に表示させることで、外出先からインターネット上のどこからでもボタンの ON/OFF を把握することができます。

Groveのデジタル入力は、他にもいろいろとあります、たとえば、このようなセンサーたち。

image

右から説明していくと、

といったことが可能なセンサーも、今回の仕組みで検知することができます。

つまり、現実世界で把握したい出来事に合わせてGroveセンサーを変えることで、同じデジタル入力を検知する仕組みでもスイッチの状態でインターネット上から状況を確認することが可能です。

← ブログ トップへ