［obniz］LEDを点滅する機能を追加する（forを使用）
<!DOCTYPE html>
<html lang="ja">
<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.5.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/obniz/obniz.js"></script>
</head>
<body>
<div class="container">
<div id="obniz-debug"></div>
<h3>はじめてのobniz</h3>
<!-- LED ON/OFFボタン -->
<button class="btn btn-primary" id="led-on">LED ON</button>
<button class="btn btn-primary" id="led-off">LED OFF</button>
<button class="btn btn-primary" id="led-blink">LED点滅</button><!-- 点滅ボタンを追加 -->
<!-- obnizの画面にテキストを表示 -->
<div>
<input type="text" id="text" value="Hello World" />
<button class="btn btn-primary" id="showtime">Print on obniz</button>
</div>
<!-- LEDのピンアサイン説明 -->
<div>Demo Pin Assign</div>
<ul>
<li>io0: LED anode</li>
<li>io1: LED cathode</li>
<li>Switch State will be printed on browser</li>
</ul>
<hr/>
<!-- メッセージ表示 -->
<div id="print"></div>
</div>
<!-- ここからJavaScriptのプログラムコード -->
<script>
const obniz = new Obniz("OBNIZ_ID_HERE");
// obnizがオンラインになったら
obniz.onconnect = async function() {
// LEDを定義
const led = obniz.wired("LED", { anode: 0, cathode: 1 });
// obnizの画面に初期表示
obniz.display.clear();
obniz.display.print("Hello World");
// obnizのスイッチが変更になった時の処理
obniz.switch.onchange = function(state) {
obniz.display.clear();
obniz.display.print(state); // スイッチの状態を表示
$("#print").text(state); // 画面にも表示
};
// obnizの画面にテキスト表示
$("#showtime").on("click", function() {
obniz.display.clear();
const text = $("#text").val();
obniz.display.print(text);
$("#print").text(text); // 画面にも表示
});
// [LED ON]ボタンをクリック → LEDを点灯
$("#led-on").click(function() {
led.on();
obniz.display.clear();
obniz.display.print("ON");
$("#print").text("LED ON"); // 画面にも表示
});
// [LED OFF]ボタンをクリック → LEDを消灯
$("#led-off").click(function() {
led.off();
obniz.display.clear();
obniz.display.print("OFF");
$("#print").text("LED OFF"); // 画面にも表示
});
// [LED点滅]ボタンをクリック → LEDを10回点滅
// ※forステートメントを使用した場合
$("#led-blink").click(async function() {
for (let i = 0; i < 10; i++) {
led.on();
await obniz.wait(500); // 500m秒処理を停止
led.off();
await obniz.wait(500); // 500m秒処理を停止
}
});
};
</script>
</body>
</html>
