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

Best way to change screens on clockface

ANSWERED

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!

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions
2 REPLIES 2
Best Answer

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.

 

 

Best Answer