mirror of https://github.com/espruino/BangleApps
add beer compass loader
Gordon Williams
parent
eb71f80ef2
commit
12281bc629
12
apps.json
12
apps.json
|
|
@ -95,5 +95,17 @@
|
|||
{"name":"+qrcode"},
|
||||
{"name":"=qrcode"}
|
||||
]
|
||||
},
|
||||
{ "id": "beer",
|
||||
"name": "Beer Compass",
|
||||
"icon": "beercompass.png",
|
||||
"description": "Uploads all the pubs in an area onto your watch, so it can always point you at the nearest one",
|
||||
"tags": "",
|
||||
"custom": "beercompass.html",
|
||||
"storage": [
|
||||
{"name":"-beer"},
|
||||
{"name":"+beer"},
|
||||
{"name":"=beer"}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="../css/spectre.min.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<div id="controls">
|
||||
<p>Find the area of interest</p>
|
||||
<p>Click <button id="pubfinder" class="btn btn-primary">Find Pubs</button></p>
|
||||
<p>If ok, Click <button id="upload" class="btn btn-primary">Upload</button></p>
|
||||
</div>
|
||||
|
||||
<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="https://unpkg.com/osmtogeojson@2.2.12/osmtogeojson.js"></script>
|
||||
|
||||
<script>
|
||||
/*
|
||||
|
||||
https://overpass-turbo.eu/ to check queries.
|
||||
Run:
|
||||
|
||||
node
|
||||
({{bbox}});
|
||||
out;
|
||||
|
||||
Over the area you're interested in, click on the POI and find out
|
||||
what you need to search for, eg.
|
||||
|
||||
node
|
||||
[amenity=pub]
|
||||
({{bbox}});
|
||||
out;
|
||||
|
||||
*/
|
||||
|
||||
var map = L.map('map').locate({setView: true, maxZoom: 16});
|
||||
var features = [];
|
||||
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
||||
}).addTo(map);
|
||||
function buildOverpassApiUrl(map, overpassQuery) {
|
||||
var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast();
|
||||
var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
|
||||
var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
|
||||
var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
|
||||
var query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
|
||||
var baseUrl = 'http://overpass-api.de/api/interpreter';
|
||||
var resultUrl = baseUrl + query;
|
||||
return resultUrl;
|
||||
}
|
||||
|
||||
document.getElementById("pubfinder").addEventListener("click", function() {
|
||||
//var overpassApiUrl = buildOverpassApiUrl(map, "highway=bus_stop");
|
||||
var overpassApiUrl = buildOverpassApiUrl(map, "amenity=pub");
|
||||
var req = new XMLHttpRequest();
|
||||
req.responseType = 'json';
|
||||
req.onreadystatechange = function() {
|
||||
console.log("XMLHttpRequest", this.readyState);
|
||||
if (this.readyState == 4) {
|
||||
var osmDataAsJson = req.response;
|
||||
features = [];
|
||||
if (osmDataAsJson.elements) {
|
||||
osmDataAsJson.elements.forEach(function(el) {
|
||||
if (el.type!="node") return;
|
||||
features.push({lat:el.lat, lon:el.lon,name:el.tags.name});
|
||||
});
|
||||
}
|
||||
|
||||
var resultAsGeojson = osmtogeojson(osmDataAsJson);
|
||||
var resultLayer = L.geoJson(resultAsGeojson, {
|
||||
style: function (feature) {
|
||||
return {color: "#ff0000"};
|
||||
},
|
||||
filter: function (feature, layer) {
|
||||
var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === "Polygon");
|
||||
if (isPolygon) {
|
||||
feature.geometry.type = "Point";
|
||||
var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
|
||||
feature.geometry.coordinates = [ polygonCenter.lat, polygonCenter.lng ];
|
||||
}
|
||||
return true;
|
||||
},
|
||||
onEachFeature: function (feature, layer) {
|
||||
var popupContent = "";
|
||||
popupContent = popupContent + "<dt>@id</dt><dd>" + feature.properties.type + "/" + feature.properties.id + "</dd>";
|
||||
var keys = Object.keys(feature.properties.tags);
|
||||
keys.forEach(function (key) {
|
||||
popupContent = popupContent + "<dt>" + key + "</dt><dd>" + feature.properties.tags[key] + "</dd>";
|
||||
});
|
||||
popupContent = popupContent + "</dl>"
|
||||
layer.bindPopup(popupContent);
|
||||
}
|
||||
}).addTo(map);
|
||||
}
|
||||
};
|
||||
req.open("GET", overpassApiUrl, true);
|
||||
req.send();
|
||||
});
|
||||
document.getElementById("upload").addEventListener("click", function() {
|
||||
var app = `var features = ${JSON.stringify(features)};
|
||||
var img_nofix = require("heatshrink").decompress(atob("mUyxH+ACYhJDygtYGsqLVF8u02gziGBoyhQ5gwDGRozRGCQydGCgybGCwyZC5gAaGPQwnGRAwpGQ4xwGFYyFDKsrlYxYDCsBmUyg4yXLyUsFwMyq1WAgUsNCRjUmVXroAEq8yMbcllkskwCEkplDmQwDq0sC54xEHQ9RqQAGqIwCFgOBAASYBSgMBltRAA0sgJsOGJeBxAAGwMrgIXIloxOJYNSvl8CwIDCqMBlYxNC4wxQDIOCwVYDIIDBGJ9YwV8rADBwRJCSqAVCAYaVMC4oxCPYYxQSo4xMSpIxPY4T5HY54XIMbIxKgwXKfKjhEllWGJNWlgXJGLNXruCGI+CrtXGKP+GJB9HMZ6VO/wxJcI8lfJclfKAxKfJEAGJIXLGKSvBWYQZCMZbfEqTHBGJYyFfIo1DGJ4tDGJQwCGJB9IMZyVNGIYyEfJQxPfJgwEMgoZJgAxMltRAA0tGJQyEksslkmAQklGINXxDTBFwIDCq8rC4YACC4gwJMowAJldWAAwwBABowIGJ4AYGJIymGBQylGBgyjGBwyhGCAzeF6YycGCwzYF7IzVF7o1PDqYA=="));
|
||||
var img_fix = require("heatshrink").decompress(atob("mUyxH+ACYhJDygtYGsqLVF94zaDYkq6wAOlQyYJo2A63VAAIoC2m0GI16My5/H5/V64ABGQIwBGQ+rTKwWHkhiBGIYwDGQ3VZioVIqoiBGAJhEGRFPGSYTIYwQxCGA4yFqodJGKeqSgQwJGQmkGKQSJfAYwLGQfPDxQwRgHVfAi/EAA4xLGQwRLYwb5BABoxQCBcA43G5wABAgIAMEBgxQ0QxB54xB5gAG4xgBBYOiGJ4PMGInPGIhcCGIt4EJoxPvHM5oxBGAnO6xrCGoXMqgxdpwxD5qQFL4QADlQxdgAhBGILIDMYoADEBwwPgCHBfQzHDAAb4NACTIIAA74OACLIIMo7GOACQoBZAoHBHQPNA4QwggGiZBA5B54HBY0DIKMYtUGMMqFYLIGY4jGhZAr6FAAYwiZAgxIY0TIFfQgADvAfR/zISGJTGR/wxRkj6CGJBiSGKL6DGP4xOGSKVDGAwxRGAQxU5oxcGR75DGJEkGCYxPlXM5vPGA/MlQxUGR1OGIL4I5lOGCgyOqgxBShHMqgwVGJt4GJd4GKwyMvHG5vGABAxMGBQyM1mtABWsGC4yLGBYABGDAyKGKwwQGZKVUF6b/OABowWGbAvZGaovdGp4dTA"));
|
||||
|
||||
// https://github.com/Leaflet/Leaflet/blob/master/src/geo/projection/Projection.SphericalMercator.js
|
||||
function project(latlong) {
|
||||
var d = Math.PI / 180,
|
||||
max = 85.0511287798,
|
||||
R = 6378137, // earth radius in m
|
||||
lat = Math.max(Math.min(max, latlong.lat), -max),
|
||||
sin = Math.sin(lat * d);
|
||||
return {x:R * latlong.lon * d,
|
||||
y:R * Math.log((1 + sin) / (1 - sin)) / 2};
|
||||
}
|
||||
|
||||
features.forEach(function(f) {
|
||||
f.p = project(f);
|
||||
});
|
||||
var fix = {fix:false,satellites:0};
|
||||
var nearest = undefined;
|
||||
var nearestangle = 0;
|
||||
var nearestdist = 0;
|
||||
|
||||
Bangle.on('GPS', function(f) {
|
||||
fix = f;
|
||||
fix.p = project(fix);
|
||||
nearest = undefined;
|
||||
nearestangle = 0;
|
||||
nearestdist = 5000; // 5km
|
||||
features.forEach(function(f) {
|
||||
var dx = f.p.x - fix.p.x;
|
||||
var dy = f.p.y - fix.p.y;
|
||||
var d = Math.sqrt(dx*dx + dy*dy);
|
||||
if (d<nearestdist) {
|
||||
nearestdist = d;
|
||||
nearest = f;
|
||||
}
|
||||
});
|
||||
if (nearest) {
|
||||
var dx = nearest.p.x - fix.p.x;
|
||||
var dy = nearest.p.y - fix.p.y;
|
||||
nearestangle = Math.atan2(dy,dx);
|
||||
}
|
||||
});
|
||||
|
||||
Bangle.on('mag', function(m) {
|
||||
if (!Bangle.isLCDOn()) return;
|
||||
var headingrad = m.heading*Math.PI/180; // in radians
|
||||
if (!isFinite(headingrad)) headingrad=0;
|
||||
if (nearest)
|
||||
g.drawImage(img_fix,120,120,{
|
||||
rotate: (Math.PI/2)+headingrad-nearestangle,
|
||||
scale:3,
|
||||
});
|
||||
else
|
||||
g.drawImage(img_nofix,120,120,{
|
||||
rotate: headingrad,
|
||||
scale:2,
|
||||
});
|
||||
g.clearRect(60,0,180,24);
|
||||
g.setFontAlign(0,0);
|
||||
g.setFont("6x8");
|
||||
if (fix.fix) {
|
||||
g.drawString(nearest ? nearest.name : "---",120,4);
|
||||
g.setFont("6x8",2);
|
||||
g.drawString(nearest ? Math.round(nearestdist)+"m" : "---",120,16);
|
||||
} else {
|
||||
g.drawString(fix.satellites+" satellites",120,4);
|
||||
}
|
||||
});
|
||||
Bangle.setCompassPower(1);
|
||||
Bangle.setGPSPower(1);
|
||||
g.clear();`;
|
||||
var json = JSON.stringify({
|
||||
name:"Beer Compass",
|
||||
icon:"*beer",
|
||||
src:"-beer"
|
||||
});
|
||||
var icon = `require("heatshrink").decompress(atob("mEwghC/AB0O/4AG8AXNgYXHmAXl94XH+AXNn4XH/wXW+YX/C6oWHAAIXN7sz9vdAAoXN9sznvuAAXf/vuC53jC4Xd7wXQ93jn3u9vv9vt7wXT/4tBAgIXQ7wvCC4PgC5sO6czIQJfBC6PumaPDC6wwCC50NYAJcBVgIDBCxrAFbgYXP7yoDF6TADL4YXPVAIXCRyAXC7wXW9zwBC6cNC9zABC4gWQC653CR4fQC6x3TF6gXXI4M9d6wAEC9EN73dAAZfQgczAAkwC/4XXAH4"))`;
|
||||
|
||||
|
||||
window.postMessage({
|
||||
id : "beer",
|
||||
|
||||
storage:[
|
||||
{name:"-beer", content:app},
|
||||
{name:"+beer", content:json},
|
||||
{name:"*beer", content:icon, evaluate:true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -55,7 +55,7 @@ g.setColor(1,1,1);
|
|||
storage:[
|
||||
{name:"-qrcode", content:app},
|
||||
{name:"+qrcode", content:json},
|
||||
{name:"*qrcode", content:icon, "evaluate":true},
|
||||
{name:"*qrcode", content:icon, evaluate:true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue