diff --git a/vcm/css/sliders.css b/vcm/css/sliders.css
index dbab145938f68bfc894654ed0867d80c4d221530..b1f3da9500c504f812bfff04519cde0900ba0479 100644
--- a/vcm/css/sliders.css
+++ b/vcm/css/sliders.css
@@ -93,4 +93,10 @@
}
.my-legend a {
color: rgb(0, 0, 0);
- }
\ No newline at end of file
+ }
+
+
+
+ .potatoFood { background: rgb(189, 146, 98); }
+ .tomatoFood { background: rgb(241, 73, 43); }
+ .otherFood { background: rgb(69, 126, 69); }
\ No newline at end of file
diff --git a/vcm/index.html b/vcm/index.html
index bc65c5886e93bcdc752fbf3ac104fcafd302bb4b..5e38f767ea76d0d1ea8951ed0f22842e2f6c642f 100644
--- a/vcm/index.html
+++ b/vcm/index.html
@@ -1191,8 +1191,64 @@
liegt derzeit im Trend. Sie kann die lokale Versorgung mit Lebensmitteln verbessern, das Bewusstsein der Bewohner für
einen gesunden Lebensstil und die Beteiligung an der Gemeinschaft stärken und den Wärmeinseleffekt verringern.
Sie können das Urban-Farming-Konzept im Rosensteinquartier gestalten, indem Sie die folgenden Variablen eingeben:</p><br>
- <p class="contentOne">A) Bitte geben Sie die Mischung der Kulturen auf den Dächern an.</p><br>
- <p class="contentOne">B) Bitte geben Sie den prozentualen Anteil der Dachfläche an, auf der Regenwasser gesammelt werden soll.</p><br>
+ <p class="contentOne">Wie viel Prozent der Dachfläche soll für den Anbau von Gemüse genutzt werden?</p>
+ <div id="sliderFood"></div>
+ <p id="input_roof" class="contentOne"></p><br>
+ <p class="contentOne">Bitte geben Sie die Mischung der Kulturen auf den Dächern an.</p><br>
+ <div id="sliderFoodMixture"></div><br>
+ <table style="width: 100%">
+ <tr>
+ <td style="background-color:rgb(189, 146, 98);color:black">Kartoffel</td>
+ <td style="background-color:rgb(241, 73, 43);color:black">Tomate</td>
+ <td style="background-color:rgb(69, 126, 69);color:black">Andere</td>
+ </tr>
+ <tr>
+ <td id="potato_percent" style="background-color:rgb(189, 146, 98);color:black">???</td>
+ <td id="tomato_percent" style="background-color:rgb(241, 73, 43);color:black">???</td>
+ <td id="other_percent" style="background-color:rgb(69, 126, 69);color:black">???</td>
+ </tr>
+ </table><br>
+ <button id="BTN_foodcalc" onclick="calc_food();calc_demand();calc_selfsuf();">Berechnen</button>
+ <p>Nahrungsmittelpotenzial in Tonnen pro Jahr</p>
+ <table style="width: 100%">
+ <tr>
+ <td>Kartoffel</td>
+ <td>Tomate</td>
+ <td>Andere</td>
+ </tr>
+ <tr>
+ <td id="potato_food">???</td>
+ <td id="tomato_food">???</td>
+ <td id="other_food">???</td>
+ </tr>
+ </table>
+ <p>Nahrungsmittelverbrauch in Tonnen pro Jahr</p>
+ <table style="width: 100%">
+ <tr>
+ <td>Kartoffel</td>
+ <td>Tomate</td>
+ <td>Andere</td>
+ </tr>
+ <tr>
+ <td id="potato_use">???</td>
+ <td id="tomato_use">???</td>
+ <td id="other_use">???</td>
+ </tr>
+ </table>
+ <p>Selbstversorgungsrate in Prozent</p>
+ <table style="width: 100%">
+ <tr>
+ <td>Kartoffel</td>
+ <td>Tomate</td>
+ <td>Andere</td>
+ </tr>
+ <tr>
+ <td id="potato_self">???</td>
+ <td id="tomato_self">???</td>
+ <td id="other_self">???</td>
+ </tr>
+ </table>
+
</div>
<!-- ======================================================================================================================================================================== -->
<!-- Noise -->
@@ -1359,6 +1415,7 @@
<script src="templates/story/virtualcitystory.js"></script>
<script src="js/DragnDrop.js"></script>
<script src="js/updown.js"></script>
+ <script src="js/food.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/vcm/js/food.js b/vcm/js/food.js
new file mode 100644
index 0000000000000000000000000000000000000000..1dd81156629b6709e60d1cb22a857d451062e370
--- /dev/null
+++ b/vcm/js/food.js
@@ -0,0 +1,138 @@
+//variables needed
+
+var roofArea = 76821.1
+var cropgrowing = 90.0
+var roofArea_used
+
+var potato_tpy
+var potato_percent = 25
+var potato_yield = 11.925
+var tomato_tpy
+var tomato_percent = 25
+var tomato_yield = 13.102
+var other_tpy
+var other_percent = 50
+var salat_yield = 8.615
+var karrot_yield = 5.381
+
+function calc_food() {
+
+
+ cropgrowing = Number(document.getElementById("input_roof").innerHTML)
+ potato_percent = Number(document.getElementById("potato_percent").innerHTML)
+ tomato_percent = Number(document.getElementById("tomato_percent").innerHTML)
+ other_percent = Number(document.getElementById("other_percent").innerHTML)
+
+
+ roofArea_used = roofArea * (cropgrowing/100);
+
+ potato_tpy = roofArea_used/10000*potato_yield*(potato_percent/100)
+
+ tomato_tpy = roofArea_used/10000*tomato_yield*(tomato_percent/100)
+
+ other_tpy = roofArea_used/10000*((salat_yield+karrot_yield)/2)*(other_percent/100)
+
+ document.getElementById("potato_food").innerHTML = potato_tpy.toFixed(2)
+ document.getElementById("tomato_food").innerHTML = tomato_tpy.toFixed(2)
+ document.getElementById("other_food").innerHTML = other_tpy.toFixed(2)
+}
+
+
+
+var numbPeople = 5780
+var potato_capita = 58.73
+var tomato_capita = 13.99
+var other_capita = 69.63
+
+var potato_use
+var tomato_use
+var other_use
+
+function calc_demand() {
+
+ potato_use =numbPeople/1000 *potato_capita
+ tomato_use =numbPeople/1000 *tomato_capita
+ other_use =numbPeople/1000 *other_capita
+
+
+ document.getElementById("potato_use").innerHTML = potato_use.toFixed(2)
+ document.getElementById("tomato_use").innerHTML = tomato_use.toFixed(2)
+ document.getElementById("other_use").innerHTML = other_use.toFixed(2)
+
+}
+
+var potato_selfsuf
+var tomato_selfsuf
+var other_selfsuf
+
+function calc_selfsuf() {
+
+ potato_selfsuf = (potato_tpy/potato_use)*100
+ tomato_selfsuf = (tomato_tpy/tomato_use)*100
+ other_selfsuf = (other_tpy/other_use)*100
+
+ document.getElementById("potato_self").innerHTML = potato_selfsuf.toFixed(2)
+ document.getElementById("tomato_self").innerHTML = tomato_selfsuf.toFixed(2)
+ document.getElementById("other_self").innerHTML = other_selfsuf.toFixed(2)
+
+}
+
+
+var skipSlider = document.getElementById('sliderFood');
+
+noUiSlider.create(skipSlider, {
+ range: {
+ 'min': 0,
+ '10%': 10,
+ '20%': 20,
+ '30%': 30,
+ '40%': 40,
+ '50%': 50,
+ '60%': 60,
+ '70%': 70,
+ '80%': 80,
+ '90%': 90,
+ 'max': 100
+ },
+ snap: true,
+ start: [90]
+});
+
+var inputroof = document.getElementById("input_roof")
+
+skipSlider.noUiSlider.on('update', function (values, handle) {
+ inputroof.innerHTML = values[handle];
+});
+
+
+var mergingTooltipSlider = document.getElementById('sliderFoodMixture');
+
+noUiSlider.create(mergingTooltipSlider, {
+ start: [25, 50],
+ connect: [true, true,true],
+ tooltips: [false, false],
+ range: {
+ 'min': 0,
+ 'max': 100
+ }
+});
+
+
+var connectfood = mergingTooltipSlider.querySelectorAll('.noUi-connect');
+var classesfood = ['potatoFood', 'tomatoFood', 'otherFood'];
+
+for (var i = 0; i < connectfood.length; i++) {
+ connectfood[i].classList.add(classesfood[i]);
+}
+
+
+var inputroof_potato_percent = document.getElementById("potato_percent")
+var inputroof_tomato_percent = document.getElementById("tomato_percent")
+var inputroof_other_percent = document.getElementById("other_percent")
+
+mergingTooltipSlider.noUiSlider.on('update', function (values, handle) {
+
+ inputroof_potato_percent.innerHTML = Number(values[0]).toFixed(2);
+ inputroof_tomato_percent.innerHTML = Number(values[1] - values[0]).toFixed(2);
+ inputroof_other_percent.innerHTML = (100 - Number(values[1])).toFixed(2);
+});
\ No newline at end of file