header.html

   1 <html>
   2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   3     "http://www.w3.org/TR/html4/strict.dtd">
   4 <head>
   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">
   8
   9         function refresh() {
  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));
  16                 setColor(key,color);
  17                 text = "<div onclick=\"javascript:showToolTip('"+key+"');\">" + key + ": " + vals[2] + " Amps </div>";
  18                 setText(key,text);
  19               }
  20               if (key=="V") {
  21                 setText("V", "Line Voltage: " + (data[key]/10))
  22               }
  23             }
  24
  25           });
  26         }
  27
  28         var percentColors = [
  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 } } ];
  32
  33         var getColorForPercentage = function(pct) {
  34             for (var i = 1; i < percentColors.length - 1; i++) {
  35                 if (pct < percentColors[i].pct) {
  36                     break;
  37                 }
  38             }
  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;
  45             var color = {
  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)
  49             };
  50             return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
  51             // or output as hex if preferred
  52         }
  53
  54         function sleep(delay) {
  55           var start = new Date().getTime();
  56           while (new Date().getTime() < start + delay);
  57         }
  58
  59         function setColor(id,color) {
  60           //console.log( document.getElementsByName("*"));
  61           var x = document.getElementsByName(id);
  62           var i=0;
  63           for (i=0; i < x.length; i++) {
  64             x[i].style.backgroundColor=color;
  65             //console.log(x);
  66           }
  67         }
  68
  69         function setText(id,text) {
  70           //document.getElementsByName(id).innerHTML = text
  71           var x = document.getElementsByName(id);
  72           var i;
  73           for (i=0; i < x.length; i++) {
  74             x[i].innerHTML = text;
  75           }
  76         }
  77
  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));
  84
  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";
  95         }
  96
  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";
 101         }
 102
 103
 104     </script>
 105 </head>
 106 <body>
 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>
 111 <!--
 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>
 114 -->
 115 </div>
 116 </td><td width="30%" valign="top" align="center">
 117 <script type="text/javascript">
 118   refresh();
 119   setInterval(function() { refresh() }, 10000);
 120 </script>