Upload
@@ -94,20 +96,47 @@ TODO:
var TILELAYER = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var PREVIEWTILELAYER = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+ MAPSTYLES = {
+ "3bit" : {
+ layer : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ attribution: 'Map data ©
OpenStreetMap contributors',
+ img : { compression:false, output:"raw", mode:"3bit",diffusion:"bayer2"}
+ }, "8bit" : {
+ layer : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ attribution: 'Map data ©
OpenStreetMap contributors',
+ img : { compression:false, output:"raw", mode:"web" }
+ }, "1bit" : {
+ layer : 'https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png',
+ attribution: '©
Stadia Maps ©
Stamen Design ©
OpenMapTiles ©
OpenStreetMap contributors',
+ img : { compression:false, output:"raw", mode:"1bit",inverted:true }
+ }
+ };
+
var loadedMaps = [];
// Tiles used for Bangle.js itself
- var bangleTileLayer = L.tileLayer(TILELAYER, {
- maxZoom: 18,
- attribution: 'Map data ©
OpenStreetMap contributors'
- });
+ var bangleTileLayer;
// Tiles used for the may the user sees (faster)
- var previewTileLayer = L.tileLayer(PREVIEWTILELAYER, {
- maxZoom: 18,
- attribution: 'Map data ©
OpenStreetMap contributors'
- });
+ var previewTileLayer;
+ // Currently selected version of MAPSTYLES
+ var currentStyle;
+
// Could optionally overlay trails: https://wiki.openstreetmap.org/wiki/Tiles
+
+ function createMapLayers(style) {
+ currentStyle = style;
+ bangleTileLayer = L.tileLayer(style.layer, {
+ maxZoom: 18,
+ attribution: style.attribution
+ });
+ previewTileLayer = L.tileLayer(style.layer, {
+ maxZoom: 18,
+ attribution: style.attribution
+ });
+ }
+ createMapLayers(MAPSTYLES["3bit"]);
+
// 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});
previewTileLayer.addTo(map);
@@ -130,10 +159,11 @@ TODO:
if (device && device.info && device.info.g) {
// On 3 bit devices, 3 bit is the best way
// still allow 8 bit as it makes zoom out much nicer
- if (device.info.g.bpp==3) {
+ // ... but lets just default to 3 bit anyway now
+ /*if (device.info.g.bpp==3) {
document.getElementById("3bit").checked = true;
//document.getElementById("3bitdiv").style = "display:none";
- }
+ }*/
}
showLoadedMaps();
@@ -257,17 +287,7 @@ TODO:
// convert canvas into an actual tiled image file
function tilesLoaded(ctx, width, height, mapImageFile) {
- var options = {
- compression:false, output:"raw",
- mode:"web"
- };
- if (document.getElementById("3bit").checked) {
- options = {
- compression:false, output:"raw",
- mode:"3bit",
- diffusion:"bayer2"
- };
- }
+ var options = currentStyle.img; // compression options
/* Go through all the data beforehand and
turn the saturation up to maximum, so if thresholded to 3 bits it
works a lot better */
@@ -289,9 +309,9 @@ TODO:
options.width = TILESIZE;
options.height = TILESIZE;
var imgstr = imageconverter.RGBAtoString(rgba, options);
- if (document.getElementById("preview").checked) {
+ /*if (document.getElementById("preview").checked) {
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);*/
@@ -408,6 +428,14 @@ TODO:
});
});
+ document.getElementById("mapStyle").addEventListener("click", function() {
+ var style = document.getElementById("mapStyle").value;
+ if (!style in MAPSTYLES) return;
+ map.removeLayer(previewTileLayer);
+ createMapLayers(MAPSTYLES[style]);
+ previewTileLayer.addTo(map);
+ });
+
document.getElementById("upload").addEventListener("click", function() {
Util.showModal("Uploading...");
let promise = Promise.resolve();
diff --git a/apps/openstmap/metadata.json b/apps/openstmap/metadata.json
index 3c03e7087..5a55da45b 100644
--- a/apps/openstmap/metadata.json
+++ b/apps/openstmap/metadata.json
@@ -2,7 +2,7 @@
"id": "openstmap",
"name": "OpenStreetMap",
"shortName": "OpenStMap",
- "version": "0.30",
+ "version": "0.31",
"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",
"readme": "README.md",
"icon": "app.png",
diff --git a/apps/openstmap/openstmap.js b/apps/openstmap/openstmap.js
index eb1aeaf3c..0c8170635 100644
--- a/apps/openstmap/openstmap.js
+++ b/apps/openstmap/openstmap.js
@@ -73,6 +73,7 @@ exports.draw = function() {
}
var mx = g.getWidth();
var my = g.getHeight();
+ g.setColor(g.theme.fg).setBgColor(g.theme.bg); // reset draw colours
for (var x=ox,ttx=tx; x
{
remove: () => {
if (nameScroller) clearInterval(nameScroller);
Bangle.removeListener("swipe", onSwipe);
+ options.remove?.();
},
} as SetUIArg<"updown">,
dir => {
diff --git a/apps/promenu/metadata.json b/apps/promenu/metadata.json
index cf9b3bcff..87d961045 100644
--- a/apps/promenu/metadata.json
+++ b/apps/promenu/metadata.json
@@ -1,7 +1,7 @@
{
"id": "promenu",
"name": "Pro Menu",
- "version": "0.09",
+ "version": "0.10",
"description": "Replace the built in menu function. Supports Bangle.js 1 and Bangle.js 2.",
"icon": "icon.png",
"type": "bootloader",