Read sensor values by smartphone/pc


Description

In this tutorial is shown how to read sensor values via a Smartphone/PC using an Arduino UNO WiFi

Warning:
Please, it's important to upgrade to the latest ESP firmware, using the Arduino UNO firmware updater tool, before to continue this tutorial.

 

Hardware 

You can use also the component of the  WorkShop kit or of the Starter kit.
For more details visit our Store.

Circuit

Use a breadboard to place your sensors.
The TMP36 sensor has three legs: Vcc, Signal and Ground.
Connect the first leg (Vcc) at 5V; the second (Signal) at the analog pin A1 and the thrird one at GND of the board.
After connect a leg of Photoresistor at 5V and the other one at the analog pin A0 and at a resistor of 10KOhm connected to GND, as shown in the below image:


Sensor circuit

Instead if you want to use a LDR Sensor module of Tinkerkit, then follow these indications:
Normally the Tinkerkit devices have three pins Vcc(+), the Signal and the Ground (-). 
Connect the Vcc pin (+) to 5V, the Ground (-) to GND and the other to the pin A0 of the board, you can use the wires female/male for the connections.


Code

Now connect the board to PC, via USB cable, and upload the code below, using the Arduino IDE (click here for download the sketch):

Warning:
If you are using the Arduino IDE 1.7.x then continue to use the ArduinoWiFi.h library.
Instead if you are using the Arduino IDE 1.8.x then download the UNOWiFiDev.Edition library from Library Manager and modify the code, replacing #include <ArduinoWiFi.h> with #include <UnoWiFiDevEd.h>


/*
This sketch, with an Uno WiFi, a photoresistor and a TMP36, shows the brightness and the temperature of your room.
The boxes brightness changing with the brightness and the temperature of the room.

Upload the code and open your borwser on http://<IP>/arduino/webserver/ or http://<hostname>.local/arduino/webserver/
for more information:

http://www.arduino.org/learning/tutorials/boards-tutorials/read-sensor-values-by-smartphone-pc


created in December 2016
by sebba[at]arduino[dot]org
*/

//Import libraries
#include <Wire.h>
#include <ArduinoWiFi.h>// if you are using the Arduino IDE 1.8.x then: //#include <UnoWiFiDevEd.h>

const byte lightsensorpin = A0;
const byte temperaturesensorpin = A1;

//SET UP
void setup() {
Wifi.begin();
Wifi.println("WebServer Server is up");

}

//LOOP
void loop() {
while(Wifi.available()){
process(Wifi);
}
delay(50);

}


/* FUNCTIONS */


//process()
void process(WifiData client) {
// read the command
String command = client.readStringUntil('/');

if (command == "webserver") {
WebServer(client); //call WebServer() function
}

else if (command == "update") {
updateValues(client); //call updateValues() function
}
}

//Update the values on the boxes, reading analog values
void updateValues(WifiData client){
//Read the analog value from the LDR
int lightSensorVal = analogRead(lightsensorpin);
//Calculate the propery brightness value of the box
float brigthnessLightBoxVal = (float)(1023-lightSensorVal)/1000;

//Read the analog value from the TM36 and calculate the temperature
int tempSensorVal = analogRead(temperaturesensorpin);
float voltage = (tempSensorVal / 1024.0) * 5.0;
float temp = (voltage - .5) * 100;

//Adapt the value for the brightness of the box
//The lower value of the temperature is 10, the maximum value of the temperature is 30
int tmp = map(temp, 15, 30, 400, 1000);
float brigthnessTempBoxVal = (float)tmp/1000;

client.println(F("HTTP/1.1 200 OK\n"));

//Sends the values to the javascript that update the values on the boxes
client.print(lightSensorVal);
client.print(F("#"));client.print((brigthnessLightBoxVal));
client.print(F("#"));client.print((temp));
client.print(F("#"));client.print((brigthnessTempBoxVal));
client.print(EOL);
client.print(DELIMITER);
}

void WebServer(WifiData client) {
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<title>UNO WIFI Tutorial - Light and temperature</title>"));

//The stylesheet of the page
client.println(F("<style>div{width:50%; height:20%; border-radius:8px;text-align:center;color:white;margin:5% 5% 0 25%;}"));
client.println(F("</style><script>"));

//Update the values every 3000 milliseconds
client.println(F("setInterval(function(){ update();}, 3000)"));

//The JavaScript update function
client.println(F("function update(){"));

//Create the commmand for the AJAX request
client.println(F("var URL_array=document.URL.split('/')"));;
client.println(F("var URL=URL_array[0]+'//'+URL_array[2]"));
client.println(F("url=URL+'/arduino/digital/update'"));

//Create the AJAX request
client.println(F("xmlhttp=new XMLHttpRequest()"));
client.println(F("xmlhttp.onreadystatechange=function(){"));
client.println(F("if(xmlhttp.readyState==4 && xmlhttp.status==200)"));
client.println(F("var resp=xmlhttp.responseText"));
client.println(F("if(typeof resp==='undefined')return"));
client.println(F("var args = resp.split('#')"));

//Change the value for the box
client.println(F("document.getElementById('lvalue').textContent=args[0]"));
client.println(F("document.getElementById('tvalue').textContent=args[2]"));
client.println(F("document.getElementById('light').style.opacity=args[1]"));
client.println(F("document.getElementById('temp').style.opacity=args[3]"));
client.println(F("}"));
client.println(F("xmlhttp.open('GET',url,true)"));
client.println(F("xmlhttp.send()}"));
client.println(F("</script>"));
client.println(F("<head>"));
client.println(F("<body>"));

//Create the boxes
client.println(F("<div id=light style='background:#00979C'><span>Light sensor value : </span><span id='lvalue'></span></div>"));
client.println(F("<div id=temp style='background:#F47A20'><span>Temperature sensor value:</span><span id='tvalue'></span></div>"));
client.println(F("</body></html>"));
client.println(DELIMITER);
client.flush();
}

If you want to use an external webserver, for example Apache, then use this other code.

OUTPUT

webserver3

Note: 

If you haven't configured your board then click here.