Suggestion: double number scroller

[espruino-discuss2]

Posted at 2024-06-13 by Pologram

Hello,

I was thinking that it would be neat to have a menu that allows to select two numbers at the same time. The most typical usecase would be to select a time, with the hours and minutes next to each other. It could be a small but nice QOL update.

I tried and made a quick mockup (see attachment), and the result looks nice, because the watch screen has enough real estate for that.

In the code, it could be easy to set up as well. An example could be:

"Time" : {
    value : double_number,
    min_1:0,max_1:23,step_1:1,
    min_2:0,max_2:59,step_2:1,
    onchange_1 : v_1 => { number_1=v_1; }
    format_1: function (v_1) { return something(v_1); }
    onchange_2 : v_2 => { number_2=v_2; }
    format_2: function (v_2) { return something(v_2); }
},

My understanding is that in order to achieve that I need to tweak the Espruino/libs/js/banglejs /E_showMenu_Q3.js file, and then build a custom firmware and upload it to the watch. Is that correct?

Thank you for your insights

---

Attachments:

• Nouveau projet.png

[espruino-discuss2]

Posted at 2024-06-13 by @thyttan

You can overwrite showMenu at boot time. See this tutorial: https://www.espruino.com/Bangle.js+Modification

This PR for a custom date and time picker might be interesting to you as well: espruino/BangleApps#3443

---

Posted at 2024-06-14 by @gfwilliams

Hi, this sounds like a neat idea. However I don't think it needs to be an addition to E.showMenu...

What about just making it a library: https://github.com/espruino/BangleApps/tree/master/modules

For instance you could then just do:

E.showMenu({
   ....
  "Time" : require("timechoosermenu").time({
    value : current_time, 
    onchange : function(newTime) { }
  });
});

This way it'd end up working without anyone needing a firmware update. And you can prototype it without the library - just put the code in place in the IDE.

Also worth noting there's this PR currently: espruino/BangleApps#3443

Which adds a configurable date/time chooser that can be installed. So once you'd done it, you could for instance make a similar app to that which provided a datetimeinput library which used your code, and then people could choose how they wanted to be able to set the date.

---

Posted at 2024-06-14 by Pologram

Thanks for the suggestion @gfwilliams !

I have a question with the code format.

If I prototype my custom picker like this :

function showTimePicker(options){
  console.log(options);
}

Later do I need to call it like this in my menu:

E.showMenu({
  'Time': showTimePicker({
    foo : "bar", 
    spam : "eggs"
  })
});

or like this:

E.showMenu({
  'Time': function () {showTimePicker({
    foo : "bar", 
    spam : "eggs"
  });}
});

?

---

Posted at 2024-06-14 by Pologram

Alright, I'm almost done, check the attached video.

My only remaining question is: how can I go back to the original menu when I validate my input or click the back button? Currently I pass the original menu in a goBackTo object

var hours = 10;
var minutes = 32;

var menu = {
  'Time': function () {showDoubleIntPicker("Title",{
    goBackTo: menu,
    value_1: hours,
    step_1: 1,
    min_1: 0,
    max_1: 23,
    wrap_1: true,
    value_2: minutes,
    step_2: 1,
    min_2: 0,
    max_2: 59,
    wrap_2: true,
    format: function (v_1, v_2) {},
    onchange: function (v_1, v_2) {hours = v_1; minutes = v_2;}
  });}
};

and then call E.showMenu(goBackTo); when I need to go back.

But I imagine there are more elegant ways to do it?

---

Attachments:

• PowerToys_5QQHxlgf4d.mp4

---

Posted at 2024-06-14 by @gfwilliams

Great! I'd probably put the original menu in a function, and then pass that function in, so:

function showMainMenu() {
  E.showMenu({ ...
     'Time': function () {showDoubleIntPicker("Title",{
         back: showMainMenu,
         ...
     }
}); 
}

Because maybe someone doesn't want to call your picker from a menu, but they want to call it direct from some other part of their app.

---

Posted at 2024-06-15 by Pologram

Thanks, that's indeed more elegant.

I think I'm all set now. I also created a triple int picker because why not. (see attachments) I don't think I can make more than 3 columns though because the screen is not that big.

The result looks pretty similar to the "stock" picker. I also added the possibility to add custom separators like : for times and / for dates. (who knows, maybe soccer players will use - to input a score for example)

In code it can be used quite easily with a syntax that is very similar to the stock one:

function showMainMenu() {
  E.showMenu({
    'Date': function () {
      showTripleIntPicker({
        back: showMainMenu,
        title: "Date",
        //separator_1: "/",
        //separator_2: "/",
        value_1: day,
        min_1: 1, max_1: 31, step_1: 1, wrap_1: true,
        value_2: month, 
        min_2: 1, max_2: 12, step_2: 1, wrap_2: true,
        value_3: year,
        min_3: 2000, max_3: 2050, step_3: 1, wrap_3: false, 
        format_1: function (v_1) { return (pad2(v_1)); },
        format_2: function (v_2) { return (pad2(v_2)); },
        onchange: function (v_1, v_2, v_3) { day = v_1; month = v_2; year = v_3; }
      });
    }
  });
}

showMainMenu();

Next order of business is to whip a MR :)

---

Attachments:

• screenshot (1).png
  
• screenshot.png

---

Posted at 2024-06-17 by @gfwilliams

That looks great - thanks!

Did you want to make a PR on GitHub to add them to the modules folder so others can include them?

---

Posted at 2024-06-17 by Pologram

Thanks for the feedback!

Yes, that's what I did: espruino/BangleApps#3455