HeartRateSensor problem in watchface

[haakern]

Hi all, 

trying to display the heartrate in a simple analog watchface, but I'm doing something wrong.

index.js:

import clock from "clock";

import { HeartRateSensor } from "heart-rate";
import { today } from "user-activity";
import document from "document";

// Update the clock every minute
clock.granularity = "seconds";

// Get a handle on the <text> element
let toDay = document.getElementById("toDay");
let sensorSteps = document.getElementById("sensorSteps");
let sensorCalories = document.getElementById("sensorCalories");
let sensorElevation = document.getElementById("sensorElevation");
let sensorBPM = document.getElementById("sensorBPM");

// Create new HR Sensor handle
var hrm = new HeartRateSensor();
// When the value changes, update text
hrm.onreading = function() {
// Peek the current sensor values
sensorBPM.text = hrm.heartRate || 0;
// Stop monitoring the sensor
hrm.stop();
}

function updateSensors() {
// Update Steps taken
sensorSteps.text = today.adjusted.steps || 0;
// Update Calories burned
sensorCalories.text = today.adjusted.calories || 0;
// Update Altitude walked
sensorElevation.text = today.adjusted["elevationGain"] || 0;
// Update Heart Rate
hrm.start();
}

// Update the date
function updateClock() {
let currentDay = new Date();
let day = currentDay.getDate();

toDay.text = `${day}`;
updateSensors();
}

// Update the clock every tick event
clock.ontick = () => updateClock();
hrm.start();

I keep getting the error:

Unhandled TypeError: Cannot set property 'text' of null at ./app/index.js:11:5.

11:5 is the "let toDay = .." statement, which I cannot understand is wrong.

All works fine if I comment out the hrm.start() statements (but of course no heart rate).

The Project Config Type is set to "Clockface" (does it need to be something else when using HeartRateSensor?).  And "Activity" & "Heart Rate" is of course checked....

Struggling with this for days now, - all else works fine but just not this sensor 🙂

(But then, I'm a python/C#/SQL/C/assembly/Pascal/Fortran/Cobol programmer... not JavaScript 😉

Thanks!

-Haakon-

[Gondwana · Accepted solution]

Just a quick guess: check that your element ids (eg, sensorBPM) are identical between the SVG and the JS.

You could console.log() some diagnostic messages to see which text element variable is null.

I've found the studio line numbers to be flaky, so maybe don't take them too seriously. (Would be a good bug to report.)

[JonFitbit]

Is it because you have a variable `today` and a variable `toDay`?

Perhaps try renaming yours.

[haakern]

Thanks for the suggestions.  I've renamed the toDay, but still get the same TypeError.  Will have to start putting out console.log lines to see what's going on...

(Just strange, since my code is more or less (obviously less 🙂 the same as a lot of examples around)

[haakern]

I had triple checked the SVG-code comparing it with the JavaScript, but you were right!!  Guess my fingers were just to used to typing "BMP" and not "BPM", so once I changed <text id="sensorBMP" /> with BPM, everything fell into place!  Thanks for nudging me to check the code again! (In my defence, it was rather late last night when I wrote the code... )

[Gondwana]

...and the eye sees what it expects to see. 😉