bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

2
core

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