Watch won't display stats but the simulator does.

[kaybb87]

Hi everyone,

My Fibit Versa 3 won't display the stats (steps, hr, cals) when I run my code but the simulator will. You can see this below, the left is the simulator and the right is mine

(Ignore the HR not appearing in the simulator, I have fixed that but that didn't change the lack of stats on my watch.)

Here is my JS code:

import clock from "clock";
import * as document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { me as appbit } from "appbit";
import { today } from "user-activity";
import { HeartRateSensor } from "heart-rate"; 
import { BodyPresenceSensor } from "body-presence";

/*if (HeartRateSensor && appbit.permissions.granted("access_heart_rate")) {
  const hrm = new HeartRateSensor();
  hrm.start();
}*/

const myHRM = document.getElementById("myHRM");

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

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  let mins = util.zeroPad(today.getMinutes());
  myLabel.text = `${hours}:${mins}`;
}

const mySteps = document.getElementById("mySteps");
const myCalories = document.getElementById("myCalories");

if (appbit.permissions.granted("access_activity")) {
   console.log(`${today.adjusted.steps} Steps`);
  mySteps.text=`${today.adjusted.steps}`;
   if (today.local.calories !== undefined) {
     myCalories.text=`${today.adjusted.calories}`;
    console.log(`${today.adjusted.calories} calories`);
     
   }
}

const hrm = new HeartRateSensor();

if (HeartRateSensor) {
  const hrm = new HeartRateSensor({ frequency: 1 });
  hrm.addEventListener("reading", () =>  {
      
       myHRM.text=`${hrm.heartRate}`;
  });
 
  hrm.start();
}

And the index.view

<svg class="background">
  <image href="plants01.jpg" />
  <text id="dayLabel"></text>
  <text id="myLabel"></text>
  <svg id="stepsLoc" >
    <image id="stepsIcon" href="steps_36px.png" load="sync"/>
    <text id="mySteps"></text>
  </svg>
  <svg id="hrmLoc" >
    <image id="hrmIcon" href="heart_rate_36px.png"/>
    <text id="myHRM"></text>
  </svg>
  <svg id="caloriesLoc" >
    <image id="caloriesIcon" href="calories_36px.png"/>
    <text id="myCalories"></text>
  </svg> 
</svg>

[Guy_]

Hi @kaybb87 -  you probably need to move the update for the steps, hr, cals fields into the clock.ontick routine and check that you granted the permission to access the user activity on the watch.

[kaybb87]

Hi Guy, thanks for the reply. I have all permissions in the package.json files ticked (except the App Cluster Storage).

I've actually tried using someone else's code from github and still having the same issue =(

[JonFitbit]

As Guy_ said, you should move things inside the tick event, but what's in the CSS file? Make sure you're using the System font family. https://dev.fitbit.com/build/guides/user-interface/css/#fonts

[iPh33r]

Having the same problem... Heart Rate and Clock shows up fine but anything from Web API don't show. But works beautifully on Studio.

(I'm on a Sense btw, if that helps at all)

[Guy_]

@iPh33r  - if you can't access the Web API on your watch there may be an issue of VPN or security software blocking the access through the phone..

[iPh33r]

I turned off firewall and any kind of security for a moment and tested it, it still didn't work. If that were the case then why would it work on the Simulator still?

[Gondwana]

Make sure all necessary permissions are set in package.json (or Studio). Sim doesn't check permissions; watch does.

[iPh33r]

Excuse me while I bury my head in embarrassment... But you did point me in the right direction! I didn't think to click "Internet" in the requested permissions in package.json. That apparently allows specifically the Companion app to communicate with the database. Thanks!

---

@Gondwana wrote:

Make sure all necessary permissions are set in package.json (or Studio). Sim doesn't check permissions; watch does.

---

[Gondwana]

Yeah, the oauth and the data fetch definitely use the internet.