Document
Everything about obniz

Lesson: Get sensor value

今回はボリューム(可変抵抗)の角度をウェブから取得してみましょう

接続

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

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

プログラム

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

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

の手順です。まずは角度が変わったことを取得しましょう。 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.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.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を変えて実行してみましょう。 どうでしょうか。ボリュームを回すと画面の文字が変わったと思います。


Feel free to leave a comment