geo
Alexander Roidl 2 years ago
parent aa4f72e8df
commit 3cb27d4ea6

@ -0,0 +1,14 @@
# actually a fork of XPPL for geolocation
## installation
Install the required dependencies:
$ pip3 install -r requirements.txt
## run in docker
first install docker, then:
$ sh build_docker.sh

@ -7,7 +7,8 @@ body{
background-color: #f1f1f1;
font-size: clamp(12px, 1.2vw, 25px);
box-sizing: border-box;
margin: 0;
padding: 0;
}
p{
@ -88,20 +89,7 @@ audio{
}
/* HOME PUPOP */
.locations_popup .row{
position: fixed;
bottom: 0;
background-color: black;
color: white;
border-radius: 2em 2em 0 0;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 1em;
left: 0;
display: none;
}
/* FROM */
@ -220,3 +208,57 @@ margin: 4em 0;
.redo_btn{
display: none;
}
/* POPUP ON FRONTSCREEN */
.close{
float:right;
font-size: 2em;
padding: 0;
cursor: pointer;
}
.locations_popup .row div:nth-of-type(2){
margin-bottom: 2em;
font-size: 2em;
}
.locations_popup .row{
position: fixed;
bottom: 0;
background-color: black;
color: white;
border-radius: 2em 2em 0 0;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 1em;
left: 0;
display: none;
padding-bottom: 2em;
}
#position{
position: fixed;
display: inline-block;
top: 0;
font-size: 1em;
font-family: 'Courier New', Courier, monospace;
margin: 1em;
}
#button_group{
position: fixed;
display: inline-block;
bottom: 0;
font-size: 1em;
padding: 1em;
box-sizing: border-box;
}
#button_group button, #button_group select{
background-color: black;
color: white;
border: 1px solid white;
border-radius: 2em;
padding: 0.8em;
}

@ -53,7 +53,7 @@
<script>
var mediaRecorder;
var seconds_rec = 0;
var seconds_rec = 1;
var seconds_int;
var audio;
var state = "empty";
@ -202,7 +202,7 @@ function stop_audio(){
function redo_audio(){
state = "empty";
seconds_rec = 0;
seconds_rec = 1;
document.getElementById('play_btn').style.display = 'none'
document.getElementById('redo_btn').style.display = 'none'
document.getElementById('stop_btn').style.display = 'block'

@ -4,24 +4,29 @@
<div id="home_content">
<p id="position"></p>
<!-- <h1 class="header" id="title">GEO</h1> -->
<button id="store_location" onclick="store_location()">store my position</button>
<button id="add_text" onclick="add_text()">add message</button>
<button id="add_audio" onclick="add_audio()">add audio</button>
<div id="button_group">
<button id="store_location" onclick="store_location()">store my position</button>
<button id="add_text" onclick="add_text()">add message</button>
<button id="add_audio" onclick="add_audio()">add audio</button>
<select id="viewSelector" onchange="changeViewSelect()" >
<option>Choose view</option>
<option value="all">all nodes</option>
<option value="closest">closest</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-->
<select id="viewSelector" onchange="changeViewSelect()" >
<option>---Choose view---</option>
<option value="all">all nodes</option>
<option value="closest">closest</option>
</select>
<div class="locations_popup">
{% for location in locations %}
<div class="row" id={{location.id}}>
<div onclick="closeLocation()" class="close">×</div>
<div>{{location.longitude}}, {{location.latitude}}</div>
<div>{{location.message if location.loc_type == "message"}}</div>
<div>
@ -246,6 +251,13 @@
document.getElementById(id).style.display = "block";
}
function closeLocation(){
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
}
}
window.addEventListener('resize', function(event) {
updateView()
}, true);

Loading…
Cancel
Save