aaaa
/
huntingmosquitos
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

minor fixes

Browse Source
geo
Alexander Roidl 2 years ago
parent 96e1f8d02a
commit 9e32d21b59
4 changed files with 414 additions and 452 deletions
Show Stats Download Patch File Download Diff File

2
app/__init__.py
Unescape Escape View File

@ -24,7 +24,7 @@ app.config['SECRET_KEY'] = 'super secret key'
#app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/mydatabase.db' #app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/mydatabase.db'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
#app.config['SQLALCHEMY_DATABASE_URI'] = 'rqlite+pyrqlite://localhost:4001/' #app.config['SQLALCHEMY_DATABASE_URI'] = 'rqlite+pyrqlite://localhost:4001/'
app.config['DEBUG'] = True app.config['DEBUG'] = False
app.config['PORT'] = 80 app.config['PORT'] = 80
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'mydatabase.db') app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'mydatabase.db')

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

@ -1,18 +1,18 @@
@font-face { @font-face {
font-family: 'metaaccanthisalternaalternate'; font-family: 'metaaccanthisalternaalternate';
src: url('../fonts/metaaccanthisalternate-webfont.woff2') format('woff2'), src: url('../fonts/metaaccanthisalternate-webfont.woff2') format('woff2'),
url('../fonts/metaaccanthisalternate-webfont.woff') format('woff'); url('../fonts/metaaccanthisalternate-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
*{ * {
font-family: "metaaccanthisalternaalternate"; font-family: "metaaccanthisalternaalternate";
box-sizing: border-box; box-sizing: border-box;
} }
body{ body {
background-color: #f1f1f1; background-color: #f1f1f1;
font-size: clamp(12px, 1.2vw, 25px); font-size: clamp(12px, 1.2vw, 25px);
box-sizing: border-box; box-sizing: border-box;
@ -20,32 +20,32 @@ body{
padding: 0; padding: 0;
} }
p{ p {
font-size: 1.5em; font-size: 1.5em;
} }
a{ a {
text-decoration: underline; text-decoration: underline;
color: inherit; color: inherit;
} }
a:hover{ a:hover {
text-decoration: inherit; text-decoration: inherit;
color: inherit; color: inherit;
} }
audio{ audio {
width: 100%; width: 100%;
} }
.navigation ul{ .navigation ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: right; justify-content: right;
} }
.navigation ul li{ .navigation ul li {
padding: 0.5em; padding: 0.5em;
} }
@ -58,17 +58,17 @@ audio{
z-index: -1; z-index: -1;
} }
.locations_list{ .locations_list {
width: 100%; width: 100%;
} }
.locations_list .row{ .locations_list .row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
.locations_list .row img{ .locations_list .row img {
max-height: 2em; max-height: 2em;
} }
@ -81,11 +81,9 @@ audio{
width: 10%; width: 10%;
} }
.locations_list .row div:last-of-type{ .locations_list .row div:last-of-type {}
}
.locations_list .row div{ .locations_list .row div {
width: 20%; width: 20%;
padding: 1em; padding: 1em;
white-space: wrap; white-space: wrap;
@ -93,11 +91,11 @@ audio{
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.locations_list .row div audio{ .locations_list .row div audio {
width: 100%; width: 100%;
} }
.locations_list .row .delete_btn{ .locations_list .row .delete_btn {
text-decoration: none; text-decoration: none;
background-color: black; background-color: black;
color: white; color: white;
@ -106,29 +104,29 @@ audio{
} }
.content_container{ .content_container {
padding: 1em; padding: 1em;
} }
/* FROM */ /* FROM */
.form-control{ .form-control {
width: 100%; width: 100%;
height: 20vh; height: 20vh;
box-sizing: border-box; box-sizing: border-box;
} }
#audio{ #audio {
margin: 4em 0; margin: 4em 0;
} }
.record_controls{ .record_controls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.audio_btn{ .audio_btn {
font-size: 2em; font-size: 2em;
padding: 0.5em; padding: 0.5em;
text-decoration: none; text-decoration: none;
@ -141,16 +139,16 @@ margin: 4em 0;
min-width: 25%; min-width: 25%;
} }
.audio_btn:hover{ .audio_btn:hover {
color: white; color: white;
} }
.stop_btn{ .stop_btn {
display: none; display: none;
flex-grow:1; flex-grow: 1;
} }
.record_btn .icon{ .record_btn .icon {
display: inline-block; display: inline-block;
background-color: white; background-color: white;
width: 0.5em; width: 0.5em;
@ -159,7 +157,7 @@ margin: 4em 0;
margin-right: 0.5em; margin-right: 0.5em;
} }
.stop_btn .icon{ .stop_btn .icon {
display: inline-block; display: inline-block;
background-color: white; background-color: white;
width: 0.5em; width: 0.5em;
@ -167,19 +165,19 @@ margin: 4em 0;
margin-right: 0.5em; margin-right: 0.5em;
} }
.record_btn{ .record_btn {
background-color: red; background-color: red;
flex-grow:1; flex-grow: 1;
} }
.play_btn{ .play_btn {
display: none; display: none;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.play_btn .icon_p{ .play_btn .icon_p {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 0px; top: 0px;
@ -193,26 +191,26 @@ margin: 4em 0;
} }
.play_btn .icon_b{ .play_btn .icon_b {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
display: inline-block; display: inline-block;
/* transform: scale(var(--ggs,1)); */ /* transform: scale(var(--ggs,1)); */
width: 0.5em; width: 0.5em;
height: 0.5em; height: 0.5em;
border-left: 0.15em solid; border-left: 0.15em solid;
border-right: 0.15em solid; border-right: 0.15em solid;
margin-right: 0.5em; margin-right: 0.5em;
z-index: 99; z-index: 99;
} }
.play_btn .text{ .play_btn .text {
display: inline-block; display: inline-block;
position: relative; position: relative;
z-index: 99; z-index: 99;
} }
.play_btn .progress_bar{ .play_btn .progress_bar {
display: block; display: block;
background-color: rgb(115, 115, 115); background-color: rgb(115, 115, 115);
position: absolute; position: absolute;
@ -224,24 +222,24 @@ margin: 4em 0;
z-index: 0; z-index: 0;
} }
.redo_btn{ .redo_btn {
display: none; display: none;
} }
/* POPUP ON FRONTSCREEN */ /* POPUP ON FRONTSCREEN */
.close{ .close {
float:right; float: right;
font-size: 2em; font-size: 2em;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
} }
.locations_popup .row div:nth-of-type(2){ .locations_popup .row div:nth-of-type(2) {
margin-bottom: 2em; margin-bottom: 2em;
font-size: 2em; font-size: 2em;
} }
.locations_popup .row{ .locations_popup .row {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
background-color: black; background-color: black;
@ -256,7 +254,7 @@ margin: 4em 0;
padding-bottom: 2em; padding-bottom: 2em;
} }
#position{ #position {
position: fixed; position: fixed;
display: inline-block; display: inline-block;
top: 0; top: 0;
@ -265,7 +263,7 @@ margin: 4em 0;
margin: 1em; margin: 1em;
} }
#button_group{ #button_group {
position: fixed; position: fixed;
display: inline-block; display: inline-block;
bottom: 0; bottom: 0;
@ -273,13 +271,14 @@ margin: 4em 0;
box-sizing: border-box; box-sizing: border-box;
} }
#distance_close{ #distance_close {
font-family: "metaaccanthisalternaalternate"; font-family: "metaaccanthisalternaalternate";
} }
#button_group button, #button_group select{ #button_group button,
#button_group select {
background-color: grey; background-color: grey;
color: white; color: white;
font-size: 0.9em; font-size: 0.9em;
@ -291,28 +290,28 @@ margin: 4em 0;
cursor: pointer; cursor: pointer;
} }
#button_group select{ #button_group select {
height:2.8em; height: 2.8em;
margin: 0; margin: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
#button_group select option{ #button_group select option {
vertical-align: middle; vertical-align: middle;
margin: 0; margin: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
#button_group img{ #button_group img {
width: 1em; width: 1em;
margin-right: 0.2em; margin-right: 0.2em;
vertical-align: middle; vertical-align: middle;
} }
button[type="submit"]{ button[type="submit"] {
background-color: grey; background-color: grey;
color: white; color: white;
font-size: 1em; font-size: 1em;
@ -340,9 +339,9 @@ button[type="submit"]{
.compass > .compass-circle, .compass>.compass-circle,
.compass > .arrow, .compass>.arrow,
.compass > .compass-goal { .compass>.compass-goal {
position: absolute; position: absolute;
width: 90%; width: 90%;
height: 90%; height: 90%;
@ -354,7 +353,7 @@ button[type="submit"]{
pointer-events: none; pointer-events: none;
} }
.compass > .compass-circle svg{ .compass>.compass-circle svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;

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

@ -2,26 +2,43 @@
{% block main %} {% block main %}
<div id="home_content"> <div id="home_content">
<p id="position"></p> <p id="position"></p>
<div class="compass"> <div class="compass">
<div id="arrow" class="arrow"><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 id="arrow" class="arrow"><svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
<div id="goal" class="compass-goal"><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.94 21.94"><defs><style>.cls-1{fill:#3fb800;opacity:.3;}</style></defs><g id="Layer_1-2"><circle class="cls-1" cx="10.97" cy="10.97" r="10.97"/></g></svg></div> clip-rule="evenodd">
<div class="my-point"></div> <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>
<div id="goal" class="compass-goal"><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.94 21.94">
<defs>
<style>
.cls-1 {
fill: #3fb800;
opacity: .3;
}
</style>
</defs>
<g id="Layer_1-2">
<circle class="cls-1" cx="10.97" cy="10.97" r="10.97" />
</g>
</svg></div>
<div class="my-point"></div>
</div>
<!-- <h1 class="header" id="title">GEO</h1> --> <!-- <h1 class="header" id="title">GEO</h1> -->
<div id="button_group"> <div id="button_group">
<div id="distance_close">(distance to mosquito)</div> <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/hangout.png" alt="">add
<button id="store_location_mosquito" onclick="store_location_mosquito()"><img src="/static/img/mosquito.png" alt="">add mosquito</button> hangout</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_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> <button id="add_audio" onclick="add_audio()"><img src="/static/img/audio.png" alt=""> add audio</button>
<select id="viewSelector" onchange="changeViewSelect()" > <select id="viewSelector" onchange="changeViewSelect()">
<option>Choose view</option> <option>Choose view</option>
<option value="all">show all entries</option> <option value="all">show all entries</option>
<option value="closest">show closest mosquito</option> <option value="closest">show closest mosquito</option>
@ -33,25 +50,22 @@
</div> </div>
</div> </div>
<!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation --> <!-- 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--> <!-- 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"> <div class="locations_popup">
{% for location in locations %} {% for location in locations %}
<div class="row" id={{location.id}}> <div class="row" id={{location.id}}>
<div onclick="closeLocation()" class="close">×</div> <div onclick="closeLocation()" class="close">×</div>
<div>{{location.longitude}}, {{location.latitude}}</div> <div>{{location.longitude}}, {{location.latitude}}</div>
<div>{{location.message if location.loc_type == "message"}}</div> <div>{{location.message if location.loc_type == "message"}}</div>
<div> <div>
{% if location.loc_type == "audio" %} {% if location.loc_type == "audio" %}
<audio id="audio-player" controls="" src="uploads/{{location.audio}}"></audio> <audio id="audio-player" controls="" src="uploads/{{location.audio}}"></audio>
{% endif %} {% endif %}
</div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div> </div>
@ -59,391 +73,343 @@
{% block js %} {% block js %}
<script> <script>
var locations; var locations;
var zoom_level = 18; var zoom_level = 18;
var markerArray = []; var markerArray = [];
var circleArray = []; var circleArray = [];
var mosquitoArray = []; var mosquitoArray = [];
var view="closest"; var view = "me";
var workingCompass = false; var workingCompass = false;
var map_view = false; var map_view = false;
function assign_data(data) { function assign_data(data) {
locations = data; locations = data;
}
assign_data({
{
data_locations | tojson
} }
assign_data({{ data_locations|tojson }}); });
var map = L.map('map', { var map = L.map('map', {
attributionControl:false, attributionControl: false,
zoomControl:false, zoomControl: false,
zoom: 2000, zoom: 2000,
zoomSnap: 0.5, zoomSnap: 0.5,
animate: true, animate: true,
maxZoom: 19, maxZoom: 19,
//dragging: false, //dragging: false,
//scrollWheelZoom: false, //scrollWheelZoom: false,
}).setView([48.505, 1.09], zoom_level); }).setView([48.505, 1.09], zoom_level);
var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
zoom:2, zoom: 2,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}) })
function toggle_map() {
if (map_view) {
function toggle_map(){ map.removeLayer(backgroundLayer)
if(map_view){ } else {
map.removeLayer(backgroundLayer) map.addLayer(backgroundLayer)
}
else{
map.addLayer(backgroundLayer)
}
map_view = !map_view
} }
map_view = !map_view
}
var myIcon = L.icon({
locations.forEach(function (item, index) {
try {
var icon;
if(item.loc_type=="message"){
icon = L.icon({
iconUrl: '/static/img/text.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
else if(item.loc_type=="audio"){
icon = L.icon({
iconUrl: '/static/img/audio.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
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);
}
});
// var myPositionCircle = L.circle([48.172934, 9.01236], {
// color: 'red',
// stroke:false,
// fillColor: 'red',
// fillOpacity: 0.5,
// radius: 10
// }).addTo(map);
var myIcon = L.icon({
iconUrl: '/static/img/me.png', iconUrl: '/static/img/me.png',
iconSize: [50, 50], iconSize: [30, 30],
iconAnchor: [25, 25], iconAnchor: [15, 15],
popupAnchor: [-3, -76], popupAnchor: [-3, -76],
}); });
var myPositionCircle = L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); var myPositionCircle = L.marker([50.505, 30.57], {
icon: myIcon
}).addTo(map);
circleArray.push(myPositionCircle);
locations.forEach(function (item, index) {
try {
var icon;
if (item.loc_type == "message") {
icon = L.icon({
iconUrl: '/static/img/text.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
} else if (item.loc_type == "audio") {
icon = L.icon({
iconUrl: '/static/img/audio.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
} 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);
circleArray.push(myPositionCircle); markerArray.push(L.marker([item.latitude, item.longitude]));
if (item.loc_type == "mosquito") mosquitoArray.push(L.marker([item.latitude, item.longitude]));
var x = document.getElementById("position"); } catch (error) {
console.error(error);
}
});
let id; var x = document.getElementById("position");
let target;
let options;
//first: latitude, second: longitude let id;
target = { let target;
latitude : 48.172934, let options;
longitude: 9.01236
};
var my_location = { //first: latitude, second: longitude 51.915528423609125, 4.477065873620031
latitude : 0, target = {
longitude: 0 latitude: 51.915528423609125,
}; longitude: 4.477065873620031
};
function success(pos) { var my_location = {
const crd = pos.coords; latitude: 0,
my_location.longitude = crd.longitude; longitude: 0
my_location.latitude = crd.latitude; };
if(view == "closest") updateView() function success(pos) {
const crd = pos.coords;
my_location.longitude = crd.longitude;
my_location.latitude = crd.latitude;
console.log("updated") updateView()
x.innerHTML = "Latitude: " + crd.latitude + x.innerHTML = "Latitude: " + crd.latitude +
"<br>Longitude: " + crd.longitude + "<br>Longitude: " + crd.longitude +
"<br>Distance to TENT: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude); "<br>Distance to TENT: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude);
locationHandler(pos); locationHandler(pos);
// if we want to clear the watch // if we want to clear the watch
// if (target.latitude === crd.latitude && target.longitude === crd.longitude) { // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
// console.log('Congratulations, you reached the target'); // console.log('Congratulations, you reached the target');
// navigator.geolocation.clearWatch(id); // navigator.geolocation.clearWatch(id);
// } // }
}
function error(err) {
console.error(`ERROR(${err.code}): ${err.message}`);
console.log("trying again")
// id = navigator.geolocation.watchPosition(success, error, options);
}
options = {
enableHighAccuracy: true,
timeout: 1000,
maximumAge: 1000
};
id = navigator.geolocation.watchPosition(success, error, options);
function distance(lon1, lat1, lon2, lat2) {
var R = 6371; // Radius of the earth in km
var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
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
var text;
if (d < 1) {
text = Math.round(d * 100) / 100 * 1000 + " m";
} else {
text = Math.round(d * 100) / 100 + " km"
} }
return text;
}
function error(err) { /** Converts numeric degrees to radians */
console.error(`ERROR(${err.code}): ${err.message}`); if (typeof (Number.prototype.toRad) === "undefined") {
console.log("trying again") Number.prototype.toRad = function () {
// id = navigator.geolocation.watchPosition(success, error, options); return this * Math.PI / 180;
} }
}
function store_location() {
window.location.href = "addhangout/" + my_location.longitude + "/" + my_location.latitude + "/";
options = { }
enableHighAccuracy: true,
timeout: 1000,
maximumAge: 1000
};
id = navigator.geolocation.watchPosition(success, error, options); function store_location_mosquito() {
window.location.href = "addmosquito/" + my_location.longitude + "/" + my_location.latitude + "/";
function distance(lon1, lat1, lon2, lat2) { }
var R = 6371; // Radius of the earth in km
var dLat = (lat2-lat1).toRad(); // Javascript functions in radians
var dLon = (lon2-lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
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
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 */
if (typeof(Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
}
function store_location(){ function add_text() {
// console.log("storing location"); window.location.href = "addtext/" + my_location.longitude + "/" + my_location.latitude + "/";
// console.log(my_location) }
// var xhr = new XMLHttpRequest();
// xhr.open("POST", "./addlocation", 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();
// }
// }
window.location.href = "addhangout/"+ my_location.longitude +"/"+my_location.latitude+"/";
} function add_audio() {
window.location.href = "addaudio/" + my_location.longitude + "/" + my_location.latitude + "/";
}
function store_location_mosquito(){ function updateView() {
// console.log("storing location"); //update position on map
// console.log(my_location) // map.setView([my_location.latitude, my_location.longitude], zoom_level);
// var xhr = new XMLHttpRequest(); myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]);
// xhr.open("POST", "./addlocationmosquito", true); if (view == "all") {
// xhr.setRequestHeader('Content-Type', 'application/json'); var group = new L.featureGroup(circleArray);
// xhr.send(JSON.stringify({ map.fitBounds(group.getBounds().pad(0.4));
// longitude: my_location.longitude, } else if (view == "closest") {
// latitude: my_location.latitude var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
// })); document.getElementById("distance_close").innerHTML = "closest mosquito: " + distance(closest.layer.getLatLng()
.lng, closest.layer.getLatLng().lat, myPositionCircle.getLatLng().lng, myPositionCircle.getLatLng().lat)
// xhr.onreadystatechange=function(){
// if (xhr.readyState==4 && xhr.status==200){
// location.reload();
// }
// }
window.location.href = "addmosquito/"+my_location.longitude +"/"+my_location.latitude+"/";
}
function add_text(){
window.location.href = "addtext/"+my_location.longitude +"/"+my_location.latitude+"/";
}
function add_audio(){
window.location.href = "addaudio/"+my_location.longitude +"/"+my_location.latitude+"/";
}
function updateView(){ var group = new L.featureGroup([closest.layer, myPositionCircle]);
//update position on map map.fitBounds(group.getBounds().pad(0.4));
// map.setView([my_location.latitude, my_location.longitude], zoom_level); } else if (view == "me") {
myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]); map.setView([my_location.latitude, my_location.longitude], zoom_level);
if(view == "all"){ } else if (view == "free") {
var group = new L.featureGroup(circleArray);
map.fitBounds(group.getBounds().pad(0.4));
}
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() {
var mylist = document.getElementById("viewSelector"); function changeViewSelect() {
view = mylist.options[mylist.selectedIndex].value; var mylist = document.getElementById("viewSelector");
updateView(); view = mylist.options[mylist.selectedIndex].value;
updateView();
}
function circleClick(e) {
var id = e.target.id
var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "none"; // depending on what you're doing
} }
document.getElementById(id).style.display = "block";
}
function circleClick(e){ function closeLocation() {
var id = e.target.id var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array for (var i = 0; i < divsToHide.length; i++) {
for(var i = 0; i < divsToHide.length; i++){ divsToHide[i].style.display = "none"; // depending on what you're doing
divsToHide[i].style.display = "none"; // depending on what you're doing
}
document.getElementById(id).style.display = "block";
} }
}
function closeLocation(){
var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array window.addEventListener('resize', function (event) {
for(var i = 0; i < divsToHide.length; i++){ updateView()
divsToHide[i].style.display = "none"; // depending on what you're doing }, true);
}
// COMPASS
const compassCircle = document.querySelector(".arrow");
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);
} }
window.addEventListener('resize', function(event) { }
updateView()
}, true);
// COMPASS
const compassCircle = document.querySelector(".arrow");
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 startCompass() { function handler(e) {
if (isIOS) { workingCompass = true;
DeviceOrientationEvent.requestPermission() if (workingCompass) {
.then((response) => { document.getElementById("arrow").style.display = "block";
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
}
} }
compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
function handler(e) { }
workingCompass = true;
if(workingCompass){
document.getElementById("arrow").style.display = "block";
}
compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
}
function locationHandler(position) { function locationHandler(position) {
const { latitude, longitude } = position.coords; const {
pointDegree = calcDegreeToPoint(latitude, longitude); latitude,
longitude
} = position.coords;
pointDegree = calcDegreeToPoint(latitude, longitude);
if (pointDegree < 0) { if (pointDegree < 0) {
pointDegree = pointDegree + 360; pointDegree = pointDegree + 360;
}
} }
}
function calcDegreeToPoint(latitude, longitude) {
// Qibla geolocation function calcDegreeToPoint(latitude, longitude) {
var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng()); // Qibla geolocation
if(workingCompass == true){ var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
if(parseFloat(distance(closest.layer.getLatLng().lat,closest.layer.getLatLng().lng,myPositionCircle.getLatLng().lat, myPositionCircle.getLatLng().lng).split(" "))<20){ if (workingCompass == true) {
document.getElementById("arrow").style.display = "none"; if (parseFloat(distance(closest.layer.getLatLng().lat, closest.layer.getLatLng().lng, myPositionCircle.getLatLng()
document.getElementById("goal").style.display = "block"; .lat, myPositionCircle.getLatLng().lng).split(" ")) < 20) {
} document.getElementById("arrow").style.display = "none";
else{ document.getElementById("goal").style.display = "block";
document.getElementById("arrow").style.display = "block"; } else {
document.getElementById("goal").style.display = "none"; document.getElementById("arrow").style.display = "block";
} document.getElementById("goal").style.display = "none";
} }
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(); const point = {
// lat: closest.layer.getLatLng().lat,
lng: closest.layer.getLatLng().lng
};
</script> 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();
//
</script>
{% endblock js %} {% endblock js %}

3
app/views.py
Unescape Escape View File

@ -117,8 +117,6 @@ def addtext(lng, lat):
upload_form = UploadText() upload_form = UploadText()
longitude = lng longitude = lng
latitude = lat latitude = lat
print(longitude)
print(latitude)
if request.method == 'POST': if request.method == 'POST':
if upload_form.validate_on_submit(): if upload_form.validate_on_submit():
@ -147,7 +145,6 @@ def addaudio(lng, lat):
longitude = upload_form.longitude.data longitude = upload_form.longitude.data
latitude = upload_form.latitude.data latitude = upload_form.latitude.data
file = request.files['file'] file = request.files['file']
print(file.filename)
locations = db.session.query(Location).all() locations = db.session.query(Location).all()
id = len(locations)+1 id = len(locations)+1
# Getting the current date and time # Getting the current date and time

Write Preview
Loading…
Cancel
Save