correct quick start
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 224 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 710 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 21 KiB |
@@ -4,9 +4,8 @@
|
||||
|
||||
***
|
||||
|
||||
:memo:**[Description](#Description)** :electric_plug:**[Schematic](#Schematic)** 🛒**[Purchase](https://www.aliexpress.com/store/product/M5Stack-New-Arrival-GOPLUS-Module-with-MEGA328P-IR-Transmitter-and-Receiver-suit-for-ESP32-Kit/3226069_33010785963.html?spm=2114.12010615.8148356.1.a8747842tJJMRu)** :octocat:**[Code](#Code)**
|
||||
:memo:**[Description](#Description)** :electric_plug:**[Schematic](#Schematic)** 🛒**[Purchase](https://www.aliexpress.com/store/product/M5Stack-New-Arrival-GOPLUS-Module-with-MEGA328P-IR-Transmitter-and-Receiver-suit-for-ESP32-Kit/3226069_33010785963.html?spm=2114.12010615.8148356.1.a8747842Ll7Apb)** :octocat:**[Code](#Code)**
|
||||
|
||||
<!-- :memo:**[Description](#Description)** :octocat:**[Example](#Example)** :electric_plug:**[Schematic](#Schematic)** 🛒**[Purchase](https://www.aliexpress.com/store/product/M5Stack-New-Arrival-PLUS-Module-Encoder-Module-with-MEGA328P-500mAh-Battery-ISP-IR-Transmitter-UART-GPIO/3226069_32949278724.html?spm=a2g1x.12024536.productList_5885013.pic_1)**-->
|
||||
|
||||
## Description
|
||||
|
||||
|
||||
@@ -18,29 +18,29 @@
|
||||
|
||||
<!-- *注意:如果已经安装了 IDE,请直接从[步骤 2](#_2-安装串口驱动) 开始。* -->
|
||||
|
||||
Open your browser, enter the official website of Arduino https://www.arduino.cc/en/Main/Software
|
||||
Open up your browser, and visit Arduino official website https://www.arduino.cc/en/Main/Software
|
||||
|
||||
#### (1) click `Mac OS X` for downloading `Arduino IDE`
|
||||
#### (1) click `Mac OS X` to download `Arduino IDE`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide.png">
|
||||
|
||||
#### (2) click `JUST DOWNLOAD`
|
||||
#### (2) click `JUST DOWNLOAD`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide_02.png">
|
||||
|
||||
#### (3) Once the Arduino IDE is downloaded, you can double-click it to open it
|
||||
#### (3) Once the Arduino IDE is downloaded, double-click to open it
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide_03.png">
|
||||
|
||||
## 2. Install USB to Serial Driver
|
||||
|
||||
Open your browser, enter the official website of M5Stack https://m5stack.com/download
|
||||
Open up your browser, visite the official website of M5Stack https://m5stack.com/download
|
||||
|
||||
#### (1) click `Mac` for downloading this installation package and then unzip this package
|
||||
#### (1) Navigate to `Explore` `Download`,click `CP210X Driver` `Mac` to download the installation package and then unzip it.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/download_usb_driver_mac_01.png">
|
||||
|
||||
#### (2) After unzipped this package, double click the disk image `SiLabsUSBDriverDisk.dmg` for installing
|
||||
#### (2) After unzipped this package, double click the disk image `SiLabsUSBDriverDisk.dmg` for installation
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_dmg.png">
|
||||
|
||||
@@ -64,39 +64,40 @@ Open your browser, enter the official website of M5Stack https://m5stack.com/do
|
||||
|
||||
#### (3) Check the serial port number `/dev/tty.SLAB_USBtoUART`
|
||||
|
||||
Comfirm if the USB to Serial Driver was successfully installed already:
|
||||
To make sure if the Driver has installed on your MAC:
|
||||
|
||||
Open `Terminal`, connect `M5Core` with PC through USB Type-C cable, and execute the following command for viewing serial port list.
|
||||
Open `Terminal`, connect `M5Core` with your MAC through USB Type-C cable, and type in the following command to view the available serial ports list.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_01.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_02.png">
|
||||
|
||||
Disconnect M5Core device, and execute the just executed command to verify which port disappears from the list. The disappearing COM port is the serial port name corresponding to M5Core.
|
||||
Disconnect M5Core device, and type in the same command on `Terminal` to see which port disappeared from the list.
|
||||
That how we identify the name of the serial device.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_03.png">
|
||||
|
||||
Now, the serial port name is `tty.SLAB_USBtoUART`
|
||||
The serial device name is `tty.SLAB_USBtoUART`
|
||||
|
||||
## 3. Install ESP32 Boards Manager
|
||||
|
||||
#### (1) Open IDE, click `File`->`Peferences`->`Settings`
|
||||
#### (1) Open up Arduino IDE, navigate to `File`->`Peferences`->`Settings`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_01.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_02.png">
|
||||
|
||||
#### (2) Copy the following ESP32 Boards Manager url to `Additional Boards Manager URLs:`
|
||||
#### (2) Copy the following ESP32 Boards Manager url to `Additional Boards Manager URLs:` , hit `OK`.
|
||||
|
||||
*ESP32 Boards Manager url: https://dl.espressif.com/dl/package_esp32_index.json*
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_03.png">
|
||||
|
||||
#### (3) Click `Tools`->`Board:`->`Boards Manager...`
|
||||
#### (3) Navigate to `Tools`->`Board:`->`Boards Manager...`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_04.png">
|
||||
|
||||
#### (4) Search `ESP32` in the new pop-up dialog, then click `Install`
|
||||
#### (4) Search `ESP32` in the pop-up window, find it and click `Install`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_05.png">
|
||||
|
||||
@@ -106,37 +107,38 @@ Now, the serial port name is `tty.SLAB_USBtoUART`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_01.png">
|
||||
|
||||
#### (2) 搜索 `M5Stack` 并安装,如下图所示
|
||||
#### (2) Search `M5Stack` , find it and click `Install`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_02.png">
|
||||
|
||||
## 5. Example
|
||||
|
||||
This section for verifying whether you can program with Arduino or not. Now, The USB cable connects to M5Core, then select your serial port which is connected M5Core.
|
||||
Now that everything is ready to go, you can select a demo example from the `Example` list, before that let's do some configuration on the IDE.
|
||||
|
||||
Select a demo example, compile and upload
|
||||
Make sure you have M5Core connected to your computer via USB
|
||||
|
||||
#### (1) Select the correct board name and serial port name
|
||||
#### (1) Select the correct board name and serial device name
|
||||
|
||||
Open Arduino IDE, select `Tools`->`Board`->`M5Stack-Core-ESP32` for your M5Core, `Tools` -> `Ports` for serial port
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
|
||||
|
||||
#### (2) Then select an example likes `HelloWorld.ino`
|
||||
#### (2) Then select an example
|
||||
|
||||
Select `File`->`Examples`->`M5Stack`->`Basics`
|
||||
`File`->`Examples`->`M5Stack`->`Basics`
|
||||
|
||||
Select a example named `HelloWorld`.
|
||||
Choose the example named `HelloWorld`.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_09.png">
|
||||
|
||||
Upload it, and after this program was uploaded successfully, the screen on M5Core will display "Hello World!"
|
||||
#### (3) Upload it
|
||||
Click `Upload`, to flash the code to the device. Once it's done, reset the M5Core, the screen on M5Core will display "Hello World!"
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/display_hello_world.png">
|
||||
|
||||
## Note
|
||||
|
||||
Although most versions of MacOS have no problem with detecting the COM port, on some newer versions of High Sierra sometimes `Slab_USBtoUART` does not appear. If this is the case, after you connect the M5 open `security and privacy` in the `system preferences` and set it to `permit`.
|
||||
Most version of MacOS have no problem detecting the serial device that connected to the computer, but might have truble on High Sierra. Sometimes `SLAB_USBtoUART` fail to appear. In this case, after connected the M5,open `security and privacy` in the `system preferences` and set it to `permit`.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy.png">
|
||||
|
||||
@@ -144,11 +146,12 @@ Although most versions of MacOS have no problem with detecting the COM port, on
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy_02.png">
|
||||
|
||||
?> **If you want to read more the permission about the CP2104 USB driver, visit the following link please.** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html
|
||||
?> **If you want to know more about the CP2104 USB driver permission, visit this link.** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html
|
||||
|
||||
## 6. Related Video
|
||||
|
||||
- Video tutorial for developing M5Core in Arduino
|
||||
- Arduino video tutorial for M5.
|
||||
Although This video is a little out of date, some webpage is not available, it still a good tutorial for beginners,and it shows the manual way of adding m5stack library and almost covered every step we have mentioned in the former steps.
|
||||
|
||||
<video width="500" controls>
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/M5Stack%20Arduino%20IDE%20Setup%20in%205%20minutes.mp4" type="video/mp4">
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
|
||||
<!-- *注意:如果已经安装了 IDE,请直接从[步骤 2](#_2-安装串口驱动) 开始。* -->
|
||||
|
||||
Open your browser, enter the official website of Arduino https://www.arduino.cc/en/Main/Software
|
||||
Open up your browser, and visit Arduino official website https://www.arduino.cc/en/Main/Software
|
||||
|
||||
#### (1) click `Windows ZIP file for non admin install` for downloading `Arduino IDE`
|
||||
#### (1) click `Windows ZIP file for non admin install` to download `Arduino IDE`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/arduino_cc_package.png">
|
||||
|
||||
@@ -26,7 +26,7 @@ Open your browser, enter the official website of Arduino https://www.arduino.cc
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/arduino_cc_package_02.png">
|
||||
|
||||
#### (3) To install IDE, double click Arduino executable file. Keep the default selection throughout this process, including the installation path is also the default.
|
||||
#### (3) To install IDE, double click Arduino executable file. Keep the default selection throughout this process, including the installation path.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/select_arduino_install_path.png">
|
||||
|
||||
@@ -34,13 +34,13 @@ Open your browser, enter the official website of Arduino https://www.arduino.cc
|
||||
|
||||
## 2. Install USB to Serial Driver
|
||||
|
||||
Open your browser, enter the official website of M5Stack https://m5stack.com/download
|
||||
Open up your browser, visit M5Stack official website https://m5stack.com/download
|
||||
|
||||
#### (1) click `Windows` for downloading this installation package and then unzip this package.
|
||||
#### (1) Navigate to `Explore` `Download`,click `CP210X Driver` click `Windows` to download this installation package and then unzip it afterwads.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/download_usb_driver_win_01.png">
|
||||
|
||||
#### (2) According to your Windows operating system type, select the corresponding driver installation package
|
||||
#### (2) Based on your Windows operating system type, select the corresponding driver installation package
|
||||
|
||||
* 32-bit Windows operating system, choose `CP210xVCPInstaller_x86_vx.x.x.x.exe`
|
||||
|
||||
@@ -48,7 +48,7 @@ Open your browser, enter the official website of M5Stack https://m5stack.com/do
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
|
||||
|
||||
#### (3) double click the executable file for installing.
|
||||
#### (3) double click the executable file to install.
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver02.png">
|
||||
|
||||
@@ -56,33 +56,31 @@ Open your browser, enter the official website of M5Stack https://m5stack.com/do
|
||||
|
||||
#### (4) Check the serial port number `COMx`
|
||||
|
||||
To comfirm if the USB to Serial Driver was successfully installed already, Check the list of identified COM ports in the `Windows Device Manager`:
|
||||
Check the list of identified COM ports in the `Windows Device Manager`:
|
||||
|
||||
Connect the Core to the computer via a USB Type-C cable, open `Windows Device Manager`, click `Ports(COM & LPT)` for checking the list of identified COM ports.
|
||||
|
||||
Disconnect M5Core device and connect it back, to verify which port disappears from the list and then shows back again.
|
||||
Connect the Core to the computer via a USB Type-C cable, open `Windows Device Manager`, click `Ports(COM & LPT)` if you see this `SiLicon Labs CP210x USB to UART Bridge(COMx) ` , means the driver installation is succeed and your PC is allowed to communicate with M5.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/check_serial_port_01.png">
|
||||
|
||||
## 3. Install ESP32 Boards Manager
|
||||
|
||||
#### (1) Open IDE, click `File`->`Peferences`->`Settings`
|
||||
#### (1) Open up Arduino IDE, navigate to `File`->`Peferences`->`Settings`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_01.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_02.png">
|
||||
|
||||
#### (2) Copy the following ESP32 Boards Manager url to `Additional Boards Manager URLs:`
|
||||
#### (2) Copy the following ESP32 Boards Manager url to `Additional Boards Manager URLs:` , hit `OK`.
|
||||
|
||||
*ESP32 Boards Manager url: https://dl.espressif.com/dl/package_esp32_index.json*
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_03.png">
|
||||
|
||||
#### (3) Click `Tools`->`Board:`->`Boards Manager...`
|
||||
#### (3) Navigate to `Tools`->`Board:`->`Boards Manager...`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_04.png">
|
||||
|
||||
#### (4) Search `ESP32` in the new pop-up dialog, then click `Install`
|
||||
#### (4) Search `ESP32` in the pop-up window, find it and click `Install`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_05.png">
|
||||
|
||||
@@ -92,7 +90,7 @@ Disconnect M5Core device and connect it back, to verify which port disappears fr
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_01.png">
|
||||
|
||||
#### (2) Search `M5Stack` and install it
|
||||
#### (2) Search `M5Stack` , find it and click `Install`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_02.png">
|
||||
|
||||
@@ -102,29 +100,30 @@ Disconnect M5Core device and connect it back, to verify which port disappears fr
|
||||
|
||||
## 5. Example
|
||||
|
||||
This section for verifying whether you can program with Arduino or not. Now, The USB cable connects to M5Core, then select your serial port which is connected M5Core.
|
||||
Now that everything is ready to go, you can select a demo example from the `Example` list, before that let's do some configuration on the IDE.
|
||||
|
||||
Select a demo example, compile and upload
|
||||
Make sure you have M5Core connected to your computer via USB
|
||||
|
||||
#### (1) Execute a example likes `FactoryTest.ino`
|
||||
#### (1) Arduino port Configuration
|
||||
|
||||
Select your board name, baudrate, the specified serial port: M5Stack-Core-ESP32, 921600, COM26(Now, my serial port which is connected with PC is `COM26`)
|
||||
config your board name, baudrate, the specified serial port: M5Stack-Core-ESP32, 921600, COM port number
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/select_board_baudrate_serial_port.png">
|
||||
|
||||
#### (2) Then select an example likes `FactoryTest.ino`
|
||||
#### (2) Then select an example
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/select_an_example.png">
|
||||
|
||||
#### (3) Upload it
|
||||
Click `Upload`, to flash the code to the device.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/arduino_upload.png">
|
||||
|
||||
#### (4) New a M5Stack program
|
||||
|
||||
Open Arduino IDE, then new a `.ino` file, rename it as `my_test.ino`
|
||||
Open Arduino IDE, create a `.ino` file, `File`->`New`. Click `Save`, name it my_test.ino, and save it somewhere.
|
||||
|
||||
Copy the below code to my_test.ino
|
||||
Copy the code below to my_test.ino
|
||||
|
||||
```arduino
|
||||
#include <M5Stack.h>
|
||||
@@ -146,6 +145,6 @@ void loop() {
|
||||
}
|
||||
```
|
||||
|
||||
compile it and upload, the M5Stack screen will show "Hello World!" "M5Stack is running successfully!"
|
||||
compile it and upload, the M5Stack screen will display "Hello World!" "M5Stack is running successfully!"
|
||||
|
||||
<!-- ?> *If you want to upgrade the M5Stack Lib, please view this article [upgrade M5Stack Lib](/en/related_documents/upgrade_m5stack_lib).* -->
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
**[1. Install USB to Serial Driver](#_1-Install-USB-to-Serial-Driver)**
|
||||
|
||||
**[2. Burn UIFlow Firmware](#_2-Burn-UIFlow-Firmware)**
|
||||
**[2. Download UIFlow Firmware](#_2-Burn-UIFlow-Firmware)**
|
||||
|
||||
**[3. Wi-Fi Setting](#_3-Wi-Fi-Setting)**
|
||||
**[3. Wi-Fi Configuration](#_3-Wi-Fi-Setting)**
|
||||
|
||||
**[4. Program](#_4-Program)**
|
||||
|
||||
@@ -14,101 +14,154 @@
|
||||
|
||||
## 1. Install USB to Serial Driver
|
||||
|
||||
Open your browser, enter the official website of M5Stack https://m5stack.com/download
|
||||
Open up your browser, and visit the official website of M5Stack https://m5stack.com/download
|
||||
|
||||
#### (1) click `Windows` for downloading this installation package and then unzip this package.
|
||||
### (1) Navigate to `Explore` `Download` `CP210X Driver` and based on your OS choose to download the installation package, unzip it then.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/download_usb_driver_win_01.png">
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/download_usb_driver_all_os_01.jpg">
|
||||
|
||||
#### (2) According to your Windows operating system type, select the corresponding driver installation package
|
||||
### (2) Install the USB driver
|
||||
|
||||
* 32-bit Windows operating system, choose `CP210xVCPInstaller_x86_vx.x.x.x.exe`
|
||||
#### 1. For Mac
|
||||
|
||||
* 64-bit Windows operating system, choose `CP210xVCPInstaller_x64_vx.x.x.x.exe`
|
||||
- After unzipped this package, double click the disk image `SiLabsUSBDriverDisk.dmg` for installation
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_dmg.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_pkg.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/2.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/3.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/4.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/5.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/6.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/7.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/8.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/9.png">
|
||||
|
||||
- Check the serial port number `/dev/tty.SLAB_USBtoUART`
|
||||
|
||||
To make sure if the Driver has installed on your MAC:
|
||||
|
||||
Open `Terminal`, connect `M5Core` with your MAC through USB Type-C cable, and type in the following command to view the available serial ports list.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_01.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_02.png">
|
||||
|
||||
Disconnect M5Core device, and type in the same command on `Terminal` to see which port disappeared from the list.
|
||||
That how we identify the name of the serial device.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_03.png">
|
||||
|
||||
- The serial device name should be: `tty.SLAB_USBtoUART`
|
||||
|
||||
|
||||
|
||||
#### 2.
|
||||
- Based on your windows system, please choose:
|
||||
* 32-bit Windows operating system `CP210xVCPInstaller_x86_vx.x.x.x.exe`
|
||||
|
||||
* 64-bit Windows operating system `CP210xVCPInstaller_x64_vx.x.x.x.exe`
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
|
||||
|
||||
#### (3) double click the executable file for installing.
|
||||
- double click the executable file for installing.
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver02.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver03.png">
|
||||
|
||||
#### (4) Check the serial port number `COMx`
|
||||
- Check the serial port number `COMx`
|
||||
|
||||
To comfirm if the USB to Serial Driver was successfully installed already, Check the list of identified COM ports in the `Windows Device Manager`:
|
||||
Check the list of identified COM ports in the `Windows Device Manager`:
|
||||
|
||||
Connect the Core to the computer via a USB Type-C cable, open `Windows Device Manager`, click `Ports(COM & LPT)` for checking the list of identified COM ports.
|
||||
|
||||
Disconnect M5Core device and connect it back, to verify which port disappears from the list and then shows back again.
|
||||
Connect the Core to the computer via a USB Type-C cable, open `Windows Device Manager`, click `Ports(COM & LPT)` if you see this `SiLicon Labs CP210x USB to UART Bridge(COMx) ` , means the driver installation is succeed and your PC is allowed to communicate with M5.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/check_serial_port_01.png">
|
||||
|
||||
## 2. Burn UIFlow Firmware
|
||||
## 2. Download UIFlow Firmware
|
||||
|
||||
#### (1) Download M5Burner
|
||||
### (1) Download M5Burner
|
||||
|
||||
Access [M5Stack Official Website](http://www.m5stack.com/download), and download M5Burner
|
||||
Go to [M5Stack Official Website](http://www.m5stack.com/download), and download M5Burner
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner.png" alt="Screenshot of coverpage" title="Cover page">
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner_02.png" alt="Screenshot of coverpage" title="Cover page">
|
||||
|
||||
#### (2) Burn the firmware
|
||||
### (2) Flash the firmware
|
||||
|
||||
Connect M5Core to the computer via the USB Type-C cable, unzip the M5Burner archive you just downloaded, and double-click the executable `M5Burner.exe`
|
||||
- Connect M5Core to your computer via the USB Type-C cable, unzip the M5Burner pakage,here appears a folder, open the folder and double-click the executable `M5Burner.exe`
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_folder_01.jpg">
|
||||
|
||||
Select the `serial number` and `921600 baud rate` that the board is connected to the computer, and select the latest version of UIFlow firmware.
|
||||
- Select the `serial number` and `921600 baud rate` that the board is connected to the computer, and select the latest version of UIFlow firmware.
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_02.png">
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_com_bandrate_01.jpg">
|
||||
|
||||
Click `Burn` for downloading UIFlow firmware
|
||||
- Download UIFlow firmware from the cloud.
|
||||
-
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/M5burner_firmware_download_process_01.jpg"><img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_choose_firmware_m5stack_01.jpg">
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_06_02.png">
|
||||
- Before Click `Burn` make sure you erase it first, and then make sure you choose the right firmware on the left list.
|
||||
|
||||
The following interface appears, indicating that the firmware is successfully burned.
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_choose_firmware_01.jpg">
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_05.png">
|
||||
- Click `Burn`
|
||||
|
||||
|
||||
- If you see the following message, means the firmware has flash onto your M5Core.
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_flash_finish_01.jpg">
|
||||
|
||||
## 3. Wi-Fi Setting
|
||||
|
||||
#### (1) Select `SETUP`
|
||||
### (1) Press `SETUP` to enter the Wi-Fi config mode.
|
||||
|
||||
After successfully burning the UIFlow firmware, click the red button in the upper left corner of the Core to restart the device. Once the Core is powered on, immediately click the `C button` that indicates you select the `SETUP` option on the screen for the network configuration. Then click on the middle button and select `Link Server: Flow.m5stack.com`.
|
||||
- Reboot the M5Core by press the red button on the side,the device will run the UIFlow firmware.
|
||||
- Click `SETUP` right after the screen light up. Please be quick.
|
||||
- In this page, navigate to `Link Server: Flow.m5stack.com` press the middle button to confirm.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_04.png">
|
||||
|
||||
#### (2) Connect to AP
|
||||
### (2) Connect to AP
|
||||
|
||||
Turn on Wi-Fi on your phone or computer, then connect to the M5Core hotspot `AP` displayed on the screen ( For example, the M5Stack-0d60 is now displayed ). After the connection is successful, open a browser and enter the URL `192.168.4.1`, then select Wi-Fi that can be connected to the network, enter the Wi-Fi password. ( Now, the networkable Wi-Fi is M5 )
|
||||
- Now the device is in Wi-Fi AP mode, use your phone to connect this AP. The AP name would start with "M5Stack-".
|
||||
- After connected to the AP, your phone and the device has established a Wi-Fi connection.
|
||||
- Open up a broswer on your phone and type in `192.168.4.1` in the address bar. Here you will enter the Wi-Fi Config page.
|
||||
- Choose the local Wi-Fi and type in the password to tell the device use that Wi-Fi to get access to the internet.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_05.png">
|
||||
|
||||
#### (3) Connect to Wi-Fi
|
||||
### (3) Display APIKEY
|
||||
|
||||
After M5Core successfully connects to a networkable Wi-Fi (here M5), the screen will display `APIKEY` and the QR code that can access the UIFlow webpage.
|
||||
|
||||
*Description of APIKEY: APIKEY is the device unique identifier. As long as the current UIFlow is connected to which device's APIKEY, The programming code will be downloaded to that device.*
|
||||
- After the M5Core connected to the internet, the device will restart and display the `APIKEY` and a QR code(UIFlow website).
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_06.png">
|
||||
|
||||
The status of the small dot on the screen:
|
||||
- The status of the small dot on the screen:
|
||||
|
||||
* Green means M5Core successfully connected to M5Stack Server, that is online status
|
||||
* Green means connected to UIFlow cloud.
|
||||
|
||||
* Red means be offline status
|
||||
* Red means disconnected to UIFlow cloud.
|
||||
|
||||
## 4. Program
|
||||
|
||||
#### (1) Connect to UIFlow
|
||||
### (1) Connect to UIFlow
|
||||
|
||||
Now scan the QR code on the M5Core with your phone or tablet, or if you are programming with a computer, enter the URL `flow.m5stack.com` on your computer's browser
|
||||
- To get access to UIFlow program paltform, you can either scan the QR code on the M5Core with your tablet,or just visit `flow.m5stack.com` on your PC browser.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
|
||||
|
||||
Every time before you upload the code to M5Core through UIFlow, make sure that UIFlow is connected to the M5Core you want to program.
|
||||
|
||||
So you need to click on the gear in the upper right corner of the UIFlow IDE page and enter APIKEY on your M5Core screen in the pop-up dialog box. Click `Save`, then UIFlow will connect to M5Core.
|
||||
- At top right coner, navigate to `setting`,here you will need to type in the `APIKEY` displayed on the screen, choose your `Language` and `Device`(core). Click `OK`.
|
||||
- The device will trying to connect with the UIFlow server. Once it connected, the small dot on the screen will turn green.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
|
||||
|
||||
@@ -116,26 +169,30 @@ So you need to click on the gear in the upper right corner of the UIFlow IDE pag
|
||||
|
||||
Now you can start programming with UIFlow!
|
||||
|
||||
#### (2) Programming example
|
||||
### (2) Programming example
|
||||
|
||||
#### a. draw a UI
|
||||
#### a. Draw a UI
|
||||
|
||||
Drag and drop the 4 controls in the upper left corner of the UIFlow IDE to the UI interface of `M5Stack Core` and click the `Run` button in the upper right corner of the page to execute the effect.
|
||||
- Drag and drop the icons on the top left corner to place a UI element onto the M5Core simmulator.
|
||||
- Click `Run` on the top right corner, the triangle, to load the code onto M5Core.
|
||||
- As you can see it execute synchronously.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif">
|
||||
|
||||
#### b. writing a Blockly program
|
||||
#### b. Write a Blockly program
|
||||
|
||||
Drag the `Set emoji map in0` block from the `Emoji` category on the left to the code area of `Blockly` and click the `Run` button.
|
||||
- Drag the `Set emoji map in0` block from the `Emoji` category and attach it right underneath `Setup`
|
||||
- Draw a heart emoji.
|
||||
- hit `Run`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif">
|
||||
|
||||
|
||||
*The link of source coce: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
|
||||
*Source codee link: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
|
||||
|
||||
#### c. writing a MicroPython program
|
||||
#### c. Write a MicroPython program
|
||||
|
||||
Copy the following code into the Python editing area, then click `Run` in the top right corner to execute the code.
|
||||
Copy the following code into the Python editing area, then click `Run`
|
||||
|
||||
```Python
|
||||
from m5stack import *
|
||||
@@ -153,7 +210,7 @@ lcd.print("Hello M5Stack")
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_micropython.png">
|
||||
|
||||
At this time, the word 'Hello M5Stack` will be printed on the M5Core screen.
|
||||
In this case, 'Hello M5Stack` will be printed on the M5Core screen.
|
||||
|
||||
## 5. Related Video
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# M5Core Get Started {docsify-ignore-all}
|
||||
|
||||
**Pick up your programming mode below for getting started**
|
||||
**Choose your Developmet platform below for getting started**
|
||||
|
||||
|<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|
||||
|:---:|:---:|:---:|
|
||||
|
||||