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
  39
  40 <br>
  41
  42 <img id='loadcurve' src='graph.php'>
  43
  44
  45 <script>
  46 function startComet() {
  47         MAX_BUFFER_SIZE = 64*1024; // 64 kiB
  48         xhr = new XMLHttpRequest();
  49         xhr.onreadystatechange = function() {
  50                 //console.log("xhr.status:"+xhr.status+". xhr.readyState="+xhr.readyState);
  51                 if (xhr.status == 200) {
  52                         switch (xhr.readyState) {
  53                         case 3: /* loading */
  54                                 response = xhr.responseText;
  55                                 //console.log("responseText:"+response);
  56                                 new_text = response.substring(xhr.ampy_len);
  57                                 xhr.ampy_len = response.length;
  58                                 //console.log("new_text: "+new_text);
  59
  60                                 // If the client is lagging, we can get several json items
  61                                 // at once. Truncate them:
  62                                 for (datum of new_text.trim().split("}")) {
  63                                         if (datum.length)
  64                                                 updatePage(datum+"}");
  65                                 }
  66                                 if (xhr.ampy_len > MAX_BUFFER_SIZE) {
  67                                         xhr.abort();  // Don't let the buffer get too big
  68                                         startComet();
  69                                 }
  70                                 break;
  71                         case 4: /* done */
  72                                 repportError("XMLHttpRequest connection lost. Reconnecting...");
  73                                 startComet();
  74                                 break;
  75                         }
  76                 } else {
  77                         switch (xhr.readyState) {
  78                         case 2: /* header received */
  79                                 repportError("XMLHttpRequest returned code "+xhr.status+" ("+xhr.statusText+")");
  80                                 break;
  81                         }
  82                 }
  83         }
  84         xhr.ampy_len=0;
  85         xhr.open('GET', 'currentjson_chunked.php', true /*async*/);
  86         xhr.send();
  87 }
  88 startComet();
  89
  90 function refresh_graph(hours=0, minutes=0) {
  91         img = document.getElementById('loadcurve');
  92         img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
  93 }
  94 </script>
  95
  96
  97 <!--img src="graph.php"-->