Change image depending on step % to goal

[gibbygibster]

Hello dev community!

Similar to the topic "Changing Background Image Based on Battery Level", I was hoping I could find a code that would change an image depending on the % to step goal. I have a feeling its similar to the code used in the topic mentioned above, but I can't seem to find the right code to make it work.

For context, I'd like to "fill" the right bar the closer I get to my step goal. There would be 8 different images that I would use.

  

 Snippet of battery level code:

//battery levels
import { battery } from "power";
const myBatteryLevels = document.getElementById("myBatteryLevels");
if (battery.chargeLevel > 83)

 I found the following code that I would assume I'd use to begin with:

import { me as appbit } from "appbit";
import { primaryGoal } from "user-activity";
import { today } from "user-activity";

And I updated the name that index.gui look for to:

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

I would assume I'd need to replace "battery.chargeLevel" to something else that would have the system look at step to goal %. It doesn't seem to be as easy as entering "step.goalLevel".

Thank you for your help in advance!

[Gondwana]

Documentation.

The approach is quite different. Your code won't automatically receive a callback whenever the value changes (as it does for battery). Therefore, you'll need to check the value every so often. A common way to do this is in ontick().

[gibbygibster]

I read through the documentation you linked to, however I'm not exactly sure how the variables and goals tie into changing an image. I think I have the start of the code, I just don't know how to move forward from there. I'm somewhat beginner-ish to Java/CSS/SVG.

[gibbygibster]

I feel like I'm close with this code that I put together:

//step levels
import { me as appbit } from "appbit";
import { primaryGoal } from "user-activity";
import { today } from "user-activity";
const myStepLevels = document.getElementById("myStepLevels");
clock.ontick = (evt) => {
  if (appbit.permissions.granted("access_activity")) {
   console.log(`User's primary activity goal is ${primaryGoal}`);
  if (primaryGoal > 50) {
    myStepLevels.href = "StepEmpty-01.png"
  } else {
    myStepLevels.href = "StepFull-01.png"
}}}

However when running it, my digital clock turns to zeros, but my analog clock is still working properly.

[Gondwana]

I recommend sneaking up on the problem, rather than trying to overcome it in one hit (or paste 😉). Learn about console.log(). Then get your app to use console.log() to print out the step value every second (or whatever). (Tip (again): ontick may be the easiest way to do this.)

Once you can get the current step value (repeatedly), you may be able to see your way to the end of the problem.

[Gondwana]

hmmm, just say your latest. You can only have one ontick() (normally). Perhaps one of your displays was relying on its own ontick handler.

Please be very careful about pasting incompatible blocks of code together. It's better to understand and adapt.