XPUB
/
XPPL
53
0
Fork 2
Code Issues Pull Requests Releases Wiki Activity

compass?

Browse Source
geo
Alexander Roidl 1 year ago
parent d00b9d86e5
commit 1361e99993
4 changed files with 250 additions and 25 deletions
Show Stats Download Patch File Download Diff File

62
app/static/css/style.css
Unescape Escape View File

@ -59,11 +59,19 @@ audio{
border-bottom: 1px solid black;
}
.locations_list .row img{
max-height: 2em;
}
.locations_list .row div:first-of-type {
width: 5%;
}
.locations_list .row div:nth-of-type(2) {
width: 10%;
}
.locations_list .row div:last-of-type{
}
@ -254,6 +262,12 @@ margin: 4em 0;
box-sizing: border-box;
}
#distance_close{
font-family: 'Courier New', Courier, monospace;
}
#button_group button, #button_group select{
background-color: grey;
color: white;
@ -261,8 +275,56 @@ margin: 4em 0;
border: 1px solid white;
border-radius: 2em;
padding: 0.8em;
vertical-align: middle;
margin-top: 0.5em;
cursor: pointer;
}
#button_group select option{
padding: 0;
margin: 0;
vertical-align: middle;
}
#button_group img{
width: 1em;
margin-right: 0.2em;
vertical-align: middle;
}
/* COMPAS */
.compass {
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
/* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */
margin: auto;
}
.compass > .compass-circle,
.compass > .my-point {
position: absolute;
width: 90%;
height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out;
}
.compass > .compass-circle svg{
width: 100%;
height: 100%;
}
.start-btn {
margin-bottom: auto;
}

198
app/templates/home.html
Unescape Escape View File

