04-14-2018 10:33 - edited 04-14-2018 10:34
04-14-2018 10:33 - edited 04-14-2018 10:34
Hi all,
I'm trying to create a clockface with two screens or "pages". So if the user taps the screen, it changes toggles to the second screen. What is the best way to achieve this functionality?
Would I nest an SVG within the main SVG or have two parallel SVG elements?
Approach 1
<svg class="background"> <g id="time-hr"> <text id="myHour" /> <text id="myMinutes" /> <text id="myDate" /> <text id="myHR" /> </g>
<svg id="score" fill="black">
<rect id="myRect" pointer-events="visible" />
<text id="pctScore" pointer-events="visible" />
</svg>
</svg>
Approach 2
<svg class="background"> <g id="time-hr"> <text id="myHour" /> <text id="myMinutes" /> <text id="myDate" /> <text id="myHR" /> </g> </svg>
<svg id="score" fill="black">
<rect id="myRect" pointer-events="visible" />
<text id="pctScore" pointer-events="visible" />
</svg>
I tried following the documentation on this page, but I was still unclear on the best way to achieve the tap display event to toggle screens. Hope this makes sense and thanks in advance!
Answered! Go to the Best Answer.
04-16-2018 16:25
04-16-2018 16:25
04-16-2018 16:25
You can something similar here https://community.fitbit.com/t5/SDK-Development/Wanted-example-of-multiple-UI-views-and-back-navigat...
04-16-2018 16:33
04-16-2018 16:33
Here is how I did it:
<svg class="background"> <svg id="clock" display="inline"> //Screen 1
</svg> <svg id="stats" display="none"> <//Screen 2 </svg> <rect id="clickbg" pointer-events="visible"/> </svg>
Then in my main code:
background.onclick = function(evt) { console.log("Click"); if (show == "clock"){ // In Clock -> Switching to Stats show = "stats"; updateStatsData() clockView.style.display = "none"; console.log("stats Loaded"); display.poke() } else if (show == "stats"){ //In Stats -> Switching to Clock show = "clock"; updateClock(); clockView.style.display = "inline";//test } //console.log("Show is " + show); }
This code is from my fairly large KearsargeTime watchface.