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!


登录后回复
 

与 M5Stack Community 的连接断开,我们正在尝试重连,请耐心等待