Versa 2 Clock Face -- Tap to change screen

[astrorookie]

Hi there, I'm trying to make a clock face. I have my first page set up fine with date, time etc.

But I wanted to have it so when I tap the screen, it goes to a second page (with stuff like heart rate, steps taken etc).

I have looked around on forums for help, but every time I try to implement a second screen (even with just a background!) it destroys what I've done so far, or even fails to build completely.

I am at a total loss with what to put in index.js and index.gui. Please help me?

All I want is a tap to switch between two screens!

Thank you so much!

[Gondwana · Accepted solution]

There are a few ways to do this. As an astrorookie, I'd suggest the easiest way (which is probably what you're trying now).

Basically, have TWO <svg> sections within the outermost <svg> in index.gui. For each of them, swap the 'display' attribute between 'inline' and 'none' to control which section is visible.

That approach has some disadvantages, but should be fine for a relatively simple design.

Obviously the devil is in the detail, but hopefully that helps.

[astrorookie]

Okay I will try this now! I'll let you know how it goes!

[astrorookie]

I still can't get it working! This is my code so far:

index.js:

// below is trying to add a button to change between screen1 and screen2

let screen1 = document.getElementById("screen1");
let screen2 = document.getElementById("screen2");

let button1 = document.getElementById("button1");
let button2 = document.getElementById("button2");

function showScreen1() {
console.log("Show screen1");
screen1.style.display = "inline";
screen2.style.display = "none";
}

;function showScreen2() {
; console.log("Show screen2");
; screen1.style.display = "none";
; screen2.style.display = "inline";
}

; button1.onclick = function(showScreen2) {
; showScreen2();
}

;button2.onclick = function (showscreen1) {
; showScreen1();

index.gui

<svg>
<svg id="screen1" display="inline">
<rect id="button1" pointer-events="all" width="100%" height="100%" fill="blank" />
<image href="AC_snow.png">
<text id="myLabel" />

<g transform="rotate(5)">
<text id="myMonth" />
</g>


<g transform="rotate(5)">
<text id="myDay" />
</g>

<text id="dayofWeek" />
</svg>



<svg>
<svg id="screen2" display="none">
<rect id="button2" pointer-events="all" width="100%" height="100%" fill="blank" />
<image href="AC_Grass_Green.png">
</svg>

<rect id="clickbg" pointer-events="visible"/>
</svg>

</svg>

Literally got no idea why it won't work -- on the simulator it comes up with screen one, but clicking does nothing!

[astrorookie]

I realise I left a bunch of semicolons in, just removed them but still not working!

[Gondwana]

I only had a quick skim, but the problem MIGHT be because the button rects aren't the topmost visible elements. Elements in your .gui file are normally drawn in the order they're given in that file; so, for example, AC_snow.png is covering the button. Make sure the buttons are on top.

There can be other complications, but try that first.

It might also help to put some console.log in your onclicks, so you can see if the problem is the button events or the screen changing.

[astrorookie]

The button would then stop me from seeing everything underneath surely?
I have changed my code round a bunch but still to no avail, I now have:

index.js

// On tap of the clock screen, swap to the stats.
clockNumbers.onclick = function() {
console.log('Displaying stats page.');
clockNumbers.style.visibility = "hidden";
statsPage.style.visibility = "visible";
GetAndSetStatsPage();
}

// On tap of the stats screen, swap to clock.
statsPage.onclick = function() {
console.log('Displaying clock page.');
clockNumbers.style.visibility = "visible";
statsPage.style.visibility = "hidden";
}

// Gets and sets the stats page.
function GetAndSetStatsPage(){
batteryHandle.text = battery.chargeLevel;
stepsHandle.text = stepsString;
myHeartRate.text = hrm.heartRate;
}

and index.gui

<svg>
<svg id="clockNumbers" display="inline">
<image href="AC_snow.png">
<text id="myLabel" />

<text id="dayofWeek" />


<g transform="rotate(5)">
<text id="myDay" />
</g>

<g transform="rotate(5)">
<text id="myMonth" />
</g>
</svg>


<svg id="statsPage" display="hidden">

<text id="myHeartRate">
<text id="batteryLabel" />
<text id="stepsLabel" />

</svg>


Right now, all the stats are appearing on the same face as the clock! I have no idea how to make it so when I tap them, they change! So I have to change something in the style.css?

[Gondwana]

Yoy can make the button rects invisible, one way or another. That way, they can be on top but won't stop you seeing what's below.

And I don't think display="hidden" is a thing. Try "none".

[astrorookie]

You were totally right -- I put the button to the forefront and made the opacity 0 and it worked a charm! Thank you so much!

[Gondwana]

Great; well done!