I have created a simple analog clock face with battery level, date, day and steps counts. All seemed to work fine. To add a a bit more to it I have included 2 png files that swings on each tick. it works perfectly on the Versa 2 simulator but when I side load it to the device, the screen starts flashing with the background and black background alternatively and one png file flashing as well. What did I do wrong ?
The index js
import clock from "clock";
import document from "document";
import { charger, battery } from "power";
import userActivity from "user-activity";
import { display } from "display";
// Update the clock every second
clock.granularity = "seconds";
let dayDate = document.getElementById("date");
let weekDay= document.getElementById("week");
const days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
let hourHand = document.getElementById("hours");
let minHand = document.getElementById("mins");
let secHand = document.getElementById("secs");
let micKey = document.getElementById("mickey");
let minNie = document.getElementById("minnie");
let batValue = document.getElementById("batt");
let stepValue = document.getElementById("stepslabel");
stepValue.text = userActivity.today.adjusted.steps;
var d = new Date();
dayDate.text = d.getDate();
weekDay.text = days[d.getDay()];
updateBattery();
// Returns an angle (0-360) for the current hour in the day, including minutes
function hoursToAngle(hours, minutes) {
let hourAngle = (360 / 12) * hours;
let minAngle = (360 / 12 / 60) * minutes;
return hourAngle + minAngle;
}
// Returns an angle (0-360) for minutes
function minutesToAngle(minutes) {
return (360 / 60) * minutes;
}
// Returns an angle (0-360) for seconds
function secondsToAngle(seconds) {
return (360 / 60) * seconds;
}
function mickeyToAngle(seconds) {
let rnd = Math.round(seconds/2);
let float = seconds/2;
let remainder = float - rnd;
return remainder * 20;
}
function minnieToAngle(seconds) {
let rnd = Math.round(seconds/2);
let float = seconds/2;
let remainder = float - rnd;
return -remainder * 15;
}
// Rotate the hands every tick
function updateClock() {
let today = new Date();
let hours = today.getHours() % 12;
let mins = today.getMinutes();
let secs = today.getSeconds();
hourHand.groupTransform.rotate.angle = hoursToAngle(hours, mins);
minHand.groupTransform.rotate.angle = minutesToAngle(mins);
secHand.groupTransform.rotate.angle = secondsToAngle(secs);
micKey.groupTransform.rotate.angle = mickeyToAngle(secs);
minNie.groupTransform.rotate.angle = minnieToAngle(secs);
}
function updateBattery() {
let lvl = Math.floor(battery.chargeLevel);
batValue.text = lvl +"%" ;
if (lvl > 50)
batValue.style.fill = "lime";
else if (lvl > 25)
batValue.style.fill = "yellow";
else
batValue.style.fill = "coral";
}
function updateSteps() {
let stepValue = document.getElementById("stepslabel");
stepValue.text = userActivity.today.adjusted.steps;
}
// Update the clock every tick event
clock.ontick = () => {
updateClock();
updateSteps();
updateBattery();
}
The Index GUI
<svg viewport-fill="#111111">
<image href="fitbit.png"/>
<image href="steps.png" x="5%" y="4%" width="40" height="40"/>
<g id="mickey" pointer-events="visible" transform="translate(23%,48%)">
<image x="-18%" y="-28%" href="mickey.png" width="36%" height="60%"/>
</g>
<g id="minnie" pointer-events="visible" transform="translate(79%,47%)">
<image x="-18%" y="-28%" href="minnie.png" width="36%" height="60%"/>
</g>
<rect x="70%-1" y="78%+7" width="48" height="35"fill="white" />
<rect x="70%" y="78%+8" width="46" height="33"fill="red" />
<rect x="15%-1" y="78%+7" width="50" height="35"fill="white" />
<rect x="15%" y="78%+8" width="48" height="33"fill="red" />
<text id="myLabel"></text>
<text id="date" class="date" x="48%+88" y="88%+8">??</text>
<text id="week" class="week" x="10%+38" y="88%+8">??</text>
<text id="batt" class="batt" x="48%+8" y="88%+28">??</text>
<text id="stepslabel" class="steps" x="38%+38" y="10%+18">??</text>
<g id="mins" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-4" y="-135" width="8" height="135"fill="#62F5FB" />
</g>
<g id="hours" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-6" y="-95" width="12" height="95" fill="#4E4F54" />
</g>
<g id="secs" pointer-events="visible" transform="translate(50%,50%)">
<rect x="$-2" y="-140" width="4" height="160"fill="#3357FF" />
</g>
<circle cx="50%" cy="50%" r="10" fill="#C2C3C8" />
</svg>
CSS
.background {
viewport-fill: red;
}
#myLabel {
font-size: 80;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: white;
}
#date {
font-size: 40;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: white;
}
#week {
font-size: 40;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: white;
}
#batt {
font-size: 40;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: green;
}
#stepslabel {
font-size: 60;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: yellow;
}
