Pre-release demo version
[ampy.git] / html / index.php
index db29c6ae0b98d0ff0d506658e94841630be362af..1b16c7e93d8ab70b00c8c83c79110a126992dbf4 100644 (file)
@@ -1,22 +1,48 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
+<link rel="shortcut icon" href="favicon.svg">
+<title>ampy - Le compteur espion qui ne moucharde pas</title>
 <script src='/javascript/jquery/jquery.js'></script>
 <script>
 function refresh_power() {
        $.ajax({
                url : 'currentjson.php',
                success : function(result) {
-                       document.getElementById('currentpower').innerHTML = result['watts'];
+                       document.getElementById('currentpower').innerHTML = result['watts'].toFixed(1);
+                       document.getElementById('totalpower').innerHTML = result['counter'].toFixed(5);
                },
                complete : function() {
                        setTimeout(refresh_power, 1000);
                }
        });
 }
+function refresh_graph(hours=0, minutes=0) {
+       img = document.getElementById('loadcurve');
+       img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
+}
 </script>
 
-Puissance instannée: <span id=currentpower>unknown</span> watts<br>
+Puissance instantannée: <span id=currentpower>unknown</span> watts
 <script>refresh_power();</script>
 
+-
+
+Compteur: <span id=totalpower>unknown</span> kWh
+
+-
+
+Graphique:
+<a href='javascript:refresh_graph(0,5)'>5m</a> 
+<a href='javascript:refresh_graph(0,30)'>30m</a> 
+<a href='javascript:refresh_graph(1)'>1h</a> 
+<a href='javascript:refresh_graph(2)'>2h</a>
+<a href='javascript:refresh_graph(6)'>6h</a>
+<a href='javascript:refresh_graph(12)'>12h</a>
+<a href='javascript:refresh_graph(24)'>1d</a>
+<a href='javascript:refresh_graph(2*24)'>2d</a>
+<a href='javascript:refresh_graph(7*24)'>7d</a>
+<a href='javascript:refresh_graph(30*24)'>30d</a>
+
+<br>
 
-<img src="graph.php">
+<img id='loadcurve' src='graph.php'>