Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Progress bar for steps based on user's goal and current total

ANSWERED

I currently have a battery progress bar across the top of one of my clock faces and was wondering if someone could help me make it work for steps. In index.js I have 

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

batstat.width = battery.chargeLevel*3; 

And in index.gui I have <rect width="150" height="25" id="batstat" fill="white"/> 

I don't know how to retrieve the user's goal and I know the math would be something like (screen width / step goal) * step number. I need someone to help make this work, and also stop at full width because if I remember correctly there is an error if something exceeds the dimensions of the screen. Please be as detailed as possible, I am fairly new to this. Thanks!  

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions
import { me as device } from "device";
import document from "document";
import { today, goals } from "user-activity";

const deviceWidth = device.screen.width;
const stepGoalPercentage = (userActivity.today.adjusted["steps"] || 0) * 100 / goals.steps;
const barWidth = (stepGoalPercentage / 100) * deviceWidth;

const myStepBar = document.getElementById("mystepbar");
myStepBar.width = barWidth;

Thanks, Had to change stepGoalPercentage to get info from a valid source, but it works great now! What would the code be for calories or floors? Would I just have to change it to goal.calories or goal. elevationGain? If you could list the names of the other stats so I could retrieve them properly, that would be great! Thanks Again!

View best answer in original post

Best Answer
5 REPLIES 5

Something like this, but it's untested:

 

import { me as device } from "device";
import document from "document";
import { today, goals } from "user-activity";

const deviceWidth = device.screen.width;
const stepGoalPercentage = (today.adjusted.steps || 0) * 100 / goal.steps;
const barWidth = (stepGoalPercentage / 100) * deviceWidth;

const myStepBar = document.getElementById("mystepbar");
myStepBar.width = barWidth;

Best Answer
import { me as device } from "device";
import document from "document";
import { today, goals } from "user-activity";

const deviceWidth = device.screen.width;
const stepGoalPercentage = (userActivity.today.adjusted["steps"] || 0) * 100 / goals.steps;
const barWidth = (stepGoalPercentage / 100) * deviceWidth;

const myStepBar = document.getElementById("mystepbar");
myStepBar.width = barWidth;

Thanks, Had to change stepGoalPercentage to get info from a valid source, but it works great now! What would the code be for calories or floors? Would I just have to change it to goal.calories or goal. elevationGain? If you could list the names of the other stats so I could retrieve them properly, that would be great! Thanks Again!

Best Answer

See the documentation.

Peter McLennan
Gondwana Software
Best Answer

Thanks, I was looking for something like this with all the documentation. This answers my questions.

Best Answer
0 Votes

@Momentric wrote:

 

Thanks, Had to change stepGoalPercentage to get info from a valid source

I guess it depends how you've imported it, but make sure you aren't importing user-activity twice. I included it in my sample.

 

Best Answer
0 Votes