Dividing screen touch interface for multiple options in Bangle JS 2

[espruino-discuss2]

Posted at 2022-06-13 by pranjal

Hello!
I am working on a Bangle JS 2 app for tracking and monitoring a user's health.
For this, I have made a screen with three main options, i.e., Walking, Jogging, and Cycling.
I have also implemented three separate screens for walking, jogging, and cycling. Is there a way of implementing the touch screen in a manner that when we touch on a certain section of the screen it leads me to a particular section of the code?
Let's say if touch the top 1/3rd portion on the screen, it should lead me to the part of the code which has the walking sub-activity and when I touch the bottom third of the screen it leads me to the cycling sub-activity.

Basically, I wished to enquire if I could divide the screen into "parts" with different portions of the screen leading me to different options.

Thank you in advance!

---

Attachments:

• Activities (1).jpeg
  
• Cycling (1).jpeg
  
• Jogging (1).jpeg
  
• Walking (1).jpeg

[espruino-discuss2]

Posted at 2022-06-13 by @thyttan

One way I've done this is to read the position of the users touch point and use if-statements to choose between entries.

Something like:

if (50 < event.y && event.y < 100) { open first entry }
else if (100 <= event.y && event.y < 150) { open second entry }
....

I've done this here in a custom setUI (line 106) starting on line 117.

---

Posted at 2022-06-13 by pranjal

Thanks a ton!
I shall look into this.

---

Posted at 2022-06-13 by user140377

Shouldn't this be easy with the layout library? Just create 3 buttons, vertical layout.