Skip to content

Instantly share code, notes, and snippets.

@Elwell

Elwell/sample published info

Created February 20, 2016 05:20
Show Gist options
  • Save Elwell/3d182daea9aec9c753b3 to your computer and use it in GitHub Desktop.
Save Elwell/3d182daea9aec9c753b3 to your computer and use it in GitHub Desktop.
Download ZIP
Websockets Gauges
Raw
sample published info
andrew@mythic:~$ mosquitto_sub -t 'sensors/+/json' -v
sensors/garage/json { "temp": 32.40, "humidity": 35.90 }
sensors/ESP-10264644/json { "temp": 24.1, "humidity": 56.8 }
sensors/garage/json { "temp": 32.50, "humidity": 36.00 }
sensors/ESP-10264644/json { "temp": 24.1, "humidity": 56.7 }
sensors/garage/json { "temp": 32.40, "humidity": 36.00 }
sensors/ESP-10264644/json { "temp": 24.1, "humidity": 56.5 }
sensors/garage/json { "temp": 32.40, "humidity": 36.10 }
sensors/ESP-10264644/json { "temp": 24.1, "humidity": 56.4 }
^C
Raw
sensors.html
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="/js/mqttws31.js" type="text/javascript"></script>
<script src="/js/tween-min.js" type="text/javascript"></script>
<script src="/js/steelseries-min.js" type="text/javascript"></script>
<title>Temp</title>
<script type="text/javascript">
var tempGauge;
var client = new Paho.MQTT.Client("mythic", 9001,
"myclientid_" + parseInt(Math.random() * 100, 10));
client.onConnectionLost = function (responseObject) {
alert("connection lost: " + responseObject.errorMessage);
tempGauge.setLedColor(steelseries.LedColor.RED_LED); //change status LED to RED on broker disconnection
};
client.onMessageArrived = function (message) {
if (message.destinationName == "sensors/garage/json") {
parsed = JSON.parse(message.payloadString);
tempGauge2.setValue(parsed.temp);
humGauge2.setValue(parsed.humidity);
} else {
parsed = JSON.parse(message.payloadString);
tempGauge1.setValue(parsed.temp);
humGauge1.setValue(parsed.humidity);
}
};
var options = {
timeout: 3,
onSuccess: function () {
// alert("Connected");
// Connection succeeded; subscribe to our topic
//client.subscribe('sensors/ESP-10264644/json', {qos: 0});
client.subscribe('sensors/+/json', {qos: 0});
tempGauge1.setLedColor(steelseries.LedColor.GREEN_LED); //change status LED to GREEN on broker connection
//client.subscribe('solar/json', {qos: 0});
},
onFailure: function (message) {
alert("Connection failed: " + message.errorMessage);
tempGauge.setLedColor(steelseries.LedColor.RED_LED); //change status LED to RED on broker disconnection
}
};
function init() {
// by @jpmens, Sep 2013
// 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
var valGrad = new steelseries.gradientWrapper( 0,
100,
[ 0, 0.33, 0.66, 0.85, 1],
[ new steelseries.rgbaColor(0, 0, 200, 1),
new steelseries.rgbaColor(0, 200, 0, 1),
new steelseries.rgbaColor(200, 200, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1) ]);
tempGauge1 = new steelseries.Linear('tempCanvas1', {
gaugeType: steelseries.GaugeType.TYPE2,
width: 320,
height: 140,
titleString: "Temperature",
unitString: "C",
lcdVisible: true,
minValue:0,
maxValue:50,
frameDesign: steelseries.FrameDesign.TILTED_BLACK,
knobStyle: steelseries.KnobStyle.STEEL,
pointerType: steelseries.PointerType.TYPE6,
section: null,
area: null,
threshold: 100,
lcdDecimals: 1
});
tempGauge1.setValue(''); //gives a blank display 'NaN' until broker has connected
tempGauge1.setLedColor(steelseries.LedColor.RED_LED); //set the LED RED until connected
humGauge1 = new steelseries.LinearBargraph('humCanvas1', {
width: 320,
height: 140,
valueGradient: valGrad,
useValueGradient: true,
titleString: "Humidity",
unitString: "%",
threshold: 100,
lcdVisible: false,
frameDesign: steelseries.FrameDesign.TILTED_BLACK
});
tempGauge2 = new steelseries.Linear('tempCanvas2', {
gaugeType: steelseries.GaugeType.TYPE2,
width: 320,
height: 140,
titleString: "Temperature",
unitString: "C",
lcdVisible: true,
minValue:0,
maxValue:50,
frameDesign: steelseries.FrameDesign.TILTED_BLACK,
knobStyle: steelseries.KnobStyle.STEEL,
pointerType: steelseries.PointerType.TYPE6,
section: null,
area: null,
threshold: 100,
lcdDecimals: 1
});
tempGauge2.setValue(''); //gives a blank display 'NaN' until broker has connected
tempGauge2.setLedColor(steelseries.LedColor.RED_LED); //set the LED RED until connected
humGauge2 = new steelseries.LinearBargraph('humCanvas2', {
width: 320,
height: 140,
valueGradient: valGrad,
useValueGradient: true,
titleString: "Humidity",
unitString: "%",
threshold: 100,
lcdVisible: false,
frameDesign: steelseries.FrameDesign.TILTED_BLACK
});
/* Connect to MQTT broker */
client.connect(options);
}
</script>
</head>
<body onload="init();">
<div>
<canvas id=tempCanvas1 width=200 height=200>No canvas in your browser...sorry...</canvas>
<canvas id=humCanvas1 width=200 height=200></canvas>
<strong>External (rear) Temp/Hum</strong><br/>
<canvas id=tempCanvas2 width=200 height=200>No canvas in your browser...sorry...</canvas>
<canvas id=humCanvas2 width=200 height=200></canvas>
<strong>Garage Temp/Hum</strong><br/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment