KMiuraのアイコン画像
KMiura 2021年05月14日作成 (2021年05月15日更新)
製作品 製作品 閲覧数 1190
KMiura 2021年05月14日作成 (2021年05月15日更新) 製作品 製作品 閲覧数 1190

obnizで心拍を測るウェアラブルデバイスを作る

obnizで心拍を測るウェアラブルデバイスを作る

今回はobnizで心拍センサーを使ったウェアラブルデバイスを作ってみました。

以前使ってはいたのですが、JavaScriptになれてない頃にコーディングしてたこともあってかなりぐちゃぐちゃしたコードになったので改めてコードを整理して見栄え良くしていきたいと思います。

今回使うセンサー

今回はSeeedから販売している心拍センサーをつかいます。

このセンサーには腕や指に巻き付けれるベルトが付いていてウェアラブルデバイスのプロトタイピングに使えます。

https://wiki.seeedstudio.com/Grove-Finger-clip_Heart_Rate_Sensor_with_shell/

このWikiにあるArduinoコードをみると、特にセンサー用のライブラリを使っていないシンプルなi2cでセンサーの値を取得する感じです。

#include <Wire.h>
void setup() {
    Serial.begin(9600);
    Serial.println("heart rate sensor:");
    Wire.begin();
}
void loop() {
    Wire.requestFrom(0xA0 >> 1, 1);    // request 1 bytes from slave device
    while(Wire.available()) {          // slave may send less than requested
        unsigned char c = Wire.read();   // receive heart rate value (a byte)
        Serial.println(c, DEC);         // print heart rate value
    }
    delay(500);
}

接続

それぞれの配線は以下の通りです。

  • GND(黒):0
  • VCC(赤):1
  • SDA(白):2
  • SCL(黄):3

キャプションを入力できます

とりあえず動かすためのコード

obnizのコンソールで以下のコードを動かしてみます。

内容としては5秒おきに心拍数をとってobnizのディスプレイとHTMLに表示するものです。

<html>
  <head>
    <meta charset="utf-8">
    <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@3.14.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <div id="obniz-debug"></div>
    <h1>Get Heart Rate by obniz </h1>
    <div id="print"></div>

    <script>
      var obniz = new Obniz("0710-4338");


      obniz.onconnect = async function () {
        // 黒:0番
        obniz.io0.output(false)
        // 赤:1番
        obniz.io1.output(true)
        //センサのセットアップ
        obniz.i2c0.start({mode:"master", sda:2, scl:3, clock:400000, pull: '5v'}); 
        obniz.i2c0.write(0xA0 >> 1, 1);

        out_heart_rate = async function () {
          try {            
            ret = await obniz.i2c0.readWait(0xA0 >> 1, 1); //1byte読み込み
            $("#print").text(ret);
            obniz.display.clear();
            obniz.display.print(ret);
          } catch (e) {
            console.log(e);
          }
        }
        setInterval("out_heart_rate()", 5000);
      }

    </script>
  </body>
</html>

動かしてみるとこのように心拍数がページ上に表示されます。

キャプションを入力できます

もう少し画面の見栄え良くしたい

コードがシンプルになって動くようにできたのはいいのですが、せっかくHTML上で動かしているのでもう少し見栄え良くしたいので、メーターをいれてみたいとおもいます。

そこで以下のcanvas-gaugeというライブラリでそれっぽいメーターを入れてみたいと思います。

https://github.com/Mikhus/canvas-gauges

このレポジトリのサンプルを参考にして以下のコードを動かします。

先程のコードからメータ表示を追加したものになっています。

ついでに動作確認で使っていた心拍数の表示するだけのdivタグやobniz用のデバッグ表示は消しています。

<html>
  <head>
    <meta charset="utf-8">
    <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@3.14.0/obniz.js" crossorigin="anonymous"></script>
    <script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js"></script>
  </head>
  <body onload="gauge.update()">
    <h1>Get Heart Rate by obniz </h1>
    <canvas data-type="radial-gauge" id="baromater"></canvas>
    <script>
      var gauge = new RadialGauge({
        renderTo: 'baromater',
        width: 300,
        height: 300,
        units: "bpm",
        minValue: 0,
        maxValue: 220,
        majorTicks: [
            "0",
            "20",
            "40",
            "60",
            "80",
            "100",
            "120",
            "140",
            "160",
            "180",
            "200",
            "220"
        ],
        minorTicks: 2,
        strokeTicks: true,
        highlights: [
            {
                "from": 160,
                "to": 220,
                "color": "rgba(200, 50, 50, .75)"
            }
        ],
        colorPlate: "#fff",
        borderShadowWidth: 0,
        borders: false,
        needleType: "arrow",
        needleWidth: 2,
        needleCircleSize: 7,
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: 1500,
        animationRule: "linear"
    }).draw();

      var obniz = new Obniz("0710-4338");

      obniz.onconnect = async function () {
        // 黒:0番
        obniz.io0.output(false)
        // 赤:1番
        obniz.io1.output(true)
        //センサのセットアップ
        obniz.i2c0.start({mode:"master", sda:2, scl:3, clock:400000, pull: '5v'}); 
        obniz.i2c0.write(0xA0 >> 1, 1);

        out_heart_rate = async function () {
          try {            
            ret = await obniz.i2c0.readWait(0xA0 >> 1, 1); //1byte読み込み
            // メータの値を更新
            gauge.value = ret;
            gauge.update();
            // ディスプレイの表示を変更
            obniz.display.clear();
            obniz.display.print(ret);
          } catch (e) {
            console.log(e);
          }
        }
        setInterval("out_heart_rate()", 5000);
      }
    </script>
  </body>
</html>

実行すると以下の動画のような動作になります。

https://youtu.be/blG4Pc1KHgk

まとめ

今回はobnizで心拍センサーを接続してみました。

i2cの仕組みがよくわからず断念しましたが、なんとか動かせてよかったです。

たまに接続エラーになることもあるのでそのときはobniz自体を再起動すればひとまず解決します。

結局の所obnizはi2cはできるけど動作が不安定なので、とりあえずセンサーを使ってIoTのプロトタイピングするぐらいだったらいいのかもしれないです。

また、パーツライブラリに無いやつは自分でセンサーのドキュメントを読み替えながらobnizのコードに落とし込む必要があるので、こんな感じのノウハウが溜まっていくといいですね。

参考

https://qiita.com/wicket/items/a3a036828e71221b0814

ログインしてコメントを投稿する