html/index.php

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <link rel="shortcut icon" href="favicon.svg">
   4 <title>ampy - Le compteur espion qui ne moucharde pas</title>
   5 <script src=ampy.js></script>
   6 <style>
   7 div#errorpannel
   8 {
   9     position: absolute;
  10     top: 3px;
  11     right: 15px;
  12     height: 18px;
  13     padding: 1px 2px 1px 2px;
  14     background: red;
  15 }
  16 </style>
  17 <div id=errorpannel style="display:none;">
  18 </div>
  19
  20 Puissance instannée: <span id=currentpower>Unknown</span> watts
  21 -
  22
  23 Compteur: <span id=totalpower>unknown</span> kWh
  24
  25 -
  26
  27 Graphique:
  28 <a href='javascript:refresh_graph(0,5)'>5m</a>
  29 <a href='javascript:refresh_graph(0,30)'>30m</a>
  30 <a href='javascript:refresh_graph(1)'>1h</a>
  31 <a href='javascript:refresh_graph(2)'>2h</a>
  32 <a href='javascript:refresh_graph(6)'>6h</a>
  33 <a href='javascript:refresh_graph(12)'>12h</a>
  34 <a href='javascript:refresh_graph(24)'>1d</a>
  35 <a href='javascript:refresh_graph(2*24)'>2d</a>
  36 <a href='javascript:refresh_graph(7*24)'>7d</a>
  37 <a href='javascript:refresh_graph(30*24)'>30d</a>
  38 <a href='javascript:refresh_graph(365*24)'>1y</a>
  39
  40
  41 <br>
  42
  43 <img id='loadcurve' src='graph.php'>
  44
  45
  46 <script>
  47 function startComet() {
  48         MAX_BUFFER_SIZE = 64*1024; // 64 kiB
  49         xhr = new XMLHttpRequest();
  50         xhr.onreadystatechange = function() {
  51                 //console.log("xhr.status:"+xhr.status+". xhr.readyState="+xhr.readyState);
  52                 if (xhr.status == 200) {
  53                         switch (xhr.readyState) {
  54                         case 3: /* loading */
  55                                 response = xhr.responseText;
  56                                 //console.log("responseText:"+response);
  57                                 new_text = response.substring(xhr.ampy_len);
  58                                 xhr.ampy_len = response.length;
  59                                 //console.log("new_text: "+new_text);
  60
  61                                 // If the client is lagging, we can get several json items
  62                                 // at once. Truncate them:
  63                                 for (datum of new_text.trim().split("}")) {
  64                                         if (datum.length)
  65                                                 updatePage(datum+"}");
  66                                 }
  67                                 if (xhr.ampy_len > MAX_BUFFER_SIZE) {
  68                                         xhr.abort();  // Don't let the buffer get too big
  69                                         startComet();
  70                                 }
  71                                 break;
  72                         case 4: /* done */
  73                                 repportError("XMLHttpRequest connection lost. Reconnecting...");
  74                                 startComet();
  75                                 break;
  76                         }
  77                 } else {
  78                         switch (xhr.readyState) {
  79                         case 2: /* header received */
  80                                 repportError("XMLHttpRequest returned code "+xhr.status+" ("+xhr.statusText+")");
  81                                 break;
  82                         }
  83                 }
  84         }
  85         xhr.ampy_len=0;
  86         xhr.open('GET', 'currentjson_chunked.php', true /*async*/);
  87         xhr.send();
  88 }
  89 startComet();
  90
  91 function refresh_graph(hours=0, minutes=0) {
  92         img = document.getElementById('loadcurve');
  93         img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
  94 }
  95 </script>
  96
  97
  98 <!--img src="graph.php"-->