Next, you'll modify your Smart Light device app to allow a web app to interact with your Photon through the internet.
All of your Photon's internet communications are routed through the Particle Cloud service, which offers these ways that a web app can interact with a Photon device through Particle Cloud:
A web app can get the value of a Photon device variable
A web app can call a custom function on a Photon device
A web app can get event notifications from a Photon device
The web app that you'll be creating for your Smart Light device will perform these two tasks:
The web app will display whether the LED light is currently turned on or off. The web app will do this by getting the current value of the lightStatus variable in your Photon device app.
The web app will display a button that can be clicked to remotely turn the LED light on or off. The web app will do this by calling the toggleLight() function in your Photon device app.
You'll need to add some code to your Photon device app that will allow your web app to get the value of the lightStatus variable and to call the toggleLight() function.
In order for a web app to get the value of Photon device variable, your Photon device app must share the variable through Particle Cloud using the Particle.variable() method.
Share the lightStatus variable through Particle Cloud by adding this code statement within the setup() function of your Photon app:
This Particle.variable() code statement creates a "cloud variable" that stores the value of your Photon device variable. Whenever the value of the device variable changes in your Photon app, the value stored in the cloud variable will be automatically synced to match.
The Particle.variable() method requires two parameters inside its parentheses (in this order):
The cloud variable name, which can be up to 12 characters in length. If possible (for simplicity), make your cloud variable name match your device variable name. However, the cloud variable is allowed to have a different name. The cloud variable name must be listed within double quotation marks. In this case, "lightStatus" will be the name of the cloud variable (which matches the device variable name).
The Photon device variable name, which is the variable in your Photon app whose value will be shared in Particle Cloud. In this case, you're sharing the value of the lightStatus variable.
In order for a web app to call a function that runs on your Photon device, your Photon device app must share the function through Particle Cloud using the Particle.function() method.
Share the toggleLight() function through Particle Cloud by adding this code statement within the setup() function of your Photon app:
This Particle.function() code statement creates a "cloud function" that is a reference to the custom function in your Photon device app. Whenever your web app calls the cloud function, the corresponding device function in your Photon app will automatically be called.
The Particle.function() method requires two parameters inside its parentheses (in this order):
The cloud function name, which can be up to 12 characters in length. If possible (for simplicity), make your cloud function name match your device function name. However, the cloud function is allowed to have a different name. The cloud function name must be listed within double quotation marks without parentheses after its name. In this case, "toggleLight" will be the name of the cloud function (which matches the device function name).
The Photon device function name, which is the custom function in your Photon device app that will be shared through Particle Cloud. List the function name without parentheses after its name. In this case, you're sharing the toggleLight function in your Photon app.
A Photon device function that is shared through Particle Cloud must do the following:
The Photon function must accept a String parameter when the function is called.
The Photon function must return an integer value when the function is performed.
Currently, the toggleLight() function does not do these things – but you can easily modify the function to work with Particle Cloud with these minor changes:
Change toggleLight() to toggleLight(String data). This adds a parameter inside the parentheses that will be accepted when the function is called: String is the data type for the parameter (a text string), and data is the name of a local variable that will store the parameter value (the text string). If desired, you could use a different name other than data.
In front of the function name, change void to int. This indicates that the function will return an integer value (whole number), instead of no value (which is what void represents).
Add the code statement return 1; inside the function at the end before the closing curly brace. This code statement will return an integer value of 1 whenever the function is performed. This is the simplest way to ensure the function returns an integer value.
Your custom function should look like this now:
You might notice that there aren't any code statements within the curly braces of the toggleLight() function that actually use the data parameter variable. That's actually okay – the function does have to accept a String parameter, but it doesn't have to use the parameter inside in the function.
However, depending on what a custom function is supposed to do, the text string passed into the data parameter could be used to decide what action(s) are performed within the custom function. In this case, you won't do that, but it is an option that's available.
Once a custom function in your Photon device app has been modified to be shared through Particle Cloud, your Photon app (and your web app) must include a text string when calling the function.
In your Photon app, there's just one code statement that calls the toggleLight() function. Inside the loop() function, there is an if statement that calls the toggleLight() function when the button is pushed (buttonState == LOW):
Inside this if statement, change toggleLight(); to toggleLight("data");
In this case, "data" will be the text string passed into the parameter when this function is called. However, since this function doesn't actually do anything with the parameter value, this text string could be any text listed within double quotation marks – even an empty text string of "" would work.
Flash your app code to your Photon device by clicking the Flash icon in the left navigation bar.
Once your Photon has downloaded the app and restarted, the updated app will start running. You shouldn't notice any visible changes in the device's behavior, but your Photon app will now be sharing the lightStatus variable and toggleLight() function with Particle Cloud.
Confirm that the LED light still toggles between "on" and "off" each time the button is pressed.
