Verified Commit 9854f29d authored by Sebastian Endres's avatar Sebastian Endres
Browse files

Add frontend with bootstrap, leaflet, heatmap.js, jquery

parent 28858b9e
static/assets
package-lock.json
yarn.lock
node_modules
.venv
__pycache__
{
"name": "webgps",
"version": "1.0.0",
"description": "Create WiFi Heatmaps using GPS from an external device",
"license": "unlicensed",
"private": true,
"dependencies": {
"bootstrap": "^4.1.3",
"heatmap.js": "^2.0.5",
"jquery": "^3.3.1",
"leaflet": "^1.3.3",
"leaflet.fullscreen": "^1.4.5",
"popper.js": "^1.14.4"
}
}
import datetime import datetime
from flask import Flask, request, send_from_directory, render_template
app = Flask(__name__) from flask import Flask, jsonify, render_template, request, send_from_directory
app = Flask(__name__, static_url_path='/static')
@app.route('/static/<path:path>')
def send_static(path):
return send_from_directory('static', path)
@app.route('/static/assets/<path:path>')
def send_node_modules(path):
return send_from_directory('node_modules', path)
@app.route("/") @app.route("/")
def hello(): def hello():
...@@ -14,5 +24,4 @@ def setpos(): ...@@ -14,5 +24,4 @@ def setpos():
time = time.strftime("%H:%M:%S") + ".%.2d" % round(time.microsecond/10000) time = time.strftime("%H:%M:%S") + ".%.2d" % round(time.microsecond/10000)
b = "%.2d%6.2f,%s" % (int(data["lat"])) b = "%.2d%6.2f,%s" % (int(data["lat"]))
print("$GPGGA,%s,BBBB.BBBB,b,LLLLL.LLLL,l,Q,NN,D.D,H.H,h,G.G,g,A.A,RRRR*PP" % (time)) print("$GPGGA,%s,BBBB.BBBB,b,LLLLL.LLLL,l,Q,NN,D.D,H.H,h,G.G,g,A.A,RRRR*PP" % (time))
return jsonify({'success': True})
return "a"
function log(message, cls) {
if (!cls) {
cls = 'info';
}
$('#output').prepend(`<p class="text-${cls}">${message}</p>`);
}
$(() => {
var lightLayer = L.tileLayer(
//'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
// 'https://osm.rrze.fau.de/osmhd/{z}/{x}/{y}.png',
'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png',
{
maxZoom: 22,
attribution: 'Map data &copy; <a href="http://osm.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}
);
window.heatmapLayer = new HeatmapOverlay({
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
radius: .0001,
maxOpacity: .8,
// scales the radius based on map zoom
scaleRadius: true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
useLocalExtrema: false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'val',
});
window.map = new L.Map(
'map',
{
center: new L.LatLng(49.6464, 10.61068),
zoom: 20,
layers: [lightLayer, window.heatmapLayer],
// layers: [lightLayer],
fullscreenControl: {
pseudoFullscreen: false
}
}
);
log('Click start', 'info');
window.polyline = L.polygon([], {color: 'red'}).addTo(window.map);
});
successCounter = 0;
errorCounter = 0;
function showPosition(position) {
$('#toggleBtn').text('Stop Logging');
var location = JSON.stringify({
lon: position.coords.longitude,
lat: position.coords.latitude,
acc: position.coords.accuracy,
t: position.timestamp
});
window.polyline.addLatLng(
[position.coords.latitude, position.coords.longitude],
);
window.map.setView(
[position.coords.latitude, position.coords.longitude],
);
$(location, 'info');
window.heatmapLayer.addData({
lat: position.coords.latitude,
lng: position.coords.longitude,
val: 5,
});
$.post({
url: '/set',
data: location,
success: () => {
successCounter += 1;
$('#successCounter').text(successCounter);
},
fail: (message) => {
console.error(message);
log(message, 'danger');
errorCounter += 1;
$('#errorCounter').text(errorCounter);
},
contentType: "application/json",
dataType: 'json',
});
}
var options = {
enableHighAccuracy: true,
// timeout: 1000,
maximumAge: 0
};
handle = null;
function toggle() {
if (handle == null) {
start();
} else {
stop();
}
}
function start(){
if(handle === null){
log('Asking for permission', 'warning');
handle = navigator.geolocation.watchPosition(showPosition, (positionError) => {
log(positionError.message, 'danger');
}, options);
}
}
function stop(){
navigator.geolocation.clearWatch(handle);
handle = null;
$('#toggleBtn').text('Start Logging');
}
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> <title></title>
<body> <link rel="stylesheet" type="text/css" href="static/assets/leaflet/dist/leaflet.css" />
<div id="demo"></div> <link rel="stylesheet" type="text/css" href="static/assets/leaflet.fullscreen/Control.FullScreen.css" />
<script> <link rel="stylesheet" type="text/css" href="static/assets/bootstrap/dist/css/bootstrap.min.css" />
var x = document.getElementById("demo"); </head>
function getLocation() { <body>
x.innerHTML="searching";
if (navigator.geolocation) {
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var j;
x.innerHTML = j = JSON.stringify({"lon": position.coords.longitude, "lat": position.coords.latitude, "acc": position.coords.accuracy, "t": position.timestamp});
var oReq = new XMLHttpRequest();
oReq.open("POST", "{{ url_for("setpos")}}" );
oReq.setRequestHeader('Content-type', 'application/json');
oReq.send(j);
}
var options = { <div class="container-fluid">
enableHighAccuracy: true, <div class="row bg-dark">
timeout: 1000, <div id="map" style="width:100vw;height:75vh"></div>
maximumAge: 0 </div>
}; </div>
<div class="container">
<div class="row">
<h1>
WebGPS
<button type="button" id="toggleBtn" class="btn btn-primary" onclick="toggle()">
Start Logging
</button>
</h1>
</div>
handle = null; <div class="row">
function start(){ <div class="card w-100">
if(handle === null){ <div class="card-header">
handle = navigator.geolocation.watchPosition(showPosition, console.error, options); <h4>
} Logging
} <span id="successCounter" class="badge badge-success">0</span>
function stop(){ <span id="errorCounter" class="badge badge-danger">0</span>
window.clearInterval(handle); </h4>
handle = null; </div>
} <div id="output" class="card-body">
</div>
</div>
</div>
</div>
</script> <script src="static/assets/popper.js/dist/umd/popper.min.js"></script>
<button onclick="start()" >Start</button> <script src="static/assets/jquery/dist/jquery.min.js"></script>
<button onclick="stop()" >Stop</button> <script src="static/assets/leaflet/dist/leaflet.js"></script>
</body> <script src="static/assets/leaflet.fullscreen/Control.FullScreen.js"></script>
<script src="static/assets/heatmap.js/build/heatmap.min.js"></script>
<script src="static/assets/heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js"></script>
<script src="static/index.js"></script>
</body>
</html> </html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment