MicroPython On WebIDE: 1.Prepare and Hello World!



  • This lesson focuses on cloud service M5Stack Cloud, and programming language MicroPython. Thanks to the cloud you no longer need to use the Arduino IDE and USB cable.

    Step 1. In order to M5Stack supported the Cloud, you must download the latest firmware using the official tool Flash Download Tools for ESP32 (you can download it from our storage here (Fig. 1) or from the official website here (Fig. 1.1));

    alt text
    Figure 1. Download Flash Download Tools with Yandex.Disk

    alt text
    Figure 1.1. Figure 1. Download Flash Tools Download from the official site

    Step 2. Download the current firmware from GitHub here (Fig. 2);

    alt text
    Figure 2. Selection of current firmware

    Step 3. M5Stack connect to the computer using a USB C cable (Fig. 3, 3.1);

    alt text
    Figure 3. Connecting the cable to M5Stack

    alt text
    Figure 3.1. Connect the cable to the computer

    Step 4. Unzip the archive to a folder and run the executable file ESPFlashDownloadTool_vX.X.X.exe as administrator (Fig. 4). Select the utility ESP32 DownloadTool (Fig. 4.1);

    alt text
    Figure 4. Run Download Flash Tools as administrator

    alt text
    Figure 4.1 the Choice of the utility

    Step 5. Record in a specified field the number 0x1000; select the COM port that is connected to M5Stack; select the firmware file that you downloaded in step 2 (Fig. 5, 5.1);

    alt text
    Figure 5. The main window of the program Flash Tools Download

    alt text
    Figure 5.1. Selecting a firmware file

    Step 6. Click on the ERASE button (Fig. 6). After the operation completes successfully You will see the FINISH (Fig. 6.1);

    alt text
    Figure 6. Starting clean the device memory

    alt text
    Figure 6.1. The device memory is cleared

    Step 7. Click on the START button will begin the process of downloading the firmware to the device (Attention! Do not disconnect any cables, do not close the window) (Fig. 7). Upon successful completion of the firmware will be visible inscription FINISH (Fig. 7.1);

    alt text
    Figure 7. The process of device firmware

    alt text
    Figure 7.1. Successful completion of the firmware

    Step 8. Disconnect the USB cable from the device (Fig. 8);

    alt text
    Figure 8. Disabling USB-C cable

    Step 9. Hit the power button twice with an interval of 3 seconds (Fig. 9), after which the display will show the SSID of the Wi-Fi network, and the URL (Fig. 9.1);

    alt text
    Figure 9. The power button

    alt text
    Figure 9.1. Information for network connections on the screen

    Step 10. Connect to the device via Wi-Fi from the computer (Fig. 10);

    alt text
    Figure 10. Access point M5Stack

    Step 11. Then visit the URL that is obtained on the display from step 9, using a modern browser. Fill in the fields SSID and password of your existing Wi-Fi network with access to the Internet, and press Configure (Fig. 11);

    alt text
    Figure 11. M5Stack connection to the existing Wi-Fi network

    Step 12. After the browser reports that the page is not available - in this case it is well. Note the display of the device, it shows the verification code and the address of the cloud http://io.m5stack.com (Fig. 12);

    alt text
    Figure 12. The verification code and the address of the cloud on the device screen

    Step 13. Visit the cloud using a modern browser, if You do not have account, then register by clicking on the "Register" button (Fig. 13, 13.1). If You have an account, enter your email address and password, then click Login (Fig. 13.2);

    alt text
    Figure 13. If You are not registered on the cloud

    alt text
    Figure 13.1. Fields required for registration

    alt text
    Figure 13.2. Entrance for registered users

    Step 14. Add Your device to the cloud, it is necessary to click on the Add button (Fig. 14) then enter the verification code shown on the display device in the input field and click OK (Fig. 14.1). When the device is added You will see it in the menu control of the device (Fig. 14.2) and the display will show the corresponding row (Fig. 14.3);

    alt text
    Figure 14. Click on the Add button to add a device

    alt text
    Figure 14.1. Enter the verification code

    alt text
    Figure 14.2. M5Stack menu device management

    alt text
    Figure 14.3. The information about the successful bind to the cloud

    Step 15. To write and download code to the device using a cloud click on the "console" (Fig. 15); will Write code (Fig. 15.1) and upload it to the device (Fig. 15.2). Once the code is loaded (Fig. 15.3), the device will reboot and the display will show the text (15.4).

    alt text
    Figure 15. Click on "console" in order to run the development environment

    alt text
    Figure 15.1. Write code

    alt text
    Figure 15.2. The downloadable code into the device

    alt text
    Figure 15.3. Notification of successful download

    alt text
    Figure 15.4. "Hello world!" on the device screen