What we will do

In this example, we will read the sensor data over the internet from a web page from anywhere in the world. We will write a particle function that will read the sensor data. And then we will trigger that function from a web page and read back and show the data in the web page.

The circuit diagram

Read the sensor data over the internet

Read the sensor data over the internet

We constructed a voltage divider by using a 570 ohm(Green, Violet, Brown) resistor and a photo-resistor. We read the voltage at the dividing point and other two ends of the voltage divider are connected to power (3.3V) and GND. The voltage reading changes according to photo-resistor changes when an amount of light shades upon the resistor differs.

Wifi configuration and Particle code/firmware

Software Access Point or Soft AP configuration for particle photon is described here. It is as simple as to download a mobile app (particle app) and send the wifi credential to the device/micro-controller through that application. You can review the detail in the referred link.

Read the sensor data over the internet

We will divide this section into two parts. One is the coding into the particle photon. Which is like coding in Arduino or other microcontrollers. Another part is coding in the web like HTML, CSS which will build the UI and trigger the function of the photon through the Particle cloud through a POST request to the particle API.

The code to put in the Particle

The code that needs to be load from ‘particle build’ is very simple one. The code is:

[sourcecode language=”python” wraplines=”false” collapse=”false”]

int photoresistor = A0; // This is where your photoresistor is plugged in. The other side goes to the "power" pin (below).

int analogvalue; // Here we are declaring the integer variable analogvalue, which we will use later to store the value of the photoresistor.

// Next we go into the setup function.

void setup() {

// First, declare all of our pins. This lets our device know which ones will be used for outputting voltage, and which ones will read incoming voltage.

pinMode(photoresistor,INPUT); // Our photoresistor pin is input (reading the photoresistor)

// We are going to declare a Particle.variable() here so that we can access the value of the photoresistor from the cloud.
Particle.variable("analogvalue", &analogvalue, INT);
// This is saying that when we ask the cloud for "analogvalue", this will reference the variable analogvalue in this app, which is an integer variable.

}

// Next is the loop function…
void loop() {

// check to see what the value of the photoresistor is and store it in the int variable analogvalue
analogvalue = analogRead(photoresistor);
delay(100);
}
[/sourcecode]

The HTML code to read the sensor value through API

[sourcecode language=”python” wraplines=”false” collapse=”false”]
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( function() {
var deviceID = "YOUR_DEVICE_ID";
var accessToken = "YOUR_ACCESS_TOKEN";
var varName = "analogvalue";
var pollRate ="2000";

function poll(){
$.ajax({
type: "get",
url: "https://api.particle.io/v1/devices/"+deviceID+"/"+varName+"/?access_token="+accessToken,
dataType: "json", // Expect JSON-formatted response from agent.
success: function(sensor) {
$("#photosensor").html(sesnor.result);
$("#tstamp").html(sensor.coreInfo.last_heard);
}
});
}
setInterval(function(){ poll(); }, pollRate);
});

</script>
</head>
<body>
<b>Photo-sensor value:</b> <span id="photosensor"></span>
<b>Time:</b> <span id="tstamp"></span>
</body>
</html>
[/sourcecode]

The is a simple HTML page that is calling the particle API to read the photosensor values at an 2 seconds interval. The JSON was being saved in the variable sensor. The typical response is:

{
  "cmd": "VarReturn",
  "name": "analogvalue",
  "result": 293,
  "coreInfo": {
    "last_app": "",
    "last_heard": "2016-05-29T06:41:03.339Z",
    "connected": true,
    "last_handshake_at": "2016-05-29T04:24:51.968Z",
    "deviceID": "-------------",
    "product_id": 6
  }
}

So we parse the JSON and showing the result and last_heard from the array.

Please change your device ID and access token.

And last but not least, the GitHub link for both .ino and .html file to Read the sensor data over the internet. 🙂 : https://github.com/knsakib/Read_IOT_sensor_values_by_calling_API