部品を使う：可変抵抗の値を取る

obnizを使って、ボリューム（可変抵抗）の角度をWebから取得してみましょう。

接続

ボリュームは、回転させることで抵抗値を変えられる部品です。
抵抗が変わることで電圧が変わります。変化した電圧の値を読み取ることで
今どのぐらいの回転角度なのかを知ることができます。
obnizにはPotentiometer ライブラリがあるので、これを利用してプログラムしてみましょう。

ボリュームにある３本の線をobnizに以下の図のように0,1,2に接続します。

やりたいことは、「回転されたら角度を画面に表示する」ことです。

Potentiometerの角度が変わるのを取得
変わった角度を画面に表示

の手順です。まずは角度が変わったことを取得しましょう。
0,1,2にボリュームを繋いでいますので、そのように設定します。

var meter = obniz.wired("Potentiometer", {pin0:0, pin1:1, pin2:2});

次に、このmeterが回された時に呼ばれる関数を設定します。

meter.onchange =function(position) {

};

これで、少しでも回されたらこの関数が呼ばれることになります。
positionは回転に合わせて0~1になります。真ん中なら0.5ぐらいです。
この関数の中で画面に文字を出す処理をしてみましょう

部品の追加と実行

bodyタグに文字を表示する場所を用意しましょう。
空のdivをbodyに用意します。

<div id="print"></div>

次に、meterが回された時にここに文字を表示します。
jQueryでは、HTML内の要素に文字を書くのは以下のように書きます。

$("#print").text("Hello")

これでidがprintのタグの中身（表示される文字）をHelloにすることができます。
では、全部合わせてやってみましょう。

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
<h1>PotensionMeter</h1>
<div id="print"></div>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  var meter = obniz.wired("Potentiometer", {pin0:0, pin1:1, pin2:2});
  meter.onchange =function(position) {
   $("#print").text("Angle = "+position*180);
  };
}
</script>
</body>
</html>

これをプログラム画面にコピーしてobnizのidを変えて実行してみましょう。
どうでしょうか？ボリュームを回すと画面の文字が変わったと思います！

接続

部品の追加と実行

タイトル