@ -3,10 +3,20 @@
{% block main %}
<div id="home_content">
<p id="position"></p>
<div class="compass">
<div class="arrow"></div>
<div class="compass-circle"><svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path class="st0" d="M13,2.6l6.2,7.5L20,9.5l-7.5-9L5,9.5l0.8,0.6L12,2.6v21.9h1C13,24.5,13,2.6,13,2.6z"/></svg></div>
<div class="my-point"></div>
</div>
<!-- <h1 class="header" id="title">GEO</h1> -->
<div id="button_group">
<div id="distance_close">(distance to mosquito)</div>
<button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add hangout</button>
<button id="store_location" onclick="store_location()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
<button id="store_location_mosquito" onclick="store_location_mosquito()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
<button id="add_text" onclick="add_text()"><img src="/static/img/text.png" alt="">add message</button>
<button id="add_audio" onclick="add_audio()"><img src="/static/img/audio.png" alt=""> add audio</button>
@ -14,15 +24,17 @@
<option>Choose view</option>
<option value="all">show all entries</option>
<option value="closest">show closest mosquito</option>
<option value="me">my position</option>
</select>
</div>
</div>
<!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation -->
<!-- COMPASS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
<div class="locations_popup">
{% for location in locations %}
@ -43,12 +55,11 @@
{% block js %}
<script>
var locations;
var zoom_level = 18;
var markerArray = [];
var circleArray = [];
var mosquitoArray = [];
var view="closest";
function assign_data(data) {
@ -60,21 +71,21 @@
attributionControl:false,
zoomControl:false,
zoom: 2000,
zoomSnap: 0.1,
zoomSnap: 0.5,
animate: true,
// dragging: false,
maxZoom: 19,
minZoom: 10
//dragging: false,
//scrollWheelZoom: false,
}).setView([48.505, 1.09], zoom_level);
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// zoom:2,
// attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// }).addTo(map);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
zoom:2,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
locations.forEach(function (item, index) {
try {
var icon;
if(item.loc_type=="message"){
@ -84,7 +95,6 @@
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
else if(item.loc_type=="audio"){
icon = L.icon({
@ -94,22 +104,32 @@
popupAnchor: [-3, -76],
});
}
else{
else if(item.loc_type=="mosquito"){
icon = L.icon({
iconUrl: '/static/img/mosquito.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
else if(item.loc_type=="hangout"){
icon = L.icon({
iconUrl: '/static/img/hangout.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
var circle = L.marker([item.latitude, item.longitude], {icon: icon}).addTo(map).on("click", e => circleClick(e));
circle.id = item.id;
circleArray.push(circle);
markerArray.push(L.marker([item.latitude, item.longitude]));
if(item.loc_type=="mosquito") mosquitoArray.push(L.marker([item.latitude, item.longitude]));
} catch (error) {
console.error(error);
console.error(error);
}
});
@ -124,7 +144,7 @@
var myIcon = L.icon({
iconUrl: '/static/img/me.png',
iconSize: [50, 50],
iconAnchor: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
@ -155,7 +175,7 @@
my_location.longitude = crd.longitude;
my_location.latitude = crd.latitude;
updateView()
if(view == "closest") updateView()
console.log("updated")
@ -194,7 +214,14 @@
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
return d;
var text;
if(d < 1){
text = Math.round(d * 100) / 100*1000+" m";
}
else{
text = Math.round(d * 100) / 100+" km"
}
return text;
}
/** Converts numeric degrees to radians */
@ -222,6 +249,24 @@
}
}
function store_location_mosquito(){
console.log("storing location");
console.log(my_location)
var xhr = new XMLHttpRequest();
xhr.open("POST", "./addlocationmosquito", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
longitude: my_location.longitude,
latitude: my_location.latitude
}));
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
location.reload();
}
}
}
function add_text(){
window.location.href = "addtext?longitude="+ my_location.longitude +"&latitude="+my_location.latitude;
@ -239,11 +284,22 @@
var group = new L.featureGroup(circleArray);
map.fitBounds(group.getBounds().pad(0.4));
}
else if(view = "closest"){
var closest = L.GeometryUtil.closestLayer(map, markerArray, myPositionCircle.getLatLng());
else if(view == "closest"){
var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
// L.polyline([closest.layer.getLatLng(), myPositionCircle.getLatLng()], {
// color: 'black',
// weight: 1,
// }).addTo(map)
document.getElementById("distance_close").innerHTML = "closest mosquito: " + distance(closest.layer.getLatLng().lat,closest.layer.getLatLng().lng,myPositionCircle.getLatLng().lat, myPositionCircle.getLatLng().lng)
var group = new L.featureGroup([closest.layer, myPositionCircle]);
map.fitBounds(group.getBounds().pad(0.4));
}
else if(view == "me"){
map.setView([my_location.latitude, my_location.longitude], zoom_level);
}
else if(view == "free"){
}
}
function changeViewSelect() {
@ -271,6 +327,102 @@
window.addEventListener('resize', function(event) {
updateView()
}, true);
// COMPASS
const compassCircle = document.querySelector(".compass-circle");
const myPoint = document.querySelector(".my-point");
const startBtn = document.querySelector(".start-btn");
var compass;
var pointDegree;
const isIOS =
navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
navigator.userAgent.match(/AppleWebKit/);
function init() {
// startBtn.addEventListener("click", startCompass);
navigator.geolocation.getCurrentPosition(locationHandler);
if (!isIOS) {
window.addEventListener("deviceorientationabsolute", handler, true);
}
}
function startCompass() {
if (isIOS) {
DeviceOrientationEvent.requestPermission()
.then((response) => {
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
}
}
function handler(e) {
compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
// ±15 degree
// if (
// (pointDegree < Math.abs(compass) &&
// pointDegree + 15 > Math.abs(compass)) ||
// pointDegree > Math.abs(compass + 15) ||
// pointDegree < Math.abs(compass)
// ) {
// myPoint.style.opacity = 0;
// } else if (pointDegree) {
// myPoint.style.opacity = 1;
// }
}
function locationHandler(position) {
const { latitude, longitude } = position.coords;
pointDegree = calcDegreeToPoint(latitude, longitude);
if (pointDegree < 0) {
pointDegree = pointDegree + 360;
}
// compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
}
function calcDegreeToPoint(latitude, longitude) {
// Qibla geolocation
var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
console.log(closest);
const point = {
lat: closest.layer.getLatLng().lat,
lng: closest.layer.getLatLng().lng
};
const phiK = (point.lat * Math.PI) / 180.0;
const lambdaK = (point.lng * Math.PI) / 180.0;
const phi = (latitude * Math.PI) / 180.0;
const lambda = (longitude * Math.PI) / 180.0;
const psi =
(180.0 / Math.PI) *
Math.atan2(
Math.sin(lambdaK - lambda),
Math.cos(phi) * Math.tan(phiK) -
Math.sin(phi) * Math.cos(lambdaK - lambda)
);
return Math.round(psi);
}
init();
startCompass();
</script>

4
app/templates/list.html
Unescape Escape View File

@ -7,12 +7,12 @@
<div class="locations_list">
{% for location in locations %}
<div class="row">
<div>{{location.id}}</div>
<div>{{location.id}} </div>
<div><img src="{{"/static/img/text.png" if location.loc_type == "message"}}{{"/static/img/audio.png" if location.loc_type == "audio"}}{{"/static/img/hangout.png" if location.loc_type == "hangout"}}{{"/static/img/mosquito.png" if location.loc_type == "mosquito"}}" alt=""></div>
<div>{{location.longitude}}, {{location.latitude}}</div>
<div>{{location.message if location.loc_type == "message"}}{{location.message if location.loc_type == "audio"}}</div>
<div>
{% if location.loc_type == "audio" %}
<audio id="audio-player" controls="" src="uploads/{{location.audio}}" type="audio/mp3"></audio>
{% endif %}
</div>

11
app/views.py
Unescape Escape View File

@ -73,6 +73,17 @@ def hello(name):
@app.route('/addlocation', methods=['POST', 'GET'])
def add_location():
if request.method == 'POST':
data = request.get_json()
print("UPDATING DATA")
print(data['longitude'])
location = Location(data['longitude'],data['latitude'], "hangout", "", "")
db.session.add(location)
db.session.commit()
return redirect(url_for('home'))
@app.route('/addlocationmosquito', methods=['POST', 'GET'])
def add_location_mosquito():
if request.method == 'POST':
data = request.get_json()
print("UPDATING DATA")

Write Preview
Loading…
Cancel
Save