331 lines
10 KiB
JavaScript
331 lines
10 KiB
JavaScript
var m = require("openstmap");
|
|
var R;
|
|
var fix = {};
|
|
var mapVisible = false;
|
|
var settings = require("Storage").readJSON("openstmap.json",1)||{};
|
|
var HASWIDGETS = !settings.noWidgets;
|
|
var plotTrack;
|
|
let checkMapPos = false; // Do we need to check the if the coordinates we have are valid
|
|
var startDrag = undefined; //< to detect a short tap when zooming
|
|
var hasRecorder = require("Storage").read("recorder")!=undefined; // do we have the recorder library?
|
|
var hasWaypoints = require("Storage").read("waypoints")!=undefined; // do we have the recorder library?
|
|
var labelFont = g.getFonts().includes("17")?"17":"6x8:2";
|
|
var imgLoc, ovLoc, ovSize = 30; /*Math.ceil(Math.sqrt(imgLoc[0]*imgLoc[0]+imgLoc[1]*imgLoc[1]))*/
|
|
var locOnscreen = undefined; // is the GPS location currently onscreen?
|
|
|
|
if (Bangle.setLCDOverlay) {
|
|
// Icon for current location + direction (icon_gps.png, 2 bit bw, transparent)
|
|
imgLoc = atob("EBiCAVVQBVVVU8VVVVPFVVVDwVVVT/FVVU/xVVUP8FVVP/xVVT/8VVQ//BVU//8VVP//FVD//wVT///FU///xUP//8FP///xD/AP8D/BQ/w/BVD8PxVU/AAVVABVVVVVVVVVVQ==");
|
|
// overlay buffer for current location, a bit bigger then image so we can rotate
|
|
ovLoc = Graphics.createArrayBuffer(ovSize,ovSize,2,{msb:true});
|
|
}
|
|
|
|
if (settings.lat !== undefined && settings.lon !== undefined && settings.scale !== undefined) {
|
|
// restore last view
|
|
m.lat = settings.lat;
|
|
m.lon = settings.lon;
|
|
m.scale = settings.scale;
|
|
checkMapPos = true;
|
|
}
|
|
if (settings.dirSrc === undefined) {
|
|
settings.dirSrc = 1; // Default=GPS
|
|
}
|
|
|
|
// Redraw the whole page
|
|
function redraw() {
|
|
// ensure we do cancel track drawing
|
|
if (plotTrack && plotTrack.stop)
|
|
plotTrack.stop();
|
|
// set clip rect so we don't overwrite widgets
|
|
g.setClipRect(R.x,R.y,R.x2,R.y2);
|
|
const count = m.draw();
|
|
if (checkMapPos && count === 0) {
|
|
// no map at these coordinates, lets try again with first map
|
|
m.lat = m.map.lat;
|
|
m.lon = m.map.lon;
|
|
m.scale = m.map.scale;
|
|
m.draw();
|
|
}
|
|
checkMapPos = false;
|
|
drawPOI();
|
|
drawMarker();
|
|
drawLocation();
|
|
// if track drawing is enabled...
|
|
if (settings.drawTrack) {
|
|
if (HASWIDGETS && WIDGETS["gpsrec"] && WIDGETS["gpsrec"].plotTrack) {
|
|
g.setColor("#f00").flip(); // force immediate draw on double-buffered screens - track will update later
|
|
WIDGETS["gpsrec"].plotTrack(m);
|
|
}
|
|
if (hasRecorder) {
|
|
g.setColor("#f00").flip(); // force immediate draw on double-buffered screens - track will update later
|
|
plotTrack = require("recorder").plotTrack(m, { async : true, callback : function() {
|
|
plotTrack = undefined;
|
|
}});
|
|
}
|
|
}
|
|
g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
|
|
}
|
|
|
|
// Draw the POIs
|
|
function drawPOI() {
|
|
if (!hasWaypoints) return;
|
|
let waypoints;
|
|
try {
|
|
waypoints = require("waypoints").load();
|
|
} catch (ex) {
|
|
// Waypoints module not available.
|
|
return;
|
|
}
|
|
if (!waypoints) return;
|
|
g;
|
|
var img = atob("ERnCAQD4/////x8AVWqqVVWoAKlVoAAClaAAAClgAqACaAJWAKgCVWAKAJVYAoAlVgCoAlYApgAqACVgAAApWAAACVWAAApVYAACVVYAApVVgACVVVgApVVWACVVVeAtVVXcDdVV3s7dVd3i3dVd3t3VVd3d1UA="); // icon_place.png optimal 2 bit + transparent
|
|
g.setFont(labelFont).setFontAlign(-1,0);
|
|
waypoints.forEach((wp, idx) => {
|
|
if (wp.lat === undefined || wp.lon === undefined) return;
|
|
var p = m.latLonToXY(wp.lat, wp.lon);
|
|
g.setColor("#fff").drawImage(img, p.x-8, p.y-22);
|
|
g.setColor(0).drawString(wp.name, p.x+8, p.y);
|
|
});
|
|
}
|
|
|
|
function isInside(rect, e, w, h) {
|
|
return e.x-w/2>=rect.x && e.x+w/2<rect.x+rect.w
|
|
&& e.y-h/2>=rect.y && e.y+h/2<=rect.y+rect.h;
|
|
}
|
|
|
|
// Draw the location & direction marker for where we are
|
|
function drawMarker() {
|
|
if (!fix.fix || !settings.drawMarker) return;
|
|
var p = m.latLonToXY(fix.lat, fix.lon);
|
|
if (isInside(R, p, 4, 4)) { // avoid drawing over widget area
|
|
g.setColor(1,0,0);
|
|
g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
|
|
}
|
|
}
|
|
|
|
// Draw current location+direction with LCD Overlay (Bangle.js 2 only)
|
|
function drawLocation() {
|
|
if (!Bangle.setLCDOverlay) {
|
|
return; // Overlay not supported
|
|
}
|
|
|
|
if (!fix.fix || !mapVisible || settings.dirSrc === 0) {
|
|
if (this.hasOverlay) {
|
|
Bangle.setLCDOverlay(); // clear if map is not visible or no fix
|
|
this.hasOverlay = false;
|
|
}
|
|
return;
|
|
}
|
|
|
|
var p = m.latLonToXY(fix.lat, fix.lon);
|
|
ovLoc.setBgColor(1/*transparent*/).clear().setBgColor(0);
|
|
locOnscreen = isInside(R, p, ovSize, ovSize);
|
|
if (locOnscreen) { // if we're onscreen, draw the course
|
|
const angle = settings.dirSrc === 1 ? fix.course : Bangle.getCompass().heading;
|
|
if (isNaN(angle)) {
|
|
ovLoc.fillCircle(ovSize/2,ovSize/2,8);
|
|
} else {
|
|
ovLoc.drawImage(imgLoc, ovSize/2, ovSize/2, {rotate: angle*Math.PI/180});
|
|
}
|
|
} else { // if off-screen, draw a blue circle on the edge
|
|
var mx = R.w/2, my = R.h/2;
|
|
var dy = p.y - (R.y+my), dx = p.x - mx;
|
|
ovLoc.fillCircle(ovSize/2,ovSize/2,13);
|
|
if (Math.abs(dx)>Math.abs(dy)) {
|
|
dy = my * dy / Math.abs(dx);
|
|
dx = mx * Math.sign(dx);
|
|
} else {
|
|
if (dy<0) ovLoc.setBgColor(1/*transparent*/).clearRect(0,0,ovSize, (ovSize/2)-1); // so we don't overlap widgets!
|
|
dx = mx * dx / Math.abs(dy);
|
|
dy = my * Math.sign(dy);
|
|
}
|
|
p.x = mx+dx;
|
|
p.y = R.y+my+dy;
|
|
}
|
|
Bangle.setLCDOverlay({width:ovSize, height:ovSize,
|
|
bpp:ovLoc.getBPP(), transparent:1,
|
|
palette:new Uint16Array([g.toColor("#FFF"), 0, 0, g.toColor("#00F")]),
|
|
buffer:ovLoc.buffer
|
|
}, p.x-ovSize/2, p.y-ovSize/2);
|
|
|
|
this.hasOverlay = true;
|
|
}
|
|
|
|
Bangle.on('GPS',function(f) {
|
|
fix=f;
|
|
if (HASWIDGETS && WIDGETS["sats"]) WIDGETS["sats"].draw(WIDGETS["sats"]);
|
|
if (mapVisible) { // could be in settings
|
|
// Automatically scroll if GPS is going offscreen and not dragging
|
|
if (settings.autoscroll && fix.fix && startDrag===undefined) {
|
|
if (locOnscreen) { // if we were onscreen last time we drew the location
|
|
var p = m.latLonToXY(fix.lat, fix.lon); // where are we onscreen?
|
|
var sx=0,sy=0;
|
|
if (p.x<R.x+32) sx = 1;
|
|
if (p.y<R.y+32) sy = 1;
|
|
if (p.x>R.x2-32) sx = -1;
|
|
if (p.y>R.y2-32) sy = -1;
|
|
if (sx||sy) {
|
|
scroll(sx*80,sy*80);
|
|
redraw();
|
|
}
|
|
}
|
|
}
|
|
drawMarker();
|
|
drawLocation();
|
|
}
|
|
});
|
|
Bangle.setGPSPower(1, "app");
|
|
Bangle.setCompassPower(settings.dirSrc === 2, "openstmap");
|
|
|
|
if (HASWIDGETS) {
|
|
Bangle.loadWidgets();
|
|
if (!WIDGETS["gps"]) { // one GPS Widget is enough
|
|
WIDGETS["sats"] = { area:"tl", width:24, draw:w=>{
|
|
var sats = 0|fix.satellites;
|
|
g.reset().clearRect(w.x,w.y,w.x+23,w.y+23). drawImage(atob("EhPCAP//vmU0Cv++BUAAAANVQAAANVUAAANVVSoA/VVWqA/VqqqA/1VVoA/9VVkAP/VVlAP/1VVAP/9VVQD//WVUA//2VUA//9VUAX//1UBV///0BVX//ABVVAAABVVAAAA="), w.x,w.y+5); // 18x19
|
|
if (fix.fix) g.setFont("6x8").setFontAlign(1,-1).drawString(sats,w.x+23,w.y);
|
|
else g.setFont("4x6:2").setColor("#f00").setFontAlign(1,-1).drawString("X",w.x+23,w.y);
|
|
}};
|
|
}
|
|
Bangle.drawWidgets();
|
|
}
|
|
R = Bangle.appRect;
|
|
|
|
function writeSettings() {
|
|
settings.lat = m.lat;
|
|
settings.lon = m.lon;
|
|
settings.scale = m.scale;
|
|
require("Storage").writeJSON("openstmap.json",settings);
|
|
}
|
|
|
|
function showMenu() {
|
|
if (plotTrack && plotTrack.stop)
|
|
plotTrack.stop();
|
|
mapVisible = false;
|
|
drawLocation();
|
|
var menu = {
|
|
"":{title:/*LANG*/"Map"},
|
|
"< Back": ()=> showMap(),
|
|
};
|
|
// If we have a GPS fix, add a menu item to center it
|
|
if (fix.fix) menu[/*LANG*/"Center GPS"]=() =>{
|
|
m.lat = fix.lat;
|
|
m.lon = fix.lon;
|
|
showMap();
|
|
};
|
|
menu = Object.assign(menu, {
|
|
/*LANG*/"Zoom In": () =>{
|
|
m.scale /= 2;
|
|
showMap();
|
|
},
|
|
/*LANG*/"Zoom Out": () =>{
|
|
m.scale *= 2;
|
|
showMap();
|
|
},
|
|
/*LANG*/"Draw Track": {
|
|
value : !!settings.drawTrack,
|
|
onchange : v => { settings.drawTrack=v; writeSettings(); }
|
|
},
|
|
/*LANG*/"Draw cont. position": {
|
|
value : !!settings.drawMarker,
|
|
onchange : v => { settings.drawMarker=v; writeSettings(); }
|
|
},
|
|
/*LANG*/"Hide Widgets": {
|
|
value : !!settings.noWidgets,
|
|
onchange : v => { settings.noWidgets=v; writeSettings(); load("openstmap.app.js"); }
|
|
},
|
|
/*LANG*/"Autoscroll": {
|
|
value : !!settings.autoscroll,
|
|
onchange : v => { settings.autoscroll=v; writeSettings(); }
|
|
},
|
|
});
|
|
|
|
|
|
if (Bangle.setLCDOverlay) {
|
|
menu[/*LANG*/"Direction source"] = {
|
|
value: settings.dirSrc,
|
|
min: 0, max: 2,
|
|
format: v => [/*LANG*/"None", /*LANG*/"GPS", /*LANG*/"Compass"][v],
|
|
onchange: v => {
|
|
settings.dirSrc = v;
|
|
Bangle.setCompassPower(settings.dirSrc === 2, "openstmap");
|
|
writeSettings();
|
|
}
|
|
};
|
|
menu[/*LANG*/"Reset compass"] = () => {
|
|
Bangle.resetCompass();
|
|
showMap();
|
|
};
|
|
}
|
|
|
|
menu[/*LANG*/"Center Map"] = () =>{
|
|
m.lat = m.map.lat;
|
|
m.lon = m.map.lon;
|
|
m.scale = m.map.scale;
|
|
showMap();
|
|
};
|
|
|
|
// If we have the recorder widget, add a menu item to start/stop recording
|
|
if (hasRecorder) {
|
|
menu[/*LANG*/"Record"] = {
|
|
value : require("recorder").isRecording(),
|
|
onchange : isOn => {
|
|
E.showMessage(/*LANG*/"Please Wait...");
|
|
require("recorder").setRecording(isOn).then(showMap);
|
|
}
|
|
};
|
|
}
|
|
menu[/*LANG*/"Exit"] = () => load();
|
|
E.showMenu(menu);
|
|
}
|
|
|
|
function scroll(sx,sy) {
|
|
g.setClipRect(R.x,R.y,R.x2,R.y2);
|
|
g.scroll(sx,sy);
|
|
m.scroll(sx,sy);
|
|
g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1); // restore cliprect
|
|
}
|
|
|
|
function showMap() {
|
|
mapVisible = true;
|
|
g.reset().clearRect(R);
|
|
redraw();
|
|
Bangle.setUI({mode:"custom",drag:e=>{
|
|
if (plotTrack && plotTrack.stop) plotTrack.stop();
|
|
if (e.b) {
|
|
if (startDrag===undefined)
|
|
startDrag = getTime();
|
|
if (e.dx || e.dy) {
|
|
scroll(e.dx,e.dy);
|
|
}
|
|
drawLocation();
|
|
} else if (startDrag!==undefined) {
|
|
const delta = getTime() - startDrag;
|
|
startDrag = undefined;
|
|
if (delta < 0.2) { // short tap?
|
|
if (e.y > g.getHeight() - 32) { // at bottom egde?
|
|
if (e.x < 32) { // zoom in/out
|
|
m.scale /= 2;
|
|
g.reset().clearRect(R);
|
|
}
|
|
if (e.x > g.getHeight() - 32) {
|
|
m.scale *= 2;
|
|
g.reset().clearRect(R);
|
|
}
|
|
}
|
|
}
|
|
redraw();
|
|
}
|
|
}, btn: () => showMenu() });
|
|
}
|
|
|
|
|
|
if (m.maps.length === 0) {
|
|
E.showPrompt(/*LANG*/'Please upload a map first.', {buttons : {/*LANG*/"Ok":true}}).then(v => load());
|
|
} else {
|
|
showMap();
|
|
}
|
|
|
|
// Write settings on exit via button
|
|
setWatch(() => writeSettings(), BTN, { repeat: true, edge: "rising" });
|