Syncing a timer for all users

[nickjbaxter]

Hi all,

I’ve just purchased the ‘Simple Stopwatch / Timer’ plugin. I’m using the ‘Timer’ component on a page, and I’d like to make the countdown viewable and synchronised for ALL users viewing it. So when one user starts or pauses the timer, this will happen for any user viewing that page. Currently the timer runs independantly for each individual user, rather than it being one single, synchronised timer.

For example, if User A starts the timer, it all works fine, but if I view the same screen from User B’s perspective, the timer isn’t running. User B could then start the timer, and it will begin counting down, but it will be out of sync with User A’s timer.

Is this something that is possible, and if so, how can I achieve it?

Let me know if there is any further info needed from me. Thanks in advance!

[Serg]

Hi @nickjbaxter, thanks for reaching out.

@nickjbaxter

Is this something that is possible, and if so, how can I achieve it?

Yes, that could be achieved by using the application database (as it is common for all users).
For example:

• User is making a change in the database (through action: make a change to the thing).
• on this page there is a workflow that starts with “Trigger a custom event when data changes” and next action - “Start a Simple Timer/Stopwatch”
  This way, when user A makes the change in the database, correspondingly through a trigger - the timer will be started for all users that are on this page.

Hope the provided explanation helps. In case any other plugin-related question will appear, please let me know

Regards,

[nickjbaxter]

Great, thanks so much for your help Serg, I will have a play around and let you know if I have any further questions. Cheers.

[nickjbaxter]

Hey Serg,

Thanks again for your help. I think I followed your instructions but I’m still having no luck. See below for details:

This is how I currently have my workflows set up:

Workflow 1 - Triggering the custom workflow

This shows the trigger/action that should ultimately start the timer

Workflow 2 - The custom workflow to start the timer

This is the custom workflow, triggered by step 3 “make changes to thing” in the first screenshot

With this workflow, the timer still starts as it should, but it isn’t synced on the front end for all users. It only starts for the specific user that clicks ‘Button - Start Class’.

Timer Plugin

Also, this is how I have the timer itself set up. I have used CSS to hide this as I don’t want it visible (the reason for this is that I only want to display minutes and seconds, not hours or days. As far as I know, this is the best way to achieve this).

Text fields displaying time values

I am pulling the ‘minutes’ and ‘seconds’ values from the timer to be displayed in a text field. This text field is where the user will actually view the timers value. Not sure if this could be causing any issues.

Have I got something wrong here?

[Serg]

Hi @nickjbaxter, thanks for your reply.

Possibly within workflow 1 something is not indicated right. Please check the following workflow example, each element of which you can adapt to your use case.

On page A you have the start button:

On page B you have the timer, triggered by change in a thing:

Hope the provided example will help. In case the issue will persist, please let me know.
Regards,

[nickjbaxter]

In your workflows you’ve entered “do a search for…”. Is this necessary? Can I not just select “current pages thing”?

The start button and the timer are all on one single page with ‘Class’ as the data source, and within this ‘Class’ data type I have ‘stream-status’, which is what should trigger the timer. This ‘Class’ data type isn’t a list of things, so I don’t believe I need to perform any searches?

Regardless, I’ve tried to copy what you did and I’m still not having success.

Workflow 1

When ‘Start Class’ button is clicked…
Step 1 - Make changes to current pages class (irrelevant step for this particular issue)
Step 2 - Changes current pages classes stream-status from ‘start’ to ‘play’

Workflow 2

When current page classes stream-status is ‘play’
Step 1 - Start timer

Again, this does successfully start the timer, but not for all users. Only for the user performing the actions above. I guess the core of my problem is I’m still unclear on what actions do or don’t have an affect on the front end for all users. As you said previously, making changes to the database will be reflected for all users. However in my attempts I’ve shown you, the timer is triggered by events linked to changes in the database, but it still doesn’t seem to be working properly?

I’ve done some tests and I can see that the database changes are happening successfully for all users. When I change the stream-status from ‘start’ to ‘play’ I can successfully show and hide things on the front end for all users. It’s just the timer that doesn’t seem to be getting triggered.

