Sending data from iPhone (Safari) to M5Stack via WiFi and blinking LED

2018/10/08
15:49

Sending data from iPhone (Safari) to M5Stack via WiFi and blinking LED

Hello everyone! I’m RoboTakao.

Last time M5Stack sent BLE to iOS application to drive the switch.

This time I will send data from Safari of iPhone to M5Stack with WiFi and light the LED.

Basically I used a sample sketch in the Arduino IDE that installed the M5Stack library.
In the sample sketch, only characters are displayed on the iPhone, but I have made it possible to light the LED by pressing the button.

Description of the sketch

File -> Sample example -> WiFi -> SimpleWiFiServer

Store the web page displayed on the iPhone side in a String called html
Display it with
client.print (html);
In addition, I added to M5Stack to indicate the status.

Sample sketch

Operation check

When you start up M5Stack, you can see the assigned IP address on the serial monitor or M5Stack screen.

If you enter the IP address in a web browser such as Safari on the iPhone side, the web page will be displayed.

If you press the button on the web page, the LED will light up.


/*
 WiFi Web Server LED Blink

 A simple web server that lets you blink an LED via the web.
 This sketch will print the IP address of your WiFi Shield (once connected)
 to the Serial monitor. From there, you can open that address in a web browser
 to turn on and off the LED on pin 5.

 If the IP address of your shield is yourAddress:
 http://yourAddress/H turns the LED on
 http://yourAddress/L turns it off

 This example is written for a network using WPA encryption. For
 WEP or WPA, change the Wifi.begin() call accordingly.

 Circuit:
 * WiFi shield attached
 * LED attached to pin 5

 created for arduino 25 Nov 2012
 by Tom Igoe

ported for sparkfun esp32 
31.01.2017 by Jan Hendrik Berlin
 
 */

#include 
#include 

const char* ssid     = "XXXXXXXXXXXXXX";
const char* password = "XXXXXXXXXXXXXXXX";

WiFiServer server(80);

String html = "";

void setup()
{
    M5.begin();
    Serial.begin(115200);
    pinMode(5, OUTPUT);      // set the LED pin mode

    delay(10);

    // We start by connecting to a WiFi network

    Serial.println();
    M5.Lcd.println();
    Serial.println();
    M5.Lcd.println();
    Serial.print("Connecting to ");
    M5.Lcd.print("Connecting to ");
    Serial.println(ssid);
    M5.Lcd.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
        M5.Lcd.print(".");
    }

    Serial.println("");
    M5.Lcd.println("");
    Serial.println("WiFi connected.");
    M5.Lcd.println("WiFi connected.");
    Serial.println("IP address: ");
    M5.Lcd.println("IP address: ");
    Serial.println(WiFi.localIP());
    M5.Lcd.println(WiFi.localIP());
    
    server.begin();

    html = "<!DOCTYPE html>\
      <html>\
      <head>\
      <meta charset=\"UTF-8\">\
      <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1\">\
      <style>\
        table td{\
        padding:15px;\
       }\
      </style>\
      </head>\
      <body>\
      <br>\
      <br>\
      <br>\
      <table>\
        <tr><td><input type=\"button\" value=\"ON\" style=\"font-size:32px;\" onclick=\"location.href='/H';\"></td><td><input type=\"button\" value=\"OFF\" style=\"font-size:32px;\" onclick=\"location.href='/L';\"></td></tr>\
      </table>\
      </body>\
      </html>";

}

int value = 0;

void loop(){
 WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             // if you get a client,
    Serial.println("New Client.");           // print a message out the serial port
    M5.Lcd.println("New Client.");
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print(html);
            //client.print("Click here to turn the LED on pin 5 on.
");
            //client.print("Click here to turn the LED on pin 5 off.
");
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(5, HIGH);               // GET /H turns the LED on
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(5, LOW);                // GET /L turns the LED off
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
    Serial.println("Client Disconnected.");  
  }
  M5.update();
}