christian 6 лет назад
Родитель
Сommit
4697018a6e
7 измененных файлов: 96 добавлений и 11 удалений
  1. +18
    -0
      mobile/static/mobile/base.css
  2. +2
    -2
      mobile/templates/mobile/base.html
  3. +7
    -4
      mobile/templates/mobile/index.html
  4. +42
    -3
      mobile/templates/mobile/scan.html
  5. +24
    -0
      mobile/templates/mobile/scan2.html
  6. +1
    -1
      mobile/templates/mobile/scanned.html
  7. +2
    -1
      mobile/views.py

+ 18
- 0
mobile/static/mobile/base.css Просмотреть файл

@@ -107,3 +107,21 @@ body,html{
right: 50px; right: 50px;
top: 24px; 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); }
}

+ 2
- 2
mobile/templates/mobile/base.html Просмотреть файл

@@ -22,7 +22,7 @@
<div id='heading'> <div id='heading'>
<div class='inner'> <div class='inner'>
<img src='{% static 'favicon.ico' %}' /> <img src='{% static 'favicon.ico' %}' />
<h1 id='title'>Bloom up your city</h1>
<h1 id='title'>Bloom up your region</h1>


</div> </div>
</div> </div>
@@ -36,7 +36,7 @@


<!-- FOOTER --> <!-- FOOTER -->
<div id='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> <p>A Climathon Heidelberg project</p>
</div> </div>
</body> </body>


+ 7
- 4
mobile/templates/mobile/index.html Просмотреть файл

@@ -2,18 +2,21 @@


{% block content %} {% block content %}
<body> <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> <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 <p>Especially look for the following trees, they are likely to bloom
soon:</p> soon:</p>
<ul>
{% for tree in prediction %} {% for tree in prediction %}
{{ tree }}<br>
<li>{{ tree }}</li>
{% endfor %} {% endfor %}
</ul>


{% endblock %} {% endblock %}

+ 42
- 3
mobile/templates/mobile/scan.html Просмотреть файл

@@ -1,14 +1,53 @@
{% extends "mobile/base.html" %} {% extends "mobile/base.html" %}


{% block content %} {% 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> <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 id="p_upload">Just upload a picture of your tree<p>


<p>{{ question.text }}</p>
<input id="image_in" type="file" accept="image/*" capture="camera" />


<table>
<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> <tr>

{% for option in question.options %} {% for option in question.options %}
<td width=30%> <td width=30%>
<form action="" method="post"> <form action="" method="post">


+ 24
- 0
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 %}

+ 1
- 1
mobile/templates/mobile/scanned.html Просмотреть файл

@@ -3,7 +3,7 @@
{% block content %} {% block content %}


<p>Congratulions, you are the first to report that this <b>{{ tree.name }}</b> <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> <p>You may give it a name now</p>




+ 2
- 1
mobile/views.py Просмотреть файл

@@ -33,7 +33,8 @@ def scan(request):
continue continue
if opt.question: if opt.question:
question = opt.question question = opt.question
break
context = {'question': question}
return render(request, 'mobile/scan2.html', context)
else: else:
return scanned(request, opt.result) return scanned(request, opt.result)
# first question # first question


Загрузка…
Отмена
Сохранить