gipy: fine tuning new display algorithm

master
frederic wagner 2023-11-16 15:27:56 +01:00
parent 9f1800e181
commit 4da1282dec
3 changed files with 49 additions and 50 deletions

View File

@ -1,7 +1,8 @@
urgent TODO: urgent TODO:
- update documentation to reflect new display - update documentation to reflect new display ?
- add an image for the arrow ?
*** thoughts on lcd power *** *** thoughts on lcd power ***

View File

@ -7,11 +7,11 @@ let status;
let initial_options = Bangle.getOptions(); let initial_options = Bangle.getOptions();
let interests_colors = [ let interests_colors = [
[1, 1, 1], // Waypoints, white [1,1,1], // Waypoints, white
[1, 0, 0], // Bakery, red [1,0,0], // Bakery, red
[0, 0, 1], // DrinkingWater, blue [0,0,1], // DrinkingWater, blue
[1, 0, 1], // Toilets, purple [0,1,1], // Toilets, cyan
[0, 1, 0], // Artwork, green [0,1,0], // Artwork, green
]; ];
let Y_OFFSET = 20; let Y_OFFSET = 20;
@ -265,7 +265,7 @@ class Map {
add_to_tile_image(img, absolute_tile_x, absolute_tile_y) { add_to_tile_image(img, absolute_tile_x, absolute_tile_y) {
let tile_x = absolute_tile_x - this.first_tile[0]; let tile_x = absolute_tile_x - this.first_tile[0];
let tile_y = absolute_tile_y - this.first_tile[1]; let tile_y = absolute_tile_y - this.first_tile[1];
let side = img.getWidth(); let side = img.getWidth() - 6;
let thick = this.color[0] != 0; let thick = this.color[0] != 0;
img.setColor(this.color[0], this.color[1], this.color[2]); img.setColor(this.color[0], this.color[1], this.color[2]);
@ -282,10 +282,10 @@ class Map {
let line = this.binary_lines[tile_y]; let line = this.binary_lines[tile_y];
for (let i = offset; i < upper_limit; i += 4) { for (let i = offset; i < upper_limit; i += 4) {
let x1 = (line.buffer[i] / 255) * side; let x1 = (line.buffer[i] / 255) * side + 3;
let y1 = ((255 - line.buffer[i + 1]) / 255) * side; let y1 = ((255 - line.buffer[i + 1]) / 255) * side + 3;
let x2 = (line.buffer[i + 2] / 255) * side; let x2 = (line.buffer[i + 2] / 255) * side + 3;
let y2 = ((255 - line.buffer[i + 3]) / 255) * side; let y2 = ((255 - line.buffer[i + 3]) / 255) * side + 3;
let thickness = 1; let thickness = 1;
if (thick) { if (thick) {
@ -345,7 +345,7 @@ class Interests {
add_to_tile_image(img, absolute_tile_x, absolute_tile_y) { add_to_tile_image(img, absolute_tile_x, absolute_tile_y) {
let tile_x = absolute_tile_x - this.first_tile[0]; let tile_x = absolute_tile_x - this.first_tile[0];
let tile_y = absolute_tile_y - this.first_tile[1]; let tile_y = absolute_tile_y - this.first_tile[1];
let side = img.getWidth(); let side = img.getWidth() - 6;
let tile_num = tile_x + tile_y * this.grid_size[0]; let tile_num = tile_x + tile_y * this.grid_size[0];
@ -355,8 +355,8 @@ class Interests {
let buffer = this.binary_interests; let buffer = this.binary_interests;
for (let i = offset; i < upper_limit; i += 3) { for (let i = offset; i < upper_limit; i += 3) {
let type = buffer[i]; let type = buffer[i];
let x = (buffer[i + 1] / 255) * side; let x = (buffer[i + 1] / 255) * side + 3;
let y = ((255 - buffer[i + 2]) / 255) * side; let y = ((255 - buffer[i + 2]) / 255) * side + 3;
let color = interests_colors[type]; let color = interests_colors[type];
if (type == 0) { if (type == 0) {
@ -380,10 +380,10 @@ class Status {
this.on_path = true; // are we on the path or lost ? this.on_path = true; // are we on the path or lost ?
this.position = null; // where we are this.position = null; // where we are
this.direction = 0; this.direction = 0;
this.adjusted_cos_direction = Math.cos(- Math.PI / 2.0); this.adjusted_cos_direction = Math.cos(-Math.PI / 2.0);
this.adjusted_sin_direction = Math.sin(- Math.PI / 2.0); this.adjusted_sin_direction = Math.sin(-Math.PI / 2.0);
this.zoomed_in = false; this.zoomed_in = true;
this.current_segment = null; // which segment is closest this.current_segment = null; // which segment is closest
this.reaching = null; // which waypoint are we reaching ? this.reaching = null; // which waypoint are we reaching ?
this.distance_to_next_point = null; // how far are we from next point ? this.distance_to_next_point = null; // how far are we from next point ?
@ -715,9 +715,8 @@ class Status {
return i.x == absolute_tile_x && i.y == absolute_tile_y; return i.x == absolute_tile_x && i.y == absolute_tile_y;
}); });
if (cached_img === undefined) { if (cached_img === undefined) {
console.log("loading", absolute_tile_x, absolute_tile_y);
let img = this.compute_tile_image(absolute_tile_x, absolute_tile_y); let img = this.compute_tile_image(absolute_tile_x, absolute_tile_y);
let limit = (this.zoomed_in)?12:30; let limit = this.zoomed_in ? 12 : 30;
if (this.images_cache.length > limit) { if (this.images_cache.length > limit) {
this.images_cache.shift(); this.images_cache.shift();
} }
@ -735,14 +734,15 @@ class Status {
compute_tile_image(absolute_tile_x, absolute_tile_y) { compute_tile_image(absolute_tile_x, absolute_tile_y) {
let screen_width = g.getWidth(); let screen_width = g.getWidth();
let screen_height = g.getHeight(); let screen_height = g.getHeight();
let tiles_per_diagonals = (this.zoomed_in)?3:5; let tiles_per_diagonals = this.zoomed_in ? 3 : 5;
let img_side = Math.ceil( let img_side = Math.ceil(
Math.sqrt(screen_width * screen_width + screen_height * screen_height) / tiles_per_diagonals Math.sqrt(screen_width * screen_width + screen_height * screen_height) /
); tiles_per_diagonals
) + 6; // three extra pixels on each side to allow thick lines
let img = Graphics.createArrayBuffer(img_side, img_side, 4, { msb: true }); let img = Graphics.createArrayBuffer(img_side, img_side, 4, { msb: true });
img.setBgColor(1, 1, 1); img.transparent = img.toColor(1,1,1);
img.clear(); img.setBgColor(1,1,1).clear();
this.maps.forEach((m) => { this.maps.forEach((m) => {
m.add_to_tile_image(img, absolute_tile_x, absolute_tile_y); m.add_to_tile_image(img, absolute_tile_x, absolute_tile_y);
@ -758,7 +758,6 @@ class Status {
displaying = true; displaying = true;
g.clear(); g.clear();
if (this.screen == MAP) { if (this.screen == MAP) {
let start = getTime();
let displayed_x = this.displayed_position.lon; let displayed_x = this.displayed_position.lon;
let displayed_y = this.displayed_position.lat; let displayed_y = this.displayed_position.lat;
@ -767,7 +766,7 @@ class Status {
let absolute_tile_x = Math.floor(tile_x_coord); let absolute_tile_x = Math.floor(tile_x_coord);
let absolute_tile_y = Math.floor(tile_y_coord); let absolute_tile_y = Math.floor(tile_y_coord);
let tiles_per_diagonals = (this.zoomed_in)?3:5; let tiles_per_diagonals = this.zoomed_in ? 3 : 5;
let diagonal = Math.ceil( let diagonal = Math.ceil(
Math.sqrt(g.getWidth() * g.getWidth() + g.getHeight() * g.getHeight()) / Math.sqrt(g.getWidth() * g.getWidth() + g.getHeight() * g.getHeight()) /
tiles_per_diagonals tiles_per_diagonals
@ -775,14 +774,14 @@ class Status {
let angle = this.direction - Math.PI / 2; let angle = this.direction - Math.PI / 2;
let cos_direction = Math.cos(angle); let cos_direction = Math.cos(angle);
let sin_direction = Math.sin(angle); let sin_direction = Math.sin(angle);
let d = Math.floor(tiles_per_diagonals/2); let d = Math.floor(tiles_per_diagonals / 2);
for (let x = -d; x <= d; x++) { for (let x = -d; x <= d; x++) {
for (let y = -d; y <= d; y++) { for (let y = -d; y <= d; y++) {
let img = this.tile_image(absolute_tile_x + x, absolute_tile_y + y); let img = this.tile_image(absolute_tile_x + x, absolute_tile_y + y);
let screen_x = (absolute_tile_x + x + 0.5 - tile_x_coord) * diagonal; let screen_x = (absolute_tile_x + x + 0.5 - tile_x_coord) * diagonal + 3;
let screen_y = -(absolute_tile_y + y + 0.5 - tile_y_coord) * diagonal; let screen_y = -(absolute_tile_y + y + 0.5 - tile_y_coord) * diagonal - 3;
let rotated_x = screen_x * cos_direction - screen_y * sin_direction; let rotated_x = screen_x * cos_direction - screen_y * sin_direction;
let rotated_y = screen_x * sin_direction + screen_y * cos_direction; let rotated_y = screen_x * sin_direction + screen_y * cos_direction;
@ -799,7 +798,6 @@ class Status {
this.display_direction(); this.display_direction();
this.display_stats(); this.display_stats();
console.log("displayed in", getTime() - start);
} else { } else {
let current_position = 0; let current_position = 0;
if (this.current_segment !== null) { if (this.current_segment !== null) {
@ -1454,7 +1452,7 @@ function start_gipy(path, maps, interests, heights) {
status.display(); status.display();
Bangle.on("touch", () => { Bangle.on("touch", () => {
let active = this.active; let active = status.active;
status.activate(); status.activate();
if (in_menu) { if (in_menu) {
return; return;

View File

@ -205,7 +205,7 @@ function makeMutClosure(arg0, arg1, dtor, f) {
return real; return real;
} }
function __wbg_adapter_24(arg0, arg1, arg2) { function __wbg_adapter_24(arg0, arg1, arg2) {
wasm.wasm_bindgen__convert__closures__invoke1_mut__h5714a79bfce40603(arg0, arg1, addHeapObject(arg2)); wasm.wasm_bindgen__convert__closures__invoke1_mut__hef038f7a61abd0f6(arg0, arg1, addHeapObject(arg2));
} }
function _assertClass(instance, klass) { function _assertClass(instance, klass) {
@ -388,7 +388,7 @@ function handleError(f, args) {
} }
} }
function __wbg_adapter_86(arg0, arg1, arg2, arg3) { function __wbg_adapter_86(arg0, arg1, arg2, arg3) {
wasm.wasm_bindgen__convert__closures__invoke2_mut__h678a030e96622358(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3)); wasm.wasm_bindgen__convert__closures__invoke2_mut__h545ed49cfafdda52(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
} }
/** /**
@ -449,6 +449,9 @@ async function load(module, imports) {
function getImports() { function getImports() {
const imports = {}; const imports = {};
imports.wbg = {}; imports.wbg = {};
imports.wbg.__wbg_log_d04343b58be82b0f = function(arg0, arg1) {
console.log(getStringFromWasm0(arg0, arg1));
};
imports.wbg.__wbindgen_string_get = function(arg0, arg1) { imports.wbg.__wbindgen_string_get = function(arg0, arg1) {
const obj = getObject(arg1); const obj = getObject(arg1);
const ret = typeof(obj) === 'string' ? obj : undefined; const ret = typeof(obj) === 'string' ? obj : undefined;
@ -457,9 +460,6 @@ function getImports() {
getInt32Memory0()[arg0 / 4 + 1] = len0; getInt32Memory0()[arg0 / 4 + 1] = len0;
getInt32Memory0()[arg0 / 4 + 0] = ptr0; getInt32Memory0()[arg0 / 4 + 0] = ptr0;
}; };
imports.wbg.__wbg_log_d04343b58be82b0f = function(arg0, arg1) {
console.log(getStringFromWasm0(arg0, arg1));
};
imports.wbg.__wbindgen_object_drop_ref = function(arg0) { imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
takeObject(arg0); takeObject(arg0);
}; };
@ -475,17 +475,6 @@ function getImports() {
const ret = fetch(getObject(arg0)); const ret = fetch(getObject(arg0));
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbg_signal_31753ac644b25fbb = function(arg0) {
const ret = getObject(arg0).signal;
return addHeapObject(ret);
};
imports.wbg.__wbg_new_6396e586b56e1dff = function() { return handleError(function () {
const ret = new AbortController();
return addHeapObject(ret);
}, arguments) };
imports.wbg.__wbg_abort_064ae59cda5cd244 = function(arg0) {
getObject(arg0).abort();
};
imports.wbg.__wbg_new_2d0053ee81e4dd2a = function() { return handleError(function () { imports.wbg.__wbg_new_2d0053ee81e4dd2a = function() { return handleError(function () {
const ret = new Headers(); const ret = new Headers();
return addHeapObject(ret); return addHeapObject(ret);
@ -526,6 +515,17 @@ function getImports() {
const ret = getObject(arg0).fetch(getObject(arg1)); const ret = getObject(arg0).fetch(getObject(arg1));
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbg_signal_31753ac644b25fbb = function(arg0) {
const ret = getObject(arg0).signal;
return addHeapObject(ret);
};
imports.wbg.__wbg_new_6396e586b56e1dff = function() { return handleError(function () {
const ret = new AbortController();
return addHeapObject(ret);
}, arguments) };
imports.wbg.__wbg_abort_064ae59cda5cd244 = function(arg0) {
getObject(arg0).abort();
};
imports.wbg.__wbg_newwithstrandinit_05d7180788420c40 = function() { return handleError(function (arg0, arg1, arg2) { imports.wbg.__wbg_newwithstrandinit_05d7180788420c40 = function() { return handleError(function (arg0, arg1, arg2) {
const ret = new Request(getStringFromWasm0(arg0, arg1), getObject(arg2)); const ret = new Request(getStringFromWasm0(arg0, arg1), getObject(arg2));
return addHeapObject(ret); return addHeapObject(ret);
@ -694,8 +694,8 @@ function getImports() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper2297 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper2354 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 264, __wbg_adapter_24); const ret = makeMutClosure(arg0, arg1, 299, __wbg_adapter_24);
return addHeapObject(ret); return addHeapObject(ret);
}; };