Use WMQTT Utility to Subscribe Uploaded DHT-11 Temperature & Humidity Data
Download WMQTT Utility
http://www14.software.ibm.com/cgi-bin/weblap/lap.pl?popup=Y&li_formnum=L-TMAN-5N7JL9&accepted_url=ftp://public.dhe.ibm.com/software/integration/support/supportpacs/individual/ia92.zipDowload ia92.zip. No need to install, you just need to unzip.
For example, if you unzipped in C:\Evaluation\preview\MQTT\ia92 in DOS Box
cd C:\Evaluation\preview\MQTT\ia92\J2SE
java -jar wmqttSample.jar
Manual is in page 49 of IBM MQTT RedBook. (The page number refers to PDF Viewer's page)
Subscribe
Broker TCP/IP address - broker.mqttdashboard.comConnect, if green light turns on,
Subscribe Topic - DHT11/temphum
and you will see DHT-11 Temperature & Humidity data in History
Subscribe Using WebSocket
For full source code refer to the link at the bottom.If you want to see only the MQTT part -> https://gist.github.com/matbor/8837988
.png)
<!DOCTYPE html>
<html>
<head>
<title>Temperature & Humidity Subscriber</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="globalize.min.js"></script>
<script type="text/javascript" src="dx.chartjs.js"></script>
<script type="text/javascript" src="knockout-3.0.0.js"></script>
<script type="text/javascript" src="mqttws31.js"></script>
<script type="text/javascript">
var client;
var t, h;
$(document).ready(function() {
t = $('<div style="width: 50%; height: 100%; float: left;" />').appendTo('#chartContainer');
h = $('<div style="width: 50%; height: 100%; float: left;" />').appendTo('#chartContainer');
var options = { scale: { startValue: 0, endValue: 40, majorTick: { tickInterval: 5}} };
t.dxCircularGauge($.extend(true, {}, options, {
geometry: { startAngle: 180, endAngle: 90 },
value: 0,
rangeContainer: {
ranges: [
{ startValue: 28, endValue: 40, color: '#CE2029' },
{ startValue: 0, endValue: 10, color: '#0077BE' }
]
},
valueIndicator: { type: 'rangeBar' },
title: { text: 'Temperature' },
scale: {
label: { customizeText: function(arg) {
return arg.valueText + '°C';
}
}
}
}));
h.dxCircularGauge($.extend(true, {}, options, {
scale: { startValue: 100, endValue: 0, majorTick: { tickInterval: 10 },
label: { customizeText: function(arg) {
return arg.valueText + '%';
}
}
},
geometry: { startAngle: 90, endAngle: 0 },
value: 0,
valueIndicator: { type: 'rangeBar' },
rangeContainer: {
ranges: [
{ startValue: 33, endValue: 0, color: '#77DD77' },
{ startValue: 67, endValue: 33, color: '#E6E200' },
{ startValue: 100, endValue: 67, color: '#92000A' }
]
},
title: { text: 'Humidity' }
}));
});
client = new Messaging.Client("broker.mqttdashboard.com", 8000, "HTMLTempHumSensor" + parseInt(Math.random() * 100, 10));
// Connection Lost Message
client.onConnectionLost = function(responseObject) {
alert("Connection Lost: " + responseObject.errorMessage);
};
// Message Arrival
client.onMessageArrived = function(message) {
var data = message.payloadString.split(",");
var temperature = parseInt(data[0]);
var humidity = parseInt(data[1]);
$(t).dxCircularGauge('instance').value(temperature);
$(h).dxCircularGauge('instance').value(humidity);
};
// Connect Options
var options = {
timeout: 3,
onSuccess: function() {
alert("Connected");
},
onFailure: function(message) {
alert("Connection failed: " + message.errorMessage);
}
};
var publish = function(payload, topic, qos) {
var message = new Messaging.Message(payload);
message.destinationName = topic;
message.qos = qos;
client.send(message);
}
</script>
</head>
<body>
<div id="chartContainer" style="height:450px;width:1000px;" align="center"></div>
<table width="1000px">
<tr>
<td align="right">
<button type="button" style="width:200px;" onclick="client.connect(options);">
Connect
</button>
</td>
<td align="center">
<button type="button" style="width:200px;" onclick="client.subscribe('DHT11/temphum', { qos: 2 }); alert('Subscribed');">
Subscribe
</button>
</td>
<td align="left">
<button type="button" style="width:200px;" onclick="client.disconnect();">
Disconnect
</button>
</td>
</tr>
<tr>
<td colspan="3">
<div id="messages"></div>
</td>
</tr>
</table>
</body>
</html>
Full codes can be found in following links
- TempHumSubscriber.html:
https://github.com/michelleseo/Arduino_Web/blob/master/MQTT/TempHumSubscriber.html - mqttws31.js:
https://github.com/michelleseo/Arduino_Web/blob/master/MQTT/mqttws31.js
_small.jpg)
.png)
.png)
.jpg)
.png)
.png)
.png)
.png)
.jpg)
.jpg)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)