<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VILLASnode Websocket Mockup</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.theme.css" /> <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.structure.css" /> <script src="jquery/jquery-3.2.0.js"></script> <script src="jquery-ui-1.12.1/jquery-ui.js"></script> <script src="flot/jquery.flot.js"></script> <script src="flot/jquery.flot.time.js"></script> <script src="flot/jquery.flot.selection.js"></script> <script src="msg.js"></script> <script src="app.js"></script> <script src="utils.js"></script> <script src="api.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <img class="logo" alt="EONERC" src="acs_eonerc_logo.svg" /> <h1>VILLASnode Websocket Mockup</h1> </div> <div id="container"> <div class="node-selector"></div> <div class="plot-container"> <div id="placeholder" class="plot-placeholder"></div> </div> <div class="controls"> <div class="left"> <div class="inputs"> <dl> <dt><label>Switches</label></dt> <dd class="inputs-checkboxes"> <label for="checkbox-1">1</label> <input type="checkbox" name="checkbox-1" id="checkbox-1"> <label for="checkbox-2">2</label> <input type="checkbox" name="checkbox-2" id="checkbox-2"> <label for="checkbox-3">3</label> <input type="checkbox" name="checkbox-3" id="checkbox-3"> <label for="checkbox-4">4</label> <input type="checkbox" name="checkbox-4" id="checkbox-4"> <label for="checkbox-5">5</label> <input type="checkbox" name="checkbox-5" id="checkbox-5"> <label for="checkbox-6">6</label> <input type="checkbox" name="checkbox-6" id="checkbox-6"> <label for="checkbox-7">7</label> <input type="checkbox" name="checkbox-7" id="checkbox-7"> <label for="checkbox-8">8</label> <input type="checkbox" name="checkbox-8" id="checkbox-8"> </dd> <dt><label for="slider">Slider</label></dt> <dd><div id="slider"></div></dd> <dt><label for="file">File</label></dt> <dd><input type="file" onchange="fileStart(event)" /></dd> </dl> </div> </div> <div class="right"> <div class="plot-controls"> <dl> <dt><label for="timespan">Plot timespan</label></dt> <dd><div id="timespan"></div></dd> <dt><label for="updaterate">Plot update rate</label></dt> <dd><div id="updaterate"></div></dd> </dl> </div> <div class="connection"> <dl> <dt><label>Status</label></dt> <dd> <button id="pause">Pause</button> <button id="play">Play</button> <span id="status"></span> </dd> </dl> </div> </div> <br style="clear: left;" /> </div> </div> <div id="footer"> <p>© 2017 Institute for Automation of Complex Power Systems<br> EON Energy Research Center<br> RWTH Aachen University<br> </p> <p>Authors: <a href="mailto:stvogel@eonerc.rwth-aachen.de">Steffen Vogel</a>, <a href="mailto:mgrigul@eonerc.rwth-aachen.de">Markus Grigul</a></p> </div> </div> </body> </html>