ssantisi
/
sape
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Validación

Browse Source
main
Sebastián Santisi 12 months ago
parent 89c34931ad
commit 67a6c99e55
3 changed files with 93 additions and 5 deletions
Show Stats Download Patch File Download Diff File

3
index.html
Unescape Escape View File

@ -64,7 +64,7 @@ function follow(e) {
<div id="follower"></div>
<div id="results"></div>
<div id="popup">
<div id="close" onclick="hide();">✗</div>
<div id="close" onclick="hide();" onmousedown="window.event.stopPropagation();" onmouseup="window.event.stopPropagation();" ontouchstart="window.event.stopPropagation();" ontouchend="window.event.stopPropagation();">✗</div>
<div id="text">
<center><img src="assets/logooscuro.png" style="width: 25vh;" /></center>
<h3>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h3>
@ -94,6 +94,7 @@ function follow(e) {
<li title="Sobre SAPE" class="sel" onclick="help();" style="cursor: help">?</li>
</ul>
<div id="button" onclick="ws.simulate();">¡SIMULAR!</div>
<div id="button_validate" onmousedown="window.event.stopPropagation();" onmouseup="window.event.stopPropagation();" ontouchstart="window.event.stopPropagation();" ontouchend="window.event.stopPropagation();" onclick="window.event.stopPropagation(); ws.validate();">¡VALIDAR!<br/><span style="font-size: .5em;padding: 0;">con todos los vientos</span></div>
</div>
<div id="copyright">&copy;2024 Centro de Simulación Computacional para Aplicaciones Tecnológicas (CSC) - CONICET</div>
<div id="rotate"><img src="assets/rotar_telefono.png" /><p>Rotá tu<br />dispositivo</p></div>

69
js/main.js
Unescape Escape View File

@ -15,6 +15,9 @@ const renderer = new THREE.WebGLRenderer({antialias: true});
document.body.appendChild(renderer.domElement);
//renderer.setPixelRatio( window.devicePixelRatio );
const EXCLAMATION = '⚠️';
const PARTY = '🥳';
class WindSimulation {
constructor(width, height, mills) {
this.width = width;
@ -26,6 +29,7 @@ class WindSimulation {
this.wm = null;
this.simulation = null;
this.simulationPots = null;
this.simulationPot = null;
this.xhr = null;
@ -139,7 +143,7 @@ class WindSimulation {
var i = this.wms.indexOf(wm);
var follower = document.getElementById("follower");
var perc = Math.round(this.simulationPot[i] * 100 / 14.95);
follower.innerHTML = "<h3>Aerogenerador Nº" + (i + 1) + "</h4>" + (Math.round(this.simulationPot[i] * 100) / 100) + ' GWh<br /><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 80 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div><br />' + perc + '% ' + (perc < 50 ? '⚠️' : '');
follower.innerHTML = "<h3>Aerogenerador Nº" + (i + 1) + "</h4>" + (Math.round(this.simulationPot[i] * 100) / 100) + ' GWh<br />' + this.divPercentBar(perc, 50) + '<br />' + perc + '% ' + (perc < 50 ? '⚠️' : '');
follower.style.display = "block";
}
}
@ -174,12 +178,14 @@ class WindSimulation {
resetSimulation() {
scene.remove(this.simulation);
this.simulation = null;
this.simulationPots = null;
this.simulationPot = null;
for(var i = 0; i < this.mills; i++)
this.wms[i].lowPower(false);
document.getElementById("follower").style.display = "none";
document.getElementById("results").style.display = "none";
document.getElementById("numbers").innerHTML = "";
document.getElementById("button_validate").style.display = "none";
}
setRotation(dir) {
@ -243,7 +249,58 @@ class WindSimulation {
xhr.send(data);
}
add_simulation(ws, pot) {
validate() {
if(this.simulationPots == null) return;
var html = '<p>En un parque real tenemos que garantizar que la posición de los aerogeneradores sea la adecuada para todos los vientos posibles.</p><p>Este es el resultado de ensayar tu configuración con los 4 vientos disponibles en este simulador:</p><center><table><tr><th>Aerogenerador</th><th>Viento <div class="b">⬅</div></th><th>Viento <div class="b">⬉</div></th><th>Viento <div class="b">⬆</div></th><th>Viento <div class="b">⬈</div></th></tr>';
var pots = {0: 0, 225: 0, 270: 0, 315: 0}
for(let i = 0; i < this.simulationPot.length; i++) {
html += '<tr><td><b>Nº' + (i + 1) + '</b></td>';
[0, 315, 270, 225].forEach(pot => {
var val = this.simulationPots[pot][i];
pots[pot] += val;
var perc = val / 14.95 * 100;
html += '<td>' + this.divPercentBar(perc, 50) + ' ' + Math.round(perc) + '%</td>';
});
html += "</tr>";
}
html += '<tr class="last"><td><b>TOTAL</b></td>';
var notValid = [];
[0, 315, 270, 225].forEach(pot => {
var perc = pots[pot] / 14.95 * 100 / this.simulationPot.length;
if(perc < 80) notValid.push(pot);
html += '<td>' + this.divPercentBar(perc, 80) + ' ' + Math.round(perc) + '%</td>';
});
html += "</table></center>";
if(notValid.length) {
html += '<div style="float: left; font-size: 3em; padding-right: .3em;">' + EXCLAMATION + '</div><p>Para ser una configuración correcta hay que superar el 80% de producción para todas las direcciones de vientos.</p><p>Tu simulación no valida con ' + (notValid.length > 1 ? 'las direcciones ' : 'la dirección ');
var dirs = {0: '⬅', 315: '⬉', 270: '⬆', 225: '⬈'};
for(let i = 0; i < notValid.length; i++) {
html += '<span style="display: inline-block;" class="b">' + dirs[notValid[i]] + '</span>';
}
html += '.</p><p>Usá los botones de arriba a la derecha para simular tu parque con cada una de las direcciones asegurándote de cumplir con el objetivo.</p>';
}
else {
html += '<div style="float: left; font-size: 3em; padding-right: .3em;">' + PARTY + '</div><p>¡Felicitaciones! Tu configuración valida una producción de al menos el 80% para todas las direcciones de vientos del simulador.</p>';
if(this.simulationPot.length < 10)
html += '<p>Utilizá el botón <span class="b">+</span> para agregar más aerogeneradores y producir más energía en tu parque.</p>';
else
html += '<p>¡SAPE! Lograste hacer funcionar tu parque con el máximo de aerogeneradores que permite este simulador.</p>';
}
window.show(html);
}
divPercentBar(perc, limit) {
return '<div class="bar" style="background: linear-gradient(to right, ' + (perc >= limit ? '#fff' : '#f00') + ' ' + perc + '%, #0000 ' + perc + '%);"></div>';
}
add_simulation(ws, pots) {
var pot = pots[this.dir];
var sum = 0;
for(let i = 0; i < pot.length; i++) {
this.wms[i].lowPower(pot[i] < 14.95 * 0.5);
@ -258,10 +315,10 @@ class WindSimulation {
for(let i = 0; i < pot.length; i++) {
var perc = Math.round(pot[i] / 14.95 * 100);
innerHTML += '<tr><td><b>Nº' + (i + 1) + ':</b></td><td>' + Math.round(pot[i] * 100) / 100 + ' GWh</td><td><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 50 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div> ' + perc + '% ' + (perc < 50 ? '⚠️' : '') + '</td></tr>'
innerHTML += '<tr><td><b>Nº' + (i + 1) + ':</b></td><td>' + Math.round(pot[i] * 100) / 100 + ' GWh</td><td>' + this.divPercentBar(perc, 50) + ' ' + perc + '% ' + (perc < 50 ? '⚠️' : '') + '</td></tr>'
}
var perc = Math.round(sum / 14.95 / pot.length * 100);
innerHTML += '<tr class="last"><td>TOTAL:</td><td>' + Math.round(sum * 100) / 100 + ' GWh</td><td><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 80 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div> ' + perc + '% ' + (perc < 80 ? '⚠️' : '') + '</td></tr></table>';
innerHTML += '<tr class="last"><td>TOTAL:</td><td>' + Math.round(sum * 100) / 100 + ' GWh</td><td>' + this.divPercentBar(perc, 80) + ' ' + perc + '% ' + (perc < 80 ? '⚠️' : '') + '</td></tr></table>';
results.innerHTML = innerHTML;
results.style.display = "block";
@ -292,7 +349,11 @@ class WindSimulation {
if(this.simulation)
this.resetSimulation();
document.getElementById("button_validate").style.display = "block";
this.simulation = mesh;
this.simulationPots = pots;
this.simulationPot = pot;
scene.add(mesh);
}

26
style.css
Unescape Escape View File

@ -77,6 +77,19 @@ h3, h4 {
margin: 0 .2vh;
}
#popup table {
text-align: center;
white-space: nowrap;
}
#popup td {
padding-left: 1em;
}
#popup td:first-child {
padding-left: 0;
}
#close {
text-align: right;
font-weight: 900;
@ -104,6 +117,19 @@ h3, h4 {
background: blue;
}
#button_validate {
display: none;
margin-top: 1vh;
padding: 2vh 4vh;
background: darkred;
font-weight: 800;
line-height: .5em;
}
#button_validate:hover {
background: red;
}
#right {
position: absolute;
max-width: 75vw;

Write Preview
Loading…
Cancel
Save