added grid positioning and swipe controls

added grid positioning and swipe controls to switch between numbers, operators and special for Bangle.js 2.

apps/calculator/app.js

@@ -8,7 +8,7 @@
 g.clear();
 require("Font7x11Numeric7Seg").add(Graphics);
 
-var DEFAULT_SELECTION = '5';
+var DEFAULT_SELECTION_NUMBERS = '5', DEFAULT_SELECTION_OPERATORS = '=', DEFAULT_SELECTION_SPECIALS = 'R';
 var RIGHT_MARGIN = 20;
 var RESULT_HEIGHT = 40;
 var COLORS = {
@@ -18,97 +18,45 @@ var COLORS = {
   SPECIAL: ['#65686C', '#7F8183']
 };
 
-var keys = {
+var KEY_AREA = [0, RESULT_HEIGHT, g.getWidth(), g.getHeight()];
-  '0': {
+
-    xy: [0, 200, 120, 240],
+var screen, screenColor;
-    trbl: '2.00'
+var globalGrid = [4, 5];
-  },
+var swipeEnabled;
-  '.': {
+
-    xy: [120, 200, 180, 240],
+var numbersGrid = [3, 4];
-    trbl: '3=.0'
+var numbers = {
-  },
+  '0': {grid: [1, 3], globalGrid: [1, 4], trbl: '2.00'},
-  '=': {
+  '.': {grid: [2, 3], globalGrid: [2, 4], trbl: '3=.0'},
-    xy: [181, 200, 240, 240],
+  '1': {grid: [0, 2], globalGrid: [0, 3], trbl: '4201'},
-    trbl: '+==.',
+  '2': {grid: [1, 2], globalGrid: [1, 3], trbl: '5301'},
-    color: COLORS.OPERATOR
+  '3': {grid: [2, 2], globalGrid: [2, 3], trbl: '6+.2'},
-  },
+  '4': {grid: [0, 1], globalGrid: [0, 2], trbl: '7514'},
-  '1': {
+  '5': {grid: [1, 1], globalGrid: [1, 2], trbl: '8624'},
-    xy: [0, 160, 60, 200],
+  '6': {grid: [2, 1], globalGrid: [2, 2], trbl: '9-35'},
-    trbl: '4201'
+  '7': {grid: [0, 0], globalGrid: [0, 1], trbl: 'R847'},
-  },
+  '8': {grid: [1, 0], globalGrid: [1, 1], trbl: 'N957'},
-  '2': {
+  '9': {grid: [2, 0], globalGrid: [2, 1], trbl: '%*68'},
-    xy: [60, 160, 120, 200],
-    trbl: '5301'
-  },
-  '3': {
-    xy: [120, 160, 180, 200],
-    trbl: '6+.2'
-  },
-  '+': {
-    xy: [181, 160, 240, 200],
-    trbl: '-+=3',
-    color: COLORS.OPERATOR
-  },
-  '4': {
-    xy: [0, 120, 60, 160],
-    trbl: '7514'
-  },
-  '5': {
-    xy: [60, 120, 120, 160],
-    trbl: '8624'
-  },
-  '6': {
-    xy: [120, 120, 180, 160],
-    trbl: '9-35'
-  },
-  '-': {
-    xy: [181, 120, 240, 160],
-    trbl: '*-+6',
-    color: COLORS.OPERATOR
-  },
-  '7': {
-    xy: [0, 80, 60, 120],
-    trbl: 'R847'
-  },
-  '8': {
-    xy: [60, 80, 120, 120],
-    trbl: 'N957'
-  },
-  '9': {
-    xy: [120, 80, 180, 120],
-    trbl: '%*68'
-  },
-  '*': {
-    xy: [181, 80, 240, 120],
-    trbl: '/*-9',
-    color: COLORS.OPERATOR
-  },
-  'R': {
-    xy: [0, 40, 60, 79],
-    trbl: 'RN7R',
-    color: COLORS.SPECIAL,
-    val: 'AC'
-  },
-  'N': {
-    xy: [60, 40, 120, 79],
-    trbl: 'N%8R',
-    color: COLORS.SPECIAL,
-    val: '+/-'
-  },
-  '%': {
-    xy: [120, 40, 180, 79],
-    trbl: '%/9N',
-    color: COLORS.SPECIAL
-  },
-  '/': {
-    xy: [181, 40, 240, 79],
-    trbl: '//*%',
-    color: COLORS.OPERATOR
-  }
 };
 
-var selected = DEFAULT_SELECTION;
+var operatorsGrid = [2, 3];
-var prevSelected = DEFAULT_SELECTION;
+var operators = {
+  '+': {grid: [0, 0], globalGrid: [3, 3], trbl: '-+=3'},
+  '-': {grid: [1, 0], globalGrid: [3, 2], trbl: '*-+6'},
+  '*': {grid: [0, 1], globalGrid: [3, 1], trbl: '/*-9'},
+  '/': {grid: [1, 1], globalGrid: [3, 0], trbl: '//*%'},
+  '=': {grid: [1, 2], globalGrid: [3, 4], trbl: '+==.'},
+};
+
+var specialsGrid = [2, 2];
+var specials = {
+  'R': {grid: [0, 0], globalGrid: [0, 0], trbl: 'RN7R', val: 'AC'},
+  'N': {grid: [1, 0], globalGrid: [1, 0], trbl: 'N%8R', val: '+/-'},
+  '%': {grid: [0, 1], globalGrid: [2, 0], trbl: '%/9N'},
+};
+
+var selected = DEFAULT_SELECTION_NUMBERS;
+var prevSelected = DEFAULT_SELECTION_NUMBERS;
 var prevNumber  = null;
 var currNumber = null;
 var operator = null;
@@ -116,6 +64,27 @@ var results = null;
 var isDecimal = false;
 var hasPressedEquals = false;
 
+function prepareScreen(screen, grid, defaultColor) {
+  for (var k in screen) {
+    if (screen.hasOwnProperty(k)) {
+      screen[k].color = screen[k].color || defaultColor;
+      var position = [];
+      var xGrid = (KEY_AREA[2]-KEY_AREA[0])/grid[0];
+      var yGrid = (KEY_AREA[3]-KEY_AREA[1])/grid[1];
+      if (swipeEnabled) {
+        position[0] = KEY_AREA[0]+xGrid*screen[k].grid[0];
+        position[1] = KEY_AREA[1]+yGrid*screen[k].grid[1];
+      } else {
+        position[0] = KEY_AREA[0]+xGrid*screen[k].globalGrid[0];
+        position[1] = KEY_AREA[1]+yGrid*screen[k].globalGrid[1];
+      }
+      position[2] = position[0]+xGrid-1;
+      position[3] = position[1]+yGrid-1;
+      screen[k].xy = position;
+    }
+  }
+}
+
 function drawKey(name, k, selected) {
   var rMargin = 0;
   var bMargin = 0;
@@ -142,6 +111,56 @@ function drawKey(name, k, selected) {
   g.drawString(k.val || name, (k.xy[0] + k.xy[2])/2, (k.xy[1] + k.xy[3])/2);
 }
 
+function drawKeys() {
+  g.setColor(screenColor[0]);
+  g.fillRect(KEY_AREA[0], KEY_AREA[1], KEY_AREA[2], KEY_AREA[3]);
+  for (var k in screen) {
+    if (screen.hasOwnProperty(k)) {
+      drawKey(k, screen[k], k == selected);
+    }
+  }
+}
+function drawGlobal() {
+  screen = {};
+  screenColor = COLORS.DEFAULT;
+  prepareScreen(numbers, globalGrid, COLORS.DEFAULT);
+  for (var k in numbers) {
+    screen[k] = numbers[k];
+  }
+  prepareScreen(operators, globalGrid, COLORS.OPERATOR);
+  for (var k in operators) {
+    screen[k] = operators[k];
+  }
+  prepareScreen(specials, globalGrid, COLORS.SPECIAL);
+  for (var k in specials) {
+    screen[k] = specials[k];
+  }
+  drawKeys();
+  var selected = DEFAULT_SELECTION_NUMBERS;
+  var prevSelected = DEFAULT_SELECTION_NUMBERS;
+}
+function drawNumbers() {
+  screen = numbers;
+  screenColor = COLORS.DEFAULT;
+  drawKeys();
+  var selected = DEFAULT_SELECTION_NUMBERS;
+  var prevSelected = DEFAULT_SELECTION_NUMBERS;
+}
+function drawOperators() {
+  screen = operators;
+  screenColor =COLORS.OPERATOR;
+  drawKeys();
+  var selected = DEFAULT_SELECTION_OPERATORS;
+  var prevSelected = DEFAULT_SELECTION_OPERATORS;
+}
+function drawSpecials() {
+  screen = specials;
+  screenColor = COLORS.SPECIAL;
+  drawKeys();
+  var selected = DEFAULT_SELECTION_SPECIALS;
+  var prevSelected = DEFAULT_SELECTION_SPECIALS;
+}
+
 function getIntWithPrecision(x) {
   var xStr = x.toString();
   var xRadix = xStr.indexOf('.');
@@ -218,8 +237,8 @@ function displayOutput(num) {
     hasPressedEquals = false;
     prevNumber = null;
     operator = null;
-    keys.R.val = 'AC';
+    specials.R.val = 'AC';
-    drawKey('R', keys.R);
+    if (!swipeEnabled) drawKey('R', specials.R);
     g.setFont('Vector', 22);
   } else {
     // might not be a number due to display of dot "."
@@ -299,12 +318,12 @@ function buttonPress(val) {
       results = null;
       isDecimal = false;
       hasPressedEquals = false;
-      if (keys.R.val == 'AC') {
+      if (specials.R.val == 'AC') {
         prevNumber = null;
         operator = null;
       } else {
-        keys.R.val = 'AC';
+        specials.R.val = 'AC';
-        drawKey('R', keys.R, true);
+        drawKey('R', specials.R, true);
       }
       wasPressedEquals = false;
       hasPressedNumber = false;
@@ -331,10 +350,11 @@ function buttonPress(val) {
     case '+':
       calculatorLogic(val);
       hasPressedNumber = false;
+      if (swipeEnabled) drawNumbers();
       break;
     case '.':
-      keys.R.val = 'C';
+      specials.R.val = 'C';
-      drawKey('R', keys.R);
+      if (!swipeEnabled) drawKey('R', specials.R);
       isDecimal = true;
       displayOutput(currNumber == null ? 0 + '.' : currNumber + '.');
       break;
@@ -348,8 +368,8 @@ function buttonPress(val) {
       hasPressedNumber = false;
       break;
     default:
-      keys.R.val = 'C';
+      specials.R.val = 'C';
-      drawKey('R', keys.R);
+      if (!swipeEnabled) drawKey('R', specials.R);
       const is0Negative = (currNumber === 0 && 1/currNumber === -Infinity);
       if (isDecimal) {
         currNumber = currNumber == null || hasPressedEquals === 1 ? 0 + '.' + val : currNumber + '.' + val;
@@ -367,23 +387,31 @@ function buttonPress(val) {
 }
 
 function moveDirection(d) {
-  drawKey(selected, keys[selected]);
+  drawKey(selected, screen[selected]);
   prevSelected = selected;
-  selected = (d === 0 && selected == '0' && prevSelected === '1') ? '1' : keys[selected].trbl[d];
+  selected = (d === 0 && selected == '0' && prevSelected === '1') ? '1' : screen[selected].trbl[d];
-  drawKey(selected, keys[selected], true);
+  drawKey(selected, screen[selected], true);
 }
 
-if (global.BTN4) {
+if (process.env.HWVERSION==1) {
   setWatch(_ => moveDirection(0), BTN1, {repeat: true, debounce: 100});
   setWatch(_ => moveDirection(2), BTN3, {repeat: true, debounce: 100});
   setWatch(_ => moveDirection(3), BTN4, {repeat: true, debounce: 100});
   setWatch(_ => moveDirection(1), BTN5, {repeat: true, debounce: 100});
   setWatch(_ => buttonPress(selected), BTN2, {repeat: true, debounce: 100});
+  swipeEnabled = false;
+  drawGlobal();
 } else { // touchscreen?
   selected = "NONE";
+  swipeEnabled = true;
+  prepareScreen(numbers, numbersGrid, COLORS.DEFAULT);
+  prepareScreen(operators, operatorsGrid, COLORS.OPERATOR);
+  prepareScreen(specials, specialsGrid, COLORS.SPECIAL);
+  drawNumbers();
   Bangle.on('touch',(n,e)=>{
-    for (var key in keys) {
+    for (var key in screen) {
-      var r = keys[key].xy;
+    	if (typeof screen[key] == "undefined") break;
+      var r = screen[key].xy;
       if (e.x>=r[0] && e.y>=r[1] &&
           e.x<r[2] && e.y<r[3]) {
         //print("Press "+key);
@@ -391,19 +419,26 @@ if (global.BTN4) {
       }
     }
   });
+  var lastX = 0, lastY = 0;
+  Bangle.on('drag', (e) => {
+    if (!e.b) {
+      if (lastX > 50) { // right
+        drawSpecials();
+      } else if (lastX < -50) { // left
+        drawOperators();
+      } else if (lastY > 50) { // down
+        drawNumbers();
+      } else if (lastY < -50) { // up
+        drawNumbers();
+      }
+      lastX = 0;
+      lastY = 0;
+    } else {
+      lastX = lastX + e.dx;
+      lastY = lastY + e.dy;
+    }
+  });
 }
 
-// rescale for non-240px screens
+
-if (g.getWidth()!=240) {
-  RESULT_HEIGHT = RESULT_HEIGHT*g.getWidth()/240;
-  for (var k in keys) {
-    keys[k].xy = keys[k].xy.map(n => n*g.getWidth()/240);
-  }
-}
-// draw keys
-for (var k in keys) {
-  if (keys.hasOwnProperty(k)) {
-    drawKey(k, keys[k], k == selected);
-  }
-}
 displayOutput(0);