Document
Everything about obniz

Lesson: Get Dial's Angle

今回はボリューム(可変抵抗)の角度を画面に表示してみましょう。

接続

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

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

プログラム

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

  1. PotentionMeterの角度が変わるのを取得
  2. 変わった角度を画面に表示

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

var meter = obniz.wired("PotentionMeter", {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にすることができます。 では、全部合わせて、やってみましょう。

<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("PotentionMeter", {pin0:0, pin1:1, pin2:2});
  meter.onChange(function(position) {
   $("#print").text("Angle = "+position*180);
  });
}</script>​

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