Using E.showMenu() and Bangle.js Layout Library together

Posted on Thu 1st, June 2023

• #1

stweedo

I'm having trouble getting my layout to work when called from within a menu. It seems to keep the menu running in the background even after clearing the screen. My layout is displayed but the on screen buttons aren't usable.

Any suggestions?

• #2

stweedo

It's far from finished and there may be other bugs and errors, but here is the program I'm making. It's an Ohm's Law Calculator. This problem has been holding me back all day so I would really like to solve it, especially since it seems trivial.

let Layout = require("Layout");

const UNITS = {
  "Voltage (V)": "Volts",
  "Current (I)": "Amps",
  "Resistance (R)": "Ohms",
  "Power (P)": "Watts",
};

const FORMULAS = {
  'Voltage (V)': {
    'Current (I), Resistance (R)': "{0} * {1}",
    'Power (P), Current (I)': "{0} / {1}",
    'Power (P), Resistance (R)': "Math.sqrt({0} * {1})"
  },
  'Current (I)': {
    'Voltage (V), Resistance (R)': "{0} / {1}",
    'Power (P), Voltage (V)': "{0} / {1}",
    'Power (P), Resistance (R)': "Math.sqrt({0} / {1})"
  },
  'Resistance (R)': {
    'Voltage (V), Current (I)': "{0} / {1}",
    'Power (P), Current (I)': "{0} / (Math.pow({1}, 2))",
    'Power (P), Voltage (V)': "(Math.pow({0}, 2)) / {1}"
  },
  'Power (P)': {
    'Voltage (V), Current (I)': "{0} * {1}",
    'Current (I), Resistance (R)': "(Math.pow({0}, 2)) * {1}",
    'Voltage (V), Resistance (R)': "(Math.pow({0}, 2)) / {1}"
  },
};

let lastStringWidth = 0;
let calculatedVariable;
let selectedVariable;
let variableValues = {};
let inputStr = "";

let layout = new Layout({
  type: "v",
  c: [
    { type: "txt", font: "6x8:3", label: "", id: "label" },
    { type: "h", c: "123".split("").map(i => ({ type: "btn", font: "6x8:3", label: i, cb: () => { handleButtonPress(i); }, fillx: 1, filly: 1 })) },
    { type: "h", c: "456".split("").map(i => ({ type: "btn", font: "6x8:3", label: i, cb: () => { handleButtonPress(i); }, fillx: 1, filly: 1 })) },
    { type: "h", c: "789".split("").map(i => ({ type: "btn", font: "6x8:3", label: i, cb: () => { handleButtonPress(i); }, fillx: 1, filly: 1 })) },
    { type: "h", c: ".0C".split("").map(i => ({ type: "btn", font: "6x8:3", label: i, cb: () => { handleButtonPress(i); }, fillx: 1, filly: 1 })) },
    { type: "h", c: [{ type: "btn", font: "6x8:2", label: "Enter", cb: () => { handleEnter(); }, fillx: 1, filly: 1 }] }
  ]
}, { lazy: true });

function clearInputArea() {
  let label = layout.label;
  // Calculate rectangle coordinates for clearing
  let xCenter = g.getWidth() / 2;
  let halfStringWidth = lastStringWidth / 2;
  let x1 = xCenter - halfStringWidth;
  let y1 = label.y;
  let x2 = xCenter + halfStringWidth;
  let y2 = label.y + g.getFontHeight();
  // Clear the old label area
  g.clearRect(x1, y1, x2, y2);
}

function clearTextArea() {
  let x1 = 0;
  let y1 = 0;
  let x2 = g.getWidth();
  let y2 = 22;
  // Clear the old label area
  g.clearRect(x1, y1, x2, y2);
}

function clearScreen() { // Except Back Button
  let x2 = g.getWidth();
  let y2 = g.getHeight();
  g.clearRect(24, 0, x2, 24);
  g.clearRect(0, 24, x2, y2);
}

function showCalculatorInputScreen(variable) {
  selectedVariable = variable;
  layout.render();
}

function setValue(newStr) {
  clearTextArea();
  inputStr = newStr;
  layout.label.label = inputStr;
  layout.render();
  lastStringWidth = g.stringWidth(inputStr);
}

function handleButtonPress(value) {
  if (value === 'C') {
    setValue("");
  } else {
    inputStr += value;
    setValue(inputStr);
  }
}

