final changes

map/static/map/index.css

@@ -10,12 +10,13 @@
 
 #p_date {
     position: absolute;
-    bottom: 20px;
+    left: 25px;
+    bottom: 60px;
 }
 
 #logo_side {
-    width: 60%;
-    margin-left: 20%;
+    width: 90%;
+    margin-left: 5%;
     margin-top: 10%;
 }
 
@@ -23,6 +24,19 @@
     margin:0 auto;
 }
 
+#right a {
+    color: #aaaaaa;
+    text-decoration: none;
+}
+
+#right a:visited {
+    color: #779;
+}
+
+#right a:hover {
+    color: #99a;
+}
+
 #left {
     width: 75%;
     float: left;
@@ -46,13 +60,13 @@ div.yearno {
 }
 
 #div19 {
-    top: 30px;
-    left: 30px;
+    top: 4%;
+    left: 2%;
 }
 
 #div29 {
-    top: 330px;
-    left: 30px;
+    top: 50%;
+    left: 2%;
 }
 
 .slider {

map/templates/map/index.html

@@ -27,6 +27,7 @@
 
     <div id="div19" class="yearno">2019</div>
     <div id="div29" class="yearno">2029</div>
+    <div id="p_date" class="yearno"></div>
 
     <div class="slidecontainer">
     <input type="range" min="1" max="365" value="180" class="slider" id="myRange"
@@ -35,16 +36,13 @@
 </div>
 
 <div id="right">
-    <img id="logo_side" src="{% static 'favicon.ico' %}"/>
+    <img id="logo_side" src="{% static 'spring_logo.png' %}"/>
     <center>
-    <p><b>Watch how the bloom periods change over time.</b></p>
-    <p>You want to win awesome awards?</p>
     
-    <p>Take part in a global movement
+    <p><a href="{% url 'mobile:index' %}">Take part</a> in a global movement
     monitoring effects of climate change.</p>
     </center>
     <center>
-        <p id="p_date" ></p>
     </center>
 </div>
 
@@ -189,7 +187,7 @@ function updateMap(value) {
     for (var i = 0; i < trees_2.length; i++) {
         trees_2[i].update(value);
     }
-    p_date.innerHTML = "Date: " + dateFromDay(value);
+    p_date.innerHTML = dateFromDay(value);
 }
 
 function dateFromDay(dayno) {
@@ -203,6 +201,8 @@ var cities2 = L.layerGroup(trees_2.map(t => t.marker));
 cities1.addTo(map1);
 cities2.addTo(map2);
 
+p_date.innerHTML = dateFromDay(180);
+
 </script>
 
 </body>

map/views.py

@@ -5,10 +5,10 @@ import os
 
 
 def index(request):
-    if not os.path.isfile("/tmp/data.json"):
+    if not os.path.isfile("/home/areion/tmp/data.json"):
         data = {"trees": str({ "trees": []}) }
     else:
-        with open("/tmp/data.json", "r") as f:
+        with open("/home/areion/tmp/data.json", "r") as f:
             loaded = json.load(f)
             s = json.dumps(loaded);
             data = {"trees": s}

mobile/predict.py

@@ -12,7 +12,7 @@ def normalize(x):
 
 
 def get_gdd_until(date):
-    temp=pd.read_csv('/tmp/temp', sep=',')
+    temp=pd.read_csv('~/tmp/temp', sep=',')
     y=int(temp[temp.Datum==date].index.values)
     GDD_date=0
     for x in range(y+1):    
@@ -21,7 +21,7 @@ def get_gdd_until(date):
     return GDD_date 
 
 
-def predict_blooming(date,gdd_infile='/tmp/wachstumsgradtag.csv',climate_infile='/tmp/climate_heidelberg_tima_and_date.csv'):
+def predict_blooming(date,gdd_infile='~/tmp/wachstumsgradtag.csv',climate_infile='~/tmp/climate_heidelberg_tima_and_date.csv'):
     gdd_date = get_gdd_until(date)
     gdd_trees = pd.read_csv(gdd_infile, sep=',', encoding='utf-8')
     monthly_temp = pd.read_csv(climate_infile,sep='\t')

mobile/static/mobile/base.css

@@ -107,3 +107,21 @@ body,html{
     right: 50px;
     top: 24px;
 }
+
+.hidden {
+    display: none;
+}
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

mobile/templates/mobile/base.html

@@ -22,7 +22,7 @@
         <div id='heading'>
             <div class='inner'>
                 <img src='{% static 'favicon.ico' %}' />
-                <h1 id='title'>Bloom up your city</h1>
+                <h1 id='title'>Spring Up Your Region</h1>
 
             </div>
         </div>
@@ -36,7 +36,7 @@
 
     <!-- FOOTER -->
     <div id='footer'>
-        <p class='left'>Bloom Hunting - a Ökostadt Heidelberg initiative</p>
+        <p class='left'>Bloom Hunting</p>
         <p>A Climathon Heidelberg project</p>
     </div>
 </body>

mobile/templates/mobile/index.html

@@ -2,18 +2,21 @@
 
 {% block content %}
 <body>
-<h1>Bloomhunt</h1>
+<h1>Bloom Hunt</h1>
 
-<p>Hunt blooming trees in your area.</p>
+<p>Be the <b>first</b> that scans a blooming tree in your neighborhood.</p>
 
 <a class="btn btn-default" id="btn_scan" href="{% url 'mobile:scan' %}">Scan a blooming tree</a>
 
-<p></p>
+<p></p><br>
 
+<h3>Shortly blooming species</h3>
 <p>Especially look for the following trees, they are likely to bloom
 soon:</p>
+<ul>
 {% for tree in prediction %}
-{{ tree }}<br>
+<li>{{ tree }}</li>
 {% endfor %}
+</ul>
 
 {% endblock %}

mobile/templates/mobile/scan.html

@@ -1,14 +1,55 @@
 {% extends "mobile/base.html" %}
 
 {% block content %}
+
+<script>
+
+function identify() {
+    var loader = document.getElementById("loader");
+    var question_p = document.getElementById("question_p");
+    var options_p = document.getElementById("options_p");
+    var image_in = document.getElementById("image_in");
+    var btn_identify = document.getElementById("btn_identify");
+    var p_result = document.getElementById("identification_result");
+    var p_upload = document.getElementById("p_upload");
+    var p_help = document.getElementById("p_help");
+    btn_identify.classList.toggle("hidden");
+    image_in.classList.toggle("hidden");
+    loader.classList.toggle("hidden");
+    p_upload.classList.toggle("hidden");
+    setTimeout(function () {
+            question_p.classList.toggle("hidden");
+            options_p.classList.toggle("hidden");
+            loader.classList.toggle("hidden");
+            p_result.classList.toggle("hidden");
+            p_help.classList.toggle("hidden");
+        }, 2000);
+}
+
+</script>
+
 <h1>Scan a blooming tree!</h1>
 
-<p>We will help you identifying the tree you are hunting.</p>
+<p id="p_help">We will help you identifying the tree you are hunting.</p>
 
-<p>{{ question.text }}</p>
+<p id="p_upload">Just upload a picture of your tree<p>
 
-<table>
+<input id="image_in" type="file" accept="image/*" capture="camera" />
+
+<br>
+
+<button id="btn_identify" class="btn btn-default" onclick="identify()">Identify the tree</button>
+
+<div id="loader" class="loader hidden"></div> 
+
+<p id="identification_result" class="hidden">We were able to identify your tree as a <b>Apple
+    Tree</b>. We need only some further questions to identify the exact species</p>
+
+<p id="question_p" class="hidden">{{ question.text }}</p>
+
+<table id="options_p" class="hidden">
     <tr>
+
 {% for option in question.options %}
 <td width=30%>
 <form action="" method="post">

mobile/templates/mobile/scan2.html

@@ -0,0 +1,24 @@
+{% extends "mobile/base.html" %}
+
+{% block content %}
+
+<h1>Scan a blooming tree!</h1>
+
+<p id="question_p" class="">{{ question.text }}</p>
+
+<table id="options_p" class="">
+    <tr>
+
+{% for option in question.options %}
+<td width=30%>
+<form action="" method="post">
+    {% csrf_token %}
+    <input name="question" type="hidden" value="{{ question.key }}">
+    <input name="chosen_option" class="btn btn-default" type="submit" value="{{ option.text }}">
+</form>
+</td>
+{% endfor %}
+    </tr>
+</table>
+
+{% endblock %}

mobile/templates/mobile/scanned.html

@@ -3,7 +3,7 @@
 {% block content %}
 
 <p>Congratulions, you are the first to report that this <b>{{ tree.name }}</b>
-tree is blooming.<p>
+is blooming.<p>
 
 <p>You may give it a name now</p>
 

mobile/views.py

@@ -33,7 +33,8 @@ def scan(request):
                         continue
                     if opt.question:
                         question = opt.question
-                        break
+                        context = {'question': question}
+                        return render(request, 'mobile/scan2.html', context)
                     else:
                         return scanned(request, opt.result)
     # first question
@@ -54,13 +55,13 @@ def addtree(request):
     longitude = request.POST["longitude"]
     latitude = request.POST["latitude"]
     bloom_start = datetime.now().timetuple().tm_yday
-    if not os.path.isfile('/tmp/data.json'):
+    if not os.path.isfile('/home/areion/tmp/data.json'):
         data = {'trees': []}
     else:
-        with open('/tmp/data.json', 'r') as f:
+        with open('/home/areion/tmp/data.json', 'r') as f:
             data = json.load(f)
 
-    with open('/tmp/data.json', 'w') as f:
+    with open('/home/areion/tmp/data.json', 'w+') as f:
         data["trees"].append(
             {'name': name, 'species': tree,
              'longitude': longitude, 'latitude': latitude,