Skip to content

Instantly share code, notes, and snippets.

@matbor
Created September 25, 2013 12:31
Show Gist options
  • Save matbor/6698980 to your computer and use it in GitHub Desktop.
Save matbor/6698980 to your computer and use it in GitHub Desktop.
Steelseries gauge displaying temperature live using websockets from a mqtt/mosquitto broker.
<head>
<title>Testing Temp Gauge</title>
</head>
<body onload="init();">
<canvas id=gaugeCanvas width=200 height=200>No canvas in your browser...sorry...</canvas>
</body>
<script type="text/javascript" src="mosquitto-1.1.js"></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>
<script>
var tempGauge;
var mosq = new Mosquitto();
function init()
{ // from @bordignons Sep 2013
// original idea.. http://www.desert-home.com/2013/06/how-to-use-steelseries-gauges-with.html
// with help.. http://harmoniccode.blogspot.com.au/
// and code.. https://github.com/HanSolo/SteelSeries-Canvas
// Initialzing gauge
tempGauge = new steelseries.Radial('gaugeCanvas', {
gaugeType: steelseries.GaugeType.TYPE4,
minValue:-15,
maxValue:50,
size: 400,
frameDesign: steelseries.FrameDesign.BRASS,
knobStyle: steelseries.KnobStyle.BRASS,
pointerType: steelseries.PointerType.TYPE6,
lcdDecimals: 0,
section: null,
area: null,
titleString: 'Outside Temp',
unitString: 'C',
threshold: 100,
lcdVisible: true,
lcdDecimals: 2
});
tempGauge.setValue('');
}
mosq.onmessage = onMessage;
mosq.ondisconnect = onDisconnect;
mosq.onconnect = function(rc) {
//console.log("mqtt connected");
//add your topic that you want to subscribe to here, currently set to all topics #
mosq.subscribe('#', 0);
};
//var url = 'ws://test.mosquitto.org/mqtt';
var url = 'ws://' + location.host + ":" + location.port + '/mqtt';
//console.log(url);
mosq.connect(url);
function onMessage(topic, payload, qos) {
//console.log(topic + " - " + payload);
tempGauge.setValue(payload);
}
function onDisconnect(reason) {
//console.log("disconnected");
alert("disconnected");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment