Click events on simulator and Windows

[joco2222]

Hi, do click events work in the simulator when running on Windows 11?

I'm running node v20.13.1, Windows 11 Home vers 23H2, simulator version 0.9.4 with device type Versa 3 and the code as posted below, but clicking the mouse anywhere on the screen doesn't execute anything in the event listener or onclick functions nor generate any console.log messages. I've checked the simulator isn't zoomed in or out and uninstall/reinstall the simulator. Thanks.

index.js

import clock from "clock";

import * as document from "document";

import { preferences } from "user-settings";

function zeroPad(i) {

  if (i < 10) {

    i = "0" + i;

  }

  return i;

}

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

mytest.style.fill = "blue";

mytest.onclick = function() {

    console.log("in onclick - clicked");

    mytest.style.fill = "green";

}

mytest.addEventListener("click", function() {

  console.log("in eventListener - clicked");

    mytest.style.fill = "white";

});

// Update the clock every minute

clock.granularity = "minutes";

// Get a handle on the <text> element

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

// Update the <text> element every tick with the current time

clock.ontick = (evt) => {

  let today = evt.date;

  let hours = today.getHours();

  if (preferences.clockDisplay === "12h") {

    // 12h format

    hours = hours % 12 || 12;

  } else {

    // 24h format

    hours = zeroPad(hours);

  }

  let mins = zeroPad(today.getMinutes());

  myLabel.text = `${hours}:${mins}`;

}

index.view

<svg class="background">

  <text id="myLabel" />

  <rect id="mytest" x="10" y="10" width="100" height="100" pointer-events="visible"/>

</svg>

[Guy_]

Hi @joco2222 - to click anywhere on the screen you will need

<rect id="mytest" x="0" y="0" width="100%" height="100%" pointer-events="visible"/>

Otherwise it will work only if you click in the coloured box.

[Guy_]

@joco2222- or define

index.js

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

and change the onclick and addlistener to myScreen instead of mystest

index.view

<svg class="background">
<rect id="mytest" x="10" y="10" width="100" height="100" />
<text id="myLabel" text-length="5" x="45%" y="45%" fill="white" />
<rect id="myScreen" x="0" y="0" width="100%" height="100%" pointer-events="visible" opacity="0"/>
</svg>

[Gondwana]

I normally do it the way that Guy_ described.

Is there a chance that there's something conflicting in the definition of "background"? It might be worth a giggle to remove that class reference and see what happens.

[Guy_]

@Gondwana- it works with or without the background definition. The problem was clicking anywhere won't work if only [the small] object is clickable.

[joco2222]

Hi, thanks for the replies everyone.
I've tried all the suggestions starting from the 1st reply, but the app still doesn't log any clicks or change the fill colour. The small rectangle was just a confined area to test the clicks, I found on the web when searching for solutions.

I tried removing <svg class="background"> from index.view as per Gondwana's suggestion but it failed to load. I changed the spelling of background and it loads and runs but still no click events are logged. I've also tried earlier versions of the fitbit simulator but they wont wouldn't run.

Is anyone using Windows 11 to develop watch faces? I'm just wondering if it's my installation that's the problem. I'll try running some of the clock faces from the github page and see if the simulator responds to clicks.

[Gondwana]

Yes, I used Windows 11.

Instead of removing <svg class="background"> entirely, try changing it to just <svg> ; ie, remove class="background". That probably won't make any difference, but I can't see what else could be interfering with your code.

[joco2222]

I changed it to just <svg> but unfortunately that didn't make any difference. 

I installed https://github.com/cgguardian/circles on the simulator and tried clicking on the icons which are supposed to change from icon to numbers but there was no change and after adding a console.log statement that wasnt executed either.

I'm at a bit of a loss, because if I've tried some known working code (circles) and it's not working on the simulator then it looks like the simulator is the problem but I don't know where to go from here. I've reinstalled it a few times so I'm not sure what else I can do.

[Gondwana]

This probably isn't relevant, but are you sure you're running node 20? I didn't think CLI would work with anything later than node 16.

[Gondwana]

Ctrl+0 (zero) should reset sim zoom, just in case. You could also try removing all sim cache (local files) and reinstalling, just in case it's remembering a setting that it shouldn't.

Here's some more source code that uses touch, but I think the issue is in your installation. Could it be that there's an OS or display utility setting that's applying zoom/magnification? Non-native screen resolution?

[Guy_]

@joco2222 - I ran your original code and the revision versions on windows 11 and they all worked as stated.

I will check versions later.

[joco2222]

node --version gives me v20.13.1 And from the Getting started page I did 

nvm install 14
nvm alias default 14

nvm install 14   says Version 14.21.3 is already installed and the alias default 14 says Running version 1.1.12 and then gives the usage help.
Theres a popup about the GeForce ingame experience running whenever I start the simulator. I'll see if I can disable that and also remove all sim cache files too.

[Gondwana]

If node --version is still saying 20, it sounds like node 14 might be installed but is not being used. I can't help with that because I only install one version of node at a time. I would have thought that nvm would provide a way of switching the in-use version.

When changing node versions, I think you'll need `npm i` to change the node_modules in the project.

But I suspect the node version is not the cause of the original problem. 😞

[Guy_]

@joco2222- just to be sure it isn't a mouse problem, click the imaginary left watch button in the Simulator and the display should blank or wake.

Also you should be able to drag the watch display to the right with the mouse to see the Quick Settings.

[joco2222]

I got node to use vers 14 as the default but click events still didn't work, so managed to get everything installed on an old Windows 10 laptop and my click events are now working!😊

Interestingly clicking the imaginary left button works on Win 11, and then clicking the screen wakes up the simulator but I cant drag the mouse to show quick settings or notifications on the Win 11 simulator like it does on the Win 10 machine. So I'll just use the Win 10 machine to develop my watch app.

Thanks Gondwana  and Guy_ for all the time and effort you put into trying to find a fix for me. I really appreciate it. 👍