編集履歴一覧に戻る
KMiuraのアイコン画像

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 ![キャプションを入力できます](https://camo.elchika.com/ec55ba8a00bc80d7f98f19568978b48363c6c625/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f33323639363631322d343438642d346162302d396465612d3931633639326536383366362f30323438326364652d633466322d343464632d383034652d643833623637353666393565/) # とりあえず動かすためのコード 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> ``` 動かしてみるとこのように心拍数がページ上に表示されます。 ![キャプションを入力できます](https://camo.elchika.com/b0d1bccbe75bd5ca870f68b09777b278bb14ff0e/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f33323639363631322d343438642d346162302d396465612d3931633639326536383366362f31636566653766642d303735352d343235372d613636352d653635613262323832393633/)

-

# もう少し見栄え良くしたい 動くようにできたのはいいのですが、せっかく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