Lesson 3.1. Wi-Fi. Access point



  • 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



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





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



  • 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!



  • @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



  • 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;
      }
    }
    

    }
    }