This commit is contained in:
LottesLiu
2019-05-15 16:31:58 +08:00
parent 8b26b43a64
commit 0d64034955
15 changed files with 141 additions and 125 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

+1 -1
View File
@@ -60,7 +60,7 @@ LoRa and LoRaWAN permit long-range connectivity for Internet of Things (IoT) dev
These are the point-to-point communication examples between two LORA modules. The LoRa nodes send and receive messages.
* Blue string indicates send succeed.
* Blue string indicates sending succeed.
* Yellow string display the received messages.
@@ -97,13 +97,13 @@ The serial device name is `tty.SLAB_USBtoUART`
<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 pop-up window, find it and click `Install`
#### (4) Search `ESP32` in `Boards Manager` 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">
## 4. Install M5Stack Library
#### (1) Open Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
#### (1) Open Arduino IDE, Select `Sketch`->`Include Library`->`Manage Libraries...`
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_01.png">
@@ -119,11 +119,11 @@ Make sure you have M5Core connected to your computer via USB
#### (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
Choose the correct development `Board` and `Port` `Tools`->`Board`->`M5Stack-Core-ESP32`, `Tools` -> `Ports` ->`tty.SLAB_USBtoUART`
<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
#### (2) Then choose an example
`File`->`Examples`->`M5Stack`->`Basics`
@@ -132,13 +132,13 @@ 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">
#### (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!"
Click `Upload`, to flash the code to the device. Once it's done, reset the M5Core. It will display "Hello World!" on the screen.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/display_hello_world.png">
## Note
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`.
Most version of MacOS have no problem detecting the serial device that connected to the computer, but it might have exceptions 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">
@@ -151,8 +151,7 @@ Most version of MacOS have no problem detecting the serial device that connected
## 6. Related Video
- 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.
Although This video is a little out of date, some webpage is not available anymore. it's still a good tutorial for beginners,and it shows the manual way of adding m5stack library and almost covered every step we have mentioned above.
<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">
</video>
@@ -26,7 +26,7 @@ Open up your browser, and visit Arduino official website 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.
#### (3) To install IDE, double click the 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">
@@ -42,9 +42,9 @@ Open up your browser, visit M5Stack official website https://m5stack.com/downloa
#### (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`
* 32-bit, choose `CP210xVCPInstaller_x86_vx.x.x.x.exe`
* 64-bit Windows operating system, choose `CP210xVCPInstaller_x64_vx.x.x.x.exe`
* 64-bit, choose `CP210xVCPInstaller_x64_vx.x.x.x.exe`
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
@@ -56,9 +56,9 @@ Open up your browser, visit M5Stack official website https://m5stack.com/downloa
#### (4) Check the serial port number `COMx`
Check the list of identified COM ports in the `Windows Device Manager`:
Check identified COM ports list 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)` 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.
Connect the M5Core to your computer via 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 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">
@@ -100,7 +100,7 @@ Connect the Core to the computer via a USB Type-C cable, open `Windows Device Ma
## 5. Example
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.
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.
Make sure you have M5Core connected to your computer via USB
@@ -110,7 +110,7 @@ config your board name, baudrate, the specified serial port: M5Stack-Core-ESP32,
<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
#### (2) Then choose an example
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/select_an_example.png">
@@ -119,9 +119,9 @@ 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
#### (4) Creat a new M5Stack program
Open Arduino IDE, create a `.ino` file, `File`->`New`. Click `Save`, name it my_test.ino, and save it somewhere.
Create a `.ino` file, `File`->`New`. Click `Save`, name it `my_test.ino`, and save it somewhere.
Copy the code below to my_test.ino
@@ -145,6 +145,6 @@ void loop() {
}
```
compile it and upload, the M5Stack screen will display "Hello World!" "M5Stack is running successfully!"
Compile 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).* -->
@@ -14,9 +14,9 @@
## 1. Install USB to Serial Driver
Open up your browser, and visit the official website of M5Stack https://m5stack.com/download
Open up your browser, and visit M5Stack official website https://m5stack.com/download
### (1) Navigate to `Explore` `Download` `CP210X Driver` and based on your OS choose to download the installation package, unzip it then.
### (1) Navigate to `Explore` `Download` `CP210X Driver`. Based on your OS choose to download the installation package, unzip the package afterwards.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/download_usb_driver_all_os_01.jpg">
@@ -24,7 +24,7 @@ Open up your browser, and visit the official website of M5Stack https://m5stack
#### 1. For Mac
- After unzipped this package, double click the disk image `SiLabsUSBDriverDisk.dmg` for installation
- Double click the disk image `SiLabsUSBDriverDisk.dmg` for installation
<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_dmg.png">
@@ -48,16 +48,16 @@ Open up your browser, and visit the official website of M5Stack https://m5stack
- Check the serial port number `/dev/tty.SLAB_USBtoUART`
To make sure if the Driver has installed on your MAC:
To make sure if the Driver is 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.
Open `Terminal`, connect `M5Core` with your MAC through USB Type-C cable, and type in the command `ls .dev.tty*` 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.
Disconnect M5Core device, and type in the same command to see which port disappeared from the list.
That how we identify the name of the current serial port device.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_03.png">
@@ -65,11 +65,11 @@ That how we identify the name of the serial device.
#### 2.
#### 2. For Windows
- Based on your windows system, please choose:
* 32-bit Windows operating system `CP210xVCPInstaller_x86_vx.x.x.x.exe`
- 32-bit `CP210xVCPInstaller_x86_vx.x.x.x.exe`
* 64-bit Windows operating system `CP210xVCPInstaller_x64_vx.x.x.x.exe`
- 64-bit `CP210xVCPInstaller_x64_vx.x.x.x.exe`
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
@@ -81,9 +81,9 @@ That how we identify the name of the serial device.
- Check the serial port number `COMx`
Check the list of identified COM ports in the `Windows Device Manager`:
Check identified COM port list 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)` 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.
Connect the device to your 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 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">
@@ -99,44 +99,44 @@ Go to [M5Stack Official Website](http://www.m5stack.com/download), and download
### (2) Flash the firmware
- 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`
- Connect M5Core to your computer via the USB Type-C cable, unzip the M5Burner pakage.
- Here appears a folder, open it 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` , and select the latest version of UIFlow firmware.
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_com_bandrate_01.jpg">
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5buner_com_bandrate_01.jpg">
- 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">
- Before Click `Burn` make sure you erase it first, and then make sure you choose the right firmware on the left list.
<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_01.jpg">
- Before Click `Burn` make sure you click erase first, and then make sure you choose the right firmware on the left list.
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_choose_firmware_m5stack_01.jpg">
- Click `Burn`
- If you see the following message, means the firmware has flash onto your M5Core.
- If you see the following message, means you have the firmware flashed onto your M5Core.
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_flash_finish_01.jpg">
## 3. Wi-Fi Setting
### (1) Press `SETUP` to enter the Wi-Fi config mode.
### (1) Enter the Wi-Fi config mode.
- 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.
- Reboot the M5Core by press the red button on the side, then the device will run the UIFlow firmware we just downloaded.
- Click `SETUP` right after the screen light up. Please be quick. If you miss it, repeat the process.
- In the `SETUP` page, choose `Link Server: Flow.m5stack.com` and 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
- Now the device is in Wi-Fi AP mode, use your phone to connect this AP. The AP name would start with "M5Stack-".
- 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.
- Then you will need to visit this address `192.168.4.1` on your phone browser. Here you will enter the Wi-Fi config page.
- Choose the local Wi-Fi (5G is not supported yet), type in the password. Then click `Configure`. By this way, you can tell the device to use the chosen 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">
@@ -146,11 +146,11 @@ Go to [M5Stack Official Website](http://www.m5stack.com/download), and download
<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 small dot(top right) on the screen indicates the connection status with UIFlow server:
* Green means connected to UIFlow cloud.
- Green: connected
* Red means disconnected to UIFlow cloud.
- Red : disconnected.
## 4. Program
@@ -160,8 +160,9 @@ Go to [M5Stack Official Website](http://www.m5stack.com/download), and download
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
- 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.
- 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`.
- Hold on untill the webpage shows "connected".
- Now that the device has established a connection with the UIFlow server. we can start programming
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
@@ -190,6 +191,18 @@ Now you can start programming with UIFlow!
*Source codee link: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
## Supplement
> What gonna happen if you click `Download`?<br>
You will have the current code downloading onto the device, it will reboot right away. Then, the device will enter "execute" mode back from the reboot. In this case, if you want to go back to program mode, you will need to press the power button to reboot the device and press button `A` right away.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png" width="50%" height="50%">
>How to switch to another Wi-Fi for the device?
- First, reboot the device,
- Right after the reboot, press button `Upload` to the left.
- You will see M5Core connecting the local Wi-Fi and going back to program mode.
#### c. Write a MicroPython program
Copy the following code into the Python editing area, then click `Run`
@@ -1,7 +1,7 @@
# M5Core Get Started {docsify-ignore-all}
**Choose your Developmet platform below for getting started**
**Choose the development platform**
|<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|:---:|
|[Arduino-MacOS](en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Arduino-Windows](en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows) | [UIFlow](en/quick_start/m5core/m5stack_core_get_started_MicroPython)|
|[Arduino-MacOS](en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Arduino-Windows](en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows) | [UIFlow (Blockly & Micropython)](en/quick_start/m5core/m5stack_core_get_started_MicroPython)|
@@ -1,6 +1,6 @@
# M5Stick Quick Start {docsify-ignore-all}
**Choose your development platform below for getting started**
**Choose the development platform**
|<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|:---:|
@@ -26,7 +26,7 @@
<!-- *注意:如果已经安装了 IDE,请直接从[步骤 2](#_2-安装串口驱动) 开始。* -->
Open up your browser, visit official website of Arduino https://www.arduino.cc/en/Main/Software
Open up your browser, visit Arduino official website https://www.arduino.cc/en/Main/Software
#### (1) click `Mac OS X` to download `Arduino IDE`
@@ -111,7 +111,7 @@ The serial port name is `tty.SLAB_USBtoUART`
## 4. Install M5Stack Library
#### (1) Open Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
#### (1) Open Arduino IDE, Select `Sketch`->`Include Library`->`Manage Libraries...`
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_01.png">
@@ -127,15 +127,15 @@ The serial port name is `tty.SLAB_USBtoUART`
## 6. Example
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.
Now that everything is ready to go, you can select a demo from the `Example` list, before that let's do some configuration on the IDE.
Make sure you have M5Stick connected to your computer via USB
#### (1) Select the correct board name and serial device name
#### (1) Select the correct board and serial port name
Start up Arduino IDE, and select `Tools -> Boards -> M5Stack-Core-ESP32`
select `Tools -> Ports ->` to set up the serial port.
choose the right port at `Tools -> Ports ->`.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
@@ -143,17 +143,17 @@ select `Tools -> Ports ->` to set up the serial port.
Click `File-> Examples`. Here are some test demos in `M5Stack`->`Stick`
You can find a example name `FactoryTest` inside Basics.
We can try an example inside Basics, name `FactoryTest` .
<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png">
Click `Upload`, to flash the code to the device. Once it's done, reset the device, the screen on M5Core will display "Hello World!"
Click `Upload`, to flash the code to the device. Once it's done, reset the device, The Screen will display "Hello World!"
**The button located on the bottom left is the power button, single-click to reboot. To enter deep sleep mode, double click this button**
**The button located on the bottom left is the power button, single-click to reboot. To enter deep sleep mode, double click**
## Note
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`.
Most version of MacOS have no problem detecting the serial device that connected to the computer, but might have exception 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">
@@ -46,9 +46,9 @@ Open up your browser, and visit M5Stack official website https://m5stack.com/dow
#### (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`
* 32-bit `CP210xVCPInstaller_x86_vx.x.x.x.exe`
* 64-bit Windows operating system, choose `CP210xVCPInstaller_x64_vx.x.x.x.exe`
* 64-bit `CP210xVCPInstaller_x64_vx.x.x.x.exe`
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
@@ -60,9 +60,9 @@ Open up your browser, and visit M5Stack official website https://m5stack.com/dow
#### (4) Check the serial port number `COMx`
Check the list of identified COM ports in the `Windows Device Manager`:
Check identified COM port list 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)` 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.
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 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">
@@ -84,7 +84,7 @@ Connect the Core to the computer via a USB Type-C cable, open `Windows Device Ma
<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 pop-up window, find it and click `Install`
#### (4) Search `ESP32` at `Boards Manager` 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">
@@ -106,26 +106,26 @@ Connect the Core to the computer via a USB Type-C cable, open `Windows Device Ma
## 6. Example
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.
Now that everything is ready to go, you can select a demo from the `Example` list, before that, let's do some configuration on the IDE.
Make sure you have M5Stick connected to your computer via USB
#### (1) Select the correct board name and serial device name
Start up Arduino IDE, and select `Tools -> Boards -> M5Stack-Core-ESP32`
Select `Tools -> Boards -> M5Stack-Core-ESP32`
select `Tools -> Ports ->` to set up the serial port.
Choose the right port number at `Tools -> Ports ->`.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
#### (2) Select an example
Click `File-> Examples`. Here are some test demos in `M5Stack`->`Stick`
Click `File-> Examples`. Here are some test demo in `M5Stack`->`Stick`
You can find a example name `FactoryTest` inside Basics.
Let's try an example inside Basics. Name `FactoryTest`
<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png">
Click `Upload`, to flash the code to the device. Once it's done, reset the device, the screen on M5Core will display "Hello World!"
Click `Upload`, to flash the code to the device. Once it's done, reset the device, The screen will display "Hello World!"
**The button located on the bottom left is the power button, single-click to reboot. To enter deep sleep mode, double click this button**
@@ -20,15 +20,15 @@
## Update firmware
>Update the stick to the latest firmware version for a better experience.
> For a better developing experience, Please update your device to the newest firmware version.
*If you need to update or flash firmware, please click [here](en/related_documents/how_to_burn_firmware)*
*To update UIFlow firmware, please click [here](en/related_documents/how_to_burn_firmware)*
<img src="assets/img/getting_started_pics/m5stick/stick_03.png">
## Power on
>The button located on the bottom left is the power button, single-click to reboot. To enter deep sleep mode, double click this button
>The button located on the bottom left is the power button, single-click to reboot. To enter deep sleep mode, double click this button.
>In addition to the power button, M5Stick also provides another button, Button`A`.
@@ -38,23 +38,24 @@
### Step1. Set up WIFI
- If you power on M5Stick for the very first time, it will enter the configuration page by default. And it's OLED screen will display an **AP name(SSID)** and **ap-setting address(192.168.4.1)**.
- If you got M5Stick for the very first time, once it powered on, by default, it will enter the configuration page. The LED screen will display an **AP name(SSID)** and a **webpage address(192.168.4.1)**.
- In this case, you can use your phone to connect AP.
- After connected, use a browser on your phone and type in 192.168.4.1 onto the address bar.
- Enter the WIFI configuration page, choose your local WIFI, and type in password, click `Save`, and hold on for the connection to be done.
- You will need to use your phone to connect that AP.
- Once it connected, you will need to visit this address (192.168.4.1) on your phone browser.
- Now that you have entered the WIFI configuration page, choose your local WIFI, and type in password, click `Save`, and hold on for the connection to be done.
<img src="assets/img/getting_started_pics/m5stick/stick_04.png">
## Step2. Setting API Key
- After connected with Wi-Fi, M5Stick will reset and enter the programming mode automatically.
- When the screen displays “Done”, which means that the device has connected to the internet.
- After connected with the local Wi-Fi(5G is not supported yet), M5Stick will reset and get into program mode automatically.
- When a display on the screen shows “Done”, means that the device has connected to the internet.
- To get access to our WebIDE, please visit here [flow.m5stack.com](http://flow.m5stack.com/).
- On the webpage, top right, navigate to `Settings` ,type in the **API Key** displayed on the M5stick screen and click `Save`.
- On the webpage, top right, navigate to `Settings` ,type in the **API Key** on the screen and click `Save`.
- After it was connected to the UIFlow, we can start programming
- Hold on untill the webpage shows "connected".
- Now that the device has established a connection with the UIFlow server. we can start programming
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png">
@@ -62,11 +63,15 @@
## Supplement
>If clicked `Download`, the device will downloaded the latest code, and after reboot the device will enter "execute" mode. In this case, if you want to go back to program mode, you will need to press `A` button right after it reset.
> What gonna happen if you click `Download`?<br>
You will have the current code downloading onto the device, it will reboot right away. Then, the device will enter "execute" mode back from the reboot. In this case, if you want to go back to program mode, you will need to press the power button to reboot the device and press button `A` right away.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png">
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png" width="50%" height="50%">
>If you want to switchh to a new wifi for the device, you will need to reboot the device and press and hold `A` button for more than one second, and release once the stick screen sappears `UIFlow` logo.
>How to switch to another Wi-Fi for the device?
- First, reboot the device,
- Right after the reboot, press and hold button `A` for more than one second.
- Rrelease the button when `UIFlow` logo appears on the screen .
## Related Video
@@ -1,7 +1,7 @@
# M5StickC Quick Start {docsify-ignore-all}
**Pick up your programming mode below for getting started**
**Choose the development platform**
|<img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|
|[Arduino-Windows](en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows) | [UIFlow](en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow)|
|<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|:---:|
|[Arduino-MacOS](en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS) | [Arduino-Windows](en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows) | [UIFlow](en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow)|
@@ -6,7 +6,7 @@
<!-- ?> Before setting the development environment, we suggest you confirm whether the USB driver has installed. If not, please visit this link [establish serial connection](/en/related_documents/establish_serial_connection). -->
<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/macos-logo.png">
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png">
## Text Tutorial
@@ -57,13 +57,13 @@ Open up your browser, and visit Arduino official website https://www.arduino.cc/
<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 pop-up window, find it and click `Install`
#### (4) Search `ESP32` in `Boards Manager` window, find it and click `Install`
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_qs_mac_serch_esp32_01.jpg">
### Step3. Install M5StickC Lib
#### (1) Open Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
#### (1) Open Arduino IDE, Select `Sketch`->`Include Library`->`Manage Libraries...`
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_01.png">
@@ -80,7 +80,7 @@ Make sure you have M5Core connected to your computer via USB
#### (1) Select the correct board name and serial device name
Open Arduino IDE, select `Tools`->`Board`->`M5StickC` for your M5Core, `Tools` -> `Ports` for serial port
Open Arduino IDE, select `Tools`->`Board`->`M5StickC` , `Tools` -> `Ports`(choose the series port name)
`Upload Speed`->`115200`
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_qs_mac_adn_config_01.jpg">
@@ -89,17 +89,17 @@ Open Arduino IDE, select `Tools`->`Board`->`M5StickC` for your M5Core, `Tools` -
Click `File-> Examples`. Here are some test demos in `M5Stack`->`Stick`
Let's open a example called `FactoryTest` inside Basics.
Let's open this example called `FactoryTest` inside Basics.
<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png">
<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png" width="60%" height="60%">
Click `Upload`, to flash the code to the device. Once it's done, reset the M5Core, the screen on M5Core will display "Hello World!"
Click `Upload`, to flash the code to the device. Once it's done, reset the M5Core, On M5Core screen will display "Hello World!"
**The button located on the bottom left is the power button, single-click to reboot. To enter deep sleep mode, double click this button**
## Note
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`.
Most version of MacOS have no problem detecting the serial device that connected to the computer, but it might have exceptions 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">
@@ -52,7 +52,7 @@ Open up your browser, and visit Arduino official website https://www.arduino.cc
<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 pop-up window, find it and click `Install`
#### (4) Search `ESP32` in `Boards Manager` 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">
@@ -68,7 +68,7 @@ Open up your browser, and visit Arduino official website https://www.arduino.cc
## 4. Example
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.
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.
Make sure you have M5StickC connected to your computer via USB
@@ -78,13 +78,14 @@ config your board name, baudrate, the specified serial port: M5StickC, 115200, C
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_qs_win_adu_config_01.jpg">
#### (2) Then select an example
#### (2) Choose an example
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_qs_win_select_example.jpg">
#### (3) Upload it
Click `Upload`, to flash the code to the device.
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_qs_win_upload_01.jpg">
## 5. Video Tutorial
@@ -12,7 +12,7 @@
### (1) Download M5Burner
Go to [M5Stack Official Website](http://www.m5stack.com/download), and download M5Burner
Go to [M5Stack](http://www.m5stack.com/download) Official Website , and download M5Burner
<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner.png" alt="Screenshot of coverpage" title="Cover page">
@@ -20,26 +20,25 @@ Go to [M5Stack Official Website](http://www.m5stack.com/download), and download
### (2) Flash the firmware
- Connect M5StickC 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`
- Connect M5StickC 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 `115200 baud rate` that the board is connected to the computer, and select the latest version of UIFlow firmware.
- Select the `COM` number and `Baudrate` (115200), and select the latest version of UIFlow firmware.
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_com_bandrate_02.jpg">
- 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/m5buner_choose_firmware_stickc_01.jpg">
<img src="assets/img/getting_started_pics/how_to_burn_firmware/M5burner_firmware_download_process_01.jpg">
- Before Click `Burn` make sure you erase it first, and then make sure you choose the right firmware on the left list.
- Before Click `Burn` make sure you click erase first, and then make sure you choose the right firmware on the left list.
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5buner_choose_firmware_stickc_01.jpg">
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_choose_firmware_01.jpg">
- Click `Burn`
- If you see the following message, means the firmware has flash onto your M5Core.
- If you see the following message, means the firmware has downloaded onto your M5Core.
<img src="assets/img/getting_started_pics/how_to_burn_firmware/m5burner_flash_finish_01.jpg">
@@ -47,9 +46,7 @@ Go to [M5Stack Official Website](http://www.m5stack.com/download), and download
#### (1) Select `SETUP`
After flash the UIFlow firmware, press and hold the `Power` button (bottom left side)for 2 seconds until the screen light up.
The screen will display the AP name as shown below.
After flash the UIFlow firmware, press and hold the `Power` button (bottom left side) for 2 seconds until the screen light up.
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png">
@@ -58,15 +55,16 @@ The screen will display the AP name as shown below.
- Now the device is in Wi-Fi AP mode, use your phone to connect this AP. The AP name would start with "M5-".
- 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.
- Once it connected, you will need to visit this address (192.168.4.1) on your phone browser. Here you will enter the Wi-Fi config page.
- Choose the local Wi-Fi(5G is not supported yet), type in the password. Then click `Configure`. By this way, you can tell the device to use the chosen Wi-Fi to get access to the internet.
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png">
#### (3) Connect to Wi-Fi
- After the M5Core connected to the internet, the device will restart and display the UIFlow version number, the `APIKEY` ,and a global icon for indication of connection status with UIFlow server.
- After connected with the local Wi-Fi, M5StickC will reset and get into program mode automatically.
- When a display on the screen shows the UIFlow version number, the `APIKEY` ,and a global icon, which means that the device has connected to the internet.
- The global icon indicate the connection status with UIFlow server.
* Green: Connected
* Red : Disconnected
@@ -80,13 +78,13 @@ The screen will display the AP name as shown below.
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png">
- 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`.
- At top right coner, navigate to `setting`,here you will need to type in the `APIKEY` which is displayed on the screen, choose your `Language` and `Device`(Stick-c). Click `OK`.
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png">
- The device will trying to connect with the UIFlow server. Once it connected, the small dot on the screen will turn green.
- The device will trying to connect with the UIFlow server. Once the connection has established , the globle icon on the screen will turn green.
Now you can start programming with UIFlow!
@@ -97,20 +95,20 @@ Now you can start programming with UIFlow!
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png">
- From `Event`, drag in `Event` into the programming area. and attach it underneath `Setup`
- From `Event`, drag in `Loop` into the programming area. and attach it underneath `Setup`
- From `Hardware` -> `LED`, drag in some blocks `LED ON` and `LED OFF` , place then inside `Loop`
- From `Hardware` -> `LED`, drag in some blocks, `LED ON` and `LED OFF`. place them inside `Loop`
- From `Timer`, drag in block `Wait 1s`
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png">
- hit `Run`
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png">
<mark>**The Result:**</mark>
- the LED on the device will blink at a 1Hz frequency.
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png">