Enabled HTTP chunked transfer encoding
[ampy.git] / html / index.php
index db29c6ae0b98d0ff0d506658e94841630be362af..04039c59fc4388834b6844837d9751c81563cf0c 100644 (file)
@@ -1,22 +1,97 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
-<script src='/javascript/jquery/jquery.js'></script>
+<link rel="shortcut icon" href="favicon.svg">
+<title>ampy - Le compteur espion qui ne moucharde pas</title>
+<script src=ampy.js></script>
+<style>
+div#errorpannel
+{
+    position: absolute;
+    top: 3px;
+    right: 15px;
+    height: 18px;
+    padding: 1px 2px 1px 2px;
+    background: red;
+}
+</style>
+<div id=errorpannel style="display:none;">
+</div>
+
+Puissance instannĂ©e: <span id=currentpower>Unknown</span> watts
+-
+
+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 id='loadcurve' src='graph.php'>
+
+
 <script>
-function refresh_power() {
-       $.ajax({
-               url : 'currentjson.php',
-               success : function(result) {
-                       document.getElementById('currentpower').innerHTML = result['watts'];
-               },
-               complete : function() {
-                       setTimeout(refresh_power, 1000);
+function startComet() {
+       MAX_BUFFER_SIZE = 64*1024; // 64 kiB
+       xhr = new XMLHttpRequest();
+       xhr.onreadystatechange = function() {
+               //console.log("xhr.status:"+xhr.status+". xhr.readyState="+xhr.readyState);
+               if (xhr.status == 200) {
+                       switch (xhr.readyState) {
+                       case 3: /* loading */
+                               response = xhr.responseText;
+                               //console.log("responseText:"+response);
+                               new_text = response.substring(xhr.ampy_len);
+                               xhr.ampy_len = response.length;
+                               //console.log("new_text: "+new_text);
+
+                               // If the client is lagging, we can get several json items
+                               // at once. Truncate them:
+                               for (datum of new_text.trim().split("}")) {
+                                       if (datum.length)
+                                               updatePage(datum+"}");
+                               }
+                               if (xhr.ampy_len > MAX_BUFFER_SIZE) {
+                                       xhr.abort();  // Don't let the buffer get too big
+                                       startComet();
+                               }
+                               break;
+                       case 4: /* done */
+                               repportError("XMLHttpRequest connection lost. Reconnecting...");
+                               startComet();
+                               break;
+                       }
+               } else {
+                       switch (xhr.readyState) {
+                       case 2: /* header received */
+                               repportError("XMLHttpRequest returned code "+xhr.status+" ("+xhr.statusText+")");
+                               break;
+                       }
                }
-       });
+       }
+       xhr.ampy_len=0;
+       xhr.open('GET', 'currentjson_chunked.php', true /*async*/);
+       xhr.send();
 }
-</script>
+startComet();
 
-Puissance instannĂ©e: <span id=currentpower>unknown</span> watts<br>
-<script>refresh_power();</script>
+function refresh_graph(hours=0, minutes=0) {
+       img = document.getElementById('loadcurve');
+       img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
+}
+</script>
 
 
-<img src="graph.php">
+<!--img src="graph.php"-->