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

Grove
obniz
心拍センサ
obniz IoT コンテスト 2021

今回は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>