I am trying to play with developing a ionic watchface. Really all I want to o with this is have a bar that goes across the bottom that shows progress towards a 10,000 step goal. So I created 5 rects that display red, yellow, green and I figured I'd set them all to visibility of "hidden" and then every 2,000 steps switch on the corresponding rect to visibility of "visible".
So I named the first one "steps2000". I get the element in the code and, right now, want to flip it to visible from hidden. But no matter what I do - whether I make the section it is in visible or the rect as hidden, it doesn't change the visibility... I am not really sure what I am doing wrong...
Here is some code I have if it helps :
In the index.gui :
<section x="20%-50" y="80%-50" width="80" height="100">
<rect width="100%" height="100%" fill="red" id="steps2000"/>
</section>
In the index.js
import clock from "clock";
import document from "document";
import * as util from "../common/utils";
// Update the clock every minute
clock.granularity = "minutes";
// Get a handle on the <text> element
let myLabel = document.getElementById("myLabel");
let steps2000 = document.getElementById("steps2000");
// Update the <text> element with the current time
function updateClock() {
let today = new Date();
let hours = today.getHours();
let mins = util.zeroPad(today.getMinutes());
myLabel.innerText = `${hours}:${mins}`;
steps2000.display = "none";
}
// Update the clock every tick event
clock.ontick = () => updateClock();
// Don't start with a blank screen
updateClock();
I must be doing something wrong, but as far as I can see, that ought to flip the display to none... I tried it with visibility too...
