+<?php ob_start('ob_gzhandler') ?>
+<?
+function get_data($item) {
+ $doc = new DOMDocument();
+ $doc->load('http://weather/weather/all-output.xml');
+ $arrFeeds = array();
+ foreach ($doc->getElementsByTagName('weather') as $node) {
+ $itemRSS = array (
+ $item => $node->getElementsByTagName($item)->item(0)->nodeValue,
+ );
+ array_push($arrFeeds, $itemRSS);
+ }
+ echo $itemRSS[$item];
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="libraries/RGraph.common.core.js" ></script>
+ <script src="libraries/RGraph.common.context.js" ></script>
+ <script src="libraries/RGraph.common.annotate.js" ></script>
+ <script src="libraries/RGraph.common.tooltips.js" ></script>
+ <script src="libraries/RGraph.common.zoom.js" ></script>
+ <script src="libraries/RGraph.common.resizing.js" ></script>
+ <script src="libraries/RGraph.meter.js" ></script>
+ <script src="libraries/RGraph.odo.js" ></script>
+ <!--[if IE 8]><script src="excanvas/excanvas.compressed.js"></script><![endif]-->
+
+ <script>
+ window.onload = function ()
+ {
+ var meter1 = new RGraph.Meter('meter1', -20, 120, <? get_data("outsideTemp"); ?>);
+
+ var grad1 = meter1.context.createRadialGradient(meter1.canvas.width / 2,meter1.canvas.height - 25,0,meter1.canvas.width / 2,meter1.canvas.height - 25,100);
+ grad1.addColorStop(0, 'red');
+ grad1.addColorStop(1, 'white');
+
+ var grad2 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,100);
+ grad2.addColorStop(0, 'green');
+ grad2.addColorStop(1, 'white');
+
+ var grad3 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,100);
+ grad3.addColorStop(0, 'blue');
+ grad3.addColorStop(1, 'white');
+
+ //meter1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], ['Show palette', RGraph.Showpalette], ['Clear annotations', function () {RGraph.Clear(meter1.canvas); meter1.Draw();}], null, ['Cancel', function () {}]]);
+ meter1.Set('chart.annotatable', false);
+ meter1.Set('chart.labels.position', 'inside');
+ meter1.Set('chart.title', '<? get_data("outsideTemp"); ?>');
+ meter1.Set('chart.title.vpos', 0.5);
+ meter1.Set('chart.title.color', 'black');
+ meter1.Set('chart.red.color', grad3);
+ meter1.Set('chart.yellow.color', grad2);
+ meter1.Set('chart.green.color', grad1);
+ meter1.Set('chart.red.start', -20);
+ meter1.Set('chart.red.end', 55);
+ meter1.Set('chart.yellow.start', 55);
+ meter1.Set('chart.yellow.end', 90);
+ meter1.Set('chart.green.start', 90);
+ meter1.Set('chart.green.end', 120);
+ meter1.Set('chart.shadow', true);
+ meter1.Set('chart.shadow.color', 'gray');
+ meter1.Set('chart.shadow.offsetx', 0);
+ meter1.Set('chart.shadow.offsety', 0);
+ meter1.Set('chart.shadow.blur', 15);
+ meter1.Set('chart.zoom.hdir', 'center');
+ meter1.Set('chart.zoom.vdir', 'center');
+ meter1.Set('chart.contextmenu', [['Clear', function () {RGraph.Clear(meter1.canvas); meter1.Draw();}]]);
+ meter1.Draw();
+
+ var odo2 = new RGraph.Odometer('odo2', 0, 360, <? get_data("windDirectionDegrees"); ?>);
+ odo2.Set('chart.annotatable', false);
+ //odo2.Set('chart.needle.thickness', 6);
+ odo2.Set('chart.needle.color', 'black');
+ odo2.Set('chart.needle.tail', false);
+ //odo2.Set('chart.needle.type', 'triangle');
+ odo2.Set('chart.label.area', 22);
+ odo2.Set('chart.contextmenu', [['Clear', function () {RGraph.Clear(odo2.canvas); odo2.Draw();}]]);
+ //odo2.Set('chart.border', document.all ? false : true);
+ //odo2.Set('chart.tickmarks.highlighted', true);
+ odo2.Set('chart.labels', ['N','NE','E','SE','S','SW','W','NW']);
+ odo2.Set('chart.red.min', 360);
+ odo2.Set('chart.red.color', 'gray');
+ //odo2.Set('chart.value.text', true);
+ odo2.Set('chart.value.units.post', ' degrees');
+ odo2.Draw();
+
+ }
+ </script>
+</head>
+<body>
+
+<table>
+<tr><td>Temperature</td><td>Wind</td></tr>
+<tr><td>
+ <div style="text-align: center">
+ <canvas id="meter1" width="300" height="150"><div class="canvasfallback">[No canvas support]</div></canvas>
+ </div>
+</td><td>
+ <div style="text-align: center">
+ <canvas id="odo2" width="200" height="200"><div class="canvasfallback">[No canvas support]</div></canvas>
+ </div>
+
+</td></tr>
+</table>
+</body>
+</html>