obniz Docs リファレンス obniz Board/obniz Board 1Y 起動とWi-Fi設定 動かしてみよう

動かしてみよう

obniz Boardの起動方法は、クイックスタートをご確認ください。

プログラムについて

ここで使うプログラムは下記の通りです。

<!-- HTML Example -->

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/starter-sample.css">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.3.0/obniz.js"></script>
</head>
<body>

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

<!--文字の表示-->
<div class="wrap">
  <div class="print">
    <h3 class="text-center">Print words on obniz</h3>
    <div>
      <input type="text" id="text" value="Hello World" placeholder="Input in freely">
      <button class="btn btn-primary" id="showtime">Print on obniz</button>
    </div>
  </div>

<!--ダイヤルスイッチの状態を表示-->
  <div class="switch">
    <h3 class="text-center"> Swtich </h3>
    <span id="print">undefined</span>
  </div>

<!--LEDのON/OFFボタン-->
  <div class="led">
    <h3 class="text-center">Turning on a LED</h3>
    <button class="btn btn-primary" id="on">LED ON</button>
    <button class="btn btn-outline-primary" id="off">LED OFF</button>
    <dl>
      <dt>Demo Pin assign</dt>
      <dd>- io0:LED anode</dd>
      <dd>- io1:LED cthode</dd>
      <dd>- Switch state will be printed on browser</dd>
    </dl>
  </div>

</div>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var led = obniz.wired("LED", {anode: 0, cathode: 1});
    obniz.display.clear();
    obniz.display.print("Hello World");

    obniz.switch.onchange = function (state) {
      $('#print').text(state);
      obniz.display.clear();
      obniz.display.print(state);
    };

    $("#showtime").on("click", function () {
      obniz.display.clear();
      obniz.display.print($("#text").val());
    });

    $('#on').click(function () {
      led.on();
      obniz.display.clear();
      obniz.display.print("ON");
    });

    $('#off').click(function () {
      led.off();
      obniz.display.clear();
      obniz.display.print("OFF");
    });
  };
</script>
</body>
</html>

オンラインHTMLエディタ

ここからは、オンラインのHTMLエディタを使い、HTMLとJavaScriptを組み合わせたプログラムから利用する方法を紹介します。

プログラムの実行/終了

obnizIDを入力して実行ボタンを押すと、ブラウザとobniz Boardがつながります。
ブラウザ上の実行画面には、接続に成功すると緑のバーが表示されます。同時にobniz Boardのディスプレイも実行中の表示に切り替わります。
プログラムは実行画面を閉じる（[終了]をクリックする）ことで終了します。

動かしてみよう

obniz Boardに文字を表示させてみよう

好きな文字やメッセージを、Boardのディスプレイに表示させてみましょう。
Hello Worldとなっている部分を、好きな文字やメッセージに変更して[Print on obniz]ボタンを押してください。
obniz Boardに入力した文字がBoardのディスプレイに表示されます。文字は日本語でもOKです。

ダイヤルスイッチの状態を知る

obniz Board本体の左肩にはダイヤルスイッチがあります。obniz Boardの最初の設定で使いましたね。
冒頭のプログラムを実行した状態で、ダイヤルスイッチを動かすと、右/左など、現在のスイッチの状態が、リアルタイムにBoardのディスプレイに表示されます。

LEDのON / OFF

もしLEDが手元にあれば、実行画面からLEDのON/OFFを操作できます。
0番ピンにアノード、1番ピンにカソードを挿してください。（抵抗入りのLEDであれば直接Boardに挿すことができます）
実行画面のボタンをクリックすると、LEDのON/OFFが切り替わります。

これだけ短いプログラムでインターネットと電子回路を簡単につなぐことができました。
次から始まるレッスン　最初のプログラムに進んで自分のプログラムからobnizを使ってみましょう！

obnizの仕組みをもっと詳しく知る

obnizクラウド経由でSDKから操作しています

オンラインとなったobniz Boardは各言語のSDKから操作できます。
JavaScriptの場合はobniz.jsというSDKを使って、obnizIDでobniz Boardとクラウドをつなぎます。
（obniz.jsは、Github にあります。）

HTMLの内で、obniz.jsを読み込むことでJavaScript SDKを利用できます。
obniz BoardのIOに繋がれた電子部品は、JavaScriptのオブジェクトとして操作ができます。

ドキュメントには、IOの操作やUARTなどペリフェラルの操作も載っています。
obniz.jsについてもっと詳しく知りたい時は、obniz.js: SDK for JavaScriptを参照してください。