diff --git a/apps.json b/apps.json index e02549843..099209894 100644 --- a/apps.json +++ b/apps.json @@ -1955,11 +1955,12 @@ "id": "openstmap", "name": "OpenStreetMap", "shortName": "OpenStMap", - "version": "0.10", - "description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are", + "version": "0.11", + "description": "Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are. Once installed this also adds map functionality to `GPS Recorder` and `Recorder` apps", "icon": "app.png", - "tags": "outdoors,gps", + "tags": "outdoors,gps,osm", "supports": ["BANGLEJS","BANGLEJS2"], + "screenshots": [{"url":"screenshot.png"}], "custom": "custom.html", "customConnect": true, "storage": [ diff --git a/apps/openstmap/ChangeLog b/apps/openstmap/ChangeLog index 69c34ed4e..6cb9d061e 100644 --- a/apps/openstmap/ChangeLog +++ b/apps/openstmap/ChangeLog @@ -8,3 +8,5 @@ 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 diff --git a/apps/openstmap/app.js b/apps/openstmap/app.js index c33acd8ad..62597ca20 100644 --- a/apps/openstmap/app.js +++ b/apps/openstmap/app.js @@ -25,11 +25,11 @@ function drawMarker() { var fix; Bangle.on('GPS',function(f) { fix=f; - g.reset().clearRect(0,y1,240,y1+8).setFont("6x8").setFontAlign(0,0); + 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,120,y1 + 4); + g.drawString(txt,g.getWidth()/2,y1 + 4); drawMarker(); }); Bangle.setGPSPower(1, "app"); diff --git a/apps/openstmap/custom.html b/apps/openstmap/custom.html index eeb148f54..56dea1188 100644 --- a/apps/openstmap/custom.html +++ b/apps/openstmap/custom.html @@ -132,8 +132,10 @@ TODO: var zoom = map.getZoom(); var centerlatlon = map.getBounds().getCenter(); var center = map.project(centerlatlon, zoom).divideBy(OSMTILESIZE); - var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE); - var oy = Math.round((center.y - Math.floor(center.y)) * 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) { @@ -155,8 +157,15 @@ TODO: var bd = bproject(pd.lat, pd.lng) var scale = bc.distanceTo(bd); - var tileGetters = []; + // 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=""; @@ -173,6 +182,11 @@ TODO: 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(); }; })); diff --git a/apps/openstmap/screenshot.png b/apps/openstmap/screenshot.png new file mode 100644 index 000000000..2895b562e Binary files /dev/null and b/apps/openstmap/screenshot.png differ