Timer not displaying correct values

[nickjbaxter]

Hi,

I’m using your timer plugin which for the most part is working great. I have one issue though.

The values being displayed in the timer are incorrect.

Note - I have uploaded a video here to walk through how everything is set up.

Background

So for a bit of context, I have built a fitness app that allows users to create classes. These classes contain a list of exercises.

These exercises contain a few data types, but the relevant ones are:

• Exercise name (text)
• Exercise duration (number) (this duration is stored in seconds)

When a user joins a class, they are able to see the current exercise being performed, the next exercise to be performed, and there’s also a timer that displays the duration of the current exercise.

Also, the host/creator of the class has the ability to click “Skip” (to skip to the next exercise in the list) or “Previous” (to go back to the previous exercise).

The UI

This is the current UI for when a user is in a class. The red markup shows how this data is controlled by the custom states shown further below.

Custom States

These are the custom states I have set up. These determine which exercise in the list of exercises is being performed, and therefore displaying in the white section at the bottom of the UI.

So by default when a class starts, the ‘active exercise’ is 1 (aka the first item in the list of exercises) and the ‘next exercise’ is 2 (the second item in the list of exercises.

If a user clicks ‘Skip’, it will +1 to each of these states. So ‘active exercise’ will become 2 (the second item in the list) and ‘next exercise’ will become 3 (the third item in the list). And so on. These changes will be reflected on the front end.

How the timer is configured

So far I’ve got this working fine in regards to displaying the correct exercises at all times. However, the timer doesn’t seem to show the correct data. This is how I have it set up:

Workflows

When user wants to start the class

1. User clicks ‘start class’
2. Timer starts (since the ‘active-exercise’ default value is 1, the value for the timer will be the first exercise in the lists duration). This step actually works fine at the moment.

(note - only step 13 in the above screenshot should be relevant for this)

When a user skips an exercise

1. User clicks ‘Skip’ button
2. +1 to the value of ‘active-exercise’
3. +1 to the vaue of ‘next-exercise’
4. Reset the timer
5. Start the timer again with the next exercise.

This is where I start having issues. When skipping to the next exercise, the timer begins to show the incorrect duration.

I will try and record a video so I can talk through it. Apologies if this is complex, it’s quite hard to capture it all with just text and images!

[kate]

@nickjbaxter, hello and thanks for reaching out!
Please accept our sincere apologies for the late reply.

We have received your request and it’s currently under the developer’s investigation. We will get back to you once we have any useful update

Thanks for understanding.

[nickjbaxter]

Thanks Kate, look forward to hearing your response. In the mean time I’ll do some more fiddling around to see if I can find what’s causing this.

[kate]

@nickjbaxter, thanks for your patience.

After the discussion with the dev team, we have made the conclusion that the plugin works as expected in your app. The problem is in your workflow. It seems to be not correct at the point that prevents the preloader from changing the timer value (duration).

We would like to suggest you simplify it a bit. You can try our variant:

So you can use Option Set for your excersices, and the custom states the way I have shown you on the video.

One important thing to note: do not paste the conditional time values into the timer’s fields. Add them into the conditional tab of the timer:

Hope it helps. Have a good weekend ahead.

[nickjbaxter]

Hey Kate,

Thank you so much for the video and details.

Application Setup
A couple of things to note:

1. In my app, users can create their own exercises, rather than referring to a premade list, therefore I don’t think option sets would be viable for this.
2. Fitness classes will be viewable by multiple users at any one time, and should be consistent for all users - everything should be synchronised, rather than each user having their own ‘state’ of how the page looks. For example, the host of the class clicks ‘next’ and moves from exercise #1 to exercise #2 - this action should be reflected for ALL users, not just that one user. This is why I’ve used the database, as database changes will be reflected on the front end for all users, where as custom states will only affect that specific user.

Please let me know if either of the above are incorrect and I will consider building my database with option sets and custom states like you have.

Using conditionals for the timer
Since the timer will only display one thing at all times (the current exercises duration), what is the need for using conditionals? As the user cycles through the list of exercises, the ‘current exercises duration’ will always be what I want to displayed in the timer.

For example, if the user clicks ‘Next’, the ‘current exercise’ changes might change from item#1 to item#2 in the list of exercises, therefore the duration displayed in the timer should change from ‘item#1’s duration’ to ‘item#2’s duration’. If I have ‘current exercises duration’ in the timer at all times, why will this not work?

What is the root cause of the issue?
Since there are so many ways this could be set up and so many variables, maybe you could explain to me specifically what is going wrong with my current set up. I don’t want to waste your guys’ time sending screenshots and videos!

The problem is in your workflow. It seems to be not correct at the point that prevents the preloader from changing the timer value (duration).

It sounds like this is the root cause of the issue. Could you please explain this in more detail? Is the timer not receiving the correct exercise duration in time for it to be displayed properly or something?

Many thanks Kate, really appreciate you helping me out

Edit: I just kept my original workflow and added a pause before resetting and starting the timer with the next exercises duration, and it worked! I assume this gives the timer enough time to reconfigure itself in order to ensure it displays the correct value? Am I correct in saying this?

[kate]

@nickjbaxter,
Apologies for the late reply

@nickjbaxter

Could you please explain this in more detail?

From our developer’s review of your setup, it is a bit overloaded and the used logic is permittable, but not the most optimal. That’s why we recommended you another way to implement your use case.

@nickjbaxter

I just kept my original workflow and added a pause before resetting and starting the timer with the duration of the next exercise, and it worked!

That’s awesome to know! Yes, adding a pause before the next action in the workflow sometimes might help in different plugins and use cases. But it does not give any guarantees that such a setup will be stable. The best explanation of this flow only Bubble engineers can give, I’m afraid

In general, a pause action simply gives a break before executing the next action and pulling data/request from the plugin to Bubble’s editor.

Still, even if my workaround was not super fitting to your use case, hope it was useful for you anyways.
Cheers!

[nickjbaxter]

Hi Kate,

Thanks again. I’m a bit concerned after what you said about the workflow potentially being unstable, but I’m not sure what else I can do. Anyway, that’s a problem for me and Bubble to sort out, not you

Thank you!

[kate]

@nickjbaxter,

You are always welcome!
Feel free to reach us again when you have some questions. We will be glad to cooperate.

Have a good day.