98300a7aa0
this should much better represent the output from s0 electricity meters and water meters, where we get one impuls per energy or volume unit and (more important) the time interval depends on the throughput. this does not make much sense for temperature, though. unfortunately, we have currently no means to select different chart types depending on the entity type. also, I had to change the backend to output the starting time of the interval (flot needs that) instead of the ending time, which changes the "lines" chart. but since this chart is wrong for electricity and water anyway, it doesn't realy matter, though.
167 lines
6.8 KiB
HTML
167 lines
6.8 KiB
HTML
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>volkszaehler.org - web frontend</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
|
|
<link rel="apple-touch-icon" href="../favicon.ico">
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="javascripts/jquery/jquery-1.5.1.js"></script>
|
|
<script type="text/javascript" src="javascripts/jquery/jquery-ui-1.8.10.min.js"></script>
|
|
<script type="text/javascript" src="javascripts/jquery/jquery-treeTable.js"></script>
|
|
<script type="text/javascript" src="javascripts/jquery/jquery-extensions.js"></script>
|
|
|
|
<!-- misc helpers -->
|
|
<script type="text/javascript" src="javascripts/json.js"></script>
|
|
<script type="text/javascript" src="javascripts/helper.js"></script>
|
|
<!--<script type="text/javascript" src="javascripts/firebug-lite.js"></script> loaded dynamically -->
|
|
|
|
<!--[if IE]><script language="javascript" type="text/javascript" src="javascripts/flot/excanvas.min.js"></script><![endif]-->
|
|
<script type="text/javascript" src="javascripts/flot/jquery.flot.js"></script>
|
|
<script type="text/javascript" src="javascripts/flot/jquery.flot.crosshair.js"></script>
|
|
<script type="text/javascript" src="javascripts/flot/jquery.flot.selection.js"></script>
|
|
|
|
<!-- volkszaehler.org code -->
|
|
<script type="text/javascript" src="javascripts/init.js"></script>
|
|
<script type="text/javascript" src="javascripts/options.js"></script>
|
|
<script type="text/javascript" src="javascripts/functions.js"></script>
|
|
<script type="text/javascript" src="javascripts/uuid.js"></script>
|
|
<script type="text/javascript" src="javascripts/wui.js"></script>
|
|
<script type="text/javascript" src="javascripts/entity.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.10.css" />
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.treeTable.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.ui.custom.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="header"></div>
|
|
<div id="content">
|
|
<div id="headline">
|
|
<h2 id="title"></h2>
|
|
<button id="permalink"><img src="images/link.png" alt="permalink" /> Permalink</button>
|
|
<br style="clear: both" />
|
|
</div>
|
|
<div id="plot">
|
|
<div id="flot"></div>
|
|
<div id="overlay"></div>
|
|
</div>
|
|
|
|
<div id="accordion">
|
|
<div id="controls">
|
|
<button value="move-back"><img src="images/control_rewind_blue.png" title="move back" /></button>
|
|
<button value="zoom-in"><img src="images/zoom_in.png" title="zoom in" /></button>
|
|
<button value="zoom-out"><img src="images/zoom_out.png" title="zoom out" /></button>
|
|
<button value="zoom-hour">Stunde</button>
|
|
<button value="zoom-day">Tag</button>
|
|
<button value="zoom-week">Woche</button>
|
|
<button value="zoom-month">Monat</button>
|
|
<button value="zoom-year">Jahr</button>
|
|
<button value="move-last">Jetzt <img src="images/control_end_blue.png" title="move to present" /></button>
|
|
<button value="move-forward"><img src="images/control_fastforward_blue.png" title="move forward" /></button>
|
|
</div>
|
|
|
|
<h3><img src="images/table.png" alt="" /> Kanäle</h3>
|
|
<div id="entity-list">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th><img src="images/eye.png" alt="Anzeige" title="Anzeige" /></th>
|
|
<th></th>
|
|
<th>Titel</th>
|
|
<th>Typ</th>
|
|
<th>Min.</th>
|
|
<th>Max.</th>
|
|
<th>∅</th>
|
|
<th>aktuell</th>
|
|
<th>Verbrauch</th>
|
|
<th>Kosten</th>
|
|
<th>Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<div><button name="entity-add"><img src="images/add.png" alt="add" /> Kanal hinzufügen</button></div>
|
|
</div>
|
|
<h3><img src="images/wrench.png" alt="" /> Optionen</h3>
|
|
<div id="options">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Wert</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><label for="refresh"><img src="images/arrow_refresh.png" alt="" /> Automatisch aktualisieren</label></td>
|
|
<td><input type="checkbox" id="refresh" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td><img src="images/eye.png" alt="" /> Darstellung</td>
|
|
<td>
|
|
<label for="render-points"><input type="radio" id="render-points" name="render" value="points" /> Punkte</label>
|
|
<label for="render-lines"><input type="radio" id="render-lines" name="render" value="lines" /> Linien</label>
|
|
<label for="render-steps"><input type="radio" id="render-steps" name="render" value="steps" /> Stufen</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="backend-url"><img src="images/server.png" alt="" /> Backend-Adresse</label></td>
|
|
<td><input type="text" id="backend-url" /></td>
|
|
</tr>
|
|
<!-- <tr>
|
|
<td><label for="tuples"><img src="images/shading.png" alt="" /> Tuples (Auflösung)</label></td>
|
|
<td><input type="text" id="tuples" size="5" /></td>
|
|
</tr> -->
|
|
</tbody>
|
|
</table>
|
|
<div><button name="options-save"><img src="images/save.png" alt="save" /> Einstellungen speichern</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
© 2010 - <a href="http://volkszaehler.org/">volkszaehler.org</a> - the open smartmeter platform
|
|
</div>
|
|
|
|
<!-- dialogs -->
|
|
<div id="entity-move" class="dialog">
|
|
<p>
|
|
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
|
|
Sie sind im Begriff einen Kanal oder eine Gruppe zu Verschieben!
|
|
</p>
|
|
</div>
|
|
|
|
<div id="entity-add" class="dialog">
|
|
<div class="tabs">
|
|
<ul>
|
|
<li><a href="#entity-subscribe">Kanal abonnieren</a></li>
|
|
<li><a href="#entity-subscribe-public">öffentliche Kanäle</a></li>
|
|
<!-- <li><a href="#entity-create">Kanal erstellen</a></li> -->
|
|
</ul>
|
|
<div id="entity-subscribe">
|
|
<p>Hier können Sie einen existierenden Kanal über seine UUID hinzufügen</p>
|
|
<p><label for="uuid">UUID:</label> <input id="uuid" type="text" size="36" maxlength="36" /></p>
|
|
<!-- <p><label for="backend">Backend: </label> <input id="backend" type="text" /></p> -->
|
|
<p><label for="cookie">Cookie:</label> <input class="cookie" type="checkbox" /></p>
|
|
<input type="button" value="abonnieren" />
|
|
</div>
|
|
<div id="entity-subscribe-public">
|
|
<p>Hier können Sie öffentliche Kanäle abonnieren.</p>
|
|
<p><label for="uuid">Kanal:</label> <select id="public" size="1"></select></p>
|
|
<p><label for="cookie">Cookie:</label> </td><td><input class="cookie" type="checkbox" /></p>
|
|
<input type="button" value="abonnieren" />
|
|
</div>
|
|
<!-- <div id="entity-create">
|
|
<p>Hier können Sie einen neuen Kanal erstellen</p>
|
|
<p><label for="type">Typ: </label><select id="type" size="1"></select></p>
|
|
<fieldset id="properties"></fieldset>
|
|
<input type="button" value="erstellen" />
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|