nested Layouts

[espruino-discuss2]

Posted at 2022-06-30 by RaoulDuke

I would like to use the layout library to make nested menus. When i do this:

var mainMenu = new Layout( {
  {type:"btn", label:"A", cb:l=>{mainMenu.clear();AMenu.render();}}
}
var AMenu = new Layout( {
  {type:"btn", label:"something", cb:l=>{}}
}

it shows menu "A" when i push the button, but the buttons from mainMenu are still active. Is there a simple way to completely remove a layout from screen?
Also, i would like to change a value via the graphical menu, but without actually displaying the menu. Is there a way to do this? I could just use the menu interface, but it is difficult to use wearing gloves.

[espruino-discuss2]

Posted at 2022-06-30 by @gfwilliams

When created, the 'Layout' object 'grabs' user input from the screen. What you'd need to do is just create a Layout object as and when you want it rather than trying to keep them in RAM all the time (it's also better for memory usage):

function showAMenu() {
  var AMenu = new Layout( {
   {type:"btn", label:"something", cb:l=>{}}
  });
}

var mainMenu = new Layout( {
  {type:"btn", label:"A", cb:l=>{showAMenu();}}
});

Also, i would like to change a value via the graphical menu, but without actually displaying the menu

I don't really understand what you're asking here... You can change the values in the object you pass to the menu and then I think E.showMenu returns and object that has a render function in it you can call to update.

---

Posted at 2022-06-30 by RaoulDuke

When created, the 'Layout' object 'grabs' user input from the screen. What you'd need to do is just create a Layout object as and when you want it rather than trying to keep them in RAM all the time (it's also better for memory usage):

Thanks, will try that!

I don't really understand what you're asking here...

Here is an example, i basically want to go from the main menu to the adjustment page without the intermediate menu. Is there a way to do that?

var Layout = require("Layout");
var a=50;

var adjustA = {
  '< BACK>': initMainMenu,
  'A': {
    value:  a, min:0, max:100, step:1,
    format: function(value) {
      return (value);
    },
    onchange: function(value) {
      a=value;
    }
  }
};

function initMainMenu() {
  var mainMenu = new Layout (
    {type:"btn", font:"15%", fillx:1, filly:1, label:"adjust A", cb:l=>E.showMenu(adjustA)}
  );
  g.clear();
  mainMenu.render();
}
initMainMenu();

---

Attachments:

• screenshot (2).png
  
• screenshot.png
  
• screenshot (1).png

---

Posted at 2022-07-01 by @gfwilliams

Ahh, right! That's an interesting point. I don't think there is a way to do that at the moment.

If E.showMenu exported the scr object then I guess you'd be able to do m=E.showMenu();m.select(menuItemIndex); but right now I don't believe it can be done