Thanks again Serg, I really appreciate you helping me with this.

[Serg]

Hi @nickjbaxter, thanks for your reply.
Allow me to analyze the provided reply and provide feedback asap

Thank you for understanding.
Regards,

[nickjbaxter]

Thanks Serg, appreciate it mate.

I guess the key part of my issue is;
a) Will changes in the database trigger the timer for ALL users, and
b) If so, how come when I make a change in my database (e.g. stream-status changing from ‘start’ to ‘play’) to trigger the timer, it doesn’t start the timer for ALL users (considering that this is a change in the database)

I should also add that I experimented with using the countdown timer instead of a normal timer, and this actually worked successfully - when changing status, the countdown timer was triggered for all users. It’s not the ideal solution, as I want to add the ability to ‘pause’, and I would have to build some hacky functionality to make this work.

I was thinking that maybe since a countdown date/time is universal for all users and linked to the current users time, it will be consistent, where as a normal timer isn’t tied to anything universal in the same way, and therefore will be different for each user… if that makes sense.

Look forward to your reply, thanks again Serg!

[Serg]

Hi @nickjbaxter, thanks for the additional information provided.
For a better understanding from our side, would it be convenient for you to add our support@zeroqode.com as a collaborator of your app?
This will allow us to check what’s wrong with your setup and test it out in our workspace.

Enter your Bubble editor page → Settings → “Collaboration” tab → Invite a user (email).

(Note: disregard the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.)

I will check your setup and do a few tests in an attempt to find the root cause and help you fix it.
In case it is ok for you, please let me know.

Regards,

[nickjbaxter]

Hey Serg,

Of course, no problem. I have added you as a collaborator and created a save point, so feel free to experiment.

Please feel free to reach out if you need me to explain anything in more detail.

Thanks again, really appreciate you taking the time to look into this.

Regards,
Nick

[Serg]

Hi @nickjbaxter, thanks for the provided access and details.
We’ve checked plugin functionality within your application, and it works as expected.

For your case, allow me to recommend using the additional data type in the database, and the “When condition is true” event.

See the screenshots for setup guidance.

• “Start” button make a change to a thing to “yes”
  

  

• “Stop” button makes the change to a thing to “no”

*Then, two conditions are inserted:

This setup allows starting the timer/stopwatch for all page visitors at the same time

Hope it helps.

Regards,

[nickjbaxter]

Hey Serg,

Great!! Thanks so much for the help, it works!

One more question before we close this discussion. There is a slight delay in the timer starting. For example, if I have the page open on my desktop and my mobile, one usually lags 2 - 3 seconds behind the other.

In order to get the timer perfectly in sync (or close enough to perfect), would it be better to use the countdown timer, since this counts down to a date/time which is universal for all users, rather than the timer which is more arbitrary?

Thanks again, appreciate your help very much!

[Serg]

Hi @nickjbaxter, glad to hear it works.

@nickjbaxter

There is a slight delay in the timer starting.

It appears due to the fact that on database elements change, page setup needs a short time to react to the change and start the “Do when” action. Plus, the time of your browser load + short delay on request/response for the Bubble server.

@nickjbaxter

would it be better to use the countdown timer, since this counts down to a date/time which is universal for all users, rather than the timer which is more arbitrary?

Yes, this could be an option. In this case, you need to program the workflows to start the countdown timer at a certain time for a certain period.

Regards,

[nickjbaxter]

Awesome, thanks again Serg for your help, much appreciated. There are more Zeroqode plugins I’m looking to integrate eventually so your support has given me great confidence going ahead!

[Serg]

Hi @nickjbaxter, thanks for your appreciation

We would be glad to help with any plugin-related questions .

If you like our plugin you can rate it by going to the Plugins tab in Bubble editor. Find the plugin by name and it gives it as many stars as it deserves

The more feedback we get, the more motivated we are to make things better in Bubble.

Have a nice weekend ahead!
Regards,