You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
6.0 KiB
HTML
104 lines
6.0 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
|
|
<html xmlns="http://www.w3.org/TR/xhtml1/strict" >
|
|
<head>
|
|
<title>Simulador de Aerogeneradores y Parques Eólicos (SAPE), CSC-CONICET</title>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.136/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.136/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@87.5,100..900&display=swap" rel="stylesheet">
|
|
<link href="style.css" rel="stylesheet">
|
|
<style>
|
|
|
|
</style>
|
|
<script type="module" src="js/main.js"></script>
|
|
<script>
|
|
function show(s) {
|
|
document.getElementById("text").innerHTML = s;
|
|
document.getElementById("popup").style.display = "block";
|
|
}
|
|
|
|
function hide() {
|
|
document.getElementById("popup").style.display = "none";
|
|
}
|
|
|
|
function help() {
|
|
show('<h4>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h4>' +
|
|
'<p>Desarrollado por:</p><ul><li>Dimas Alejandro Barile (CSC-CONICET),</li><li>José Alberto Martínez Trespalacios (Universidad Tecnológica de Bolívar),</li><li>Sebastián Santisi (CSC-CONICET).</li></ul>' +
|
|
'<p>Monumento a la Bandera modelado por <a href="https://www.thingiverse.com/rfrosch/" target="_blank">rfrosch</a> bajo licencia CC BY-NC-SA.</p>' +
|
|
'<br /><p><b>¿Cómo se juega con el simulador?</b></p> <ul> <li>Clickeá sobre los aerogeneradores para ubicarlos donde creas que van a funcionar mejor.</li> <li>Intentá que todos los aerogeneradores reciban un viento con energía evitando posicionarlos atrás de otros aerogeneradores.</li> <li>Elegí la dirección de viento con los botones <div class="b">⬅</div><div class="b">⬉</div><div class="b">⬆</div><div class="b">⬈</div> y presiona ¡SIMULAR!</li> <li>Los aerogeneradores que reciban un viento poco energético se marcarán con un signo de exclamación ⚠️.</li> <li>El objetivo es que tu parque supere el 80% de eficiencia para cada uno de los vientos.</li> <li>Si ya cumpliste el objetivo para todos los vientos agregá más aerogeneradores con los botones <div class="b">+</div><div class="b">-</div>.</li> </ul>'
|
|
);
|
|
|
|
}
|
|
|
|
/*function up() { light.shadow.camera.top += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
|
|
function down() { light.shadow.camera.bottom -= 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
|
|
function left() { light.shadow.camera.left -= 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
|
|
function right() { light.shadow.camera.right += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()} */
|
|
function rot(angle) {
|
|
document.getElementById("rot0").className = document.getElementById("rot225").className = document.getElementById("rot270").className = document.getElementById("rot315").className = "";
|
|
document.getElementById("rot" + angle).className = "sel";
|
|
ws.setRotation(angle);
|
|
}
|
|
|
|
document.addEventListener('mousemove', follow, false);
|
|
function follow(e) {
|
|
follower = document.getElementById("follower");
|
|
status = follower.style.display;
|
|
follower.style.display = "block";
|
|
follower.style.left = (e.clientX - follower.clientWidth) + 'px';
|
|
follower.style.top = (e.clientY - follower.clientHeight) + 'px';
|
|
follower.style.display = status;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="follower"></div>
|
|
<div id="results"></div>
|
|
<div id="popup">
|
|
<div id="close" onclick="hide();">✗</div>
|
|
<div id="text">
|
|
<center><img src="assets/logooscuro.png" style="width: 30vh;" /></center>
|
|
<h3>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h3>
|
|
<h4>Centro de Simulación Computacional para Aplicaciones Tecnológicas (CSC) - CONICET</h4>
|
|
<p>¡Bienvenido al SAPE! Acá vas a poder experimentar de forma simplificada el diseño de un parque eólico.</p>
|
|
<p>¿Cómo se juega con el simulador?</p>
|
|
<ul>
|
|
<li>Clickeá sobre los aerogeneradores para ubicarlos donde creas que van a funcionar mejor.</li>
|
|
<li>Intentá que todos los aerogeneradores reciban un viento con energía evitando posicionarlos atrás de otros aerogeneradores.</li>
|
|
<li>Elegí la dirección de viento con los botones <div class="b">⬅</div><div class="b">⬉</div><div class="b">⬆</div><div class="b">⬈</div> y presiona ¡SIMULAR!</li>
|
|
<li>Los aerogeneradores que reciban un viento poco energético se marcarán con un signo de exclamación ⚠️.</li>
|
|
<li>El objetivo es que tu parque supere el 80% de eficiencia para cada uno de los vientos.</li>
|
|
<li>Si ya cumpliste el objetivo para todos los vientos agregá más aerogeneradores con los botones <div class="b">+</div><div class="b">-</div>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="right">
|
|
<ul>
|
|
<li title="Viento del Este" class="sel" id="rot0" onclick="rot(0);">⬅</li>
|
|
<li title="Viento del Sudeste" id="rot315" onclick="rot(315);">⬉</li>
|
|
<li title="Viento del Sur" id="rot270" onclick="rot(270);">⬆</li>
|
|
<li title="Viento del Sudoeste" id="rot225" onclick="rot(225);">⬈</li>
|
|
</ul>
|
|
<ul>
|
|
<li title="Agregar aerogenerador" onclick="ws.addWindMill();">+</li>
|
|
<li title="Quitar aerogenerador" onclick="ws.removeWindMill();">-</li>
|
|
<li title="Sobre SAPE" class="sel" onclick="help();" style="cursor: help">?</li>
|
|
</ul>
|
|
<div id="button" onclick="ws.simulate();">¡SIMULAR!</div>
|
|
</div>
|
|
<div id="copyright">©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>
|
|
<div id="logo"><a href="http://www.csc.gob.ar"><img src="assets/logooscuro.png" /></a></div>
|
|
</div>
|
|
</body>
|
|
</html>
|