Lesson 3.1. Wi-Fi. Access point

Dimi

This lesson focuses on the built-in Wi-Fi. We will learn how to create an access point and WEB server on M5Stack.

Step 1. Check out some of the functions to work with Wi-Fi ESP32 in list1;

List 1. Functions for working with built-in buttons

WiFiServer server(80); Creates an instance of the class WiFiServer on 80 port
IPAddress ip(192, 168, 0, 1); Creates an instance of the IPAddress class with the address of 192.168.0.1
Wi-Fi.access.mode(WIFI_AP); Sets the operation mode of the wireless adapter as an access point
Wi-Fi.access.softAP(ssid, password); Sets the access point SSID and password
Wi-Fi.access.softAPConfig(ip, gateway, subnet); Sets the IP address of the access point, gateway, and subnet mask
Wi-Fi.access.begin(); Includes wireless module to work
server.available(); Returns WiFiClient
client.connected() Returns true if the client is connected
client.available() Returns true if the client waits for a response
client.flush(); Clears the input/output buffer
client.print(mystring); Puts the string mystring to the output buffer
client.println();
client.println(); Sends data from the output buffer to the client

Step 2. Create a new sketch in the Arduino IDE. On the File menu, select New (Fig. 1);

alt text
Figure 1. Create a new sketch

Step 3. Please note that for the built in wireless Wi-Fi module you have to to connect the library "Wi-Fi.h". We will write our code (Fig. 2 - 2.6);

alt text
Figure 2. Sketch. Page 1

alt text
Figure 2.1. Sketch. Page 2

alt text
Figure 2.2. Sketch. Page 3

alt text
Figure 2.3. Sketch. Page 4

alt text
Figure 2.4. Sketch. Page 5

alt text
Figure 2.5. Sketch. Page 6

alt text
Figure 2.6. Sketch. Page 7

Step 4. Click the Upload button (Fig. 3) in order to flash the device;

alt text
Figure 3. Download the firmware to the device

Step 5.. When the device firmware is completed, the device screen will appear the name of our lesson, the name of our Wi-Fi network, password and the URL (Fig. 4);

alt text
Figure 4. Main menu

Step 6. Connect to our wireless network (Fig. 5);

alt text
Figure 5. Available wireless networks

Step 7. Visit the URL in any modern browser (Fig. 6);

alt text
Figure 6. The web page is received from M5Stack

Step 8. Note the display device displays an image of the lamp filament (Fig. 7);

alt text
Figure 7. The device is ready to receive data

Step 9. Please note, there are two sections: Remote control to control M5Stack from the browser and Remote monitor to transmit data from M5Stack browser.
Try to press the button Turn ON, then pay attention to the display device (Fig. 8), the light bulb should light up, and the button of the browser needs to be changed to Turn OFF (Fig. 8.1);

alt text
Figure 8. The device received a command from the browser

alt text
Figure 8.1. The browser changed the button to Turn OFF

Step 10. Now try to get data from M5Stack. To do this, click on any of the three buttons on the front panel of the device and wait until the corresponding indicator appears (Fig. 9). After that in the browser you will see the received data (Fig. 9.1);

alt text
Figure 9. The indicators on the corresponding buttons

alt text
Figure 9.1. The data received from the device

Download sketch here

JJ

Hi Dimi,
Could you make this sketch available for download ?
Thanks.

Dimi

@jimit https://yadi.sk/d/fzvtq1wX3RP53d

JJ

Thanks Dimi..... got it working fine.

NinjaAmbush

