API tools faq
paste
Advertisement
seanw1

Enphase Enlighten Banner HTML Script

seanw1
Apr 26th, 2012
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <!--
  3.  
  4. This script requires a PHP shim to make the Enphase API queries so the
  5. key is not exposed.  To allow all the JSON queries to go out at the same
  6. time, the system ID is hard coded as well.  Create a php script
  7. called ENPHASE_QUERY.PHP in the web hosting directory.  The link for
  8. this file is in the "queryurl" variable in this script.  The file PHP
  9. file contains the following:
  10.  
  11. =======================================================================
  12.  
  13. $key = ""; // enter API key here
  14. $systemid = 0; // enter system id number here
  15. $url = "https://api.enphaseenergy.com/api/systems";
  16. if ($_GET['func'] && $_GET['func']!="index")
  17.     $url .= "/{$systemid}/{$_GET['func']}";
  18. $url .= "?key={$key}";
  19. $file = fopen($url, 'r');
  20. while ($file && !feof($file)) echo fread($file, 8192);
  21. fclose($file);
  22.  
  23. =======================================================================
  24.  
  25. You will need to bracket that in the php script delimeters.  It's not
  26. included here since it could actually trigger the PHP parser if it is
  27. processing HTML files.
  28.  
  29. The only parameters that need to be set in this file are the public url
  30. (puburl), and optionally the width and height.
  31.  
  32. -->
  33. <head><style type="text/css">
  34. table {border-radius:10px;font: 18px "Lucida Grande",Lucida,Arial,Verdana;}
  35. td {color:#333333;border:none;}
  36. th {color:#333333;border:none;}
  37. a {color:#333333;text-decoration:none;}
  38. .tab {font-size:14px; background:#A0A0A0; padding:5px; border-radius: 10px 10px 0px 0px; cursor:pointer;}
  39. .seltab {font-size:14px; background:#E0E0E0; padding:5px; border-radius: 10px 10px 0px 0px; cursor:default;}
  40. .content {background:#E0E0E0; padding:5px; border-radius: 0px 0px 10px 10px;}
  41. .center {vertical-align: middle;text-align: center;}
  42. .grad {
  43.     background-image: linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
  44.     background-image: -o-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
  45.     background-image: -moz-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
  46.     background-image: -webkit-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
  47.     background-image: -ms-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
  48.     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.75, #CCCCCC), color-stop(1, #AAAAAA));
  49. }
  50. </style>
  51. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  52. <script>
  53. var width = 320;
  54. var height = 240;
  55. var graphw = width - 40;
  56. var graphh = height / 2 - 60;
  57. var puburl = '#'; // enter public URL here
  58. var queryurl = "enphase_query.php?func=";
  59.  
  60. function drawarray(canvas, data, max)
  61. {
  62.     if (max == 0) max = 1;
  63.     var cv=document.getElementById(canvas);
  64.     var ctx=cv.getContext('2d');
  65.     ctx.strokeStyle='#0063FF';
  66.     for (x = 0 ; x < data.length ; x++) {
  67.         ctx.moveTo(x * graphw / data.length, graphh );
  68.         ctx.lineTo(x * graphw / data.length, graphh - graphh * data[x] / max - 1);
  69.     }
  70.     ctx.stroke();
  71. }
  72.  
  73. function seltab(t) {
  74.     for (x = 1 ; x <= 3 ; x++) {
  75.         document.getElementById('tab'+x).className = (x==t)?'seltab':'tab';
  76.         document.getElementById('content'+x).style.display = (x==t)?'block':'none';
  77.     }
  78. }
  79. $(document).ready(function() {
  80.  
  81.     document.getElementById('puburl').href = puburl;
  82.     document.getElementById('daygraph').width = graphw;
  83.     document.getElementById('daygraph').height = graphh;
  84.     document.getElementById('lifegraph').width = graphw;
  85.     document.getElementById('lifegraph').height = graphh;
  86.    
  87.     $.getJSON(queryurl + 'index', function(data) {
  88.         document.getElementById('sysname').innerHTML = data.systems[0].system_public_name;
  89.     });
  90.  
  91.     $.getJSON(queryurl + 'alerts', function(data) {
  92.      var level = 0;
  93.         $.each(data.alerts, function(key, val) {
  94.             if (val.level == 'medium' && level < 1) level = 1;
  95.             if (val.level == 'high' && level < 2) level = 2;
  96.         });
  97.  
  98.         var apng = document.getElementById('alertimg');
  99.         if (level == 0) apng.src = "http://assets1.enphaseenergy.com/images/icons/normal_medium.png";
  100.             else if (level == 1) apng.src = "http://assets1.enphaseenergy.com/images/icons/warning_medium.png";
  101.             else if (level == 2) apng.src = "http://assets1.enphaseenergy.com/images/icons/error_medium.png";
  102.  
  103.     });
  104.  
  105.     $.getJSON(queryurl + 'summary', function(data) {
  106.         var cp = document.getElementById('current_power');
  107.         cp.innerHTML = data.current_power + 'W';
  108.        
  109.         var energy = data.energy_today / 1000.0;
  110.         document.getElementById('energy_today').innerHTML = '' + energy.toFixed(1) + 'kWh';
  111.  
  112.         var energyl = data.energy_lifetime / 1000000.0;
  113.         document.getElementById('energy_lifetime').innerHTML = '' + energyl.toFixed(1) + 'MWh';
  114.     });
  115.  
  116.     $.getJSON(queryurl + 'power_today', function(data) {
  117.         var peak = 0;
  118.         $.each(data.production, function(key, val) {
  119.             if (val > peak) peak = val;
  120.         });
  121.         drawarray('daygraph', data.production, peak);
  122.         peak = peak / 1000.0;
  123.         document.getElementById('peak_power').innerHTML = '' + peak.toFixed(2) + 'kW';     
  124.     });
  125.  
  126.     $.getJSON(queryurl + 'energy_lifetime', function(data) {
  127.         var peak = 0;
  128.         $.each(data.production, function(key, val) {
  129.             if (val > peak) peak = val;
  130.         });
  131.         drawarray('lifegraph', data.production, peak);
  132.     });
  133.  
  134.  
  135. });
  136.  
  137. </script>
  138.  
  139. </head><html><body>
  140.  
  141. <table id='frametab' width=320 height=240 border=0 class='grad'>
  142. <script>    
  143.     document.getElementById('frametab').width = width;
  144.     document.getElementById('frametab').height = height;
  145. </script>
  146.  
  147. <tr><td style='padding:5px 5px 0px 5px;font-size:24px;'>
  148. <a id='puburl' target='_blank' href='#'><img style='border:none;' src='http://assets1.enphaseenergy.com/images/icons/site_medium.png'> <span id='sysname' style='font-weight:bold;'>&nbsp;</span> <img id='alertimg' style='vertical-align:bottom;float:right;border:none;' src=''></a></td></tr>
  149.  
  150. <tr>
  151. <td style='padding:5px 5px 5px 5px; height:100%;'>
  152.  
  153. <table border=0 style='border-spacing: 2px 0px;' width='100%' height='100%'>
  154. <tr>
  155. <th onClick='seltab(1);' id='tab1' class='seltab'>Current</th>
  156. <th onClick='seltab(2);' id='tab2' class='tab'>Today</th>
  157. <th onClick='seltab(3);' id='tab3' class='tab'>Lifetime</th>
  158. </tr>
  159.  
  160. <tr><td class='content' colspan=3 style='height:100%'>
  161.  
  162. <span id='content1' class='center' style='display:block;'>
  163. Power Production<br><br>
  164. <span id='current_power' style='color:#F85C16;font-size:36px;'></span><br><br>
  165. Today's Peak: <span id='peak_power'></span>
  166. </span>
  167.  
  168. <span id='content2' class='center' style='display:none;'>
  169. Today's Energy<br>
  170. <span id='energy_today' style='color:#F85C16;font-size:36px;'></span><br>
  171. <canvas id='daygraph' width=1 height=1></canvas>
  172. </span>
  173.  
  174. <span id='content3' class='center' style='display:none;'>
  175. Lifetime Energy<br>
  176. <span id='energy_lifetime' style='color:#F85C16;font-size:36px;'></span><br>
  177. <canvas id='lifegraph' width=1 height=1></canvas>
  178. </span>
  179.  
  180. </td></tr>
  181. </table>
  182.  
  183. </td></tr>
  184.  
  185. <tr><td align='right' valign='center'><span style='font-size:10px'>POWERED BY &nbsp;</span><a href='http://enphase.com' target='_blank'><img src='http://enphase.com/wp-uploads/enphase.com/2011/06/EnphaseAPIMark.png' style='border:none;vertical-align:middle;'></a></td></tr>
  186. </table>
  187. </body>
  188. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!