Dynamic Dials Disclosed

16 years ago, at the start of March | Leave a Comment

There’s been quite a bit of interest in my electricity usage dial like the one below so I’m going to go through how I did it with you. The first thing you’ll need is the XML/SWF Gauge and a web server with PHP. It’s possible to do this on a web server running Perl or ASP but you’ll need to do that yourself. For this example I’m also using a Pachube account to grab the data. My feed, the one for my gauge on the top right, is 1498 but you will want to create your own account and start updating your own data. Using the gauge is as simple as a simple thing.

There are a number of things we need to get this simple display working,

1. The .SWF file
2. An gauge.html page to show the gauge
3. A data fetch PHP script

1. The .SWF file

We’ll come to that at the very end of the article.

2. The gauge.html file.

Open your favourite text editor and cut and paste the following into it.

<HTML>
<BODY bgcolor="#FFFFFF">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
        WIDTH="200"
        HEIGHT="100"
        id="gauge">
<PARAM NAME="movie" VALUE="/data/gauge.swf?xml_source=/getdata.php" />
<PARAM NAME="quality" VALUE="high" />
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="sameDomain" />
<EMBED src="/data/gauge.swf?xml_source=/getdata.php"
        quality="high"
        wmode="transparent"
        WIDTH="200"
        HEIGHT="100"
        NAME="gauge"
        allowScriptAccess="sameDomain"
        swLiveConnect="true"
        TYPE="application/x-shockwave-flash"
        PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</BODY>
</HTML>

Save the file as gauge.html.

3. A data fetch PHP script.

Start a new document and cut and paste the following. Before you save the file as getdata.php make sure you change the $myFeedId and $myFeedStream values to match your Pachube feed.

<?
$myFeedId=1498;
$myFeedStream=1;
$myURLPath='/getdata.php';
 
$url = "http://www.pachube.com/feeds/$myFeedId/datastreams/$myFeedStream/history.csv";
 
$now = gmdate('Y-m-d').'T'.gmdate('H:i:s').'Z';
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST , false );
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER , false );
curl_setopt($ch, CURLOPT_HEADER, 0);
 
ob_start();
$result = curl_exec($ch);
$resultStr = ob_get_contents();
ob_end_clean();
 
curl_close($ch);
 
if ($result) {
	$readings = split(",",$resultStr);
	$last=(($readings[count($readings)-1])/40);
	$prev=-90+(($readings[count($readings)-2])/40);
	$mval = (max($readings)/40);
	$tval=-90;
 
	header("Content-Type: text/xml\n\n");
?>
	<gauge>
		<update url='<?=$myURLPath;?>?m=<?=$mval?>' delay='909' delay_type='1' timeout='30' retry='9' /> 
<?
		RadialTicks( 100, 75, 60, 15, -90, -45, 12, 3, "33ff33" );
       		RadialTicks( 100, 75, 60, 15, -45, 0, 12, 3, "efe415" );
       	 	RadialTicks( 100, 75, 60, 15, 0, 45, 12, 3, "ef8b15" );
        	RadialTicks( 100, 75, 60, 15, 45, 94, 12, 3, "ff3333" );
?>
      		<text x='40' y='50' width='220' align='left' size='10' color='000000' alpha='20'><?=$now;?></text>
		<text x='150' y='100' width='120' align='center' size='24' color='000000' alpha='100'>Watts (W)</text>
 
       		<rotate x='100' y='75' start='-90' span='<?=$mval?>' step='3' shake_frequency='0' shake_span='3' shadow_alpha='15'>
	                <polygon fill_color='ff0000' fill_alpha='90' line_alpha='0'>
               		        <point x='97' y='5' />
       	        	        <point x='101' y='5' />
                        	<point x='102' y='63' />
               	        	<point x='96' y='63' />
	                </polygon>
			<rect x='94' y='87' width='10' height='10' fill_color='ff0000' fill_alpha='90' line_alpha='50' />
	        </rotate>
 
		<rotate x='100' y='75' start='<?=$prev?>' span='<?=$last?>' step='1' shake_frequency='95' shake_span='3' shadow_alpha='15'>
			<polygon fill_color='000000' fill_alpha='90' line_alpha='0'>
				<point x='100' y='10' />
				<point x='101' y='10' />
				<point x='101' y='63' />
				<point x='96' y='63' />
			</polygon>
			<rect x='94' y='87' width='10' height='20' fill_color='000000' fill_alpha='90' line_alpha='50' />
		</rotate>
		<circle x='100' y='75' radius='14' fill_color='000000' fill_alpha='50' line_alpha='0' />
	</gauge><?
}
 
function RadialTicks ( $x_center, $y_center, $radius,  $length, $start_angle, $end_angle, $ticks_count, $thickness, $color ) {
 
	for ( $i = $start_angle; $i <= $end_angle; $i += ($end_angle-$start_angle)/($ticks_count-1) ) {
 
		echo "		<line x1='".($x_center+sin(deg2rad($i))*$radius).
			"' y1='".($y_center-cos(deg2rad($i))*$radius)."' x2='"
			.($x_center+sin(deg2rad($i))*($radius+$length))."' y2='"
			.($y_center-cos(deg2rad($i))*($radius+$length))
			."' thickness='".$thickness."' color='".$color."' />\n";
	}
}
 
?>

Copy the .swf file that you downloaded from the XML/SWF Gauge site and put it on your web server along with your gauge.html and getdata.php files. Point your browser at your website and the gauge.html page and bask in your glorious meter display.

I should point out that this is using the historic feed data from pachube which has a 15 minute lag. The reason for this is simply because it does not require authentication with the pachube servers. If you want to use your live feed you will need to change the url used and the management of the data returned as well as adding

1	curl_setopt($curl, CURLOPT_USERPWD, "username:password");

just before the ob_start(); on line 16. Replace username:password with your actual username and password, don’t forget the colon in between. When changing the url you might want to use the secure https rather than just http.