obnizデバイスのスイッチ操作
今度は、ユーザの操作をきっかけとして処理を開始する方法について解説します。このサンプルでは、obnizデバイスのダイアルスイッチを操作すると、その操作内容をobnizデバイス上のLCDおよびWeb画面に表示します。
イベント
概要
Webブラウザ上の部品をクリックする等の場合と同様、obniz デバイスに対する操作でもイベントが発生します。このイベントに対して何らかの動作をするように、プログラムでイベントハンドラを設定することができます。
スイッチ操作に対するイベントプロパティ
obniz デバイス本体のスイッチを操作したときの処理内容の設定方法は、html 要素で発生するイベントに対する処理内容の設定と似ています。
html 要素で発生するイベントは、対応するDOM要素のオブジェクトのイベントプロパティ（たとえばマウスボタンのクリックなら onclick など）に対して処理内容を『代入』することで設定できましたが、obniz デバイスで発生するイベントの場合は obniz デバイス上の各部分を表すオブジェクトのイベントプロパティに対して処理内容を『代入』します。
たとえば本体のダイアルスイッチに対する操作であれば、
Obniz.switch.onchange = 処理内容
のように、Obniz.switch オブジェクトのイベントプロパティonchageに対して処理内容を代入します。Webブラウザ上の要素で発生するイベントと同様、『処理内容』には無名関数やアロー関数、別に定義した関数名を記述することができます。
※addEventListener() は使えないようです
コールバック関数の引数
イベントハンドラとして記述した関数は、コールバックされる際に1つの引数を受け取ります。Obniz.switch.onchange の場合、引数にはスイッチに対する操作の種類を表す文字列が与えられます。
obniz.switch.onchange=function(status){ … };というコードを書いた場合、functionがコールバックされるとき status には以下のような値が代入されます。
| 文字列 | スイッチの状態 |
|---|---|
| none | ダイアルスイッチが回転も押し込みもされていない状態 （押し込んだ／回転した状態から手を離した） |
| left | ダイアルスイッチが左に回転している状態 |
| right | ダイアルスイッチがミギに回転している状態 |
| push | ダイアルスイッチが押し込まれている状態 |
プログラム
ソースコード
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
<script>
const obniz = new Obniz("1234-5678");
obniz.onconnect = async function() {
obniz.display.clear();
obniz.display.print("Hello,World!");
obniz.switch.onchange = function(state) {
obniz.display.clear();
obniz.display.print(state);
document.getElementById("display").innerText=state;
};
};
</script>
</head>
<body>
<h1>switch event</h1>
<div id="display"></div>
</body>
</html>
プログラムの解説
スイッチ操作を検知する switch.onchange
obniz.switch.onchange = function(state) {
obniz.display.clear();
obniz.display.print(state);
document.getElementById("display").innerText=state;
};Obniz.switch.onchange は、ダイアルスイッチの状態が変化すると処理が行われます。この例では処理内容を無名関数で定義しています。引数stateには、呼び出し時にスイッチの状態を表す文字列が代入されます。
obnizデバイス上のLCDに表示
obniz.switch.onchange = function(state) {
obniz.display.clear();
obniz.display.print(state);
document.getElementById("display").innerText=state;
};まず Obniz.display.clear()メソッドで LCD をクリアし、Obniz.display.print() メソッドでstateの内容をLCDに表示します。stateは文字列なのでそのまま表示できます。
Webページ上に表示
obniz.switch.onchange = function(state) {
obniz.display.clear();
obniz.display.print(state);
document.getElementById("display").innerText=state;
}; <body>
<h1>switch event</h1>
<div id="display"></div>
</body>Webページ上にもstateを表示しています。表示領域として id=”display” のdiv要素を用います。document.getElementById(“display”) でスクリプトからdiv要素のオブジェクトを取得し、innterTextプロパティにstateの値を書き込むことで画面に表示しています。
コメント