mirror of https://github.com/espruino/BangleApps
I've been meaning to fix this enough to upload it for a while.
Finally got it more or less working but I don't have time test it properly. Still, it's a good start! PRs welcome :)pull/247/head
Gordon Williams
parent
3b2558ddd8
commit
86891fce63
13
apps.json
13
apps.json
|
|
@ -1094,5 +1094,18 @@
|
|||
{"name":"minionclk.app.js","url":"app.js"},
|
||||
{"name":"minionclk.img","url":"app-icon.js","evaluate":true}
|
||||
]
|
||||
},
|
||||
{ "id": "openstmap",
|
||||
"name": "OpenStreetMap",
|
||||
"shortName":"OpenStMap",
|
||||
"icon": "app.png",
|
||||
"version":"0.01",
|
||||
"description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are",
|
||||
"tags": "outdoors,gps",
|
||||
"custom": "custom.html",
|
||||
"storage": [
|
||||
{"name":"openstmap.app.js","url":"app.js"},
|
||||
{"name":"openstmap.img","url":"app-icon.js","evaluate":true}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
0.01: New App!
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
require("heatshrink").decompress(atob("mEwxH+AAOxAAIFCABmrwwRP/2yBJAvCAAYZJ2Wr1eHAAYSLAAQwP1YYHF4xEGCQovT2IYGFwIwDCIWAq1cwIABrtWwAaETZIuFCgIVDA4QvEBoNcq2s6/X2ezCQIDBwIKB2QBBF5ulAYQvI2IvBEQQAD1gACGQVXwKQPLwQwERwmrwFXLAJTDGAoACxFWF55VCGYSqCXYKOBrqHCAAXXAIQyExABBrjAOFQKSDMYQIBw9W2a7CFYiUGw4wBwTwPSQhmCGAJ7BAB4wDqwvIcwTnFYggFBrrjDRonX2ZnCSImHAQMrF5IAFLQQ3DrgtCRoYvDAQLJDF4ZgJOpAvBFgLtBXoIvHLgQCBF4QuCMAeIF5otCLwIuCw2B1mzEwQBB2etAAouEFoJgBSAwtE2IBCRYQvCwGIE4wACGQI0DGAwvGLopaBMIQvDwztBFQopBMQRkEF47AFRoy8Ga4KOBGAgpCSBoABF5mxRous1eBR4jmCSpAvHR4qJBAAYtCAYIvCAgWBEYZDDF4+yFwuyF4gmBGA4zD1gvCrovHE4JeFF4gNCLwgwBLQYvFAoOsw+rwQvDDwQwHBQ2y69dF4wnCGIelAga+B1bwBSAYkGLQQHF2fX2a+FSAoEB0oDCDwQvDlbxCKo4AGFwPXq4uFeAwuCF4RNBR4OswUslYvPFoPXxAuHF4ruEbAgvBq8rlgvN6wuB1iNGSAwrBMAitCcQOIq0rGBgtC2YTB1gvIQQLpDd4esAoIfCFwUrAYOBRZWzrtdVAIvISA+lFwIEBwGk1YuCF4IABEQIvG2eBq2I1eHF5RfCAAeIMIOxrgqBGIMrmNWrlcwAhBrmBAAdWwAWBxAMB1ZfLFoWsxBkCFwQABv9/qweBwAwDagQABAwIACwIgBLxLkCAAKSDFwiMCwWr2SACLYQ2BHIQACHIKRBF5CiBVIguIldcxGsJwIPCLAYsCwwABF4OswIvJc4QuLq2BfIIwDCYaRBRwiaCqwvILoIWB2IDBFxGAWoOIZgIUDa4YtEMQQuJCoYdBqwuIcoWrxJgBCwaVCFgQBCAALuJPQYuLAARDBSIJdBaoYuDAAdcF5QYB1guJLgOlFwKKCGAaUCXwxeJL4ZdJwLhCLoQAD1jDBF4ZeFF5mHFxGHRghdCGAg3C1YuGF5SbCFw1cFwexwFWCYJnBGAgvCFgmGXpIAD0mrFworB1YsDAAr4CGAQDBJoIsNAAfP1QuCg8AlcGC51cHxIAN1Wjg4wBDSoAUldVF1gA/AH4A5A"))
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
var s = require("Storage");
|
||||
var map = s.readJSON("openstmap.json");
|
||||
|
||||
map.center = Bangle.project({lat:map.lat,lon:map.lon});
|
||||
var lat = map.lat, lon = map.lon;
|
||||
var fix = {};
|
||||
|
||||
|
||||
function redraw() {
|
||||
var cx = g.getWidth()/2;
|
||||
var cy = g.getHeight()/2;
|
||||
var p = Bangle.project({lat:lat,lon:lon});
|
||||
var ix = (p.x-map.center.x)*4096/map.scale + (map.imgx/2) - cx;
|
||||
var iy = (map.center.y-p.y)*4096/map.scale + (map.imgy/2) - cy;
|
||||
//console.log(ix,iy);
|
||||
var tx = 0|(ix/map.tilesize);
|
||||
var ty = 0|(iy/map.tilesize);
|
||||
var ox = (tx*map.tilesize)-ix;
|
||||
var oy = (ty*map.tilesize)-iy;
|
||||
for (var x=ox,ttx=tx;x<g.getWidth();x+=map.tilesize,ttx++) {
|
||||
for (var y=oy,tty=ty;y<g.getHeight();y+=map.tilesize,tty++) {
|
||||
var img = s.read("openstmap-"+ttx+"-"+tty+".img");
|
||||
if (img) g.drawImage(img,x,y);
|
||||
else {
|
||||
g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1);
|
||||
g.drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1);
|
||||
g.drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
|
||||
}
|
||||
}
|
||||
}
|
||||
g.setColor(1,0,0);
|
||||
/*g.fillRect(cx-10,cy-1,cx+10,cy+1);
|
||||
g.fillRect(cx-1,cy-10,cx+1,cy+10);*/
|
||||
if (fix.fix)
|
||||
g.fillRect(cx-2,cy-2,cx+2,cy+2);
|
||||
}
|
||||
redraw();
|
||||
|
||||
var fix;
|
||||
Bangle.on('GPS',function(f) {
|
||||
fix=f;
|
||||
g.clearRect(0,0,240,8);
|
||||
g.setColor(1,1,1);
|
||||
g.setFont("6x8");
|
||||
g.setFontAlign(0,0);
|
||||
var txt = fix.satellites+" satellites";
|
||||
if (!fix.fix)
|
||||
txt += " - NO FIX";
|
||||
g.drawString(txt,120,4);
|
||||
if (fix.fix) {
|
||||
var p = Bangle.project({lat:lat,lon:lon});
|
||||
var q = Bangle.project(fix);
|
||||
var cx = g.getWidth()/2;
|
||||
var cy = g.getHeight()/2;
|
||||
var ix = (q.x-p.x)*4096/map.scale + cx;
|
||||
var iy = (q.y-p.y)*4096/map.scale + cy;
|
||||
g.fillRect(ix-2,iy-2,ix+2,iy+2);
|
||||
}
|
||||
});
|
||||
Bangle.setGPSPower(1);
|
||||
redraw();
|
||||
|
||||
setWatch(function() {
|
||||
if (!fix.fix) return;
|
||||
lat = fix.lat;
|
||||
lon = fix.lon;
|
||||
redraw();
|
||||
}, BTN2, {repeat:true});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1,154 @@
|
|||
<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">
|
||||
<p>Zoom in to the area you want as a map</p>
|
||||
<p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
|
||||
<canvas id="maptiles"></canvas>
|
||||
</div>
|
||||
|
||||
<script src="../../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="https://espruino.github.io/EspruinoWebTools/heatshrink.js"></script>
|
||||
<script src="https://espruino.github.io/EspruinoWebTools/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?
|
||||
* Scaling for zoom levels
|
||||
|
||||
*/
|
||||
var TILESIZE = 64;
|
||||
var OSMTILESIZE = 256;
|
||||
var OSMSUBTILES = OSMTILESIZE / TILESIZE;
|
||||
var map = L.map('map').locate({setView: true, maxZoom: 16});
|
||||
var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
//var tileLayer = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png', { // black and white
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
||||
});
|
||||
tileLayer.addTo(map);
|
||||
|
||||
function tilesLoaded(ctx, width, height) {
|
||||
var options = { compression:true, mode:"web", output:"string"};
|
||||
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,
|
||||
evaluate:true
|
||||
});
|
||||
}
|
||||
}
|
||||
return tiles;
|
||||
}
|
||||
|
||||
document.getElementById("upload").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");
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.width = OSMTILESIZE*2;
|
||||
canvas.height = OSMTILESIZE*2;
|
||||
for (var i = 0; i < 3; i++) {
|
||||
for (var j = 0; j < 3; 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(() => {
|
||||
var files = tilesLoaded(ctx, canvas.width, canvas.height);
|
||||
files.unshift({name:"openstmap.json",content:JSON.stringify({
|
||||
imgx : canvas.width,
|
||||
imgy : canvas.height,
|
||||
tilesize : TILESIZE,
|
||||
scale : 10000*Math.pow(2,zoom-16), // FIXME - this is probably wrong
|
||||
lat : centerlatlon.lat,
|
||||
lon : centerlatlon.lng
|
||||
})});
|
||||
files.unshift({"name":"openstmap.app.js","url":"app.js"});
|
||||
files.unshift({"name":"openstmap.img","url":"app-icon.js","evaluate":true});
|
||||
|
||||
console.log(files);
|
||||
sendCustomizedApp({
|
||||
storage:files
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue