Enphase Enlighten Banner PHP Script

<?php
$key = ""; // enter API key here
$publicurl = "https://enlighten.enphaseenergy.com/public/systems/"; // enter public view URL here

$width = 320;
$height = 240;
$graphw = $width - 40;
$graphh = $height / 2 - 60;

function w_get($wurl) {
    $wfile = fopen($wurl, 'r');
    while ($wfile && !feof($wfile)) $wstring .= fread($wfile, 8192);
    fclose($wfile);
    return ($wstring);
}

// only gets stats for first system
$ar = json_decode(w_get("https://api.enphaseenergy.com/api/systems?key={$key}"), true);
$id = $ar['systems'][0]['system_id'];
$name = $ar['systems'][0]['system_public_name'];
$sum = json_decode(w_get("https://api.enphaseenergy.com/api/systems/{$id}/summary?key={$key}"), true);
$alert = json_decode(w_get("https://api.enphaseenergy.com/api/systems/{$id}/alerts?key={$key}"), true);
$pow = json_decode(w_get("https://api.enphaseenergy.com/api/systems/{$id}/power_today?key={$key}"), true);
$life = json_decode(w_get("https://api.enphaseenergy.com/api/systems/{$id}/energy_lifetime?key={$key}"), true);

$alevel = 0;
foreach($alert['alerts'] as $val) {
    if ($val['level'] == "medium" && $alevel < 1) $alevel = 1;
    if ($val['level'] == "high" && $alevel < 2) $alevel = 2;
}
if ($alevel == 0) $alertpng = "normal_medium.png";
    else if ($alevel == 1) $alertpng = "warning_medium.png";
    else if ($alevel == 2) $alertpng = "error_medium.png";

$peak = 0;
foreach ($pow['production'] as $val) if ($val > $peak) $peak = $val;
$dayarray = implode(',',$pow['production']);

$lpeak = 0;
foreach ($life['production'] as $val) if ($val > $lpeak) $lpeak = $val;
$lifearray = implode(',',$life['production']);

$content1 = "Power Production<br><br><span style='color:#F85C16;font-size:36px;'>{$sum['current_power']}W</span><br><br>Today's Peak: ".sprintf("%0.2f kW", $peak/1000);
$content2 = "Today's Energy<br><span style='color:#F85C16;font-size:36px;'>".sprintf("%0.1f", $sum['energy_today']/1000)."kWh</span><br><canvas id='daygraph' height={$graphh} width={$graphw}></canvas>";
$content3 = "Lifetime Energy<br><span style='color:#F85C16;font-size:36px;'>".sprintf("%0.1f", $sum['energy_lifetime']/1000000)."MWh</span><br><canvas id='lifegraph' height={$graphh} width={$graphw}></canvas>";

echo "
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<head><style type=\"text/css\">
table {border-radius:10px;font: 18px \"Lucida Grande\",Lucida,Arial,Verdana;}
td {color:#333333;border:none;}
th {color:#333333;border:none;}
a {color:#333333;text-decoration:none;}
.tab {font-size:14px; background:#A0A0A0; padding:5px; border-radius: 10px 10px 0px 0px; cursor:pointer;}
.seltab {font-size:14px; background:#E0E0E0; padding:5px; border-radius: 10px 10px 0px 0px; cursor:default;}
.content {background:#E0E0E0; padding:5px; border-radius: 0px 0px 10px 10px;}
.center {vertical-align: middle;text-align: center;}
.grad {
    background-image: linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
    background-image: -o-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
    background-image: -moz-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
    background-image: -webkit-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
    background-image: -ms-linear-gradient(bottom, #CCCCCC 75%, #AAAAAA 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.75, #CCCCCC), color-stop(1, #AAAAAA));
}
</style></head><html><body>

<table width={$width} height={$height} border=0 class='grad'>
<tr><td style='padding:5px 5px 0px 5px;font-size:24px;'><a href='{$publicurl}'><img style='border:none;' src='http://assets1.enphaseenergy.com/images/icons/site_medium.png'> <b>{$name}</b> <img style='vertical-align:bottom;float:right;border:none;' src='http://assets1.enphaseenergy.com/images/icons/{$alertpng}'></a></td></tr>

<script language='javascript'>
var didday = 0, didlife = 0;

function drawarray(canvas, data, max)
{
    if (data.length == 0) return;
    if (max == 0) max = 1;
    var cv=document.getElementById(canvas);
    var ctx=cv.getContext('2d');
    ctx.strokeStyle='#0063FF';
    for (x = 0 ; x < data.length ; x++) {
        ctx.moveTo(x * {$graphw} / data.length,{$graphh} );
        ctx.lineTo(x * {$graphw} / data.length,{$graphh} - {$graphh} * data[x] / max - 1);
    }
    ctx.stroke();
}

function drawday() {
    if (didday) return;
    var data=[{$dayarray}];
    drawarray('daygraph', data, {$peak});
    didday = 1;
}

function drawlife() {
    if (didlife) return;
    var data=[{$lifearray}];
    drawarray('lifegraph', data, {$lpeak});
    didlife = 1;
}

function seltab(t) {
    for (x = 1 ; x <= 3 ; x++) {
        document.getElementById('tab'+x).className = (x==t)?'seltab':'tab';
        document.getElementById('content'+x).style.display = (x==t)?'block':'none';
    }
}
</script>

<tr>
<td style='padding:5px 5px 5px 5px; height:100%;'>

<table border=0 style='border-spacing: 2px 0px;' width='100%' height='100%'>
<tr>
<th onClick='seltab(1);' id='tab1' class='seltab'>Current</th>
<th onClick='drawday();seltab(2);' id='tab2' class='tab'>Daily</th>
<th onClick='drawlife();seltab(3);' id='tab3' class='tab'>Lifetime</th>
</tr>

<tr><td class='content' colspan=3 style='height:100%'>
<span id='content1' class='center' style='display:block;'>{$content1}</span>
<span id='content2' class='center' style='display:none;'>{$content2}</span>
<span id='content3' class='center' style='display:none;'>{$content3}</span>
</td></tr>
</table>

</td>
</tr>

<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>
</table>
</body>
</html>
";

?>