Next.js で obniz の心拍センサーを使ってみる

docs.obniz.com

この記事も1ヶ月ほど前のハッカソンで使用したネタです。
初めて使ったのでまとめておきます。

Grove_EarHeartRate という心拍センサーを Web アプリ上から使うときのメモです。今回は React Component として使えるようにしました。

バージョン情報

・Node.js: 20.11.1
・npm: 10.4.0
・create-next-app: 14.1.0
・obniz: 3.29.0

サンプルコード

const heartrate = obniz.wired("Grove_EarHeartRate", {gnd: 0, vcc: 1, signal: 2});
heartrate.start(function(rate){
  console.log(rate);
})

これだけでいけるようですね

React Component で使う

前回の記事 Next.js で obniz が使えることがわかりました。

あのプロジェクトに組み込んでみます。

[src/components/ObnizEarHeartRate.tsx]
--

'use client'
import Obniz from 'obniz'
import Grove_EarHeartRate from 'obniz/dist/src/parts/Grove/Grove_EarHeartRate'
import { useEffect, useState } from 'react'

type ObnizEarHeartRateProps = {
  obniz?: Obniz
}

const ObnizEarHeartRate: React.FC<ObnizEarHeartRateProps> = ({ obniz }) => {
  const [heartrate, setHeartrate] = useState<Grove_EarHeartRate | null>(null)
  const [heartRates, setHeartRates] = useState<number[]>([])

  // obniz が接続できたら Grove_EarHeartRate インスタンスを取得するための useEffect
  useEffect(() => {
    if (!obniz) {
      return
    }

    const createHeartRateInstance = () => {
      const heartrate = obniz.wired('Grove_EarHeartRate', { gnd: 0, vcc: 1, signal: 2 })
      setHeartrate(heartrate)
    }

    if (obniz.connectionState === 'connected') {
      createHeartRateInstance()
    } else {
      obniz.on('connect', createHeartRateInstance)
    }

    return () => {
      obniz.off('connect', createHeartRateInstance)
    }
  }, [obniz])

  // Grove_EarHeartRate インスタンスができたら心拍数を受け取るための useEffect
  useEffect(() => {
    if (!heartrate) {
      return
    }

    heartrate.start((rate) => {
      setHeartRates((prevValue) => [Math.round(rate), ...prevValue])
    })
  }, [heartrate])

  return (
    <div>
      <pre>{JSON.stringify(heartRates)}</pre>
    </div>
  )
}

export default ObnizEarHeartRate

利用側

[src/app/page.tsx]
--

export default function Home() {
  // ～省略～
  return (
    <main>
      <ObnizProvider obnizId="" onConnected={handleObnizConnected} />
      {obniz && <ObnizEarHeartRate obniz={obniz} />}
    </main>
  );
}

だいたいですが、こんな感じです

まとめ

完成