Select Git revision
-
Jonathan Klimt authoredJonathan Klimt authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
index.html 7.80 KiB
<!DOCTYPE html>
<html>
<title>LEGOS</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="css/w3.css">
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Verdana, sans-serif;
}
</style>
<script>
setInterval(get_status, 1000);
var brightness = 0.4;
var sw_break = 0;
var sw_fault = 0;
function loop_brightness() {
brightness = (brightness + 0.2) % 1.2;
document.getElementById("bulb").style.fillOpacity = String(brightness);
var x = new XMLHttpRequest();
x.open("POST", "post", true);
x.send("light|" + brightness);
}
function toggle_line() {
sw_break = (sw_break == 1) ? 0 : 1;
document.getElementById("sw1_open").style.visibility = (sw_break == 1) ? "visible" : "hidden";
document.getElementById("sw2_open").style.visibility = (sw_break == 1) ? "visible" : "hidden";
document.getElementById("sw1_close").style.visibility = (sw_break == 1) ? "hidden" : "visible";
document.getElementById("sw2_close").style.visibility = (sw_break == 1) ? "hidden" : "visible";
var x = new XMLHttpRequest();
x.open("POST", "post", true);
x.send("break|" + sw_break);
}
function toggle_fault() {
sw_fault = (sw_fault == 1) ? 0 : 1;
document.getElementById("fault").style.visibility = (sw_fault == 1) ? "visible" : "hidden";
document.getElementById("fault_icon").style.visibility = (sw_fault == 1) ? "hidden" : "visible";
var x = new XMLHttpRequest();
x.open("POST", "post", true);
x.send("fault|" + sw_fault);
}
function get_status() {
var x = new XMLHttpRequest();
x.onreadystatechange = function () {
if (x.readyState == 4 && x.status == 200) {
var resp = x.responseText.split(";");
var bus_a = resp[0].split("|")[1];
var bus_b = resp[1].split("|")[1];
document.getElementById("bus_a").innerHTML = bus_a + " W";
document.getElementById("bus_b").innerHTML = bus_b + " W";
}
};
x.open("GET", "status", true);
x.send();
}
</script>
<body>
<!-- HEADER -->
<header class="w3-container w3-border-bottom w3-border-orange">
<div class="w3-row">
<div class="w3-left">
<h3 class="w3-opacity""><b>Branch</b></h3>
</div>
<div class=" w3-right">
<button class="w3-button w3-text-orange w3-hover-opacity"
onclick="location.href='https://192.168.1.1';">
<h4>←</h4>
</button>
<button class="w3-button w3-text-orange w3-hover-opacity"
onclick="document.getElementById('help').style.display='block'">
<h4>?</h4>
</button>
</div>
</div>
</header>
<!-- HELP -->
<div id="help" class="w3-panel w3-orange w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-orange w3-large w3-display-topright">X</span>
<p class="w3-small">The branch represents the transmission lines between nodes of a grid and thus an
essential part of the infrastracture for power distribution. It allows to measure and control the power
flowing among the entities. The power flow can be manually controlled by toggling the line switch control
<img src="images/switch.png" style="max-height:15px">. Grid faults can be also emulated by toggling the
fault switch control <img src="images/fault.png" style="max-height:15px">.
</p>
</div>
<!-- MAIN -->
<div class="w3-display-container w3-animate-opacity w3-center">
<!-- TOP -->
<div class="w3-row w3-margin-bottom w3-padding">
<div class="w3-left">
<svg viewBox="0 0 44.212619 90" height="80" width="44.21262">
<g transform="translate(-102.13915,-106.12564) scale(1)" stroke-width="1.88976378" stroke="black">
<path d="m 104.88033,139.37353 4.77497,-2.74118" />
<path d="m 143.69901,116.91352 -4.86339,2.82961" />
<path d="m 135.38704,108.86682 -2.74118,4.67121" />
<path d="m 138.83562,136.63235 4.77497,2.74118" />
<path d="m 113.10388,108.86682 2.74118,4.72378" />
<path d="m 104.79191,116.91352 4.86339,2.82961" />
<path d="m 141.48838,128.14352 h 4.86339" />
<path d="m 102.13915,128.14352 h 4.86339" />
<path d="m 124.24534,106.12564 v 4.88902" />
<path
d="m 128.66672,146.6244 c 0,1.51862 0.17685,1.30667 0.17685,4.06756 0,3.07193 -2.37561,4.60834 -4.59811,4.59811 -2.2225,0.0103 -4.59811,-1.52618 -4.59811,-4.59811 0,-2.76089 0.17685,-2.54894 0.17685,-4.06756"
style="fill:none" />
<path
d="m 119.8242,146.44743 c -0.12114,-0.91128 -0.29248,-1.81947 -0.47001,-2.71669 -0.79976,-4.64448 -4.08315,-8.28143 -5.59057,-12.66267 -1.18608,-2.98298 -1.02564,-6.51248 0.6081,-9.2978 1.93545,-3.48423 5.87434,-5.65016 9.87348,-5.65269 3.99914,0.003 7.93803,2.1687 9.87348,5.65293 1.63374,2.78532 1.79418,6.31482 0.6081,9.29779 -1.50742,4.38125 -4.79081,8.0182 -5.59057,12.66268 -0.17753,0.89722 -0.34836,1.80541 -0.46949,2.71657 z"
style="fill:rgb(255, 225, 0);fill-opacity:0.4;" id="bulb" onclick="loop_brightness()" />
</g>
</svg>
</div>
<div class="w3-right w3-margin-top">
<img src="images/fault.png" style="max-height:35px" id="fault_icon" onclick="toggle_fault()">
</div>
</div>
<!-- MIDDLE -->
<div class="w3-middle">
<img src="images/entity.png" alt="Entity"
style="width:75%;min-height:250px;max-height:500px;max-width:490px">
<img src="images/fault.png" id="fault" onclick="toggle_fault()"
style="width:100%;max-width:288px;position:absolute;top:25%;left:25%;visibility:hidden">
</div>
<!-- BOTTOM -->
<div class="w3-cell-row w3-margin-top"> <div class="w3-cell w3-cell-bottom" style="width:30%">
<img src="images/tower.png" alt="Power grid"
style="width:70%;min-height:50px;max-height:180px;max-width:138px">
</div>
<div class="w3-cell w3-cell-top" style="width:40%">
<svg viewBox="0 0 120 80" height="80" width="120">
<g transform="translate(60,40)" id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
<rect ry="3.4395833" x="-55" y="-35" height="70" width="110"
style="opacity:1;fill:#e2e2e2;fill-opacity:1;stroke:black;stroke-width:4.5" />
<text x="-45" y="-15" fill="black">Power: </text>
<text x="-40" y="10" fill="black" font-weight="bold" id="bus_a">0 W</text>
<text x="0" y="27" fill="black" font-weight="bold" id="bus_b">0 W</text>
</g>
</svg>
<svg class="" viewBox="0 0 100 50" height="50" width=100% preserveAspectRatio="none" onclick="toggle_line()">
<style>
line, circle, path{
stroke-width: 3;
vector-effect: non-scaling-stroke;
}
</style>
<defs>
<marker id="arrowhead" markerWidth="7" markerHeight="9" markerUnits="userSpaceOnUse" refX="7"
refY="4.5" orient="auto">
<polygon points="0 0, 7 4.5, 0 9" />
</marker>
</defs>
<line x1="0" y1="35" x2="35" y2="35" stroke="black"/>
<line x1="65" y1="35" x2="100" y2="35" stroke="black"/>
<line id="sw1_open" x1="35" y1="35" x2="65" y2="15" stroke="orange" visibility="hidden"/>
<line id="sw1_close" x1="35" y1="35" x2="65" y2="35" stroke="orange"/>
<path id="sw2_open" d="M 40 10 q 10 5 15 30" fill="none" marker-end="url(#arrowhead)" stroke="black" visibility="hidden"/>
<path id="sw2_close" d="M 50 55 q 10 -20 0 -40" fill="none" marker-end="url(#arrowhead)" stroke="black"/>
<circle cx="35" cy="35" r="4" stroke="black"/>
<circle cx="65" cy="35" r="4" stroke="black"/>
</svg>
</div>
<div class="w3-cell w3-cell-bottom" style="width:30%">
<img src="images/tower.png" alt="Power grid"
style="width:70%;min-height:50px;max-height:180px;max-width:138px">
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="w3-container w3-border-top w3-border-orange w3-padding">
<div class="w3-row">
<div class="w3-left">
<p class="w3-opacity w3-small">© ACS 2021</p>
</div>
<div class="w3-right">
<img src="images/legos.png" alt="Logo" style="height:25px">
</div>
</div>
</footer>
</body>
</html>