Published October 3, 2018 © LGPL

Surilli WiFi ESP8266 Controlled with Android App

Building an Android app through MIT App Inventor to control the Surilli WiFi ESP8266 GPIO.

BeginnerFull instructions provided45 minutes2,648

Surilli WiFi ESP8266 Controlled with Android App

Things used in this project

Hardware components

Surilli WiFi

Breadboard (generic)

Jumper wires (generic)

LED (generic)

Software apps and online services

Arduino IDE

Story

In this tutorial, we will build an Android app using MIT App Inventor that will allow you to control the Surilli WiFi ESP8266 GPIOs.

Hardware Required

1. Surilli WiFi ESP8266

2. LED

3. Breadboard

5. Connecting Wires

6. Arduino IDE

7. MIT App Inventor Software

8. Surilli WiFi ESP82666 Controller App

Connections Between Surilli WiFi ESP8266 and LED:

- PIN (LED) ---> GND PIN (SURILLI WIFI)

+ PIN (LED) ---> PIN 13 (SURILLI WIFI)

Set Up Arduino IDE for Surilli:

Make sure you have selected the right port, board and processor for the Surilli as shown in the picture below and it is programmable (compile and upload “Blink” from File>Examples>Digital>Blink onto your Surilli to check if everything is working fine).

The Circuitry:

The circuitry is very simple. It's mostly the programming. Follow the figure below to set up your hardware.

Upload and Burn Code Onto Surilli:

Now you have completed setting up your hardware and Arduino IDE. Copy and paste the Arduino sketch given below into your Arduino IDE. Replace the SSID and password with your own credentials and hit upload. The results can be viewed on the serial monitor.

Arduino Code:

#include <ESP8266WiFi.h>
const char* ssid = "your-ssid";
const char* password = "your-password";
// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);
void setup() {
 Serial.begin(115200);
 delay(500);
 // prepare GPIO13
 pinMode(13, OUTPUT);
 digitalWrite(13, 0);
 // Connect to WiFi network
 Serial.println();
 Serial.println();
 Serial.print("Connecting to ");
 Serial.println(ssid);
 WiFi.begin(ssid, password);
 while (WiFi.status() != WL_CONNECTED) {
   delay(500);
   Serial.print(".");
 }
 Serial.println("");
 Serial.println("WiFi connected");
 // Start the server
 server.begin();
 Serial.println("Server started");
 // Print the IP address
 Serial.println(WiFi.localIP());
}
void loop() {
 // Check if a client has connected
 WiFiClient client = server.available();
 if (!client) {
   return;
 }
 // Wait until the client sends some data
 Serial.println("new client");
 while(!client.available()){
   delay(1);
 }
 // Read the first line of the request
 String req = client.readStringUntil('\r');
 Serial.println(req);
 client.flush();
 // Match the request
 int val;
 if (req.indexOf("/gpio/0") != -1)
   val = 0;
 else if (req.indexOf("/gpio/1") != -1)
   val = 1;
 else {
   Serial.println("invalid request");
   client.stop();
   return;
 }
 // Set GPIO13 according to the request
 digitalWrite(13, val);
 client.flush();
 // Prepare the response
 String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";
 s += (val)?"high":"low";
 s += "</html>\n";
 // Send the response to the client
 client.print(s);
 delay(1);
 Serial.println("Client disonnected");
 // The client will actually be disconnected 
 // when the function returns and 'client' object is detroyed
}

Open the Arduino IDE serial monitor at a baud rate of 115200. After a few seconds your IP address should appear. In my case, the IP address was displayed as follows:

Now, simply copy the IP address from the serial monitor of Arduino IDE and paste it in a web browser. Write down the following command in your web browser which includes your IP address as displayed in the serial monitor. In my case, it was the following command that I wrote in my web browser.

http://192.168.1.72/gpio/1 ---> Turn the LED ON.

http://192.168.1.72/gpio/0 ---> Turn the LED OFF.

Creating the Android App with MIT App Inventor:

MIT App Inventor is a drag-and-drop software that allows you to create a basic, but fully functional Android app within an hour or less.

1. Go to MIT App Inventor.

2. Click the “Create Apps” button on the top right corner.

After importing the .aia file, you’ll be able to edit the app and see how the app was built.

The blocks section is where you can add what each button does and add logic to your app.

After finishing editing the app you can click the “Build” app tab and install the .apk file in your Android. I personally recommend that you first upload the app provided below to ensure that everything works as expected (later you can edit the app).

Installing the Android App:

1. Download the .apk file that you just created using the MIT App Inventor.

2. Unzip the folder.

3. Move the .apk file to your Android phone.

4. Run the .apk file to install the app.

The "Surilli WiFi ESP8266" Controller app is thus created and it appears as the following on your Android device or Smartphone.

It’s very easy to configure. Click the button “Set IP Address” on the bottom of the screen and type your IP address. In my case the IP address is: 192.168.1.72.

Now you can turn the GPIOs high and low with your smartphone.

Play with the program to see how it reacts to different values and logic.

If you make something fun and interesting, do share it with our community.

That’s all for now. If you have any queries, visit surilli.io or contact our support. Stay connected with the Surilli family for more amazing stuff. :-)

Code

MIT_App_Inventor_ESP8266

#include <ESP8266WiFi.h>

const char* ssid = "your-ssid";
const char* password = "your-password";

// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);

void setup() {
  Serial.begin(115200);
  delay(500);

  // prepare GPIO13
  pinMode(13, OUTPUT);
  digitalWrite(13, 0);
  
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  // Start the server
  server.begin();
  Serial.println("Server started");

  // Print the IP address
  Serial.println(WiFi.localIP());
}

void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
  
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }
  
  // Read the first line of the request
  String req = client.readStringUntil('\r');
  Serial.println(req);
  client.flush();
  
  // Match the request
  int val;
  if (req.indexOf("/gpio/0") != -1)
    val = 0;
  else if (req.indexOf("/gpio/1") != -1)
    val = 1;
  else {
    Serial.println("invalid request");
    client.stop();
    return;
  }

  // Set GPIO2 according to the request
  digitalWrite(13, val);
  
  client.flush();

  // Prepare the response
  String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";
  s += (val)?"high":"low";
  s += "</html>\n";

  // Send the response to the client
  client.print(s);
  delay(1);
  Serial.println("Client disonnected");

  // The client will actually be disconnected 
  // when the function returns and 'client' object is detroyed
}

Credits

Surilli

196 projects • 62 followers

Surilli is a premiere Internet of Things centric Technology Company aimed at providing cutting edge innovative solutions.