From 19a3ab41e465fa2a51831dc1411af200e0eb3d7e Mon Sep 17 00:00:00 2001 From: Patrick <patrick.wuerstle@gmx.de> Date: Fri, 25 Mar 2022 14:35:26 +0100 Subject: [PATCH] sliders.css, index.html und food.js aktualisiert --- vcm/css/sliders.css | 8 ++- vcm/index.html | 61 +++++++++++++++++++- vcm/js/food.js | 138 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 204 insertions(+), 3 deletions(-) create mode 100644 vcm/js/food.js diff --git a/vcm/css/sliders.css b/vcm/css/sliders.css index dbab14593..b1f3da950 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 bc65c5886..5e38f767e 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 000000000..1dd811566 --- /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 -- GitLab