function calculateValue(calculatedVariable, variableValues) {
  let formulas = FORMULAS[calculatedVariable];
  let formulaKeys = Object.keys(formulas);
  for (let i = 0; i < formulaKeys.length; i++) {
    let formulaKey = formulaKeys[i];
    let variables = formulaKey.split(', ');
    if (variables.every(variable => variableValues.hasOwnProperty(variable))) {
      let formula = formulas[formulaKey];
      let formulaValues = variables.map(variable => variableValues[variable]);
      let calculatedValue = eval(formula.replace(/\{(\d+)\}/g, (_, index) => formulaValues[index]));
      let result = Object.entries(variableValues).map(function (entry) {
        let variable = entry[0];
        let value = entry[1];
        return [variable, `${value} ${UNITS[variable]}`];
      });
      result.push([calculatedVariable, `${calculatedValue.toFixed(2)} ${UNITS[calculatedVariable]}`]);
      return {
        formula: formula.replace(/\{(\d+)\}/g, (_, index) => formulaValues[index]),
        value: calculatedValue.toFixed(2),
        unit: UNITS[calculatedVariable],
        result: result,
      };
    }
  }
}

(function () {
  let mainMenu = {
    '': { 'title': 'Ohm\'s Law Calc' },
    '< Back': () => Bangle.showClock()
  };

  Object.keys(UNITS).forEach(unit => {
    mainMenu[unit] = () => handleUnitSelection(unit);
  });

  function showVariableSelectionMenu() {
    let variableSelectionMenu = {
      '': { 'title': 'Select Variable' },
      '< Back': () => E.showMenu(mainMenu)
    };

    let variables = Object.keys(UNITS);
    let remainingVariables = variables.filter(v => v !== calculatedVariable);
    remainingVariables.forEach(variable => {
      variableSelectionMenu[variable] = function () {
        showInputMenu(variable);
      };
    });
    E.showMenu(variableSelectionMenu);
  }

  function showInputMenu(variable) {
    let inputMenu = {
      '': { 'title': variable },
    };
    E.showMenu(inputMenu);
    layout.render();
  }

  function handleEnter() {
    if (calculatedVariable === null) {
      return;
    }

    variableValues[selectedVariable] = parseFloat(inputStr);

    if (Object.keys(variableValues).length === 1 && variableValues.hasOwnProperty(selectedVariable)) {
      let temp = variableValues[selectedVariable];
      delete variableValues[selectedVariable];
      variableValues[Object.keys(variableValues)[0]] = temp;
    }

    if (Object.keys(variableValues).length === 2) {
      let result = calculateValue(calculatedVariable, variableValues);
      showResultsScreen(result);
      calculatedVariable = null;
      variableValues = {};
      inputStr = "";
    } else {
      clearScreen();
      showVariableSelectionMenu();
    }

    inputStr = "";
    setValue("");
  }

  function handleUnitSelection(unit) {
    calculatedVariable = unit;
    showVariableSelectionMenu();
  }

  function showResultsScreen(result) {
    let resultsMenu = {
      '': { 'title': 'Results' },
      '< Back': function () {
        clearScreen();
        E.showMenu(mainMenu);
      },
      'Formula': result.formula,
      ['Calculated ' + result.unit]: result.value + ' ' + result.unit
    };

    result.result.forEach(([variable, value]) => {
      resultsMenu[variable] = value;
    });

    E.showMenu(resultsMenu);
  }

  E.showMenu(mainMenu);
})();

• #3

Ganblejs

It reminded me a little bit of a problem @Sir_Indy and I solved. Reference this comment and the one following it: https://forum.espruino.com/conversations/375573/#16515419

It might not be what you need, didn't look through your code now. Might take a closer look tomorrow night 🙂
• #4

stweedo

Hey, thanks for the reply.

I did try placing layout.render() in different parts of my code but it didn't help.

I'll have to check out that keyboard you helped make. Can't say I've tried using any keyboards on this watch so far, but I like the idea of using the swipe handler to do backspace or maybe as a back button replacement on the input screen in my case.
• #5

Philip
Wherever you are calling layout.render() instead call
```
layout.setUI();
layout.render();
```
Seems to work for me when running your code. I just finished a keyboard app and I ended up needing to do that every time I switched to a particular layout.
• #6

stweedo

@Philip That was it! Thank you so much!
• #7

stweedo

If anyone is curious to try out my new Ohm's Law Calculator app you can do so here.

Thank you again Philip, I was really struggling with that menu transition to the layout and back. You rock!

Another challenging task is still on my to do list: Get it to show the formula that was used as an expression with the letter placeholders like so "V = I*R" and then when that menu item is pressed it opens up a formula display page in a large font with the formula shown using the actual values now instead of the letters.
• #8

Gordon

Great! I think the issue was that the menu was grabbing the UI as you noted.

Either generating the layout when you want to use it (or maybe using E.showMenu(); to disable the menu first) would probably help, but calling layout.setUI(); is a nice solution - that should have the effect of removing the menu (or whatever other thing was on the screen)

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Using E.showMenu() and Bangle.js Layout Library together

About

Using E.showMenu() and Bangle.js Layout Library together

Actions

Using E.showMenu() and Bangle.js Layout Library together

Formatting Help

About

Using E.showMenu() and Bangle.js Layout Library together

Actions

Espruino