まずは、obniz BoardをWi-Fiに接続します。
obnizのクイックスタート
obniz Boardの起動方法、Wi-Fiへの接続設定の方法は、obniz Board/obniz Board 1Yのクイックスタートをご確認ください。
wifiの設定が終わったら、簡単なプログラムでobnizを動かしてみましょう。
1. プログラム
http://obniz.com/ja/console/programからオンラインのHTMLエディタにいき、obniz idを入力します。下記のプログラムを丸ごとコピーし、自分のプログラム画面に貼り付けます。
<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">
<script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<div class="wrap px-5 py-4">
<h3 class="title mb-4">Connect From Your Browser</h3>
<h5>LED</h5>
<div class="btnBox d-flex mb-4">
<div class="green_btn d-flex flex-column">
<button class="btn btn-success m-1" id="green_on">ON</button>
<button class="btn btn-success m-1" id="green_off">OFF</button>
</div>
<div class="yellow_btn d-flex flex-column">
<button class="btn btn-warning m-1" id="yellow_on">ON</button>
<button class="btn btn-warning m-1" id="yellow_off">OFF</button>
</div>
</div>
<h5>TEXT</h5>
<div>
<input type="text" class="p-2" id="text" value="Hello World">
<button class="btn btn-primary" id="showtime">Print on obniz</button>
</div>
</div>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
var light = obniz.wired("Keyestudio_TrafficLight", {gnd:0, green:1, yellow:2, red:3});
$('#green_on').click(function () {
light.green.on();
});
$('#green_off').click(function () {
light.green.off();
});
$('#yellow_on').click(function () {
light.yellow.on();
});
$('#yellow_off').click(function () {
light.yellow.off();
});
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());
});
}
</script>
</body>
</html>
2. obnizIDを入力
プログラムの中で
var obniz = new Obniz("OBNIZ_ID_HERE");
のOBNIZ_ID_HEREを自分のobnizのidにします。たとえば1234-5678なら以下のように入力します。
var obniz = new Obniz("1234-5678");
3. プログラムを実行
右上の[実行]ボタンを押すと、ブラウザとobniz Boardがつながります。
ブラウザ上の実行画面に下の画面が表示されれば成功です。
うごかす -LEDのON / OFF-
ブラウザに表示された、ボタンを押すことで、LEDのON/OFFを切り替えることができます。
緑色のボタンで緑色のLEDを、黄色のボタンで黄色のLEDを操作します。
写真のようにLED信号をobnizにつなぎ、ボタンを押して緑と黄色のLEDのON/OFFを切り替えてみましょう。
GND, G, Y, Rがそれぞれ0, 1, 2, 3につながっています。
ディスプレイに文字を表示
好きな文字やメッセージを、Boardのディスプレイに表示させてみましょう。
Hello Worldとなっている部分を、好きな文字やメッセージに変更して[Print on obniz]ボタンを押してください。
obniz Boardに入力した文字がBoardのディスプレイに表示されます。文字は日本語でもOKです。
スマートフォンでも動かしてみよう
obnizはクラウド経由でプログラムを実行しているので、スマートフォンからも簡単に操作することができます。
エディタ画面に戻り、上部のファイルからQRコードを表示させ、スマートフォンでスキャンして動かしてみましょう。