I tried to build this project in PlatformIO for quite some time. It compiled fine, flashed fine to the m5stack, and I could successfully connect to the AP, but the webpage simply wouldn't load no matter what I did. After some troubleshooting I determined that the client.flush() around line 120 was causing the issue:

  if (readyResponse) // отдать браузеру
  {
    String GET = parseGET(currentString);
    //client.flush();

After commenting this out the project works fine. I'm using the latest Chrome for Android for testing this, but also used Chrome on a Windows 10 PC and had the same result. The webserver simply gave an empty response.

Hope this helps someone else work through this example!

Lucid

@dimi
I have tested your code several time.
I'm afraid, I found problem.
Soft AP function was operated first time, But When I reset module, It's not possible to access any more. It's always reset when i access M5stack soft AP mode.
I found "Guru Meditation Error" through debugging port.
Please let me know how to fix.
I'm now using WINDOW 10
//====================================================
M5Stack initializing...OK
Guru Meditation Error: Core 0 panic'ed (InstrFetchProhibited). Exception was unhandled.
Core 0 register dump:
PC : 0x00000000 PS : 0x00060e30 A0 : 0x800f5e71 A1 : 0x3ffb3d70
A2 : 0x3ffc8a34 A3 : 0x3ffc8c88 A4 : 0x3ffafe8c A5 : 0x3ffc8c68
A6 : 0x0204a8c0 A7 : 0x6504a8c0 A8 : 0x800f5d14 A9 : 0x3ffb3d30
A10 : 0x3ffc8a44 A11 : 0x3ffc8c88 A12 : 0x3ffb3d7c A13 : 0x00000044
A14 : 0x00000001 A15 : 0x00000006 SAR : 0x00000010 EXCCAUSE: 0x00000014
EXCVADDR: 0x00000000 LBEG : 0x4000c349 LEND : 0x4000c36b LCOUNT : 0x00000000

Backtrace: 0x00000000:0x3ffb3d70 0x400f5e6e:0x3ffb3db0 0x40101d21:0x3ffb3dd0 0x401056ad:0x3ffb3e10 0x4010a8e2:0x3ffb3e30 0x400f9257:0x3ffb3e50 0x4008f1f5:0x3ffb3e80

Rebooting...
ets Jun 8 2016 00:22:57

cppxaxa

Modified for M5StickC

#include <M5StickC.h>
#include "WiFi.h"

char ssid[] = "M5StickC";
char password[] = "12345678";

WiFiServer server(80);
IPAddress ip(192, 168, 0, 1);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);

extern unsigned char lightOn[];
extern unsigned char lightOff[];

String M5STACK_DATA;
uint8_t led_count = 8;

void setup() {
m5.begin();
WiFi.mode(WIFI_AP);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(ip, gateway, subnet);
WiFi.begin();
server.begin();
//M5.Lcd.setBrightness(100);
//M5.Lcd.setTextSize(3);
//M5.Lcd.setCursor(50, 20);
M5.Lcd.print("Wi-Fi Server");
//M5.Lcd.setTextSize(2);
//M5.Lcd.setCursor(50, 60);
M5.Lcd.print("SSID: ");
M5.Lcd.print(ssid);
//M5.Lcd.setCursor(50, 80);
//M5.Lcd.print("PSWD: ");
//M5.Lcd.print(password);
//M5.Lcd.setCursor(50, 100);
M5.Lcd.print("URL: ");
M5.Lcd.print(ip);

pinMode(M5_LED, OUTPUT);
digitalWrite(M5_LED, HIGH);

pinMode(M5_BUTTON_HOME, INPUT);

M5.Axp.ScreenBreath(led_count);
}

String parseGET(String str) {
String tmp = "";
for (int i = 0, j = 0; i < str.length(); i++)
{
if (str[i] == ' ') j++;
if (j == 1)
{
if (str[i] != ' ') tmp += str[i];
}
if (j == 2) break;
}
return tmp;
}

bool button(int contactNumber) {
if (digitalRead(contactNumber) == LOW)
{
delay(10);
if (digitalRead(contactNumber) == LOW) return true;
}
return false;
}

