03-11-2019 22:38
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-11-2019 22:38
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
HI! I'm new at coding apps, so I'm sorry if this is super obvious, but I'm trying to have a white rectangle appear when I tap one part of the screen, and go away when I tap it again. I'm basically trying to have an invisible on-off switch over half the screen. How do I do it? Here's what I have so far in the index.gui:
<svg viewport-fill="black"> <text x="75%" y="75%" font-family="System-Regular" fill="red" font-size="30" font-weight="bold" text-anchor="middle">Red</text> <text x="25%" y="75%" font-family="System-Regular" fill="white" font-size="30" font-weight="bold" text-anchor="middle">White</text> <line x1="149" y1="1" x2="149" y2="300" fill="white" stroke-width="2" /> <line x1="151" y1="1" x2="151" y2="300" fill="red" stroke-width="2" /> </svg>
And that's basically all the code I have. If anyone could help it would be great.
Thanks!
Answered! Go to the Best Answer.
Accepted Solutions
03-12-2019 13:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


03-12-2019 13:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
You'll want a <rect> with pointer-events="all"
<rect id="clickRect" x="0" y="0" width="50%" height="100%" fill="blue" pointer-events="all" />
Then you'll want to capture the click event and toggle the visibility
import document from "document";
let clickRect = document.getElementById("clickRect");clickRect.addEventListener("click", () => { clickRect.style.visibility = (clickRect.style.visibility === "visible") ? "hidden" : "visible";});
https://dev.fitbit.com/build/guides/user-interface/javascript/#hiding-showing-an-element

03-12-2019 13:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


03-12-2019 13:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
You'll want a <rect> with pointer-events="all"
<rect id="clickRect" x="0" y="0" width="50%" height="100%" fill="blue" pointer-events="all" />
Then you'll want to capture the click event and toggle the visibility
import document from "document";
let clickRect
= document.getElementById("clickRect
");
clickRect.addEventListener("click", () => {
clickRect.style.visibility = (clickRect.style.visibility === "visible") ? "hidden" : "visible";
});
https://dev.fitbit.com/build/guides/user-interface/javascript/#hiding-showing-an-element

