<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[MicroPython On WebIDE: 1.Prepare and Hello World!]]></title><description><![CDATA[<p dir="auto"><strong>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.</strong></p>
<p dir="auto"><strong>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 <a href="https://yadi.sk/d/xeykI_xV3RMHvZ" target="_blank" rel="noopener noreferrer nofollow ugc">here</a> (Fig. 1) or from the official website <a href="https://espressif.com/en/support/download/other-tools" target="_blank" rel="noopener noreferrer nofollow ugc">here</a> (Fig. 1.1));</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57365/00BQ9qdhNTo.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 1. Download Flash Download Tools with Yandex.Disk</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/5735b/1dxrgmO752k.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 1.1. Figure 1. Download Flash Tools Download from the official site</p>
<p dir="auto"><strong>Step 2. Download the current firmware from GitHub <a href="https://github.com/m5stack/M5Cloud/tree/master/firmwares" target="_blank" rel="noopener noreferrer nofollow ugc">here</a> (Fig. 2);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/5736f/U3QF32g2HN8.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 2. Selection of current firmware</p>
<p dir="auto"><strong>Step 3. M5Stack connect to the computer using a USB C cable (Fig. 3, 3.1);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c840434/v840434621/4018f/2rwBdt53efE.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 3. Connecting the cable to M5Stack</p>
<p dir="auto"><img src="https://pp.userapi.com/c840434/v840434621/40185/oMH6Vj04NE8.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 3.1. Connect the cable to the computer</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57379/N5tJZOB_W1Y.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 4. Run Download Flash Tools as administrator</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57380/NdIqAasHLcg.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 4.1 the Choice of the utility</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57391/XkH-fcohCR0.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 5. The main window of the program Flash Tools Download</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57389/wfo693UoMFI.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 5.1. Selecting a firmware file</p>
<p dir="auto"><strong>Step 6. Click on the ERASE button (Fig. 6). After the operation completes successfully You will see the FINISH (Fig. 6.1);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573a1/oz0UVTOupFU.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 6. Starting clean the device memory</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57399/JWou3EAGleo.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 6.1. The device memory is cleared</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573b1/Z8pJZrg2FWw.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 7. The process of device firmware</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573a9/zZL3DOnLZ9Y.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 7.1. Successful completion of the firmware</p>
<p dir="auto"><strong>Step 8. Disconnect the USB cable from the device (Fig. 8);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/5745c/VZ7VtPn8DoY.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 8. Disabling USB-C cable</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573cc/_MC271MmScg.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 9. The power button</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573ba/t_CP2GrTBAY.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 9.1. Information for network connections on the screen</p>
<p dir="auto"><strong>Step 10. Connect to the device via Wi-Fi from the computer (Fig. 10);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573d4/xWM9KtM6u1k.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 10. Access point M5Stack</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573dd/-F5dSg1Q8Qk.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 11. M5Stack connection to the existing Wi-Fi network</p>
<p dir="auto"><strong>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 <a href="http://io.m5stack.com" target="_blank" rel="noopener noreferrer nofollow ugc">http://io.m5stack.com</a> (Fig. 12);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573e7/9c8gb0KsUoE.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 12. The verification code and the address of the cloud on the device screen</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57404/fEmixLqkV8Q.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 13. If You are not registered on the cloud</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573f0/E49xk5e8ZzA.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 13.1. Fields required for registration</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/573fa/z7LD6LvaqG8.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 13.2. Entrance for registered users</p>
<p dir="auto"><strong>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);</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841322/v841322912/5b74e/-1lgwNId2CY.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 14. Click on the Add button to add a device</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/5740e/1TUZKjf2uK0.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 14.1. Enter the verification code</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57418/QGR8vMetYm0.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 14.2. M5Stack menu device management</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57422/znCfVgLKn1I.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 14.3. The information about the successful bind to the cloud</p>
<p dir="auto"><strong>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).</strong></p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57452/QNQZQWy6nT8.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 15. Click on "console" in order to run the development environment</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/5742b/QWEGPFazjGw.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 15.1. Write code</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57435/V34dP7xDv_8.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 15.2. The downloadable code into the device</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/5743f/-AD5xKVoWmU.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 15.3. Notification of successful download</p>
<p dir="auto"><img src="https://pp.userapi.com/c841522/v841522621/57449/Jo59aIdYGgE.jpg" alt="alt text" class=" img-fluid img-markdown" /><br />
Figure 15.4. "Hello world!" on the device screen</p>
]]></description><link>https://community.m5stack.com/topic/67/micropython-on-webide-1-prepare-and-hello-world</link><generator>RSS for Node</generator><lastBuildDate>Wed, 29 Apr 2026 06:01:34 GMT</lastBuildDate><atom:link href="https://community.m5stack.com/topic/67.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 11 Jan 2018 09:06:23 GMT</pubDate><ttl>60</ttl></channel></rss>