Using swipe L+R functionailty within E.showScroller / E.showMenu

JS and Programming noob alert. Please be kind as there will likely be future posts from me as I get stuck in :)

Hi,

tldr questions:

1. Is there a work around to use E.showScroller with swipe options left and right, to go to different screens?
   
2. Can someone explain what I'd use within the 'remove:' option of E.showScroller or E.showMenu? I found calling each function would shut off when run within the 'back' block but not when run in 'remove', so wondered if this is my usage that was wrong or if remove should be utilised differently.
   
   

Context:
I've been tinkering with the Bangle 2 JS swipe options for loading different screens. I've managed to create a menu that uses 'E.showScroller', which seemed a nice way for option menus on one screen - whilst being able to define sizes etc (based on what I saw from the default launcher). However I noticed that the option for swiping left and right isn't supported within this function. I'd prefer to be able to navigate this way but I haven't been able to find an 'out of the box' workaround for this. If there's an example I'd appriciate a link to check it out :)

Failing that, I've been using the back button to return to the previous menu as I saw other apps (settings, alarms etc) that have scrollable menus are doing the same via E.showMenu. The work around is ok but I noticed when I return to any screen that isn't a menu, the 'menu' will be drawn again when I swipe up on that screen.
I've seen there are 'remove' options for both and that they should be removed if I call the command without arguments but neither approach seems to work when I've experimented. I've since found this can be resolved by calling it in the 'back' block but I was hoping someone could explain a bit more the use case for the 'removal' block and what you'd typically use in it.

Attached I've uploaded a copy of what I'm playing with E.showScroller and E.showMenu in case you're interested. Should hopefully work out of the box in the IDE tool, to show the menu issue - but let me know if not.

Appriciate any guidance someone might be able to offer and apologies if this is basic and I've just comepletely misunderstood the documentation that's been written.

** Edit** I've since added E. into the 'back' block, which helps to stop the redraws from occuring on other screen pages hitting 'back' would load.

2 Attachments

• showMenu.js
• showScroller.js

Hi!

So just to be clear: you want to use showScroller/showMenu as-is, with drag up/down to select, but then you want to be able to swap between menus by swiping left and right?

That seems to be your plan in something like showMenu.js?

I think the issue is that Bangle.setUI (which is used in turn by E.showMenu/E.showScroller) is intended to be used when you're displaying a full-screen UI. It keeps track of all the swipe/drag/buttons events and the next time it's called it removes the old ones and calls the remove handler (if supplied).

In a way that's not actually what you want, because you want your swipe handler to run in addition to showScroller/etc.

So I'd just define the handler outside of setUI, like:

function swipeHandler(lr,up) {
  // calls showMenu1/2/3() depending on swipe
}
Bangle.on('swipe', swipeHandler); // this swipe handler won't get removed by setUI

function showMenu1() {
  E.showMenu(...)
}
function showMenu2() {
  E.showScroller(...)
}

and now regardless of what menus you go between, it'll always be active

Thanks @Gordon I think that makes sense.

I've basically been viewing the setUi as a fixed thing vs assigning the components separately so the components can behave differently based on the environment I'm in.

I've been playing around with this over the last day and I think I've got it working correctly now, so hopefully I've understood your feedback correctly.

Attached is what I came up with in my larger project. Hopefully it's not too off the mark from your guidance but appriciate any feedback if there's some basic things I've not understood.

1 Attachment

• 1_new_scroller_tv_remote.js

Great! Yes, as far as I can see that looks good!

I guess maybe I'd have had a setUI per screen that had touch buttons, and put a separate touch handler in there (so the touch handler went with the screen that you were on), but that's just personal preference. Your way of doing it with the one touch handler that does everything based on what screen you're on is totally fine.

Huzzah! I'm not a total goon :D that makes sense, and I guess setting the ui within each screen would have helped me reduce the amount of jumping around I'm currently doing to blocks. Will definetly keep that in mind for the future though.

Did have one other question which hsa now occured from this...

I noticed that if I now swipe from a E.showScroller screen like I do from the apps screen to the power screen, If my swipe has even the slightest drag up or down, the redraw that occurs the shows up on the power screen (presented as a bit of the apps screen present top or bottom on the powerscreen).

It's solved if I slow down how quickly I swipe but I wanted to check if that's something I need to tweak in my code or if it's just something I have to keep in mind when swiping?

It's just something you might have to deal with I'm afraid - the swipe and drag events come from the touchscreen hardware, so you'll get drag events and then at some point it'll figure out it's a swipe and you get a swipe event too.

So if you get a swipe event, you'll just have to figure out how to undo/hide what's happened so far with the dragging...