FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

more_pickers: draw sections independently for faster execution

pull/3553/head
paul-arg 2024-08-14 12:01:29 +02:00
parent 84aabfade4
commit 510a92a20a
1 changed files with 71 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
modules/more_pickers.js
View File

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