Part 3 of : Control the outputs of ESP-12F IOT module from an Android APP

Upload the following program to ESP-12F IOT module. Before starting this, read my previous blog on the basics of programming ESP-12F IOT module.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>

#ifndef APSSID
#define APSSID "PaulESP"
#define APPSK  "paulsin91@"
#endif

// Variable to store the HTTP request
String header;

/* Set these to your desired credentials. */
const char *ssid = APSSID;
const char *password = APPSK;

int ledPin = 13; // GPIO13
WiFiServer server(80);

const char* value = "";

// Auxiliar variables to store the current output state
String output4State = "off";
String output12State = "off";
String output13State = "off";
String output14State = "off";
String output16State = "off";

// Assign output variables to GPIO pins
const int output4 = 4;
const int output12 = 12;
const int output13 = 13;
const int output14 = 14;
const int output16 = 16;

void setup() {

   Serial.begin(115200);
   delay(10);
   pinMode(ledPin, OUTPUT);
   digitalWrite(ledPin, HIGH); // turn on

  // Initialize the output variables as outputs
  pinMode(output16, OUTPUT);
  pinMode(output14, OUTPUT);
  pinMode(output13, OUTPUT);
  pinMode(output12, OUTPUT);
  pinMode(output4, OUTPUT);
  
  // Set outputs to LOW

  digitalWrite(output16, LOW);
  digitalWrite(output14, LOW);
  digitalWrite(output13, LOW);
  digitalWrite(output12, LOW);
  digitalWrite(output4, LOW);

   WiFi.mode(WIFI_AP);
   WiFi.softAP(ssid, password);
   IPAddress myIP = WiFi.softAPIP();
  
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  WiFiClient client = server.available();

  if(client) {
    Serial.println("New Client");
    String currentLine = "";
    while(client.connected()) {
      if(client.available()) {
        char c = client.read();
        Serial.write(c);
        header += c;
        if(c == '\n') {
          if(currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println(); 


            // turns the GPIOs on and off
            if (header.indexOf("GET /12/on") >= 0) {
              Serial.println("GPIO 5 on");
              output12State = "on";
              digitalWrite(output12, HIGH);
            } else if (header.indexOf("GET /12/off") >= 0) {
              Serial.println("GPIO 5 off");
              output12State = "off";
              digitalWrite(output12, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            } else if (header.indexOf("GET /13/on") >= 0) {
              Serial.println("GPIO 13 on");
              output13State = "on";
              digitalWrite(output13, HIGH);
            } else if (header.indexOf("GET /13/off") >= 0) {
              Serial.println("GPIO 13 off");
              output13State = "off";
              digitalWrite(output13, LOW);
            } else if (header.indexOf("GET /14/on") >= 0) {
              Serial.println("GPIO 14 on");
              output14State = "on";
              digitalWrite(output14, HIGH);
            } else if (header.indexOf("GET /14/off") >= 0) {
              Serial.println("GPIO 14 off");
              output14State = "off";
              digitalWrite(output14, LOW);
            } else if (header.indexOf("GET /16/on") >= 0) {
              Serial.println("GPIO 16 on");
              output16State = "on";
              digitalWrite(output16, HIGH);
            } else if (header.indexOf("GET /16/off") >= 0) {
              Serial.println("GPIO 16 off");
              output16State = "off";
              digitalWrite(output16, LOW);
            }
         
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 10px 30px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");

            // Display current state, and ON/OFF buttons for GPIO 16  
            client.println("<p>GPIO 16 - State " + output16State + "</p>");
            // If the output16State is off, it displays the ON button       
            if (output16State=="off") {
              client.println("<p><a href=\"/16/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/16/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 

            // Display current state, and ON/OFF buttons for GPIO 14  
            client.println("<p>GPIO 14 - State " + output14State + "</p>");
            // If the output14State is off, it displays the ON button       
            if (output14State=="off") {
              client.println("<p><a href=\"/14/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/14/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 

            // Display current state, and ON/OFF buttons for GPIO 13  
            client.println("<p>GPIO 13 - State " + output13State + "</p>");
            // If the output13State is off, it displays the ON button       
            if (output13State=="off") {
              client.println("<p><a href=\"/13/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/13/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
            
            // Display current state, and ON/OFF buttons for GPIO 12  
            client.println("<p>GPIO 12 - State " + output12State + "</p>");
            // If the output12State is off, it displays the ON button       
            if (output12State=="off") {
              client.println("<p><a href=\"/12/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/12/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button       
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
            }

            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            break;
          } else {
            currentLine = "";
          }
        } else if (c!='\r') {
            currentLine += c;
        }
      }
    }

    header = "";
    client.stop();
    Serial.println("Client Disconnected");
    Serial.println("");
  }
}

Download and install the following application in your android device.

https://play.google.com/store/apps/details?id=com.haberocean.ESP12F

Enable location permission for this app.

Connect your android device to ESP-12F IOT module through WiFi.

Now, open the app to control the LEDs from application.

Watch the video demonstration here.

Android application codes.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.haberocean.ESP12F">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:textOff="OFF"
        android:textOn="ON" />

    <ToggleButton
        android:id="@+id/toggleButton2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_below="@+id/toggleButton"
        android:textOff="OFF"
        android:textOn="ON"/>

    <ToggleButton
        android:id="@+id/toggleButton3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_below="@+id/toggleButton2"
        android:textOff="OFF"
        android:textOn="ON"/>

    <ToggleButton
        android:id="@+id/toggleButton4"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_below="@+id/toggleButton3"
        android:textOff="OFF"
        android:textOn="ON"/>

    <ToggleButton
        android:id="@+id/toggleButton5"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_below="@+id/toggleButton4"
        android:textOff="OFF"
        android:textOn="ON"/>

</RelativeLayout>

MainActivity.java

package com.haberocean.ESP12F;

import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

public class MainActivity extends AppCompatActivity {

    String serverResponse;
    MyClientTask onLedTask;
    Button firstLED, secondLED;
    ToggleButton toggleButton, toggleButton2, toggleButton3, toggleButton4, toggleButton5;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
        toggleButton2 = (ToggleButton) findViewById(R.id.toggleButton2);
        toggleButton3 = (ToggleButton) findViewById(R.id.toggleButton3);
        toggleButton4 = (ToggleButton) findViewById(R.id.toggleButton4);
        toggleButton5 = (ToggleButton) findViewById(R.id.toggleButton5);

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    onLedTask = new MyClientTask("4/on");
                    onLedTask.execute();
                } else {
                    onLedTask = new MyClientTask("4/off");
                    onLedTask.execute();
                }
            }
        });

        toggleButton2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    onLedTask = new MyClientTask("12/on");
                    onLedTask.execute();
                } else {
                    onLedTask = new MyClientTask("12/off");
                    onLedTask.execute();
                }
            }
        });

        toggleButton3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    onLedTask = new MyClientTask("13/on");
                    onLedTask.execute();
                } else {
                    onLedTask = new MyClientTask("13/off");
                    onLedTask.execute();
                }
            }
        });

        toggleButton4.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    onLedTask = new MyClientTask("14/on");
                    onLedTask.execute();
                } else {
                    onLedTask = new MyClientTask("14/off");
                    onLedTask.execute();
                }
            }
        });


        toggleButton5.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    onLedTask = new MyClientTask("16/on");
                    onLedTask.execute();
                } else {
                    onLedTask = new MyClientTask("16/off");
                    onLedTask.execute();
                }
            }
        });
    }

    public class MyClientTask extends AsyncTask<String, Void, String> {

        String addressValue;

        public MyClientTask(String address) {
            this.addressValue = address;
        }

        @Override
        protected String doInBackground(String... params) {

            final StringBuffer chain = new StringBuffer("");
            String serverResponse = "";
            final String p = "http://192.168.4.1/" + addressValue;
            String line = "";

            try {
                URL url = new URL(p);
                HttpURLConnection connection = (HttpURLConnection) url.openConnection();
                connection.setRequestMethod("GET");
                connection.connect();
                InputStream inputStream = connection.getInputStream();
                BufferedReader rd = new BufferedReader(new InputStreamReader(inputStream));

                while ((line = rd.readLine()) != null) {
                    chain.append(line);
                }
            } catch (IOException e) {
                e.printStackTrace();
                serverResponse = e.getMessage();
            }

            return serverResponse;
        }

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }
    }
}

Published by

Leave a Reply

X