Document
Everything about obniz

Lesson: Turning on a LED

まずはLEDをobnizにつないで、LEDをスマホからON・OFFしてみましょう。

接続

まずは、obnizの電源を入れてQRが表示されることを確認します。 Wifiの設定がまだできていない方はQuickStartで設定して下さい。

LEDとは電気を流すことで光る部品です。 アノードとカソードという2本の足があり、アノードにプラス、カソードにマイナスを繋ぐと光ります。 少し足が長いほうがアノードです。

アノードをobnizのio0に、カソードをio1にさします。

(obnizのセットに入っているLEDは抵抗入りのLEDですが、もし抵抗入りじゃないLEDを繋ぐときは抵抗を繋いで下さい。)

LEDを点灯

プログラム画面を開きます。

まずは単純にLEDをONにしてみましょう。 下にあるのがそのためのプログラムです。まるごとコピーして自分のプログラム画面に貼り付けます。

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.3.0/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>LED</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var led = obniz.wired("LED", {anode:0, cathode:1});
    led.on();
  }
</script>
</body>
</html>

そしてプログラムの中で

var obniz = new Obniz("OBNIZ_ID_HERE");​

のOBNIZ_ID_HEREをあなたのobnizのidにします。 1234-5678なら

var obniz = new Obniz("1234-5678");​

とします。 そして「Save & Open Html」ボタンを押してこのページを開いてみましょう。 ページを開いた時にledが点灯したら成功です!

ボタンを押してLEDをON OFF

次にホームページに「ON」と「OFF」のボタンを追加しそれに合わせてLEDをON・OFFさせてみましょう。 やることは

  1. ホームページ上にボタンを2つ追加
  2. ボタンが押されたらledの状態を変える

で、この順番にやってみましょう。

まずはホームページ上にボタンを2つ追加します。 htmlの最初に以下の2つを追加します。

<button id="on">ON</button>
<button id="off">OFF</button>

これで画面にボタンが2つ出てくるはずです。 こんな感じで。

次に、このボタンが押された時にledのon・offを変えてみます。

jQueryを使って、on・offが押された時の処理を追加します。 例えば、ONと書いたボタンのidはonとしてあります。 jQueryではこのようにonというidが押された時に何かしたい時にこんな風に書くことができます。

$("#on").on("click",function(){
  // on pressed
})

これを使って、ボタンのonが押されたらledをonに。offが押されたらledをoffにするのはこのように書けます。

$("#on").on("click",function(){
  led.on();
})
$("#off").on("click",function(){
  led.off();
})

obnizがオフラインになったときはボタンが押されても反応しないようにするには,このように書きます.

$("#on").off("click");
$("#off").off("click"); 

これで全て完了です。 まとめるとこうなります。 これをプログラム画面に貼り付けてOBNIZ_ID_HERE の部分を自分のobnizidに変えて実行すると、ボタンが2つ出てきます。 そしてONを押すとLEDが点灯し、OFFなら消灯すると思います。

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>LED Switch</h1>
<button id="on">ON</button>
<button id="off">OFF</button>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var led = obniz.wired("LED", {anode:0, cathode:1});
    $("#on").on("click",function(){
      led.on();
    });
    $("#off").on("click",function(){
      led.off();
    });
  };

  obniz.onclose = async function(){
    $("#on").off("click");
    $("#off").off("click"); 
  };
</script>​
</body>
</html>

簡単でしょう?
これで、あなたは"Web"と"モノ"の連携ができる人になりました!

次にレッスンに行きましょう

詳しく

今回使用したLEDというパーツは詳しくは https://obniz.io/sdk/parts/LED ここで確認することができます。 on() off()以外にも点滅などの関数も用意されています。

jQueryについて、もっと知りたい?それならこちら http://learn.jquery.com/about-jquery/how-jquery-works/


Feel free to leave a comment