coding for clock faces.

[kdillard]

I am trying to learn how to make my own clock face. I can get the image i want as my background and the time.

When i try to put codes that i have found online for the heart rate, date, steps and battery, none of them work. What am I doing wrong? I've never done anything like coding before but I really want to learn.

[AjaySingh]

use something like this (assuming you have right imports and permission already setup) -

Under Index.gui

<text id="steps" />

Under index.js

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

clock.ontick = (evt) => {

steps.text = today.local.steps || 0;

}

[MarioDings]

ADD:
import { today } from "user-activity";
under index.js in app

[Krish_2009]

To add activity add this in your index.js: 

function refresh_myActivity() {
statSteps.text = today.adjusted.steps 
  statCalories.text = today.adjusted.calories 
  statActiveMinutes.text = today.adjusted.activeMinutes

}


setInterval(refresh_myActivity, 700 /* refresh rate in milliseconds. change to whatever you'd like */);

For Heart Rate put this in your index.js: 

const myHRM = document.getElementById("myHRM");
import { HeartRateSensor } from "heart-rate";

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

import { BodyPresenceSensor } from "body-presence";

if (BodyPresenceSensor) {
  const body = new BodyPresenceSensor();
  body.addEventListener("reading", () => {
    if (!body.present) {
     myHRM.text="--"
    } else {
      
    }
  });
  body.start();
}

Make sure to define your values, or else it will not work. 😉