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

OpenStMap - display correct map size in bytes 

Ensure BPP selection works ok on mobile, and scale maps correctly on mobile too (1bpp tile size on mobile is 512px, but 256 on desktop!?)
master
Gordon Williams 2025-05-20 13:22:24 +01:00
parent 8a9277f38e
commit 4326c5b60c
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/openstmap/interface.html
View File

@ -192,6 +192,8 @@ TODO:
loadedMaps[mapNumber] = mapInfo; loadedMaps[mapNumber] = mapInfo;
if (mapInfo!==undefined) { if (mapInfo!==undefined) {
mapsLoaded.push({mapNumber: mapNumber, mapInfo: mapInfo}); mapsLoaded.push({mapNumber: mapNumber, mapInfo: mapInfo});
let kBytes = (mapInfo.imgx*mapInfo.imgy*3)>>13;
if (mapInfo.kBytes) kBytes = mapInfo.kBytes;
mapsLoadedContainer.innerHTML += ` mapsLoadedContainer.innerHTML += `
<div class="tile"> <div class="tile">
<div class="tile-icon"> <div class="tile-icon">
@ -200,7 +202,7 @@ TODO:
</div> </div>
<div class="tile-content"> <div class="tile-content">
<p class="tile-title">Map ${mapNumber}</p> <p class="tile-title">Map ${mapNumber}</p>
<p class="tile-subtitle">${mapInfo.w*mapInfo.h} Tiles (${((mapInfo.imgx*mapInfo.imgy)>>11).toFixed(0)}k)</p> <p class="tile-subtitle">${mapInfo.w*mapInfo.h} Tiles (${kBytes}k)</p>
</div> </div>
<div class="tile-action"> <div class="tile-action">
<button class="btn btn-primary" onclick="onMapDelete(${mapNumber})">Delete</button> <button class="btn btn-primary" onclick="onMapDelete(${mapNumber})">Delete</button>
@ -387,7 +389,7 @@ TODO:
img.crossOrigin = "Anonymous"; img.crossOrigin = "Anonymous";
tileGetters.push(new Promise(function(resolve,reject) { tileGetters.push(new Promise(function(resolve,reject) {
img.onload = function(){ img.onload = function(){
ctx.drawImage(img,i*OSMTILESIZE - ox, j*OSMTILESIZE - oy); ctx.drawImage(img,i*OSMTILESIZE - ox, j*OSMTILESIZE - oy, OSMTILESIZE, OSMTILESIZE);
/*if (testPt) { /*if (testPt) {
ctx.fillStyle="green"; ctx.fillStyle="green";
ctx.fillRect(testPt.x-1, testPt.y-5, 3,10); ctx.fillRect(testPt.x-1, testPt.y-5, 3,10);
@ -411,6 +413,7 @@ TODO:
while (loadedMaps[mapNumber]) mapNumber++; while (loadedMaps[mapNumber]) mapNumber++;
let mapImageFile = `openstmap.${mapNumber}.img`; let mapImageFile = `openstmap.${mapNumber}.img`;
mapFiles = tilesLoaded(ctx, canvas.width, canvas.height, mapImageFile); mapFiles = tilesLoaded(ctx, canvas.width, canvas.height, mapImageFile);
var mapSizeInK = Math.round(mapFiles.reduce((r,m)=>m.content.length+r,0)/1000);
mapFiles.unshift({name:`openstmap.${mapNumber}.json`,content:JSON.stringify({ mapFiles.unshift({name:`openstmap.${mapNumber}.json`,content:JSON.stringify({
imgx : canvas.width, imgx : canvas.width,
imgy : canvas.height, imgy : canvas.height,
@ -420,15 +423,16 @@ TODO:
lon : centerlatlon.lng, lon : centerlatlon.lng,
w : Math.round(canvas.width / TILESIZE), // width in tiles w : Math.round(canvas.width / TILESIZE), // width in tiles
h : Math.round(canvas.height / TILESIZE), // height in tiles h : Math.round(canvas.height / TILESIZE), // height in tiles
kBytes : mapSizeInK,
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"); document.getElementById("mapstats").innerText = "Size : "+ (mapSizeInK+"kb");
console.log(mapFiles); console.log(mapFiles);
}); });
}); });
document.getElementById("mapStyle").addEventListener("click", function() { document.getElementById("mapStyle").addEventListener("change", function() {
var style = document.getElementById("mapStyle").value; var style = document.getElementById("mapStyle").value;
if (!style in MAPSTYLES) return; if (!style in MAPSTYLES) return;
map.removeLayer(previewTileLayer); map.removeLayer(previewTileLayer);