mirror of https://github.com/espruino/BangleApps
188 lines
6.9 KiB
HTML
188 lines
6.9 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
</head>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
html, body, #map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#map { z-index: 1; }
|
|
#controls {
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border: 1px solid black;
|
|
position:absolute;
|
|
right:0px;top:0px;
|
|
background-color: rgb(255, 255, 255);
|
|
z-index: 100;
|
|
}
|
|
#maptiles {
|
|
width: 256px;
|
|
height: 256px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map">
|
|
</div>
|
|
<div id="controls">
|
|
<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>
|
|
<button id="getmap" class="btn btn-primary">Get Map</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>
|
|
</div>
|
|
|
|
<script src="../../core/lib/customize.js"></script>
|
|
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
<script src="../../core/lib/heatshrink.js"></script>
|
|
<script src="../../core/lib/imageconverter.js"></script>
|
|
|
|
<script>
|
|
/*
|
|
|
|
TODO:
|
|
|
|
* Could maybe use palettised output?
|
|
* Could potentially use a custom 16 color palette?
|
|
* Allow user to choose size of map area to be uploaded (small/med/large)
|
|
* What is faster? Storing as a compressed image and decompressing, or storing decompressed?
|
|
|
|
*/
|
|
var TILESIZE = 96; // Size of our tiles
|
|
var OSMTILESIZE = 256; // Size of openstreetmap tiles
|
|
var MAPSIZE = TILESIZE*5; ///< 480 - Size of map we download
|
|
var OSMTILECOUNT = 3; // how many tiles do we download in each direction (Math.floor(MAPSIZE / OSMTILESIZE)+1)
|
|
/* Can see possible tiles on http://leaflet-extras.github.io/leaflet-providers/preview/
|
|
However some don't allow cross-origin use */
|
|
var TILELAYER = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'; // simple, high contrast
|
|
//var TILELAYER = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
//var TILELAYER = 'http://a.tile.stamen.com/toner/{z}/{x}/{y}.png'; // black and white
|
|
var map = L.map('map').locate({setView: true, maxZoom: 16});
|
|
var tileLayer = L.tileLayer(TILELAYER, {
|
|
maxZoom: 18,
|
|
attribution: 'Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
|
});
|
|
// Could optionally overlay trails: https://wiki.openstreetmap.org/wiki/Tiles
|
|
|
|
function onInit(device) {
|
|
if (device && device.info && device.info.g) {
|
|
// On 3 bit devices, don't even offer the option. 3 bit is the only way
|
|
if (device.info.g.bpp==3) {
|
|
document.getElementById("3bit").checked = true;
|
|
document.getElementById("3bitdiv").style = "display:none";
|
|
}
|
|
}
|
|
}
|
|
|
|
var mapFiles = [];
|
|
tileLayer.addTo(map);
|
|
|
|
function tilesLoaded(ctx, width, height) {
|
|
var options = {
|
|
compression:false, output:"raw",
|
|
mode:"web"
|
|
};
|
|
if (document.getElementById("3bit").checked) {
|
|
options = {
|
|
compression:false, output:"raw",
|
|
mode:"3bit", brightness:-64,
|
|
};
|
|
}
|
|
console.log("Compression options", options);
|
|
var w = Math.round(width / TILESIZE);
|
|
var h = Math.round(height / TILESIZE);
|
|
var tiles = [];
|
|
for (var y=0;y<h;y++) {
|
|
for (var x=0;x<w;x++) {
|
|
var imageData = ctx.getImageData(x*TILESIZE, y*TILESIZE, TILESIZE, TILESIZE);
|
|
var rgba = imageData.data;
|
|
options.rgbaOut = rgba;
|
|
options.width = TILESIZE;
|
|
options.height = TILESIZE;
|
|
var imgstr = imageconverter.RGBAtoString(rgba, options);
|
|
ctx.putImageData(imageData,x*TILESIZE, y*TILESIZE);
|
|
/*var compress = 'require("heatshrink").decompress('
|
|
if (!imgstr.startsWith(compress)) throw "Data in wrong format";
|
|
imgstr = imgstr.slice(compress.length,-1);*/
|
|
tiles.push({
|
|
name:"openstmap-"+x+"-"+y+".img",
|
|
content:imgstr
|
|
});
|
|
}
|
|
}
|
|
return tiles;
|
|
}
|
|
|
|
document.getElementById("getmap").addEventListener("click", function() {
|
|
var bounds = map.getBounds();
|
|
var zoom = map.getZoom();
|
|
var centerlatlon = bounds.getCenter();
|
|
var center = map.project(centerlatlon, zoom).divideBy(256);
|
|
var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE);
|
|
var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE);
|
|
center = center.floor();
|
|
var tileGetters = [];
|
|
|
|
// Render everything to a canvas - 512 x 512 px
|
|
var canvas = document.getElementById("maptiles");
|
|
canvas.style.display="";
|
|
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++) {
|
|
(function(i,j){
|
|
var coords = new L.Point(center.x+i-1, center.y+j-1);
|
|
coords.z = zoom;
|
|
var img = new Image();
|
|
img.crossOrigin = "Anonymous";
|
|
tileGetters.push(new Promise(function(resolve,reject) {
|
|
img.onload = function(){
|
|
ctx.drawImage(img,i*OSMTILESIZE - ox, j*OSMTILESIZE - oy);
|
|
resolve();
|
|
};
|
|
}));
|
|
img.src = tileLayer.getTileUrl(coords);
|
|
})(i,j);
|
|
}
|
|
}
|
|
|
|
|
|
Promise.all(tileGetters).then(() => {
|
|
document.getElementById("uploadbuttons").style.display="";
|
|
mapFiles = tilesLoaded(ctx, canvas.width, canvas.height);
|
|
mapFiles.unshift({name:"openstmap.json",content:JSON.stringify({
|
|
imgx : canvas.width,
|
|
imgy : canvas.height,
|
|
tilesize : TILESIZE,
|
|
scale : 10000*Math.pow(2,16-zoom), // FIXME - this is probably wrong
|
|
lat : centerlatlon.lat,
|
|
lon : centerlatlon.lng
|
|
})});
|
|
console.log(mapFiles);
|
|
});
|
|
});
|
|
|
|
document.getElementById("upload").addEventListener("click", function() {
|
|
sendCustomizedApp({
|
|
storage:mapFiles
|
|
});
|
|
});
|
|
|
|
document.getElementById("cancel").addEventListener("click", function() {
|
|
document.getElementById("maptiles").style.display="none";
|
|
document.getElementById("uploadbuttons").style.display="none";
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|