Document
Everything about obniz

Lesson: Turning on a LED

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

接続

まずは、obnizの電源を入れてQRが表示されることを確認します。 Wifiの設定がまだできていない方はQuickStartで設定して下さい。 LEDと抵抗を下の図のようにobnizの0と1に接続します。

[ここに図か写真が来る予定]

接続できたらこれで完了です。 プログラムしてみましょう。

LEDを点灯

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

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

<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>

そしてプログラムの中で

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").click(function(){
  // on pressed
})

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

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

これで全て完了です。 全体としてはこのようなプログラムとなります。

<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").click(function(){
      led.on();
    })
    $("#off").click(function(){
      led.off();
    })
  }
</script>​

これをプログラム画面に貼り付けて実行すると、ボタンが2つ出てきます。 そしてONを押すとLEDが点灯し、OFFなら消灯すると思います。

詳しく

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

jQueryについては http://learn.jquery.com/about-jquery/how-jquery-works/ などが参考になります。