void loop() {
if(digitalRead(M5_BUTTON_HOME) == LOW){
led_count++;
if(led_count > 12)
led_count = 7;
while(digitalRead(M5_BUTTON_HOME) == LOW);
M5.Axp.ScreenBreath(led_count);
}

String currentString = "";
bool readyResponse = false;
WiFiClient client = server.available();
while (client.connected())
{
if (client.available())
{
/*if (button(button_A))
{
M5.Lcd.fillRect(45, 230, 230, 5, BLACK);
M5.Lcd.fillRect(45, 230, 50, 5, 0xf980);
M5.Lcd.drawLine(135, 235, 184, 235, 0x4c0);
M5.Lcd.drawLine(225, 235, 274, 235, 0x013);
M5STACK_DATA = "hello from red button A!";
}

  if (button(button_B))
  {
    M5.Lcd.fillRect(45, 230, 230, 5, BLACK);
    M5.Lcd.drawLine(45, 235, 94, 235, 0xf980);
    M5.Lcd.fillRect(135, 230, 50, 5, 0x37e0);
    M5.Lcd.drawLine(225, 235, 274, 235, 0x013);
    M5STACK_DATA = "hello from green button B!";
  }
  
  if (button(button_C))
  {
    M5.Lcd.fillRect(45, 230, 230, 5, BLACK);
    M5.Lcd.drawLine(45, 235, 94, 235, 0xf980);
    M5.Lcd.drawLine(135, 235, 184, 235, 0x4c0);
    M5.Lcd.fillRect(225, 230, 50, 5, 0x19f);
    M5STACK_DATA = "hello from blue button C!";
  }*/
  
  char c = client.read();
  if (c != '\r')
  {
    if (c != '\n')
    {
      currentString += c;
    }
  }
  else
  {
    //M5.Lcd.print(currentString);
    //M5.Lcd.print("\n");
    readyResponse = true; // готов отдать браузеру
  }

  if (readyResponse) // отдать браузеру
  {
    String GET = parseGET(currentString);

    //client.flush();
    client.println("HTTP/1.1 200 OK");
    client.println("Content-type:text/html");
    client.println();

    if (GET == "/update")
    {
      client.print("<html>");
      client.print("<head>");
      client.print("<meta http-equiv=\"Refresh\" content=\"1\"/>");
      client.print("<script type=\"text/javascript\">");
      client.print("var M5STACK_DATA = \"");
      client.print(M5STACK_DATA);
      client.print("\";");
      client.print("</script>");
      client.print("</head>");
      client.print("</html>");
    }
    else
    {
      client.print("<html>");
      client.print("<head>");
      client.print("<meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\" />");
      client.print("<script type=\"text/javascript\">");
      client.print("setInterval(function(){document.getElementById(\"M5STACK_DATA\").innerHTML = window.frames[0].M5STACK_DATA;}, 1000);");
      client.print("</script>");
      client.print("</head>");
      client.print("<body>");
      //client.print("<h1>M5StickC</h1>");
      //client.print("<h2>Wi-Fi Server</h2>");
      //client.print("<hr>");
      client.print("<h3>Remote control:</h3>");
      //client.print("<span>Note: please click on the button and look at the screen of the device</span>");
      //client.print("<br><br>");

      if ((GET == "/off?") || (GET == "/"))
      {
        digitalWrite(M5_LED, HIGH);
        //M5.Lcd.drawBitmap(126, 120, 100, 100, (uint16_t *)lightOff);
        client.print("<form action=\"/on\">");
        client.print("<button style=\"width: 200px; height: 200px;\" type=\"submit\">Turn ON</button>");
      }
      else if (GET == "/on?")
      {
        digitalWrite(M5_LED, LOW);
        //M5.Lcd.drawBitmap(126, 120, 100, 100, (uint16_t *)lightOn);
        client.print("<form action=\"/off\">");
        client.print("<button style=\"width: 200px; height: 200px;\" type=\"submit\">Turn OFF</button>");
      }
      
      client.print("</form>");
      client.print("<hr>");
      client.print("<h3>Remote monitor:</h3>");
      //client.print("<span>Note: please press and hold any three buttons on the device</span>");
      //client.print("<br>");
      client.print("<span id=\"M5STACK_DATA\"></span>");
      client.print("<iframe src=\"/update\" hidden=\"true\"></iframe>");
      client.print("</body>");
      client.print("</html>");
    }

    client.println();
    client.println();
    readyResponse = false;
    currentString = "";
    break;
  }
}

}
}