2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
3 "http://www.w3.org/TR/html4/strict.dtd">
5 <link rel="stylesheet" type="text/css" href="css/power.css">
6 <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
7 <script type="text/javascript">
10 $.getJSON('http://192.168.5.205:8000/json.php', function(data) {
11 for (var key in data) {
12 if (key.charAt(0) == "c") {
13 vals = data[key].split(",")
14 percent = (vals[2]/vals[3]);
15 color=getColorForPercentage(percent.toFixed(2));
17 text = "<div onclick=\"javascript:showToolTip('"+key+"');\">" + key + ": " + vals[2] + " Amps </div>";
21 setText("V", "Line Voltage: " + (data[key]/10))
29 { pct: 0.0, color: { r: 0x00, g: 0xff, b: 0 } },
30 { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
31 { pct: 1.0, color: { r: 0xff, g: 0x00, b: 0 } } ];
33 var getColorForPercentage = function(pct) {
34 for (var i = 1; i < percentColors.length - 1; i++) {
35 if (pct < percentColors[i].pct) {
39 var lower = percentColors[i - 1];
40 var upper = percentColors[i];
41 var range = upper.pct - lower.pct;
42 var rangePct = (pct - lower.pct) / range;
43 var pctLower = 1 - rangePct;
44 var pctUpper = rangePct;
46 r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
47 g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
48 b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
50 return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
51 // or output as hex if preferred
54 function sleep(delay) {
55 var start = new Date().getTime();
56 while (new Date().getTime() < start + delay);
59 function setColor(id,color) {
60 //console.log( document.getElementsByName("*"));
61 var x = document.getElementsByName(id);
63 for (i=0; i < x.length; i++) {
64 x[i].style.backgroundColor=color;
69 function setText(id,text) {
70 //document.getElementsByName(id).innerHTML = text
71 var x = document.getElementsByName(id);
73 for (i=0; i < x.length; i++) {
74 x[i].innerHTML = text;
78 function showToolTip(id) {
79 var currentTime = Math.ceil((new Date).getTime() / 1000);
80 var year = Math.ceil(currentTime-(365*86400));
81 var month = Math.ceil(currentTime-(30*86400));
82 var week = Math.ceil(currentTime-(7*86400));
83 var day = Math.ceil(currentTime-(1*86400));
85 document.getElementById('popup-iframe-yr').src = "http://192.168.5.205:8000/charts/canvas/breaker.php?t="+year+"&id="+id;
86 document.getElementById('popup-iframe-yr').style.visibility = "visible";
87 document.getElementById('popup-iframe-mn').src = "http://192.168.5.205:8000/charts/canvas/breaker.php?t="+month+"&id="+id;
88 document.getElementById('popup-iframe-mn').style.visibility = "visible";
89 document.getElementById('popup-iframe-wk').src = "http://192.168.5.205:8000/charts/canvas/breaker.php?t="+week+"&id="+id;
90 document.getElementById('popup-iframe-wk').style.visibility = "visible";
91 document.getElementById('popup-iframe-day').src = "http://192.168.5.205:8000/charts/canvas/breaker.php?t="+day+"&id="+id;
92 document.getElementById('popup-iframe-day').style.visibility = "visible";
93 document.getElementById('popup').style.display = "block";
94 document.getElementById('popup2').style.display = "block";
97 function hideToolTip(id) {
98 //document.getElementById(id+'-chart').src = "";
99 //document.getElementById(id+'-chart').style.visibility = "hidden";
100 //document.getElementById(id+'-chart').style.display = "none";
107 <table width="100%" style="text-align: center;"><tr><td width="30%" valign="top" align="center">
108 <div id="popup" class="popup">
109 <iframe id="popup-iframe-day" src="" width="600" height="400" frameBorder="0"></iframe><br>
110 <iframe id="popup-iframe-wk" src="" width="600" height="400" frameBorder="0"></iframe><br>
112 <iframe id="popup-iframe-mn" src="" width="600" height="400" frameBorder="0"></iframe><br>
113 <iframe id="popup-iframe-yr" src="" width="600" height="400" frameBorder="0"></iframe>
116 </td><td width="30%" valign="top" align="center">
117 <script type="text/javascript">
119 setInterval(function() { refresh() }, 10000);