Skip to content
GitLab
Commit 19a3ab41 authored by Patrick's avatar Patrick
Browse files

sliders.css, index.html und food.js aktualisiert

parent e6a48745
master workingVersion
1 merge request!1update some ui
Hide whitespace changes
Inline Side-by-side
Showing
with 204 additions and 3 deletions
+204 -3
vcm/css/sliders.css
+ 7
- 1
View file @ 19a3ab41
......@@ -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
vcm/index.html
+ 59
- 2
View file @ 19a3ab41
......@@ -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
vcm/js/food.js 0 → 100644
+ 138
- 0
View file @ 19a3ab41
//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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal