how to display basic user activity

[ladykayaker]

I am a raw noob. 

I have a basic clock going - I can see the date, time, my background, adjusted to my fonts, colors etc. 

I would like to display the user activitiy - that is steps, distance and calories

I have the below code, but it isn't showing on the screen - can you tell me what I have left out. 

index.js

import { today } from 'user-activity';

 mySteps.text = today.adjusted.steps ;

index.gui

<svg class="background">
<text id="myTime" />
<text id="myMonth" />
<text id="myDay" />
<text id="mySteps" />
<text id="myCalories" />
<text id="myDistance" />
</svg>

styles.css

#mySteps {
font-size: 50;
font-family: Tungsten-Medium;
text-length: 32;
text-anchor: end;
x: 50%;
y: 50%;
fill: red;
}

[GrumpyCyclist]

Best I can tell you've missed importing the document and the bit usually described as getting a handle on the text box.

With your import statements add:

import document from "document";

Before the mySteps.text part you'll need to put something like:

let mySteps = document.getElementById("mySteps");

[ladykayaker]

Thanks, GC. I did have the import documents statement. 

Now in index.js I have 

let mySteps = document.getElementById("mySteps");
mySteps.text = today.adjusted.steps ;

and I get the error msg

Unhandled TypeError: Cannot read property 'steps' of undefined

[GrumpyCyclist]

Hi @ladykayaker

Have you got any other error messages? The one about unable to read property "x" of undefined can be caused by a permissions issue. If you're also getting a "no permission to access the user activity API" error as well (it often slides by and has to be scrolled back to see it) then in the studio select the package.json file and make sure the ability to access user data is selected.

[ladykayaker]

Hi GC, 

In the package.json - both Activity and User Profile are selected for the permissions

at the top of the index.js I have 

import clock from "clock";
import document from "document";
import { today } from 'user-activity';
import { preferences } from "user-settings";
import * as util from "../common/utils";

then the code for the clock and date (which are working fine)

and then

let mySteps = document.getElementById("mySteps");
mySteps.text = today.adjusted.steps ;

when I run this in the simulator, the only error is 

Unhandled TypeError: Cannot read property 'steps' of undefined

and it points to the line that says

mySteps.text = today.adjusted.steps ;

I'm stumped 

[GrumpyCyclist]

I’m not near my simulator right now so can’t test this idea. Only thing that I can think of right now is where in your code are you putting the steps part? I’ve got mine inside the ontick event of the clock. Sure I read somewhere that all the calls need to be inside the tick event { } pairing. Could be wrong there, but I also don’t think I could get anything working that wasn’t inside the clock.ontick event. Other than that the code seems ok. No different to mine anyway 

[ssahla]

I'm an absolute beginner too, and I was struggling with a similar problem. I found a working solution in the source code of another clock face (https://gitlab.com/private-software/fitbit-flashring2-watchface/blob/master/app/index.js). Use this import:

import userActivity from "user-activity";

and then call userActivity.today.adjusted to access today's data:

let caloriesNow = userActivity.today.adjusted.calories;

I don't know why this works and your code doesn't. But it works. 🙂

[Giampi71]

When I did my first steps into Fitbit OS clockface coding I made this very basic clockface as example and that I refer often

https://github.com/gpfrello/FitbitOS-Really-Basic

You might want to give a look