Internet Controlled LED part 2 -- Suvin

- July 18, 2018

Internet Controlled LED part 2 -- Suvin

I showed you how to setup the basics for the project in my previous article. So now I'm gonna walk you through the next part.

Step 3: Setting up the web server

In the web server we need to host our JSON (Java Script Object Notation) File. Once the ESP8266 is connected to the internet, It reads this JSON file and determine is the light is turned on or off.

Open your Notepad or the text editor you got on your PC ans type this.

{"light":"on"}

Actually we don't need anything to write on the JSON file because it is linked to the ON and OFF buttons and it writes automatically. But I wrote this just for show you what it is look like.

Once you type the above, save the file and name it with light.json. Now you need a good web hosting service. I recommend "000 webhost". Its free and easy to setup. I'm not gonna show you how to host a file on 000 webhost now because there's a plenty of tutorials on the internet regarding that.

Upload the JSON file to public_html and you are good to go.

Step 4: Web Interface

Now we need a nice and descent interface with two buttons on it. On button and Off button. And the button functions should be like this.

When clicked on ON button, it should erase the JSON file and rewrite it with {"light":"on"}
When clicked on OFF button, it should erase the JSON file and rewrite it with {"light":"off"}

So the html code goes like this.

<?php
$light = $_GET['light'];
if($light == "on") {
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"light": "on"}');
fclose($file);
}
else if ($light == "off") {
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"light": "off"}');
fclose($file);
}
?>

</head>
<body>
<div class="row" style="margin-top: 20px;">
<div class="col-md-8 col-md-offset-2">
<a href="?light=on" class="btn btn-success btn-block btn-lg">Turn On</a>
<br />
<a href="?light=off" class="led btn btn-danger btn-block btn-lg">Turn Off</a>
<br />
<div class="light-status well" style="margin-top: 5px; text-align:center">
<?php
if($light=="on") {
echo("Turn LED on.");
}
else if ($light=="off") {
echo("Turn LED off.");
}
else {
echo ("Do something.");
}
?>
</div>
</div>
</div>
</body>
</html>

I've added some bootstrap and Jquery which I found on Nancy Yi Liang's blog. And to write the JSON file, a php code is used here.

Copy and paste the code into a text editor, probably Notepad and save it as index.hmtl and upload it to public_html folder in 000 webhost.

Now you are all set with the web server!

Step 5: The Arduino Code

So now we need to programme ESP8266. It should read the JSON file and check whether is its ON of OFF and if it's ON, It should power up the LED and if it's OFF, It should turn the LED off. Here goes the Arduino sketch. Also youre gonna need Arduino JSON library which you can find here. Code is explained with comments.

#include <ESP8266WiFi.h>

#include <ArduinoJson.h>

const char* ssid = “”; //put your wifi SSID here
const char* password = “”; //put your wifi password here

const char* host = “”; // Your domain name
String path = “”; put the path to light.json file
const int pin = 2;

void setup() {
pinMode(pin, OUTPUT);
pinMode(pin, HIGH);
Serial.begin(115200);

delay(10);
Serial.print(“Connecting to “);
Serial.println(ssid);

WiFi.begin(ssid, password);
int wifi_ctr = 0;
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}

Serial.println(“WiFi connected”);
Serial.println(“IP address: ” + WiFi.localIP());
}

void loop() {
Serial.print(“connecting to “);
Serial.println(host);
WiFiClient client;
const int httpPort = 80;
if (!client.connect(host, httpPort)) {
Serial.println(“connection failed”);
return;
}

client.print(String(“GET “) + path + ” HTTP/1.1\r\n” +
“Host: ” + host + “\r\n” +
“Connection: keep-alive\r\n\r\n”);

delay(500); // wait for server to respond

// read response
String section=”header”;
while(client.available()){
String line = client.readStringUntil(‘\r’);
// Serial.print(line);
// we’ll parse the HTML body here
if (section==”header”) { // headers..
Serial.print(“.”);
if (line==”\n”) { // skips the empty space at the beginning
section=”json”;
}
}
else if (section==”json”) { // print the good stuff
section=”ignore”;
String result = line.substring(1);

// Parse JSON
int size = result.length() + 1;
char json[size];
result.toCharArray(json, size);
StaticJsonBuffer<200> jsonBuffer;
JsonObject& json_parsed = jsonBuffer.parseObject(json);
if (!json_parsed.success())
{
Serial.println(“parseObject() failed”);
return;
}

// Make the decision to turn off or on the LED
if (strcmp(json_parsed[“light”], “on”) == 0) {
digitalWrite(pin, HIGH);
Serial.println(“LED ON”);
}
else {
digitalWrite(pin, LOW);
Serial.println(“led off”);
}
}
}
Serial.print(“closing connection. “);
}

All done! Upload the code to ESP8266, plug in an external power source and enjoy!

For Part 1 Go Here..

Hope you enjoyed..

Search This Blog

SciTech Revel