Redraw Settings Menu After Selecting An Option

[voloved]

Hello,

Sorry if this has been asked before; if it has, I didn't find it when searching.

My goal is to show a settings item called Step Target, but only if the ring setting is set to Steps.
The issue arises because I want the Settings to change whenever I change ring, so if I change ring to Steps, I want the Step Target to appear. And if I change ring to Minutes, I want the Step Target to disappear.

Below is my code to do this.
What currently happens is that the menu displays how I want when I enter it from the Settings menu. But when I change the ring settings, the update does not occur. I would print appMenu as an output of buildMainMenu when changing ring from Minute to Steps and can confirm that Step Target is in the dict, but I do not see the setting in the menu.

Do I need to force a redraw? I looked through the references and didn't see anything, but did I miss something?

This question is related to my updates to the Daisy watchface.

(function(back) {
  const SETTINGS_FILE = "daisy.json";

  // initialize with default settings...
  let s = {'gy' : '#020',
           'fg' : '#0f0',
           'color': 'Green',
           'check_idle' : true,
           'batt_hours' : false,
           'hr_12' : false,
           'ring' : 'Steps',
           'idxInfo' : 0,
           'step_target' : 10000};

  // ...and overwrite them with any saved values
  // This way saved values are preserved if a new version adds more settings
  const storage = require('Storage');
  let settings = storage.readJSON(SETTINGS_FILE, 1) || s;
  const saved = settings || {};
  for (const key in saved) {
    s[key] = saved[key];
  }

  function save() {
    settings = s;
    storage.write(SETTINGS_FILE, settings);
  }

  var color_options = ['Green', 'Orange', 'Cyan', 'Purple', 'Red', 'Blue'];
  var fg_code = ['#0f0', '#ff0', '#0ff', '#f0f', '#f00', '#00f'];
  var gy_code = ['#020', '#220', '#022', '#202', '#200', '#002'];
  var ring_options = ['Hours', 'Minutes', 'Seconds', 'Steps', 'Battery', 'Sun'];
  var step_options = [100, 1000, 5000, 10000, 15000, 20000];

  function buildMainMenu() {
    let appMenu = {
      '': { 'title': 'Daisy Clock' },
      '< Back': back,
      'Colour': {
        value: 0 | color_options.indexOf(s.color),
        min: 0, max: color_options.length - 1,
        format: v => color_options[v],
        onchange: v => {
          s.color = color_options[v];
          s.fg = fg_code[v];
          s.gy = gy_code[v];
          save();
        },
      },
      'Idle Warning': {
        value: !!s.idle_check,
        onchange: v => {
          s.idle_check = v;
          save();
        },
      },
      'Expected Battery Life In Days Not Percentage': {
        value: !!s.batt_hours,
        onchange: v => {
          s.batt_hours = v;
          save();
        },
      },
      '12 Hr Time': {
        value: !!s.hr_12,
        onchange: v => {
          s.hr_12 = v;
          save();
        },
      },
      'Ring Display': {
        value: 0 | ring_options.indexOf(s.ring),
        min: 0, max: ring_options.length - 1,
        format: v => ring_options[v],
        onchange: v => {
          let prev = s.ring;
          s.ring = ring_options[v];
          save();
          if (prev != s.ring && (prev === 'Steps' || s.ring === 'Steps')) {
            E.showMenu(buildMainMenu());
          }
        },
      }
    };
    if (s.ring == 'Steps') {
      appMenu[/*LANG*/"Step Target"] = {
        value: 0 | step_options.indexOf(s.step_target),
        min: 0, max: step_options.length - 1,
        format: v => step_options[v],
        onchange: v => {
          s.step_target = step_options[v];
          save();
        },
      };
    } 
    return appMenu;
  }

  E.showMenu(buildMainMenu());
});

[gfwilliams]

What you're doing there would seem to be ok. Personally when I've done stuff like this I did:

function showMainMenu() {
  // ...
  E.showMenu(appMenu);
}
...
showMainMenu();

and not:

function buildMainMenu() {
  // ...
  return appMenu;
}
...
E.showMenu(buildMainMenu());

which reduces some duplication, but that'd make no difference here.

Looking at the internal menu code though, I think I can see what's happening. When you have a 'simple' menu item that changes like a boolean, E.showMenu calls onchange and then checks if it's still active before redrawing. But when it's more complex like another menu, E.showMenu doesn't check and instead goes back to displaying the old menu (which overwrites what you did)

I'll look at getting a fix in, but the best thing to do right now so it works on current/older firmwares is to add a timeout before you change menu, which allows E.showMenu to finish what it was doing before you change menu.

So...

          if (prev != s.ring && (prev === 'Steps' || s.ring === 'Steps')) {
            setTimeout(() => E.showMenu(buildMainMenu()), 0);
          }

Or if you change it as I'd suggested above, just:

          if (prev != s.ring && (prev === 'Steps' || s.ring === 'Steps')) {
            setTimeout(showMainMenu, 0);
          }

[voloved]

That worked and this makes sense!
Thank you so much for the support and your work on this project.

[gfwilliams]

Great! I've also just pushed a change which should be in cutting edge builds (and 2v26+ releases) that'll fix this properly - but the fix above is best for the moment as it'll work on older devices too

[bobrippling]

@gfwilliams I think this has broken promenu: in debugging, I've found that the select() callback is invoked for every menu ever rendered, as if the setUI of old menus isn't cleared out - does this sound like anything related to changes between 2v25 and 2v27?

The tally app, or settings can reproduce the problem (obviously with promenu installed) if that helps - I'll see if I can get any further when I'm free in a few days

[bobrippling]

Note to self: k9 input also renders as broken when called from a menu: nothing shown on the bottom half of the screen

[bobrippling]

I managed to reproduce k9 input's half-rendering naturally in settings, without promenu installed, but can't get it to occur now, attempting:

render = () => E.showMenu({
  hi: () => require("textinput").input().then(x => {console.log("got " + x); render() }),
  "< Back": render,
})

render()

[gfwilliams]

Thanks - I just diffed it, and I see this: espruino/Espruino@453def8#diff-9cf9cf6a517caa6d0ac51e773d35b75ed69fc8457aecec430b577e5930a48f08

So I think what's happened is because you're using a touchHandler with up/down setUI is now overwriting the internal Bangle.touchHandler and not removing it correctly after. Previously it looks like it overwrote the built-in handler and it was never called which also feels like a bit of a bug (albeit not as extreme).

I've just opened an issue for this: espruino/Espruino#2648