Mqtt Javascript Html

Stuck with a problem in your code? Seek help here.

Mqtt Javascript Html

Postby NongFu » June 19th, 2016, 8:22 pm

Hi All
I followed the 4 part MQTT by Elliot on Hack a Day and finally understood getting MQTT on a RasPi, I have managed to get 2 leds along with the temp and humidity to work with code changes controlled via the mqtt-spy client.
Now the problem I am having is with the HTML and Javascript trying to adapt it to control 2 or more LED's/ Relays, and would like any and all help.

The error I get is obvious the 2nd button does not work from the page , and on the browser's web inspector it tells me that the 2nd relay function (javascript) does not exist. I have attached 3 files here .
Thank you
Attachments
HAD_MQTT_Forum.rar
The files
(2.82 KiB) Downloaded 28 times
NongFu
 
Posts: 2
Joined: June 19th, 2016, 8:10 pm

Re: Mqtt Javascript Html

Postby NongFu » June 24th, 2016, 6:31 pm

Anyone !! :cry:

Following is the code : Javascript

Code: Select all
/*
   Eclipse Paho MQTT-JS Utility
   by Elliot Williams for Hackaday article,
*/

// Global variables
var client       = null;
var led_is_on    = null;
var rly_is_on    = null;
// These are configs   
var hostname       = "192.168.1.128";   // This is my Brokers IP
var port           = "9001";
var clientId       = "mqtt_js_" + parseInt(Math.random() * 100000, 10);
var temp_topic     = "home/outdoors/temperature";
var humidity_topic = "home/outdoors/humidity";
var status_topic   = "home/outdoors/status";
var relay_topic    = "home/outdoors/relay";


// This is called after the webpage is completely loaded
// It is the main entry point into the JS code
function connect(){
   // Set up the client
   client = new Paho.MQTT.Client(hostname, Number(port), clientId);
   console.info('Connecting to Server: Hostname: ', hostname,
         '. Port: ', port, '. Client ID: ', clientId);

   // set callback handlers
   client.onConnectionLost = onConnectionLost;
   client.onMessageArrived = onMessageArrived;

   // see client class docs for all the options
   var options = {
      onSuccess: onConnect, // after connected, subscribes
      onFailure: onFail     // useful for logging / debugging
   };
   // connect the client
   client.connect(options);
   console.info('Connecting...');
}


function onConnect(context) {
   console.log("Client Connected");
    // And subscribe to our topics   -- both with the same callback function
   options = {qos:0, onSuccess:function(context){ console.log("subscribed"); } }
   client.subscribe(temp_topic, options);
   client.subscribe(humidity_topic, options);
   client.subscribe(status_topic, options);
   client.subscribe(relay_topic, options);
}

function onFail(context) {
   console.log("Failed to connect");
}

function onConnectionLost(responseObject) {
   if (responseObject.errorCode !== 0) {
      console.log("Connection Lost: " + responseObject.errorMessage);
      window.alert("Someone else took my websocket!\nRefresh to take it back.");
   }
}

// Here are the two main actions that drive the webpage:
//  handling incoming messages and the toggle button.

// Updates the webpage elements with new data, and
//  tracks the display LED status as well,
//  in case multiple clients are toggling it.
function onMessageArrived(message) {
   console.log(message.destinationName, message.payloadString);

   // Update element depending on which topic's data came in
   if (message.destinationName == temp_topic){
      var temperature_heading = document.getElementById("temp_display");
      temperature_heading.innerHTML = "Temperature: " + message.payloadString + " °C";
   }
   else (message.destinationName == humidity_topic) {
      var humidity_heading = document.getElementById("humidity_display");
      humidity_heading.innerHTML = "Humidity: " + message.payloadString + "%";
   }
   else  (message.destinationName == status_topic) {
      var status_heading = document.getElementById("led_status");
      status_heading.innerHTML = "LED Status: " + message.payloadString;
      // Accomodates one or two byte "on" commands.  Anything else is off.
      if (message.payloadString == "on" || message.payloadString == "o"){
         led_is_on = true;
      }
      else {
         led_is_on = false;
      }
   }
   else  (message.destinationName == status_topic) {
      var status_heading = document.getElementById("rly_status");
      status_heading.innerHTML = "Relay Status: " + message.payloadString;
      // Accomodates one or two byte "on" commands.  Anything else is off.
      if (message.payloadString == "on" || message.payloadString == "o"){
         rly_is_on = true;
      }
      else {
         rly_is_on = false;
      }
   }
}

// Provides the button logic that toggles our display LED on and off
// Triggered by pressing the HTML button "status_button"
function led_toggle(){
   if (led_is_on){
      var payload = "off";
      led_is_on = false;
   } else {
      var payload = "on";
      led_is_on = true;
   }

function rly_toggle(){
   if (rly_is_on){
      var payload = "off";
      rly_is_on = false;
   } else {
      var payload = "on";
      rly_is_on = true;
   }



   // Send messgae
   message = new Paho.MQTT.Message(payload);
   message.destinationName = status_topic;
   message.retained = true;
   client.send(message);
   console.info('sending: ', payload);
}


and the HTML
Code: Select all
<body>

      <h2 align=center>Welcome To The Shortest JavaScript MQTT Demo Ever!</h2>

      <h3 id="temp_display">Waiting for temperature update...</h3>
      <h3 id="humidity_display">Waiting for humidity update...</h3>
      <h3 id="led_status">Waiting for LED status update...</h3>
      <h3 id="rly_status">Waiting for Relay status update...</h3>

      <button id="status_button" type="button" onclick="led_toggle();">Click Me to Toggle LED Display!</button>    
      <button id="rly_button" type="button" onclick="relay_toggle();">Click Me to Toggle RELAY Display!</button>
      <!-- Source Paho MQTT Client-->
      <script src="lib/mqttws31.js"></script>
      <!-- Our Code Goes Here -->
      <script src="bbutton_test.js"></script>
      <!-- Start it up! -->
      <script>connect();</script>

   </body>
NongFu
 
Posts: 2
Joined: June 19th, 2016, 8:10 pm


Return to Help Me! Software

Who is online

Users browsing this forum: No registered users and 2 guests