Best way to change screens on clockface

[ramirezp]

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!

[JonFitbit · Accepted solution]

You can something similar here https://community.fitbit.com/t5/SDK-Development/Wanted-example-of-multiple-UI-views-and-back-navigat...

[Cmspooner]

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.