D-9 Web App JS

Next, you'll add JavaScript code to allow your web app to interact with your Photon device through Particle Cloud. Remember that the web app will perform these tasks:

  1. The web app will display whether the security device is currently armed or disarmed. The web app will do this by getting the value of the deviceMode variable in your Photon device app.

  2. The web app will display a toggle switch that can be clicked to remotely toggle the security device between armed and disarmed mode. The web app will do this by calling the toggleMode() function in your Photon device app.

  3. The web app will display a notification if the security device detects motion while the device is armed. The web app will do this by receiving event notifications sent from your Photon device app.

Add Starter JS

​Copy this starter JS for your web app, and paste it into a blank JS file named script.js.

IMPORTANT: You must modify this JS code to insert your actual Photon device ID and access token. Otherwise, your web app will not work properly.

Add Custom JS

Copy this JS, and paste it after your modified starter JS:

var alertSound = new Audio("notification.wav");

window.setInterval(checkMode, 500);

function checkMode() {
    particle.getVariable({ deviceId: myDevice, name: "deviceMode", auth: myToken }).then(function(data) {
        // add code to do something with value returned as: data.body.result
        if (data.body.result == "armed") {
            $("#system-mode").html("ARMED");
            $("input[name=toggle]").prop("checked", true);
        }
        else if (data.body.result == "disarmed") {
            $("#system-mode").html("DISARMED");
            $("input[name=toggle]").prop("checked", false);
        }
    }, function(err) {
            console.log("An error occurred: ", err);
    });
}

function toggleMode() {
    particle.callFunction({ deviceId: myDevice, name: "toggleMode", argument: "data", auth: myToken });
}

particle.getEventStream({ deviceId: myDevice, name: "motion", auth: myToken }).then(function(stream) {
  stream.on('event', function(feed) {
    // add code to do something when event notification received
    // any text data received is stored as: feed.data
    alertSound.play();
    var dateTime = new Date();
    dateTime = dateTime.toLocaleString();
    $("#event-time").html(dateTime);
    $("#motion-alert").show().delay(1500).fadeOut();
  });
});

This custom JS does 5 main things:

  1. Stores an audio file in a JS global variable named alertSound

  2. Sets a time interval to call a JS function named checkMode()

  3. Adds a JS function named checkMode() that will get the value of a Photon variable

  4. Adds a JS function named toggleMode() that will call a Photon function

  5. Starts listening for "motion" event notifications sent by your Photon device

Variable for Audio File

A variable named alertSound is declared that stores an audio file named "notification.wav". Download a copy of this audio file, and place it in the same folder as your web app files.

Set Interval to Call Function

The window.setInterval() method will automatically call the function named checkMode() every 500 ms (0.5 seconds).

Get Photon Variable

The function named checkMode() contains a call to the particle.getVariable() method that will get the current value of the "deviceMode" variable in your Photon app.

Inside the particle.getVariable() method are JS and jQuery code statements (lines 8-15 above) that were added to perform actions based on the value returned for the Photon variable.

An if-else statement is used to determine whether data.body.result has a value equivalent to "armed" or "disarmed". Then jQuery statements (which start with $) are used to dynamically change the information displayed in the first "card" by targeting specific id selectors:

  • $("#system-mode") targets the HTML element with id="system-mode". The jQuery statements change this element's HTML to display either ARMED or DISARMED.

  • $("input [name=toggle]) targets the <input> element with name="toggle". The jQuery statements change its "checked" property to either true (checked) or false (unchecked), which changes the toggle switch slider position.

Since the window.setInterval() method will keep calling this function every 0.5 seconds, your web app will continuously monitor the current mode of your Smart Security device.

Call Photon Function

The function named toggleMode() contains a call to the particle.callFunction() method that will call the "toggleMode" function in your Photon app to remotely switch your device's mode between "armed" and "disarmed".

The <input type="checkbox"> in your web app HTML contains an onclick event attribute that will call this toggleMode() function whenever the toggle switch in the web app is clicked.

Listen for Event Notifications

The particle.getEventStream() method is used to start listening for event notifications sent from your Photon app.

The particle.getEventStream() method requires your Photon device ID, the name of your cloud event, and your Photon access token:

  1. myDevice is the global variable that stores your Photon device ID

  2. "motion" is the name of the cloud event that you want to receive notifications from

  3. myToken is the global variable that stores your Photon access token

If an event notification includes any data, this text string data gets temporarily stored in a local variable called: feed.data

Code statements added within the particle.getVariable() method will be performed whenever an event notification is received.

In this case, JS and jQuery code statements (lines 29-33 above) were added that will perform these actions each time a new event notification is received:

  • Play the alertSound

  • Get the current date and time and store it in a variable named dateTime

  • Display the value of dateTime in the HTML element with id="event-time"

  • Show the HTML element with id="motion-alert", wait for 1500 ms (1.5 seconds), and then fade out the element until it is hidden. This creates a visible "pop-up" notification in your web app.

NOTE: Since your Photon app is sending the "motion" event notification without data, there aren't any JS or jQuery code statements using feed.data (because no text string is being received).

Test Web App

Be sure your Photon device is connected to Wi-Fi and Particle Cloud.

Refresh your web app, and test it with your Photon device to make sure they interact correctly:

  • Verify that your web app displays the current mode ("armed" or "disarmed") of your Smart Security device. Use the push button connected to your Photon device to change the device mode. When the LED is turned on, the device is in "armed" mode. When the LED is turned off, the device is "disarmed." Verify that your web app updates automatically to show the correct device mode.

  • Verify that your web app can remotely change the device mode. Click the toggle switch in your web app, and verify that your Photon device automatically toggles modes (by checking the LED). It may take up to 2 seconds for the mode to switch due to the delay(2000) in the Photon app.

  • While your Smart Security device is in "armed" mode, wave your hand over the motion sensor to trigger a motion event. Verify that your web app displays a motion notification pop-up (which will fade out after 1.5 seconds). Verify the web app displays the correct date and time for the last motion event notification.

Going Further

If you have time and want to experiment with the other inputs and outputs in your Photon kit, you could explore the SparkFun Photon Experiment Guide. (You can skip ahead to Experiment 3 or later.)

There are also references in this guidebook that show and explain how to connect and code each of the physical inputs and physical outputs included in your Photon kit.

Your team should now be ready to start thinking of possible ideas for your IoT project challenge.

PreviousD-8 Web App CSSNextParticle Build