Smart IA: DHT Subscriber - MQTT Arduino Gateway

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.zip
Dowload 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)

Broker TCP/IP address - broker.mqttdashboard.com
Connect, 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

<!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 + '&deg;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

Smart IA

Thursday, June 19, 2014

DHT Subscriber - MQTT Arduino Gateway

Use WMQTT Utility to Subscribe Uploaded DHT-11 Temperature & Humidity Data

Download WMQTT Utility

Subscribe

Subscribe Using WebSocket

No comments:

Post a Comment

Profile

Contents