KMiura が 2021年05月15日11時14分01秒 に編集
コメント無し
タイトルの変更
obnizで心拍センサーを動かしてみた
obnizで心拍を測るウェアラブルデバイスを作る
記事種類の変更
製作品
本文の変更
今回はobnizで心拍センサーを使ってみました。
今回はobnizで心拍センサーを使ったウェアラブルデバイスを作ってみました。
以前使ってはいたのですが、JavaScriptになれてない頃にコーディングしてたこともあってかなりぐちゃぐちゃしたコードになったので改めてコードを整理して見栄え良くしていきたいと思います。 # 今回使うセンサー 今回はSeeedから販売している心拍センサーをつかいます。 このセンサーには腕や指に巻き付けれるベルトが付いていてウェアラブルデバイスのプロトタイピングに使えます。 https://wiki.seeedstudio.com/Grove-Finger-clip_Heart_Rate_Sensor_with_shell/ このWikiにあるArduinoコードをみると、特にセンサー用のライブラリを使っていないシンプルなi2cでセンサーの値を取得する感じです。 ```cpp #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 <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上で動かしているのでもう少し見栄え良くしたいので、メーターをいれてみたいとおもいます。
# もう少し画面の見栄え良くしたい コードがシンプルになって動くようにできたのはいいのですが、せっかくHTML上で動かしているのでもう少し見栄え良くしたいので、メーターをいれてみたいとおもいます。
そこで以下のcanvas-gaugeというライブラリでそれっぽいメーターを入れてみたいと思います。 https://github.com/Mikhus/canvas-gauges このレポジトリのサンプルを参考にして以下のコードを動かします。 先程のコードからメータ表示を追加したものになっています。
動作確認で使っていた心拍数の表示するだけのdivタグやobniz用のデバッグ表示は消しています。
ついでに動作確認で使っていた心拍数の表示するだけのdivタグや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> <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はできるけど動作が不安定なので、とりあえずセンサー試すぐらいだったらいいのかもしれないです。
結局の所obnizはi2cはできるけど動作が不安定なので、とりあえずセンサーを使ってIoTのプロトタイピングするぐらいだったらいいのかもしれないです。
また、パーツライブラリに無いやつは自分でセンサーのドキュメントを読み替えながらobnizのコードに落とし込む必要がありそうです。
また、パーツライブラリに無いやつは自分でセンサーのドキュメントを読み替えながらobnizのコードに落とし込む必要があるので、こんな感じのノウハウが溜まっていくといいですね。
# 参考 https://qiita.com/wicket/items/a3a036828e71221b0814