forked from FOSS/BangleApps
Delete old dir
marko
parent
ac83cf1a07
commit
5514ed8ea0
|
|
@ -1 +0,0 @@
|
||||||
marko@MBP2.29782
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
0.01: New App!
|
|
||||||
0.02: Fix marker position, color, and map scaling
|
|
||||||
0.03: Show widgets (mainly so we can use the GPS recorder widget)
|
|
||||||
0.04: Move map rendering to a module (fix #396)
|
|
||||||
0.05: Show currently active gpsrec GPS trace (fix #395)
|
|
||||||
0.06: Add support for scrolling, option for 3 bit maps
|
|
||||||
0.07: Move to 96px tiles - less files (64 -> 25) and speed up rendering
|
|
||||||
0.08: Update for drag event refactor
|
|
||||||
0.09: Use current theme cols when drawing GPS info
|
|
||||||
0.10: Improve scale factor calculation to fix scaling issues (#984)
|
|
||||||
0.11: Add slight offset to OSM data to align it properly (fix #984)
|
|
||||||
Fix alignment of satellite info text
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
|
|
@ -1 +0,0 @@
|
||||||
require("heatshrink").decompress(atob("mEwxH+AAOxAAIFCABmrwwRP/2yBJAvCAAYZJ2Wr1eHAAYSLAAQwP1YYHF4xEGCQovT2IYGFwIwDCIWAq1cwIABrtWwAaETZIuFCgIVDA4QvEBoNcq2s6/X2ezCQIDBwIKB2QBBF5ulAYQvI2IvBEQQAD1gACGQVXwKQPLwQwERwmrwFXLAJTDGAoACxFWF55VCGYSqCXYKOBrqHCAAXXAIQyExABBrjAOFQKSDMYQIBw9W2a7CFYiUGw4wBwTwPSQhmCGAJ7BAB4wDqwvIcwTnFYggFBrrjDRonX2ZnCSImHAQMrF5IAFLQQ3DrgtCRoYvDAQLJDF4ZgJOpAvBFgLtBXoIvHLgQCBF4QuCMAeIF5otCLwIuCw2B1mzEwQBB2etAAouEFoJgBSAwtE2IBCRYQvCwGIE4wACGQI0DGAwvGLopaBMIQvDwztBFQopBMQRkEF47AFRoy8Ga4KOBGAgpCSBoABF5mxRous1eBR4jmCSpAvHR4qJBAAYtCAYIvCAgWBEYZDDF4+yFwuyF4gmBGA4zD1gvCrovHE4JeFF4gNCLwgwBLQYvFAoOsw+rwQvDDwQwHBQ2y69dF4wnCGIelAga+B1bwBSAYkGLQQHF2fX2a+FSAoEB0oDCDwQvDlbxCKo4AGFwPXq4uFeAwuCF4RNBR4OswUslYvPFoPXxAuHF4ruEbAgvBq8rlgvN6wuB1iNGSAwrBMAitCcQOIq0rGBgtC2YTB1gvIQQLpDd4esAoIfCFwUrAYOBRZWzrtdVAIvISA+lFwIEBwGk1YuCF4IABEQIvG2eBq2I1eHF5RfCAAeIMIOxrgqBGIMrmNWrlcwAhBrmBAAdWwAWBxAMB1ZfLFoWsxBkCFwQABv9/qweBwAwDagQABAwIACwIgBLxLkCAAKSDFwiMCwWr2SACLYQ2BHIQACHIKRBF5CiBVIguIldcxGsJwIPCLAYsCwwABF4OswIvJc4QuLq2BfIIwDCYaRBRwiaCqwvILoIWB2IDBFxGAWoOIZgIUDa4YtEMQQuJCoYdBqwuIcoWrxJgBCwaVCFgQBCAALuJPQYuLAARDBSIJdBaoYuDAAdcF5QYB1guJLgOlFwKKCGAaUCXwxeJL4ZdJwLhCLoQAD1jDBF4ZeFF5mHFxGHRghdCGAg3C1YuGF5SbCFw1cFwexwFWCYJnBGAgvCFgmGXpIAD0mrFworB1YsDAAr4CGAQDBJoIsNAAfP1QuCg8AlcGC51cHxIAN1Wjg4wBDSoAUldVF1gA/AH4A5A"))
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
var m = require("openseachart");
|
|
||||||
var HASWIDGETS = true;
|
|
||||||
var y1,y2;
|
|
||||||
var fix = {};
|
|
||||||
|
|
||||||
function redraw() {
|
|
||||||
g.setClipRect(0,y1,g.getWidth()-1,y2);
|
|
||||||
m.draw();
|
|
||||||
drawMarker();
|
|
||||||
if (WIDGETS["gpsrec"] && WIDGETS["gpsrec"].plotTrack) {
|
|
||||||
g.flip(); // force immediate draw on double-buffered screens - track will update later
|
|
||||||
g.setColor(0.75,0.2,0);
|
|
||||||
WIDGETS["gpsrec"].plotTrack(m);
|
|
||||||
}
|
|
||||||
g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawMarker() {
|
|
||||||
if (!fix.fix) return;
|
|
||||||
var p = m.latLonToXY(fix.lat, fix.lon);
|
|
||||||
g.setColor(1,0,0);
|
|
||||||
g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
|
|
||||||
}
|
|
||||||
|
|
||||||
var fix;
|
|
||||||
Bangle.on('GPS',function(f) {
|
|
||||||
fix=f;
|
|
||||||
g.reset().clearRect(0,y1,g.getWidth()-1,y1+8).setFont("6x8").setFontAlign(0,0);
|
|
||||||
var txt = fix.satellites+" satellites";
|
|
||||||
if (!fix.fix)
|
|
||||||
txt += " - NO FIX";
|
|
||||||
g.drawString(txt,g.getWidth()/2,y1 + 4);
|
|
||||||
drawMarker();
|
|
||||||
});
|
|
||||||
Bangle.setGPSPower(1, "app");
|
|
||||||
|
|
||||||
if (HASWIDGETS) {
|
|
||||||
Bangle.loadWidgets();
|
|
||||||
Bangle.drawWidgets();
|
|
||||||
y1 = 24;
|
|
||||||
var hasBottomRow = Object.keys(WIDGETS).some(w=>WIDGETS[w].area[0]=="b");
|
|
||||||
y2 = g.getHeight() - (hasBottomRow ? 24 : 1);
|
|
||||||
} else {
|
|
||||||
y1=0;
|
|
||||||
y2=g.getHeight()-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
redraw();
|
|
||||||
|
|
||||||
function recenter() {
|
|
||||||
if (!fix.fix) return;
|
|
||||||
m.lat = fix.lat;
|
|
||||||
m.lon = fix.lon;
|
|
||||||
redraw();
|
|
||||||
}
|
|
||||||
|
|
||||||
setWatch(recenter, global.BTN2?BTN2:BTN1, {repeat:true});
|
|
||||||
|
|
||||||
var hasScrolled = false;
|
|
||||||
Bangle.on('drag',e=>{
|
|
||||||
if (e.b) {
|
|
||||||
g.setClipRect(0,y1,g.getWidth()-1,y2);
|
|
||||||
g.scroll(e.dx,e.dy);
|
|
||||||
m.scroll(e.dx,e.dy);
|
|
||||||
g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
|
|
||||||
hasScrolled = true;
|
|
||||||
} else if (hasScrolled) {
|
|
||||||
hasScrolled = false;
|
|
||||||
redraw();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
|
|
@ -1,244 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
|
||||||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.6.0/dist/geosearch.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;"> <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 src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/*
|
|
||||||
|
|
||||||
TODO:
|
|
||||||
|
|
||||||
* Allow a larger tilesize. Currently we use 'evaluate:true' which means we can only send 64x64x8 bit, but with some tweaking we could send 128x128 which would reduce the number of files and make things a bit snappier
|
|
||||||
* 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 = 64;
|
|
||||||
var OSMTILESIZE = 256;
|
|
||||||
var OSMSUBTILES = OSMTILESIZE / TILESIZE;
|
|
||||||
/* 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 PREVIEWTILELAYER = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
||||||
//var TILELAYER = 'http://a.tile.stamen.com/toner/{z}/{x}/{y}.png'; // black and white
|
|
||||||
|
|
||||||
// Create map and try and set the location to where the browser thinks we are
|
|
||||||
var map = L.map('map').locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
|
|
||||||
// Tiles used for Bangle.js itself
|
|
||||||
var bangleTileLayer = L.tileLayer(TILELAYER, {
|
|
||||||
maxZoom: 18,
|
|
||||||
attribution: 'Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
|
||||||
});
|
|
||||||
// Tiles used for the may the user sees (faster)
|
|
||||||
var previewTileLayer = L.tileLayer(PREVIEWTILELAYER, {
|
|
||||||
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
|
|
||||||
|
|
||||||
var mapFiles = [];
|
|
||||||
previewTileLayer.addTo(map);
|
|
||||||
|
|
||||||
function tilesLoaded(ctx, width, height) {
|
|
||||||
var options = { compression:true, mode:"web", output:"string"};
|
|
||||||
if (document.getElementById("3bit").checked) {
|
|
||||||
options = {
|
|
||||||
compression:false, output:"raw",
|
|
||||||
mode:"3bit",
|
|
||||||
};
|
|
||||||
/* If in 3 bit mode, go through all the data beforehand and
|
|
||||||
turn the saturation up to maximum, so when thresholded it
|
|
||||||
works a lot better */
|
|
||||||
var imageData = ctx.getImageData(0,0,width,height);
|
|
||||||
var rgba = imageData.data;
|
|
||||||
var l = width*height*4;
|
|
||||||
for (var i=0;i<l;i+=4) {
|
|
||||||
var min = Math.min(rgba[i+0],rgba[i+1],rgba[i+2]);
|
|
||||||
var max = Math.max(rgba[i+0],rgba[i+1],rgba[i+2]);
|
|
||||||
var d = max-min;
|
|
||||||
if (max<120) { // black
|
|
||||||
rgba[i+0]=0;
|
|
||||||
rgba[i+1]=0;
|
|
||||||
rgba[i+2]=0;
|
|
||||||
} else if (min>240 || d<8) { // white or grey
|
|
||||||
rgba[i+0]=255;
|
|
||||||
rgba[i+1]=255;
|
|
||||||
rgba[i+2]=255;
|
|
||||||
} else { // another colour - use max saturation
|
|
||||||
rgba[i+0] = (rgba[i+0]-min) * 255 / d;
|
|
||||||
rgba[i+1] = (rgba[i+1]-min) * 255 / d;
|
|
||||||
rgba[i+2] = (rgba[i+2]-min) * 255 / d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ctx.putImageData(imageData,0,0);
|
|
||||||
}
|
|
||||||
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); // write preview
|
|
||||||
/*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("getmap").addEventListener("click", function() {
|
|
||||||
var zoom = map.getZoom();
|
|
||||||
var centerlatlon = map.getBounds().getCenter();
|
|
||||||
var center = map.project(centerlatlon, zoom).divideBy(OSMTILESIZE);
|
|
||||||
// Reason for 16px adjustment below not 100% known, but it seems to
|
|
||||||
// align everything perfectly: https://github.com/espruino/BangleApps/issues/984
|
|
||||||
var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE) + 16;
|
|
||||||
var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE) + 16;
|
|
||||||
center = center.floor(); // make sure we're in the middle of a tile
|
|
||||||
// JS version of Bangle.js's projection
|
|
||||||
function bproject(lat, lon) {
|
|
||||||
const degToRad = Math.PI / 180; // degree to radian conversion
|
|
||||||
const latMax = 85.0511287798; // clip latitude to sane values
|
|
||||||
const R = 6378137; // earth radius in m
|
|
||||||
if (lat > latMax) lat=latMax;
|
|
||||||
if (lat < -latMax) lat=-latMax;
|
|
||||||
var s = Math.sin(lat * degToRad);
|
|
||||||
return new L.Point(
|
|
||||||
(R * lon * degToRad),
|
|
||||||
(R * Math.log((1 + s) / (1 - s)) / 2)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// Work out scale factors (how much from Bangle.project does one pixel equate to?)
|
|
||||||
var pc = map.unproject(center.multiplyBy(OSMTILESIZE), zoom);
|
|
||||||
var pd = map.unproject(center.multiplyBy(OSMTILESIZE).add({x:1,y:0}), zoom);
|
|
||||||
var bc = bproject(pc.lat, pc.lng)
|
|
||||||
var bd = bproject(pd.lat, pd.lng)
|
|
||||||
var scale = bc.distanceTo(bd);
|
|
||||||
|
|
||||||
// test
|
|
||||||
/*var p = bproject(centerlatlon.lat, centerlatlon.lng);
|
|
||||||
var q = bproject(mylat, mylon);
|
|
||||||
var testPt = {
|
|
||||||
x : (q.x-p.x)/scale + (MAPSIZE/2),
|
|
||||||
y : (MAPSIZE/2) - (q.y-p.y)/scale
|
|
||||||
};*/
|
|
||||||
|
|
||||||
var tileGetters = [];
|
|
||||||
// Render everything to a canvas...
|
|
||||||
var canvas = document.getElementById("maptiles");
|
|
||||||
canvas.style.display="";
|
|
||||||
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);
|
|
||||||
/*if (testPt) {
|
|
||||||
ctx.fillStyle="green";
|
|
||||||
ctx.fillRect(testPt.x-1, testPt.y-5, 3,10);
|
|
||||||
ctx.fillRect(testPt.x-5, testPt.y-1, 10,3);
|
|
||||||
}*/
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
bangleTileLayer._tileZoom = previewTileLayer._tileZoom;
|
|
||||||
img.src = bangleTileLayer.getTileUrl(coords);
|
|
||||||
})(i,j);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Promise.all(tileGetters).then(() => {
|
|
||||||
document.getElementById("uploadbuttons").style.display="";
|
|
||||||
mapFiles = tilesLoaded(ctx, canvas.width, canvas.height);
|
|
||||||
mapFiles.unshift({name:"seachart.json",content:JSON.stringify({
|
|
||||||
imgx : canvas.width,
|
|
||||||
imgy : canvas.height,
|
|
||||||
tilesize : TILESIZE,
|
|
||||||
scale : scale, // how much of Bangle.project(latlon) does one pixel equate to?
|
|
||||||
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>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
{
|
|
||||||
"id": "openseachart",
|
|
||||||
"name": "OpenSeaChart",
|
|
||||||
"shortName": "Openseachart",
|
|
||||||
"version": "0.1",
|
|
||||||
"description": "Display sea chart"
|
|
||||||
"icon": "app.png",
|
|
||||||
"tags": "outdoors,gps,osm",
|
|
||||||
"supports": ["BANGLEJS","BANGLEJS2"],
|
|
||||||
"custom": "custom.html",
|
|
||||||
"customConnect": true,
|
|
||||||
"storage": [
|
|
||||||
{"name":"openseachart","url":"openseachart.js"},
|
|
||||||
{"name":"openseachart.app.js","url":"app.js"},
|
|
||||||
{"name":"openseachart.img","url":"app-icon.js","evaluate":true}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
/* OpenStreetMap plotting module.
|
|
||||||
|
|
||||||
Usage:
|
|
||||||
|
|
||||||
var m = require("openseachart");
|
|
||||||
// m.lat/lon are now the center of the loaded map
|
|
||||||
m.draw(); // draw centered on the middle of the loaded map
|
|
||||||
|
|
||||||
// plot gps position on map
|
|
||||||
Bangle.on('GPS',function(f) {
|
|
||||||
if (!f.fix) return;
|
|
||||||
var p = m.latLonToXY(fix.lat, fix.lon);
|
|
||||||
g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
|
|
||||||
});
|
|
||||||
|
|
||||||
// recenter and redraw map!
|
|
||||||
function center() {
|
|
||||||
m.lat = fix.lat;
|
|
||||||
m.lon = fix.lon;
|
|
||||||
m.draw();
|
|
||||||
}
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
var map = require("Storage").readJSON("openseachart.json");
|
|
||||||
map.center = Bangle.project({lat:map.lat,lon:map.lon});
|
|
||||||
exports.map = map;
|
|
||||||
exports.lat = map.lat; // actual position of middle of screen
|
|
||||||
exports.lon = map.lon; // actual position of middle of screen
|
|
||||||
var m = exports;
|
|
||||||
|
|
||||||
exports.draw = function() {
|
|
||||||
var s = require("Storage");
|
|
||||||
var cx = g.getWidth()/2;
|
|
||||||
var cy = g.getHeight()/2;
|
|
||||||
var p = Bangle.project({lat:m.lat,lon:m.lon});
|
|
||||||
var ix = (p.x-map.center.x)/map.scale + (map.imgx/2) - cx;
|
|
||||||
var iy = (map.center.y-p.y)/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("openseachart-"+ttx+"-"+tty+".img");
|
|
||||||
if (img) g.drawImage(img,x,y);
|
|
||||||
else g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1).drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1).drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/// Convert lat/lon to pixels on the screen
|
|
||||||
exports.latLonToXY = function(lat, lon) {
|
|
||||||
var p = Bangle.project({lat:m.lat,lon:m.lon});
|
|
||||||
var q = Bangle.project({lat:lat, lon:lon});
|
|
||||||
var cx = g.getWidth()/2;
|
|
||||||
var cy = g.getHeight()/2;
|
|
||||||
return {
|
|
||||||
x : (q.x-p.x)/map.scale + cx,
|
|
||||||
y : cy - (q.y-p.y)/map.scale
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/// Given an amount to scroll in pixels on the screen, adjust the lat/lon of the map to match
|
|
||||||
exports.scroll = function(x,y) {
|
|
||||||
var a = Bangle.project({lat:this.lat,lon:this.lon});
|
|
||||||
var b = Bangle.project({lat:this.lat+1,lon:this.lon+1});
|
|
||||||
this.lon += x * this.map.scale / (a.x-b.x);
|
|
||||||
this.lat -= y * this.map.scale / (a.y-b.y);
|
|
||||||
};
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Loading…
Reference in New Issue