Merge pull request #3553 from paul-arg/more_pickers

more_pickers: draw sections independently for faster execution

modules/more_pickers.js

@@ -10,27 +10,37 @@ exports.doublePicker = function (options) {
   var v_1 = options.value_1;
   var v_2 = options.value_2;
 
-  function draw() {
+  function draw1() {
+    var txt_1 = options.format_1 ? options.format_1(v_1) : v_1;
+
     g.setColor(g.theme.bg2)
       .fillRect(14, 60, 81, 166)
-      .fillRect(95, 60, 162, 166);
+      .setColor(g.theme.fg2)
-
-    g.setColor(g.theme.fg2)
       .fillPoly([47.5, 68, 62.5, 83, 32.5, 83])
       .fillPoly([47.5, 158, 62.5, 143, 32.5, 143])
-      .fillPoly([128.5, 68, 143.5, 83, 113.5, 83])
+      .setFontAlign(0, 0)
-      .fillPoly([128.5, 158, 143.5, 143, 113.5, 143]);
+      .setFontVector(Math.min(30, (R.w - 110) * 100 / g.setFontVector(100).stringWidth(txt_1)))
-
+      .drawString(txt_1, 47.5, 113);
-    var txt_1 = options.format_1 ? options.format_1(v_1) : v_1;
+  }
+  function draw2() {
     var txt_2 = options.format_2 ? options.format_2(v_2) : v_2;
 
-    g.setFontAlign(0, 0)
+    g.setColor(g.theme.bg2)
-      .setFontVector(Math.min(30, (R.w - 110) * 100 / g.setFontVector(100).stringWidth(txt_1)))
+      .fillRect(95, 60, 162, 166)
-      .drawString(txt_1, 47.5, 113)
+      .setColor(g.theme.fg2)
+      .fillPoly([128.5, 68, 143.5, 83, 113.5, 83])
+      .fillPoly([128.5, 158, 143.5, 143, 113.5, 143])
+      .setFontAlign(0, 0)
       .setFontVector(Math.min(30, (R.w - 110) * 100 / g.setFontVector(100).stringWidth(txt_2)))
-      .drawString(txt_2, 128.5, 113)
+      .drawString(txt_2, 128.5, 113);
-      .setFontVector(30)
+  }
-      .drawString(options.separator ?? "", 88, 110);
+  function drawSeparator(){
+    g.setFontVector(30).drawString(options.separator ?? "", 88, 110);
+  }
+  function drawAll() {
+      draw1();
+      draw2();
+      drawSeparator()
   }
   function cb(dir, x_part) {
     if (dir) {
@@ -38,12 +48,14 @@ exports.doublePicker = function (options) {
         v_1 -= (dir || 1) * (options.step_1 || 1);
         if (options.min_1 !== undefined && v_1 < options.min_1) v_1 = options.wrap_1 ? options.max_1 : options.min_1;
         if (options.max_1 !== undefined && v_1 > options.max_1) v_1 = options.wrap_1 ? options.min_1 : options.max_1;
+        draw1();
       } else {
         v_2 -= (dir || 1) * (options.step_2 || 1);
         if (options.min_2 !== undefined && v_2 < options.min_2) v_2 = options.wrap_2 ? options.max_2 : options.min_2;
         if (options.max_2 !== undefined && v_2 > options.max_2) v_2 = options.wrap_2 ? options.min_2 : options.max_2;
+        draw2();
       }
-      draw();
+      drawSeparator();
     } else { // actually selected
       options.value_1 = v_1;
       options.value_2 = v_2;
@@ -52,14 +64,14 @@ exports.doublePicker = function (options) {
     }
   }
 
-  draw();
+  drawAll();
   var dy = 0;
 
   Bangle.setUI({
     mode: "custom",
     back: options.back,
     remove: options.remove,
-    redraw: draw,
+    redraw: drawAll,
     drag: e => {
       dy += e.dy; // after a certain amount of dragging up/down fire cb
       if (!e.b) dy = 0;
@@ -101,51 +113,72 @@ exports.triplePicker = function (options) {
   var v_2 = options.value_2;
   var v_3 = options.value_3;
 
-  function draw() {
+  function draw1() {
+    var txt_1 = options.format_1 ? options.format_1(v_1) : v_1;
+
     g.setColor(g.theme.bg2)
       .fillRect(8, 60, 56, 166)
-      .fillRect(64, 60, 112, 166)
+      .setColor(g.theme.fg2)
-      .fillRect(120, 60, 168, 166);
-
-    g.setColor(g.theme.fg2)
       .fillPoly([32, 68, 47, 83, 17, 83])
       .fillPoly([32, 158, 47, 143, 17, 143])
+      .setFontAlign(0, 0)
+      .setFontVector(Math.min(30, (R.w - 130) * 100 / g.setFontVector(100).stringWidth(txt_1)))
+      .drawString(txt_1, 32, 113);
+  }
+  function draw2() {
+    var txt_2 = options.format_2 ? options.format_2(v_2) : v_2;
+
+    g.setColor(g.theme.bg2)
+      .fillRect(64, 60, 112, 166)
+      .setColor(g.theme.fg2)
       .fillPoly([88, 68, 103, 83, 73, 83])
       .fillPoly([88, 158, 103, 143, 73, 143])
-      .fillPoly([144, 68, 159, 83, 129, 83])
+      .setFontAlign(0, 0)
-      .fillPoly([144, 158, 159, 143, 129, 143]);
+      .setFontVector(Math.min(30, (R.w - 130) * 100 / g.setFontVector(100).stringWidth(txt_2)))
-
+      .drawString(txt_2, 88, 113);
-    var txt_1 = options.format_1 ? options.format_1(v_1) : v_1;
+  }
-    var txt_2 = options.format_2 ? options.format_2(v_2) : v_2;
+  function draw3() {
     var txt_3 = options.format_3 ? options.format_3(v_3) : v_3;
     
-    g.setFontAlign(0, 0)
+    g.setColor(g.theme.bg2)
-      .setFontVector(Math.min(30, (R.w - 130) * 100 / g.setFontVector(100).stringWidth(txt_1)))
+      .fillRect(120, 60, 168, 166)
-      .drawString(txt_1, 32, 113)
+      .setColor(g.theme.fg2)
-      .setFontVector(Math.min(30, (R.w - 130) * 100 / g.setFontVector(100).stringWidth(txt_2)))
+      .fillPoly([144, 68, 159, 83, 129, 83])
-      .drawString(txt_2, 88, 113)
+      .fillPoly([144, 158, 159, 143, 129, 143])
+      .setFontAlign(0, 0)
       .setFontVector(Math.min(30, (R.w - 130) * 100 / g.setFontVector(100).stringWidth(txt_3)))
-      .drawString(txt_3, 144, 113)
+      .drawString(txt_3, 144, 113);
-      .setFontVector(30)
+  }
+  function drawSeparators(){
+    g.setFontVector(30)
       .drawString(options.separator_1 ?? "", 60, 113)
       .drawString(options.separator_2 ?? "", 116, 113);
   }
+  function drawAll() {
+      draw1();
+      draw2();
+      draw3();
+      drawSeparators();
+  }
   function cb(dir, x_part) {
     if (dir) {
       if (x_part == -1) {
         v_1 -= (dir || 1) * (options.step_1 || 1);
         if (options.min_1 !== undefined && v_1 < options.min_1) v_1 = options.wrap_1 ? options.max_1 : options.min_1;
         if (options.max_1 !== undefined && v_1 > options.max_1) v_1 = options.wrap_1 ? options.min_1 : options.max_1;
+        draw1();
       } else if (x_part == 0) {
         v_2 -= (dir || 1) * (options.step_2 || 1);
         if (options.min_2 !== undefined && v_2 < options.min_2) v_2 = options.wrap_2 ? options.max_2 : options.min_3;
         if (options.max_2 !== undefined && v_2 > options.max_2) v_2 = options.wrap_2 ? options.min_2 : options.max_3;
+        draw2();
       } else {
         v_3 -= (dir || 1) * (options.step_3 || 1);
         if (options.min_3 !== undefined && v_3 < options.min_3) v_3 = options.wrap_3 ? options.max_3 : options.min_3;
         if (options.max_3 !== undefined && v_3 > options.max_3) v_3 = options.wrap_3 ? options.min_3 : options.max_3;
+        draw3();
       }
-      draw();
+      drawSeparators();
     } else { // actually selected
       options.value_1 = v_1;
       options.value_2 = v_2;
@@ -155,14 +188,14 @@ exports.triplePicker = function (options) {
     }
   }
 
-  draw();
+  drawAll();
   var dy = 0;
 
   Bangle.setUI({
     mode: "custom",
     back: options.back,
     remove: options.remove,
-    redraw: draw,
+    redraw: drawAll,
     drag: e => {
       dy += e.dy; // after a certain amount of dragging up/down fire cb
       if (!e.b) dy = 0;