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

fix alignment of non-7x7 maps, non-flickery uploads, and allow huge (1MB) map uploads

pull/2331/head
Gordon Williams 2022-11-30 16:54:27 +00:00
parent 45c5e15f20
commit dda81fe199
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/openstmap/interface.html
View File

@ -48,16 +48,18 @@
<div style="display:inline-block;text-align:center;vertical-align: top;" id="3bitdiv"> <input type="checkbox" id="3bit"></input><br/><span>3 bit</span></div>
<div class="form-group" style="display:inline-block;">
<select class="form-select" id="mapSize">
<option value="4">Small</option>
<option value="5" selected>Medium</option>
<option value="6">Large</option>
<option value="7">XL</option>
<option value="4">Small (4x4)</option>
<option value="5" selected>Medium (5x5)</option>
<option value="7">Large (7x7)</option>
<option value="10">XL (10x10)</option>
<option value="15">XXL (15x15)</option>
</select>
</div>
<button id="getmap" class="btn btn-primary">Get Map</button><button class="btn" onclick="showLoadedMaps()">Map List</button><br/>
<canvas id="maptiles" style="display:none"></canvas>
<div id="uploadbuttons" style="display:none"><button id="upload" class="btn btn-primary">Upload</button>
<button id="cancel" class="btn">Cancel</button></div>
<button id="cancel" class="btn">Cancel</button>
<span id="mapstats"></span></div>
</div>
</div>
@ -312,11 +314,13 @@ TODO:
var zoom = map.getZoom();
var centerlatlon = map.getBounds().getCenter();
var center = map.project(centerlatlon, zoom).divideBy(OSMTILESIZE);
// Reason for 16px adjustment below not 100% known, but it seems to
// align everything perfectly: https://github.com/espruino/BangleApps/issues/984
var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE) + 16;
var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE) + 16;
var center = map.project(centerlatlon, zoom).divideBy(OSMTILESIZE); // the center of our map
// ox/oy = offset in pixels
var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE);
var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE);
// adjust offset because we want to center our map
ox -= MAPTILES * TILESIZE / 2;
oy -= MAPTILES * TILESIZE / 2;
center = center.floor(); // make sure we're in the middle of a tile
// JS version of Bangle.js's projection
function bproject(lat, lon) {
@ -353,10 +357,12 @@ TODO:
var ctx = canvas.getContext('2d');
canvas.width = MAPSIZE;
canvas.height = MAPSIZE;
for (var i = 0; i < OSMTILECOUNT; i++) {
for (var j = 0; j < OSMTILECOUNT; j++) {
var tileMin = Math.round(-OSMTILECOUNT/2);
var tileMax = Math.round(OSMTILECOUNT/2);
for (var i = tileMin; i <= tileMax; i++) {
for (var j = tileMin; j <= tileMax; j++) {
(function(i,j){
var coords = new L.Point(center.x+i-1, center.y+j-1);
var coords = new L.Point(center.x+i, center.y+j);
coords.z = zoom;
var img = new Image();
img.crossOrigin = "Anonymous";
@ -368,6 +374,8 @@ TODO:
ctx.fillRect(testPt.x-1, testPt.y-5, 3,10);
ctx.fillRect(testPt.x-5, testPt.y-1, 10,3);
}*/
/*ctx.fillStyle="black";
ctx.fillRect(i*OSMTILESIZE - ox, j*OSMTILESIZE - oy, 6,6);*/
resolve();
};
}));
@ -395,6 +403,8 @@ TODO:
h : Math.round(canvas.height / TILESIZE), // height in tiles
fn : mapImageFile
})});
var mapSizeInK = Math.round(mapFiles.reduce((r,m)=>m.content.length+r,0)/1000);
document.getElementById("mapstats").innerText = "Size : "+ (mapSizeInK+"kb");
console.log(mapFiles);
});
});

2
core

@ -1 +1 @@
Subproject commit f15e99fbe25b2991719011e6da9bc9c7be401a7e
Subproject commit 3a953179b7bb9f574d4e77d5f34b6b7deee1e884