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.
Edit: This used to be a live gauge, but I replaced it with a picture.
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.
Excellent! Thanks Dave. That makes things alot clearer. I ended using emoncms but since these gauges use json I bet they can be used with emoncms too.
ReplyDeleteI gave up on emoncms as a permanent repository. They don't allow cross site operations, which means you can't get the data back if you have a script from a different machine. That makes it pretty useless except for the graphs they provide. Of course, you can put the data on a machine of your own and use their software, but I want to control my power, not run a data center.
ReplyDeleteI asked about this on their forum, and never got an answer that was appropriate; so I just gave up. Thinkspeak allows this and so does Xively and Sen.se. Strange that they don't.
Dear Dave: my congratulations for your fantastic job! It is amazing. I just came across the SteelSeries gauges and I would like to ask you how can I use them to display data that is posted in a .txt file ? In example, I have sensors reporting data and writing them in a plain text file, like, power in Watts, Temperature, Voltage etc.
ReplyDeleteHow can I use the gauges to show the values on my page? The data is updated each 15 seconds.
I have no idea where to start, my knowledge in JavaScript as well as PHP is reduced to an epsilon.
Thank you very much in advance / Nelson - nejemia@gmail.com
I can try to help you. Basically, first you want to get the gauge to appear on an html page on your computer first. Just create html file, with an editor and stick everything I have up there in the code box in it. Load this file with your browser by just double clicking on it. The browser should start (if it isn't already running) and load the file. You should see the gauge I have up above on your screen. Now you need to edit it to make it read your data instead of mine. So you replace the ajax stuff with a file read to get the data you want and the setValueAnimated() call is where you put the number you get from the file. A setValueAnimated(70) will move the needle to 70 in a sweep instead of a jump so it looks like a real gauge.
Deletethx for the inspiration, using mqtt & websockets, https://github.com/jpmens/tempgauge
ReplyDeleteSaw your picture of the gauge. It's nice, I may have to play around with the settings on mine the darker metal look is nice.
ReplyDeleteDidn't know you were looking at these. I found them about a year ago and quickly found them useful. I'll be sending you an email as I find the address again. Getting ready to move to the XBee's and you've already gone that route...
ReplyDeleteI wanna change titleString's font size to be bigger. How could I do this?
ReplyDeleteTanks!
You probably can, but I can't remember the parameter. Take a look at Gerritt's site, he lists the parameters there somewhere. It took me a bit to find them, so look around.
Delete