mirror of https://github.com/espruino/BangleApps
add semi-useful code
Gordon Williams
parent
9d634f055f
commit
40b625c16a
|
|
@ -0,0 +1,4 @@
|
||||||
|
Testing
|
||||||
|
=======
|
||||||
|
|
||||||
|
Bits of code that could maybe be apps, but that aren't finished yet
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
This code can take an image file, split it into tiles, and then render those tiles on the watch - making them fit with the GPS data.
|
||||||
|
|
||||||
|
Problem is right now I can't automate getting the rendered area of map, so can't turn it into a very useful tool for BangleApps.
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
require("Storage").write('+map',{
|
||||||
|
name:"Map",
|
||||||
|
icon:"*map",
|
||||||
|
src:"-map"
|
||||||
|
});
|
||||||
|
require("Storage").write('*map',require("heatshrink").decompress(atob("mEwghC/AH4AWh//mcwBZIWI/4ABmYABBZAgIC4oyDBYggIC4wABBYoX/C90imcykYXUkYBB+YyDC5E/F5EykQXKHwYVCL4YXNkQ+BC4wICHgIvJ+QVBC4oYBkUvO5QXCU4wXBF5INCCwqMDAYTXUC6xHNC5Z3LI5UyF6oADF9ZfL+fTAIIUCkUjR5397s9C4LxBC4MykfzDYYvI7vdC4cyDIciO5c97s/C4QABF4IBBC5QvEAAk/+ZdBC5JfEX6XzmaPEa7oX8+AGBgYXHBYQXHBAoXFCowXCEA4yCBZIA/AH4AO")));
|
||||||
|
|
||||||
|
require("Storage").write("-map",`
|
||||||
|
var s = require("Storage");
|
||||||
|
var hs = require("heatshrink");
|
||||||
|
var map = {
|
||||||
|
imgx : 831,
|
||||||
|
imgy : 656,
|
||||||
|
tilesize : 64,
|
||||||
|
scale : 20000,
|
||||||
|
lat : 51.7075,
|
||||||
|
lon : -1.2948
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
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("t"+ttx+"x"+tty);
|
||||||
|
//print(x,y,ttx,tty,"t"+ttx+"x"+tty,img?"ok":"-");
|
||||||
|
if (img) g.drawImage(hs.decompress(img),x,y);
|
||||||
|
else g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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});
|
||||||
|
`);
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="https://espruino.github.io/EspruinoWebTools/heatshrink.js"></script>
|
||||||
|
<script src="https://espruino.github.io/EspruinoWebTools/imageconverter.js"></script>
|
||||||
|
<!--<script src="https://espruino.github.io/EspruinoWebTools/uart.js"></script>-->
|
||||||
|
<script src="file:///home/gw/workspace/EspruinoWebTools/uart.js"></script>
|
||||||
|
<p>An online map loader for Espruino...</p>
|
||||||
|
Scale <input type="text" id="scale" value="20000"></input><br/>
|
||||||
|
Geo URI <input type="text" id="uri" value="geo:51.7079,-1.2926?z=16"></input><br/>
|
||||||
|
<button id="geturl">Get URL</button><a name="url"></a><br/>
|
||||||
|
<input type="file" id="fileLoader"/><br/>
|
||||||
|
<img id="mapimg"/><br/>
|
||||||
|
<canvas id="canvas" style="display:none;"></canvas>
|
||||||
|
<button id="upload" style="display:none;">Upload</button>
|
||||||
|
<pre id="log"></pre>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
We can request this directly, eg:
|
||||||
|
|
||||||
|
https://render.openstreetmap.org/cgi-bin/export?bbox=-1.27,51.64,-1.26,51.65&scale=20000&format=png
|
||||||
|
https://render.openstreetmap.org/cgi-bin/export?bbox=-1.2731999999999999,51.6472,-1.2632,51.6572&scale=20000&format=png
|
||||||
|
then we need:
|
||||||
|
|
||||||
|
var map = {
|
||||||
|
imgx : 361,
|
||||||
|
imgy : 343,
|
||||||
|
tilesize : 64,
|
||||||
|
scale : 20000, // scale
|
||||||
|
lat : 51.65270, // coords of center
|
||||||
|
lon : -1.27052
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
find lat/lon? https://help.openstreetmap.org/questions/2702/extracting-coordinates-by-clicking-on-an-openstreetmap
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
TILESIZE = 64;
|
||||||
|
|
||||||
|
var img;
|
||||||
|
var tiles = [];
|
||||||
|
|
||||||
|
function log(x) {
|
||||||
|
document.getElementById("log").innerText += x+"\n";
|
||||||
|
console.log(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getURL() {
|
||||||
|
var uri = document.getElementById("uri").value;
|
||||||
|
var latlon = uri.match("geo:(-?[0-9\.]+),(-?[0-9\.]+)?");
|
||||||
|
if (latlon==null) {
|
||||||
|
log("Invalid URI!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var map = {
|
||||||
|
imgx :img?img.width:0,
|
||||||
|
imgy : img?img.height:0,
|
||||||
|
lat : parseFloat(latlon[1]),
|
||||||
|
lon : parseFloat(latlon[2]),
|
||||||
|
tilesize : TILESIZE,
|
||||||
|
scale : parseInt(document.getElementById("scale").value)
|
||||||
|
};
|
||||||
|
log(JSON.stringify(map,null,2));
|
||||||
|
var s = 0.005;
|
||||||
|
var x1 = map.lon-s,
|
||||||
|
x2 = map.lon+s,
|
||||||
|
y1 = map.lat-s,
|
||||||
|
y2 = map.lat+s;
|
||||||
|
var url = "https://render.openstreetmap.org/cgi-bin/export?bbox="+x1+","+y1+","+x2+","+y2+"&scale="+map.scale+"&format=png"
|
||||||
|
document.getElementById("url").href = url;
|
||||||
|
document.getElementById("url").innerText = url;
|
||||||
|
/*var mapimg = document.getElementById("mapimg");
|
||||||
|
|
||||||
|
|
||||||
|
mapimg.src = url;
|
||||||
|
mapimg.onload = function() {
|
||||||
|
log("Image loaded!");
|
||||||
|
}*/
|
||||||
|
}
|
||||||
|
|
||||||
|
function imageLoaded() {
|
||||||
|
if (img === undefined) return;
|
||||||
|
var options = { compression:true, mode:"web", output:"string"};
|
||||||
|
|
||||||
|
var canvas = document.getElementById("canvas")
|
||||||
|
canvas.width = TILESIZE*2;
|
||||||
|
canvas.height = TILESIZE;
|
||||||
|
canvas.style = "display:block;border:1px solid black;margin:8px;"
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
console.log(img.width+"x"+img.height);
|
||||||
|
var w = Math.round(img.width / TILESIZE);
|
||||||
|
var h = Math.round(img.height / TILESIZE);
|
||||||
|
console.log("->"+w+"x"+h);
|
||||||
|
for (var y=0;y<h;y++) {
|
||||||
|
for (var x=0;x<w;x++) {
|
||||||
|
ctx.fillStyle = 'black';
|
||||||
|
ctx.fillRect(0,0,TILESIZE,TILESIZE);
|
||||||
|
ctx.drawImage(img,-x*TILESIZE,-y*TILESIZE);
|
||||||
|
var imageData = ctx.getImageData(0, 0, TILESIZE, TILESIZE);
|
||||||
|
var rgba = imageData.data;
|
||||||
|
options.rgbaOut = rgba;
|
||||||
|
options.width = TILESIZE;
|
||||||
|
options.height = TILESIZE;
|
||||||
|
var imgstr = imageconverter.RGBAtoString(rgba, options);
|
||||||
|
ctx.putImageData(imageData,TILESIZE,0);
|
||||||
|
var compress = 'require("heatshrink").decompress('
|
||||||
|
if (!imgstr.startsWith(compress)) throw "Data in wrong format";
|
||||||
|
imgstr = imgstr.slice(compress.length,-1);
|
||||||
|
tiles.push({
|
||||||
|
name:"t"+x+"x"+y,
|
||||||
|
value:imgstr
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
log("Tiling finished. "+tiles.length+" tiles");
|
||||||
|
document.getElementById("upload").style.display = "block";
|
||||||
|
|
||||||
|
}
|
||||||
|
function handleFileSelect(event) {
|
||||||
|
if (event.target.files.length != 1) return;
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function(event) {
|
||||||
|
img = new Image();
|
||||||
|
img.onload = imageLoaded;
|
||||||
|
img.src = event.target.result;
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(event.target.files[0]);
|
||||||
|
};
|
||||||
|
document.getElementById('fileLoader').addEventListener('change', handleFileSelect, false);
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById('geturl').addEventListener('click', getURL);
|
||||||
|
document.getElementById('upload').addEventListener('click', function() {
|
||||||
|
UART.write("\x03s=require('Storage');\n", function() {
|
||||||
|
log("Connected");
|
||||||
|
function upload() {
|
||||||
|
if (!tiles.length) {
|
||||||
|
log("Success!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var tile = tiles.shift();
|
||||||
|
log("Uploading "+tile.name);
|
||||||
|
UART.eval('s.write('+JSON.stringify(tile.name)+','+tile.value+')',function(r) {
|
||||||
|
log("Returned "+r);
|
||||||
|
upload();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
upload();
|
||||||
|
});
|
||||||
|
}, false);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue