Over the last months I've gotten compliments and questions on how I created the SteelSeries gauges and how I hooked them to the Xively (pachube -> cosm -> Xively) API. First, let me give credit where credit is due. I didn't create the SteelSeries gauges, Gerrit Grunwald did. He has a great blog here <link> where he describes the various displays he's created. I stumbled across them a while back and hooked them into my Xively data feed to display the last updates so I would have a nice display of current power usage and temperature. They worked really well and look great.
It took a little work to get them going, but it was well worth it. Basically, I query Xively for the last value, then give it to the gauge to display. Here's the current (a minute ago) temperature at my house in the Arizona, USA desert.
There's too much up there to try and explain each item; this blog post would go on forever. However, there's lots of documentation on the web that can explain what I did and the SteelSeries library has enough in it to get you started there.
Good luck and have fun with it. I'll be showing how I use the Google Graph API in an upcoming post as well.
It took a little work to get them going, but it was well worth it. Basically, I query Xively for the last value, then give it to the gauge to display. Here's the current (a minute ago) temperature at my house in the Arizona, USA desert.
So, the source to do this looks like this:
<head>
<title>Dave Testing</title>
</head>
<body onload=init()>
<canvas id=gaugeCanvas width=200 height=200>No canvas in your browser...sorry...</canvas>
</body>
<script>
function init()
{
// Initialzing gauge
tempGauge = new steelseries.Radial('gaugeCanvas', {
gaugeType: steelseries.GaugeType.TYPE4,
minValue:0,
maxValue:150,
size: 200,
frameDesign: steelseries.FrameDesign.BRASS,
knobStyle: steelseries.KnobStyle.BRASS,
pointerType: steelseries.PointerType.TYPE6,
lcdDecimals: 0,
section: null,
area: null,
titleString: 'Outside Temp',
unitString: '°F',
threshold: 100,
lcdVisible: true
});
// Start the gauge update
setInterval(function(){
var site = "http://api.pachube.com/v2/feeds/9511.json?&key=GtGuoMKJSqv2tzqGvWaITLhlEDUxrYXSixqPSmlyj-s&&datastreams=7";
//alert('going for ' + site);
$.ajax({
type: 'GET',
url: site,
dataType: 'json',
cache: false,
data: {},
processData: true,
async: false, // you have to have this so the data will arrive before display
success: function(data_archive) {
//alert("the url returned success");
//alert("got back " + data_archive.datastreams[0].current_value);
tempGauge.setValueAnimated(eval(data_archive.datastreams[0].current_value));
},
error: function(a){
//alert("here I am in the error routine");
}
});
//alert('after the get');
}, 10000);
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type=text/javascript src=http://dl.dropbox.com/u/128855213/SteelSeries/tween-min.js></script>
<script type=text/javascript src=http://dl.dropbox.com/u/128855213/SteelSeries/steelseries-min.js></script>
<title>Dave Testing</title>
</head>
<body onload=init()>
<canvas id=gaugeCanvas width=200 height=200>No canvas in your browser...sorry...</canvas>
</body>
<script>
function init()
{
// Initialzing gauge
tempGauge = new steelseries.Radial('gaugeCanvas', {
gaugeType: steelseries.GaugeType.TYPE4,
minValue:0,
maxValue:150,
size: 200,
frameDesign: steelseries.FrameDesign.BRASS,
knobStyle: steelseries.KnobStyle.BRASS,
pointerType: steelseries.PointerType.TYPE6,
lcdDecimals: 0,
section: null,
area: null,
titleString: 'Outside Temp',
unitString: '°F',
threshold: 100,
lcdVisible: true
});
// Start the gauge update
setInterval(function(){
var site = "http://api.pachube.com/v2/feeds/9511.json?&key=GtGuoMKJSqv2tzqGvWaITLhlEDUxrYXSixqPSmlyj-s&&datastreams=7";
//alert('going for ' + site);
$.ajax({
type: 'GET',
url: site,
dataType: 'json',
cache: false,
data: {},
processData: true,
async: false, // you have to have this so the data will arrive before display
success: function(data_archive) {
//alert("the url returned success");
//alert("got back " + data_archive.datastreams[0].current_value);
tempGauge.setValueAnimated(eval(data_archive.datastreams[0].current_value));
},
error: function(a){
//alert("here I am in the error routine");
}
});
//alert('after the get');
}, 10000);
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type=text/javascript src=http://dl.dropbox.com/u/128855213/SteelSeries/tween-min.js></script>
<script type=text/javascript src=http://dl.dropbox.com/u/128855213/SteelSeries/steelseries-min.js></script>
There's too much up there to try and explain each item; this blog post would go on forever. However, there's lots of documentation on the web that can explain what I did and the SteelSeries library has enough in it to get you started there.
Good luck and have fun with it. I'll be showing how I use the Google Graph API in an upcoming post as well.