2020-02-07 17:16:45 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2020-02-10 13:49:36 +00:00
|
|
|
<div id="tracks"></div>
|
2020-02-07 17:16:45 +00:00
|
|
|
|
2020-08-24 10:59:52 +00:00
|
|
|
<script src="../../core/lib/interface.js"></script>
|
2020-02-07 17:16:45 +00:00
|
|
|
<script>
|
2020-02-10 13:49:36 +00:00
|
|
|
var domTracks = document.getElementById("tracks");
|
|
|
|
|
|
|
|
|
|
function saveKML(track,title) {
|
|
|
|
|
var kml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
<kml xmlns="http://www.opengis.net/kml/2.2">
|
2020-02-13 09:32:18 +00:00
|
|
|
<Document>
|
|
|
|
|
<Placemark>
|
|
|
|
|
<name>${title}</name>
|
|
|
|
|
<LineString>
|
|
|
|
|
<coordinates>
|
|
|
|
|
${track.map(pt=>[pt.lon, pt.lat, pt.alt].join(",")).join("\n ")}
|
|
|
|
|
</coordinates>
|
|
|
|
|
</LineString>
|
|
|
|
|
</Placemark>
|
|
|
|
|
</Document>
|
2020-02-10 13:49:36 +00:00
|
|
|
</kml>`;
|
|
|
|
|
var a = document.createElement("a"),
|
|
|
|
|
file = new Blob([kml], {type: "application/vnd.google-earth.kml+xml"});
|
|
|
|
|
var url = URL.createObjectURL(file);
|
|
|
|
|
a.href = url;
|
|
|
|
|
a.download = title+".kml";
|
|
|
|
|
document.body.appendChild(a);
|
|
|
|
|
a.click();
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
document.body.removeChild(a);
|
|
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
|
}, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveGPX(track, title) {
|
|
|
|
|
var gpx = `<?xml version="1.0" encoding="UTF-8"?>
|
2020-02-13 09:32:18 +00:00
|
|
|
<gpx creator="Bangle.js" version="1.1">
|
|
|
|
|
<metadata>
|
|
|
|
|
<time>${track[0].date.toISOString()}</time>
|
|
|
|
|
</metadata>
|
|
|
|
|
<trk>
|
|
|
|
|
<name>${title}</name>
|
|
|
|
|
<trkseg>`;
|
2020-02-10 13:49:36 +00:00
|
|
|
track.forEach(pt=>{
|
|
|
|
|
gpx += `
|
2020-02-13 09:32:18 +00:00
|
|
|
<trkpt lat="${pt.lat}" lon="${pt.lon}">
|
|
|
|
|
<ele>${pt.alt}</ele>
|
|
|
|
|
<time>${pt.date.toISOString()}</time>
|
|
|
|
|
</trkpt>`;
|
2020-02-10 13:49:36 +00:00
|
|
|
});
|
|
|
|
|
gpx += `
|
2020-02-13 09:32:18 +00:00
|
|
|
</trkseg>
|
|
|
|
|
</trk>
|
|
|
|
|
</gpx>`;
|
2020-02-10 13:49:36 +00:00
|
|
|
var a = document.createElement("a"),
|
|
|
|
|
file = new Blob([gpx], {type: "application/gpx+xml"});
|
|
|
|
|
var url = URL.createObjectURL(file);
|
|
|
|
|
a.href = url;
|
|
|
|
|
a.download = title+".gpx";
|
|
|
|
|
document.body.appendChild(a);
|
|
|
|
|
a.click();
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
document.body.removeChild(a);
|
|
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
|
}, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function trackLineToObject(l, hasTrackNumber) {
|
|
|
|
|
var t = l.trim().split(",");
|
|
|
|
|
var n = hasTrackNumber ? 1 : 0;
|
|
|
|
|
var o = {
|
|
|
|
|
date : new Date(parseInt(t[n+0])),
|
|
|
|
|
lat : parseFloat(t[n+1]),
|
|
|
|
|
lon : parseFloat(t[n+2]),
|
|
|
|
|
alt : parseFloat(t[n+3])
|
|
|
|
|
};
|
|
|
|
|
if (hasTrackNumber)
|
|
|
|
|
o.number = t[0];
|
|
|
|
|
return o;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function downloadTrack(trackid, callback) {
|
2020-03-31 13:39:59 +00:00
|
|
|
Util.showModal("Downloading Track...");
|
|
|
|
|
Util.readStorageFile(`.gpsrc${trackid.toString(36)}`,data=>{
|
|
|
|
|
Util.hideModal();
|
|
|
|
|
var track = data.trim().split("\n").map(l=>trackLineToObject(l,false));
|
2020-02-10 13:49:36 +00:00
|
|
|
callback(track);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function getTrackList() {
|
2020-03-31 13:39:59 +00:00
|
|
|
Util.showModal("Loading Tracks...");
|
2020-02-10 13:49:36 +00:00
|
|
|
domTracks.innerHTML = "";
|
|
|
|
|
Puck.write(`\x10(function() {
|
2021-06-25 09:50:23 +00:00
|
|
|
Bluetooth.println("");
|
2020-02-10 13:49:36 +00:00
|
|
|
for (var n=0;n<36;n++) {
|
|
|
|
|
var f = require("Storage").open(".gpsrc"+n.toString(36),"r");
|
|
|
|
|
var l = f.readLine();
|
2021-03-16 10:32:56 +00:00
|
|
|
Bluetooth.println((l!==undefined) ? (n + "," + l.trim()) : "");
|
2020-02-10 13:49:36 +00:00
|
|
|
}
|
|
|
|
|
})()\n`,tracklist=>{
|
2021-03-15 08:53:00 +00:00
|
|
|
var trackLines = tracklist.trim().split("\n").filter(l=>l!="");
|
2020-02-10 13:49:36 +00:00
|
|
|
var html = `<div class="container">
|
|
|
|
|
<div class="columns">\n`;
|
|
|
|
|
trackLines.forEach(l => {
|
|
|
|
|
var track = trackLineToObject(l, true /*has track number*/);
|
|
|
|
|
html += `
|
|
|
|
|
<div class="column col-12">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title h5">Track ${track.number}</div>
|
|
|
|
|
<div class="card-subtitle text-gray">${track.date.toString().substr(0,24)}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-image">
|
|
|
|
|
<iframe
|
|
|
|
|
width="100%"
|
|
|
|
|
height="250"
|
|
|
|
|
frameborder="0" style="border:0"
|
|
|
|
|
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBxTcwrrVOh2piz7EmIs1Xn4FsRxJWeVH4&q=${track.lat},${track.lon}&zoom=10" allowfullscreen>
|
|
|
|
|
</iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body"></div>
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
<button class="btn btn-primary" trackid="${track.number}" task="downloadkml">Download KML</button>
|
|
|
|
|
<button class="btn btn-primary" trackid="${track.number}" task="downloadgpx">Download GPX</button>
|
|
|
|
|
<button class="btn btn-default" trackid="${track.number}" task="delete">Delete</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
});
|
|
|
|
|
if (trackLines.length==0) {
|
|
|
|
|
html += `
|
|
|
|
|
<div class="column col-12">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title h5">No tracks</div>
|
|
|
|
|
<div class="card-subtitle text-gray">No GPS tracks found</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
html += `
|
|
|
|
|
</div>
|
|
|
|
|
</div>`;
|
|
|
|
|
domTracks.innerHTML = html;
|
2020-03-31 13:39:59 +00:00
|
|
|
Util.hideModal();
|
2020-02-10 13:49:36 +00:00
|
|
|
var buttons = domTracks.querySelectorAll("button");
|
|
|
|
|
for (var i=0;i<buttons.length;i++) {
|
|
|
|
|
buttons[i].addEventListener("click",event => {
|
|
|
|
|
var button = event.currentTarget;
|
2020-03-09 12:28:04 +00:00
|
|
|
var trackid = parseInt(button.getAttribute("trackid"));
|
2020-02-10 13:49:36 +00:00
|
|
|
var task = button.getAttribute("task");
|
|
|
|
|
if (task=="delete") {
|
2020-03-31 13:39:59 +00:00
|
|
|
Util.showModal("Deleting Track...");
|
|
|
|
|
Util.eraseStorageFile(`.gpsrc${trackid.toString(36)}`,()=>{
|
|
|
|
|
Util.hideModal();
|
2020-02-10 13:49:36 +00:00
|
|
|
getTrackList();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (task=="downloadkml") {
|
|
|
|
|
downloadTrack(trackid, track => saveKML(track, `Bangle.js Track ${trackid}`));
|
|
|
|
|
}
|
|
|
|
|
if (task=="downloadgpx") {
|
|
|
|
|
downloadTrack(trackid, track => saveGPX(track, `Bangle.js Track ${trackid}`));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onInit() {
|
|
|
|
|
getTrackList();
|
|
|
|
|
}
|
2020-02-07 17:16:45 +00:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
