2015-12-02 13:50:41 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
2017-05-07 22:53:04 +02:00
|
|
|
<title>VILLASnode Websocket Mockup</title>
|
2015-12-02 13:50:41 +01:00
|
|
|
<link rel="stylesheet" href="style.css" />
|
2017-04-07 17:25:19 +02:00
|
|
|
<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" />
|
2015-12-02 13:50:41 +01:00
|
|
|
|
2017-04-07 17:25:19 +02:00
|
|
|
<script src="jquery/jquery-3.2.0.js"></script>
|
|
|
|
|
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
|
2015-12-02 13:50:41 +01:00
|
|
|
<script src="flot/jquery.flot.js"></script>
|
|
|
|
|
<script src="flot/jquery.flot.time.js"></script>
|
2017-05-08 00:45:58 +02:00
|
|
|
<script src="flot/jquery.flot.selection.js"></script>
|
2016-02-04 16:28:31 +01:00
|
|
|
<script src="msg.js"></script>
|
2015-12-02 13:50:41 +01:00
|
|
|
<script src="app.js"></script>
|
2017-04-06 20:53:18 +02:00
|
|
|
<script src="utils.js"></script>
|
2017-04-07 17:24:51 +02:00
|
|
|
<script src="api.js"></script>
|
2015-12-02 13:50:41 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="wrapper">
|
|
|
|
|
<div id="header">
|
2017-03-29 04:04:20 +02:00
|
|
|
<img class="logo" alt="EONERC" src="acs_eonerc_logo.svg" />
|
2017-05-07 22:53:04 +02:00
|
|
|
<h1>VILLASnode Websocket Mockup</h1>
|
2015-12-02 13:50:41 +01:00
|
|
|
</div>
|
|
|
|
|
<div id="container">
|
2017-04-07 17:24:51 +02:00
|
|
|
<div class="node-selector"></div>
|
2015-12-04 01:49:33 +01:00
|
|
|
|
2015-12-02 13:50:41 +01:00
|
|
|
<div class="plot-container">
|
|
|
|
|
<div id="placeholder" class="plot-placeholder"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2015-12-04 01:49:33 +01:00
|
|
|
<div class="controls">
|
2016-07-12 10:44:20 +02:00
|
|
|
<div class="left">
|
|
|
|
|
<div class="inputs">
|
|
|
|
|
<dl>
|
2017-04-07 17:24:51 +02:00
|
|
|
<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">
|
2017-05-07 22:51:59 +02:00
|
|
|
<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">
|
2016-07-12 10:44:20 +02:00
|
|
|
</dd>
|
2017-04-07 17:24:51 +02:00
|
|
|
|
2016-07-12 10:44:20 +02:00
|
|
|
<dt><label for="slider">Slider</label></dt>
|
|
|
|
|
<dd><div id="slider"></div></dd>
|
2017-04-07 17:24:51 +02:00
|
|
|
|
2016-07-12 10:44:20 +02:00
|
|
|
<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>
|
2017-04-07 17:24:51 +02:00
|
|
|
|
|
|
|
|
<dt><label for="updaterate">Plot update rate</label></dt>
|
|
|
|
|
<dd><div id="updaterate"></div></dd>
|
2016-07-12 10:44:20 +02:00
|
|
|
</dl>
|
|
|
|
|
</div>
|
2016-07-11 18:19:48 +02:00
|
|
|
|
2016-07-12 10:44:20 +02:00
|
|
|
<div class="connection">
|
|
|
|
|
<dl>
|
|
|
|
|
<dt><label>Status</label></dt>
|
|
|
|
|
<dd>
|
|
|
|
|
<button id="pause">Pause</button>
|
|
|
|
|
<button id="play">Play</button>
|
2017-04-07 17:24:51 +02:00
|
|
|
<span id="status"></span>
|
2016-07-12 10:44:20 +02:00
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<br style="clear: left;" />
|
2015-12-04 01:49:33 +01:00
|
|
|
</div>
|
2015-12-02 13:50:41 +01:00
|
|
|
</div>
|
|
|
|
|
<div id="footer">
|
2017-04-07 17:24:51 +02:00
|
|
|
<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>
|
2015-12-02 13:50:41 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
