Adding Touch Event to Clock Face

[arcticpurple]

I have created a clock face which I am now trying to add tap/touch interactivity to.  I've tried following the limited instructions for Click Events and Touch Events from the Fitbit Javascript guide (https://dev.fitbit.com/build/guides/user-interface/javascript/), but no matter what I do, as soon as I "click" the screen, I get infinite critical glue errors (App: Error -2147483648 Critical glue error).  Would greatly appreciate any help/insight with this!

Below are the relevant code snippets:

index.js: 

import * as document from "document"; //(already included in code from before)

let myTap = document.getElementById("myTap");

myTap.addEventListener("click", (evt) => {
console.log("click");
});

index.gui: 

<svg>

<svg>
<!-- Invisible touch/tap area -->
<rect id="myTap"
width="100%" height="100%"
pointer-events="visible" />

<!-- For background color -->
<rect id="background" />
</svg>

<!-- Other existing stuff for text, images, etc. -->

</svg>

[Gondwana]

I'm getting pretty rusty, but it could be something to do with elements not having id attributes when they need one. I suspect that the system relies on id to route some events so, even if your code doesn't require an element to have an id, the system actually might.

I'd be closely looking at the nested <svg>s as well.

[Guy_]

Hi @arcticpurple - in addition to what has been posted, the order of the elements is important - try putting the "myTap" last and make it invisible, opacity=0. Especially if you don't see "click" in the log.

It may be the other elements are causing the problem. Ill defined elements can cause problems.

myTap.onclick may be an alternative, as well.

[RKE2]

Adding touch events to a clock face is a great way to make it interactive! You can easily implement this with JavaScript by detecting touch inputs and mapping them to specific actions, like changing the time or triggering an animation. It is a fun way to enhance user engagement!

[arcticpurple]

Thank you for your response. Turns out the Fitbit was getting overloaded by all of the animations I had programmed into my clock face. By commenting a few of them out of index.js and index.gui, tap function started working without issue. I'm sure my method of animation implementation is not very efficient, but it's the only method that has worked for me so far!

[arcticpurple]

Thank you, I appreciate your response. Turns out the Fitbit was getting overloaded by all of the animations I had programmed into my clock face. By commenting a few of them out of index.js and index.gui, tap function started working without issue. I'm sure my method of animation implementation is not very efficient, but it's the only method that has worked for me so far!

[Guy_]

@arcticpurple- I found certain animations can't run well concurrently with other timed operations - you may be able to use a setInterval and algorithm for some types of operations instead for greater flexibility.

Also note the simulator may work differently from the watch in some cases.

[arcticpurple]

@Guy_ Ah thank you, that's good to know!