Added one year graph link
[ampy.git] / 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"-->