Enabled HTTP chunked transfer encoding

[ampy.git] / html / index.php

diff --git a/html/index.php b/html/index.php
index 1b16c7e93d8ab70b00c8c83c79110a126992dbf4..04039c59fc4388834b6844837d9751c81563cf0c 100644 (file)
--- a/html/index.php
+++ b/html/index.php
@@ -2,29 +2,22 @@
 <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'].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 src=ampy.js></script>
+<style>
+div#errorpannel
+{
+    position: absolute;
+    top: 3px;
+    right: 15px;
+    height: 18px;
+    padding: 1px 2px 1px 2px;
+    background: red;
 }
-</script>
-
-Puissance instantannée: <span id=currentpower>unknown</span> watts
-<script>refresh_power();</script>
+</style>
+<div id=errorpannel style="display:none;">
+</div>
 
+Puissance instannée: <span id=currentpower>Unknown</span> watts
 -
 
 Compteur: <span id=totalpower>unknown</span> kWh
@@ -32,9 +25,9 @@ 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(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>
@@ -43,6 +36,62 @@ Graphique:
 <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 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();
+}
+startComet();
+
+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"-->