Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Onclick works in Emulator but not on watch

ANSWERED

Not sure what I am missing but When I run my watchface in the emulator I can click and change the stats as desired, but when I sideload or install the watchface to my device I do not get any of the stats.  Here is a snippet of my code with the section in question: 

Index.js

//Change Stats on screen tap

let clickbackground = document.getElementById("clickbg");
var stats = [
"steps",
"active",
"distance",
"floors",
"cals"
]
var stat = 0;

function updateStatData() {
if (display.on){
let statsLabel = document.getElementById("statsLabel");

switch (stats[stat]){
case "steps":
statsLabel.text = `${today.adjusted.steps ? today.adjusted.steps.toLocaleString(): 0 } steps`;
break;
case "active":
statsLabel.text = `${today.adjusted.activeMinutes ? today.adjusted.activeMinutes.toLocaleString() : 0} active`;
break;
case "distance":
if (units.distance == "us")
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.000621371) : 0 } miles`;
else
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.001) : 0 } km`;
break;
case "floors":
statsLabel.text = `${today.adjusted.elevationGain ? today.adjusted.elevationGain : 0} floors`;
break;
case "cals":
statsLabel.text = `${today.adjusted.calories ? today.adjusted.calories.toLocaleString() : 0} cals`;
break;
}
}
}
clickbackground.onclick = function(evt) {
console.log("Click " + stat);
if (stat < stats.length-1)
stat++;
else
stat = 0;
console.log(stats[stat]);
}

setInterval(updateStatData, 500);

 

Index.gui

<svg viewport-fill="#ffffff">
<rect id="background" width="100%" height="100%" fill="#f48137" />
<image id="WatchFace" class="WatchFace" href="background.png" />
<text id="statsLabel" />
<text id="date1" class="date1" />
<text id="date2" class="date2" />
<text id="heartrateValue" class="heartrateValue"></text>
<text id="battery" class="battery"></text>
<text id="12" class="12">12</text>
<text id="3" class="3">3</text>
<text id="6" class="6">6</text>
<text id="9" class="9">9</text>
<g id="hours" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-4" y="-55" width="6" height="55" fill="#1a1b1d" />
<rect x="$-4" y="-50" width="3" height="20" fill="#b0e4e5" />
</g>
<g id="mins" pointer-events="visible" transform="translate(50%,50%)">
<rect x="-3" y="-85" width="6" height="85" fill="#1a1b1d" />
<rect x="-2" y="-78" width="3" height="35" fill="#b0e4e5" />
</g>
<g id="secs" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-2" y="-90" width="3" height="120" fill="#92f2f3" />
</g>
<circle cx="50%" cy="50%" r="6" fill="#92f2f3" />
<circle cx="50%" cy="50%" r="2" fill="#1a1b1d" />
<rect id="clickbg" pointer-events="visible"/>
</svg>

 

Styles.css

#clickbg {
width: 100%;
height: 100%;
fill: black;
opacity: 0
}
#statsLabel {
font-size: 20;
font-family: Seville-Bold;
text-length: 20;
text-anchor: middle;
x: 50%;
y: 9%;
fill: white;
}

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Jon, Thanks for the Reply.  Turns out it was not permissions after all.  Once I removed the setInterval() parameter and updated everything in the ontick evt it stopped working in the Emulator as well.  Here is what I did to fix the issue.  Green = added or moved, Red = deleted.

Index.js

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

//Change Stats on screen tap

let clickbackground = document.getElementById("clickbg");
function stats() = {

return [
"steps",
"active",
"distance",
"floors",
"cals"
]

}
var stat = 0;

function updateStatData() {
if (display.on){
let statsLabel = document.getElementById("statsLabel");

switch (stats()[stat]){
case "steps":
statsLabel.text = `${today.adjusted.steps ? today.adjusted.steps.toLocaleString(): 0 } steps`;
break;
case "active":
statsLabel.text = `${today.adjusted.activeMinutes ? today.adjusted.activeMinutes.toLocaleString() : 0} active`;
break;
case "distance":
if (units.distance == "us")
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.000621371) : 0 } miles`;
else
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.001) : 0 } km`;
break;
case "floors":
statsLabel.text = `${today.adjusted.elevationGain ? today.adjusted.elevationGain : 0} floors`;
break;
case "cals":
statsLabel.text = `${today.adjusted.calories ? today.adjusted.calories.toLocaleString() : 0} cals`;
break;
}
}
}
clickbackground.onclick = function(evt) {
console.log("Click " + stat);
if (stat < stats().length-1)
stat++;
else
stat = 0;
console.log(stats()[stat]);
}

setInterval(updateStatData, 500);

clock.ontick = (evt) => {
updateClock();
updateStatData();
}

Everything is working as expected now.

View best answer in original post

Best Answer
0 Votes
2 REPLIES 2

It's probably permissions, the simulator doesn't currently check for permissions, but the device does.

 

https://dev.fitbit.com/build/guides/permissions/

 

Also, don't use setInterval(), it will drain the battery. Update your UI in the clock tick event, and it will only update when the screen is on.

Best Answer

Jon, Thanks for the Reply.  Turns out it was not permissions after all.  Once I removed the setInterval() parameter and updated everything in the ontick evt it stopped working in the Emulator as well.  Here is what I did to fix the issue.  Green = added or moved, Red = deleted.

Index.js

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

//Change Stats on screen tap

let clickbackground = document.getElementById("clickbg");
function stats() = {

return [
"steps",
"active",
"distance",
"floors",
"cals"
]

}
var stat = 0;

function updateStatData() {
if (display.on){
let statsLabel = document.getElementById("statsLabel");

switch (stats()[stat]){
case "steps":
statsLabel.text = `${today.adjusted.steps ? today.adjusted.steps.toLocaleString(): 0 } steps`;
break;
case "active":
statsLabel.text = `${today.adjusted.activeMinutes ? today.adjusted.activeMinutes.toLocaleString() : 0} active`;
break;
case "distance":
if (units.distance == "us")
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.000621371) : 0 } miles`;
else
statsLabel.text = `${today.adjusted.distance ? util.round2(today.adjusted.distance * 0.001) : 0 } km`;
break;
case "floors":
statsLabel.text = `${today.adjusted.elevationGain ? today.adjusted.elevationGain : 0} floors`;
break;
case "cals":
statsLabel.text = `${today.adjusted.calories ? today.adjusted.calories.toLocaleString() : 0} cals`;
break;
}
}
}
clickbackground.onclick = function(evt) {
console.log("Click " + stat);
if (stat < stats().length-1)
stat++;
else
stat = 0;
console.log(stats()[stat]);
}

setInterval(updateStatData, 500);

clock.ontick = (evt) => {
updateClock();
updateStatData();
}

Everything is working as expected now.

Best Answer
0 Votes