diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..3cce948f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "restructuredtext.confPath": "" +} \ No newline at end of file diff --git a/_static/M5GO_Unit_3.96.jpg b/_static/M5GO_Unit_3.96.jpg deleted file mode 100644 index 5f2460e7..00000000 Binary files a/_static/M5GO_Unit_3.96.jpg and /dev/null differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg new file mode 100644 index 00000000..c4dd322d Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/change_wifi.jpg b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/change_wifi.jpg new file mode 100644 index 00000000..98c94c81 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/change_wifi.jpg differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png new file mode 100644 index 00000000..a4a956c9 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/connect_wifi_successfully.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/connect_wifi_successfully.png new file mode 100644 index 00000000..758b3268 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/connect_wifi_successfully.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page.png new file mode 100644 index 00000000..33804e98 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png new file mode 100644 index 00000000..5bcc02f4 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_music_block.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_music_block.png new file mode 100644 index 00000000..94897e88 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_music_block.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_timer_block.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_timer_block.png new file mode 100644 index 00000000..ce08a2e7 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_timer_block.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png new file mode 100644 index 00000000..65abee19 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png new file mode 100644 index 00000000..ac5e578d Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png new file mode 100644 index 00000000..633bec91 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_wifi_password.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_wifi_password.png new file mode 100644 index 00000000..5ff1f89e Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_wifi_password.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_blockly.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_blockly.png new file mode 100644 index 00000000..696c5217 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_blockly.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png new file mode 100644 index 00000000..c5b3b18b Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png new file mode 100644 index 00000000..3c06d2f3 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png differ diff --git a/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png new file mode 100644 index 00000000..dc8fcd37 Binary files /dev/null and b/_static/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png differ diff --git a/en/get-started/download_arduino_esp32_support.bat b/en/get-started/download_arduino_esp32_support.bat deleted file mode 100644 index 7fcbaffa..00000000 --- a/en/get-started/download_arduino_esp32_support.bat +++ /dev/null @@ -1,8 +0,0 @@ -cd C:\Program Files (x86)\Arduino\hardware -md espressif -cd espressif -git clone --recursive https://github.com/espressif/arduino-esp32.git esp32 -cd esp32 -cd tools -start get.exe -start cmd \ No newline at end of file diff --git a/en/get-started/how_to_connect_wifi_using_core.md b/en/get-started/how_to_connect_wifi_using_core.md new file mode 100644 index 00000000..8b2d2b25 --- /dev/null +++ b/en/get-started/how_to_connect_wifi_using_core.md @@ -0,0 +1,30 @@ +# How to Connect WIFI Using Core + +**if it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access `flow.m5stack.com`, please execute the following setps for setting wifi.** + + +### Connect Wi-Fi + +Now, after you've pressed the upload buttom, the screen will show this message. + +![image](../../_static/M5Stack_MicroPython_UserGuidePictures/m5stack_connet_wifi.png) + +Then use Mobile Phone or PC for connectting to M5Stack AP(like `M5Stack-a67c`), and then open brower to login 192.168.4.1 for setting your networkable WIFI name and password. (Now, my networkable wifi is named `MasterHax_5G`) + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_wifi_password.png) + + +After connecting wifi successfully, reset your core according to the prompt on `192.168.4.1` + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/connect_wifi_successfully.png) + + +Once you've reset M5Stack Core, the upload buttom, you will arrive at a screen with a QR code which you scan with your phone or tablet to start programming on your mobile device. If you want to program the M5 from your computer, enter the url shown at the top of the screen `flow.m5stack.com` + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg) + + +***NOTE:*** +***Similarly, if you want another networkable WIFI AP to connect with Core, press the SETUP buttom while core was power-up.*** + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/change_wifi.jpg) diff --git a/en/get-started/how_to_connect_wifi_using_core.rst b/en/get-started/how_to_connect_wifi_using_core.rst new file mode 100644 index 00000000..05f89e08 --- /dev/null +++ b/en/get-started/how_to_connect_wifi_using_core.rst @@ -0,0 +1,28 @@ +How to Connect WIFI Using Core +============================== + +**if it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access http://flow.m5stack.com, please execute the following setps for setting wifi.** + +Connect Wi-Fi +~~~~~~~~~~~~~ + +Now, after you've pressed the upload buttom, the screen will show this message. + +.. image:: ../../_static/M5Stack_MicroPython_UserGuidePictures/m5stack_connet_wifi.png + +Then use Mobile Phone or PC for connectting to M5Stack AP(like ``M5Stack-a67c``), and then open brower to login 192.168.4.1 for setting your networkable WIFI name and password. (Now, my networkable wifi is named ``MasterHax_5G``) + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_wifi_password.png + +After connecting wifi successfully, reset your core according to the prompt on ``192.168.4.1`` + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/connect_wifi_successfully.png + +Once you've reset M5Stack Core, the upload buttom, you will arrive at a screen with a QR code which you scan with your phone or tablet to start programming on your mobile device. If you want to program the M5 from your computer, enter the url shown at the top of the screen flow.m5stack.com + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg + +.. note:: + Similarly, if you want another networkable WIFI AP to connect with Core, press the SETUP buttom while core was power-up. + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/change_wifi.jpg diff --git a/en/get-started/index.rst b/en/get-started/index.rst index db104c70..0ff91c90 100644 --- a/en/get-started/index.rst +++ b/en/get-started/index.rst @@ -48,7 +48,7 @@ If you have one of ESP32 development boards listed below, click the correspondin .. _M5Stack Core: m5stack_core_get_started.html .. |M5GO| image:: ../../_static/getting_started_pics/m5go.jpg -.. _M5GO: m5stack_core_get_started_MicroPython_Windows.html +.. _M5GO: m5stack_core_get_started.html .. |M5CAMERA| image:: ../../_static/getting_started_pics/m5camera.jpg .. _M5CAMERA: get-started-ESP32CAM.html @@ -64,11 +64,10 @@ If you have one of ESP32 development boards listed below, click the correspondin :maxdepth: 1 :hidden: - M5Stack Core with Arduino IDE - M5Stack Core with Micropython - M5GO + M5Stack Core + M5GO ESP32CAM - M5Stack STEPMOTOR Module + STEPMOTOR Module M5Bala Which programming mode you like @@ -99,3 +98,6 @@ Related Documents :maxdepth: 1 establish_serial_connection + how_to_burn_firmware_en + how_to_connect_wifi_using_core + upgrade_m5stack_lib \ No newline at end of file diff --git a/en/get-started/m5stack_core_get_started.md b/en/get-started/m5stack_core_get_started.md index 42ec66e5..e88ac210 100644 --- a/en/get-started/m5stack_core_get_started.md +++ b/en/get-started/m5stack_core_get_started.md @@ -1,3 +1,3 @@ # M5Stack Core Get Started -### Pick up your OS below +### Pick up your programming mode below for getting started diff --git a/en/get-started/m5stack_core_get_started.rst b/en/get-started/m5stack_core_get_started.rst index 7fe1d2b7..65f706d1 100644 --- a/en/get-started/m5stack_core_get_started.rst +++ b/en/get-started/m5stack_core_get_started.rst @@ -14,4 +14,4 @@ Pick up your programming mode below for getting started .. |Blockly/MicroPython| image:: ../../_static/getting_started_pics/blockly_and_micropython.png .. _Arduino: m5stack_core_get_started_Arduino_MacOS.html -.. _Blockly/MicroPython: m5stack_core_get_started_MicroPython_MacOS.html +.. _Blockly/MicroPython: m5stack_core_get_started_MicroPython.html diff --git a/en/get-started/m5stack_core_get_started_Arduino_MacOS.rst b/en/get-started/m5stack_core_get_started_Arduino_MacOS.rst index 89409563..e49618a0 100644 --- a/en/get-started/m5stack_core_get_started_Arduino_MacOS.rst +++ b/en/get-started/m5stack_core_get_started_Arduino_MacOS.rst @@ -7,7 +7,7 @@ M5Stack Core Get Started(MacOS, Arduino) .. _here: m5stack_core_get_started_Arduino_Windows.html CONTENT -~~~~~~~ +>>>>>>> 1. `Setting Environment <#setting-environment>`__ @@ -20,7 +20,7 @@ CONTENT 2. `Upload an Example Sketch <#upload-an-example-sketch>`__ Setting Environment -~~~~~~~~~~~~~~~~~~~ +>>>>>>>>>>>>>>>>>>>> .. note:: @@ -29,7 +29,7 @@ Setting Environment .. _establish_serial_connection: establish_serial_connection.html 1. Install ``Arduino IDE`` -^^^^^^^^^^^^^^^^^^^^^^^^^^ +:::::::::::::::::::::::::::: If you don't already have the Arduino IDE installed, make sure to install it. You can download it here @@ -38,7 +38,7 @@ https://www.arduino.cc/en/Main/Software .. image:: ../../_static/getting_started_pics/m5stack_core/macOS_download_arduino_ide.png 2. ESP32 Board Support -^^^^^^^^^^^^^^^^^^^^^^ +:::::::::::::::::::::::::::: Open Terminal (if you've never used the terminal before, it can be found in Applications > Utilities > Terminal) and execute the following @@ -71,7 +71,7 @@ necessary! ``version (_ssl.c:590) when running python get.py``, try ``python3`` instead of ``python`` and restart the Arduino IDE. 3. Install M5Stack Library -^^^^^^^^^^^^^^^^^^^^^^^^^^ +:::::::::::::::::::::::::::: Start up the Arduino IDE, then Select ``Sketch``->``Include Library``->``Manage Libraries...`` Type @@ -83,10 +83,10 @@ M5Stack Core development kit" and install it. .. image:: ../../_static/getting_started_pics/m5stack_core/macOS_search_m5stack.png Upload an Example Sketch -~~~~~~~~~~~~~~~~~~~~~~~~ +>>>>>>>>>>>>>>>>>>>>>>>>> 1. Select your board and the serial port -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +:::::::::::::::::::::::::::::::::::::::::::::::::::::::: After connecting the M5 to your computer via the USB cable. Start up the Arduino IDE, and click ``Tools -> Boards -> M5Stack-Core-ESP32`` to @@ -101,7 +101,7 @@ Core is connected to. It should be called something like .. image:: ../../_static/getting_started_pics/m5stack_core/macOS_select_serial_port.png 2. Select an example -~~~~~~~~~~~~~~~~~~~~ +:::::::::::::::::::::::::::: Click ``File-> Examples``. there are some test programs in ``M5Stack->`` @@ -114,7 +114,7 @@ Compile and upload it, the M5Stack screen will show "Hello World!" .. image:: ../../_static/getting_started_pics/m5stack_core/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 diff --git a/en/get-started/m5stack_core_get_started_Arduino_Windows.rst b/en/get-started/m5stack_core_get_started_Arduino_Windows.rst index 5c9fe68c..f4f0c8d9 100644 --- a/en/get-started/m5stack_core_get_started_Arduino_Windows.rst +++ b/en/get-started/m5stack_core_get_started_Arduino_Windows.rst @@ -1,5 +1,5 @@ -M5Stack Core Get Started(Windows, Arduino) -=========================================== +M5Stack-Core Get Started(Windows, Arudino) +========================================== .. note:: If your OS is MacOS, please click `here`_. @@ -11,13 +11,13 @@ CONTENT 1. `Setting Environment <#setting-environment>`__ - - `1. Install Arduino IDE <#1-install-arduino-ide>`__ + - `1. Install Git <#1-install-git>`__ - - `2. Download Toolchain <#2-download-toolchain>`__ + - `2. Install Arduino IDE <#2-install-arduino-ide>`__ - - `3. ESP32 Toolchain <#3-esp32-toolchain>`__ + - `3. Download Arduino-ESP32 Support <#3-download-arduino-esp32-support>`__ - - `4. Download M5Stack Lib <#4-download-m5stack-lib>`__ + - `4. Download the M5Stack Lib <#4-download-the-m5stack-lib>`__ 2. `Example <#example>`__ @@ -27,108 +27,83 @@ CONTENT .. _upgrade M5Stack Lib: upgrade_m5stack_lib.html - Setting Environment ~~~~~~~~~~~~~~~~~~~ .. note:: + Before setting the development environment, we suggest you confirm whether the USB driver has installed. If not, please view this article `establish_serial_connection`_. - Before setting the development environment, we suggest you confirm whether the USB driver has installed. If not, please visit this link `establish_serial_connection`_. +.. _establish_serial_connection: https://github.com/m5stack/m5stack-documentation/blob/master/en/get-started/establish_serial_connection.md -.. _establish_serial_connection: establish_serial_connection.html - -1. Install ``Arduino IDE`` -^^^^^^^^^^^^^^^^^^^^^^^^^^ - -*download address* https://www.arduino.cc/en/Main/Software - -.. image:: ../../_static/screenshots/arduino_cc_package.png - -modified the path of Arduino as ``D:\Program Files`` as shown below - -.. image:: ../../_static/screenshots/select_arduino_install_path.png - -Now my path of Arduino is ``D:\Program Files\Arduino`` - -.. image:: ../../_static/screenshots/arduino_path.png - -2. Download Toolchain -^^^^^^^^^^^^^^^^^^^^^ - -（Now my path of Arduino is ``D:\Program Files\Arduino``\ ） - -Enter the path ``D:\Program Files\Arduino\hareware`` via the terminal of -Windows - -Execute the following commands on the terminal of Windows > \* new a -directory named ``espressif``, then enter this directory - -mkdir espressif && cd espressif - -.. image:: ../../_static/screenshots/mkdir_espressif.png - - - - clone ``esp32 idf`` at the directory named ``esp32`` - -git clone --recursive https://github.com/espressif/arduino-esp32.git -esp32 - -.. image:: ../../_static/screenshots/download_idf.png - -3. ESP32 Toolchain +1. Install ``Git`` ^^^^^^^^^^^^^^^^^^ -Enter the path -``D:\Program Files\arduino\hardware\espressif\esp32\tools`` double click -on ``get.exe`` +If you has installed ``Git``, please following setp 2 straight. Otherwise, download the client of `Git `__ and install it. -.. image:: ../../_static/screenshots/select_get_exe_file.png +2. Install ``Arduino IDE`` +^^^^^^^^^^^^^^^^^^^^^^^^^^ -.. image:: ../../_static/screenshots/download_xtensa_tools.png +*download address* -4. Download the M5Stack Lib via Arduino IDE -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +https://www.arduino.cc/en/Main/Software -Open Arduino IDE, then Select -``Sketch``->``Include Library``->``Manage Libraries...`` Search -``M5Stack`` and install it +.. image:: ../../_static/getting_started_pics/m5stack_core/arduino_cc_package.png -.. image:: ../../_static/screenshots/select_arduino_lib.png +Double click to install Arduino IDE -.. image:: ../../_static/screenshots/download_m5stack_lib.png +.. image:: ../../_static/getting_started_pics/m5stack_core/select_arduino_install_path.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/install_arduino_2.png + +3. Download Arduino-ESP32 Support +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +Download the batch file `download\_arduino\_esp32\_support.bat `__, and execte it as Administrator. + +.. image:: ../../_static/getting_started_pics/m5stack_core/execute_batch_file.png + +Then a new window will appear as shown below. Please waiting for cloning... + +.. image:: ../../_static/getting_started_pics/m5stack_core/execute_batch_file_for_downloading_arduino_esp32.png + +As shown below, it means Arduino-ESP32 Support has completed. + +.. image:: ../../_static/getting_started_pics/m5stack_core/download_arduino_esp32_completed.png + +4. Download the M5Stack Lib +^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +Open Arduino IDE, then Select ``Sketch`` -> ``Include Library`` -> ``Manage Libraries...`` Search ``M5Stack`` and install it + +.. image:: ../../_static/getting_started_pics/m5stack_core/install_m5stack_lib_01.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/install_m5stack_lib_02.png + +.. note:: + + As shown below, it means you need update + + .. image:: ../../_static/getting_started_pics/m5stack_core/update_m5stack_lib.png Example ~~~~~~~ -The USB cable connects to M5Stack Core, then select your serial port -which is connected M5Stack Core. Select a demo example, compile and -upload +The USB cable connects to M5Stack Core, then select your serial port which is connected M5Stack Core. Select a demo example, compile and upload. -1. Open a example likes ``FactoryTest.ino`` -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +1. Execute a example likes ``FactoryTest.ino`` +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -.. image:: ../../_static/screenshots/select_demo.png +Select your board name, baudrate, the specified serial port: M5Stack-Core-ESP32, 921600, COM4(Now, my serial port which is connected with PC is ``COM4``) -.. note:: +.. image:: ../../_static/getting_started_pics/m5stack_core/select_board_baudrate_serial_port.png - If you got a situation which appears ``INCOMPATIBLE`` when opening a M5Stack example as shown below. +Then select an example likes ``FactoryTest.ino`` - .. image:: ../../_static/getting_started_pics/m5stack_core/incompatible.jpg +.. image:: ../../_static/getting_started_pics/m5stack_core/select_an_example.png +Upload it - Please select ``Tools -> Boards -> M5Stack-Core-ESP32`` - - .. image:: ../../_static/getting_started_pics/m5stack_core/select_m5stack_core_board.jpg - - -Comfire your board name, baudrate, the specified serial port: -M5Stack-Core-ESP32、921600、COM3 - -.. image:: ../../_static/screenshots/select_board_and_com.png - -After upload seccessfully, open the Serial Monitor - -.. image:: ../../_static/screenshots/FactoryTest_result.png +.. image:: ../../_static/getting_started_pics/m5stack_core/arduino_upload.png 2. New a M5Stack program ^^^^^^^^^^^^^^^^^^^^^^^^ @@ -157,5 +132,4 @@ Copy the below code to my\_test.ino } -compile it and upload, the M5Stack screen will show "Hello World!" -"M5Stack is running successfully!" +compile it and upload, the M5Stack screen will show "Hello World!" "M5Stack is running successfully!" diff --git a/en/get-started/m5stack_core_get_started_MicroPython.md b/en/get-started/m5stack_core_get_started_MicroPython.md new file mode 100644 index 00000000..e9857f97 --- /dev/null +++ b/en/get-started/m5stack_core_get_started_MicroPython.md @@ -0,0 +1,83 @@ +# M5Stack Core Get Started(Blockly/MicroPython) + +**This article will guide you for getting started with Blockly(or MicroPython) through [UIFlow](flow.m5stack.com). (If your M5Stack Core was not burnt with a firmware named `M5Flow` in advance, please visit this article `How to burn firmware` for burnning)** + +**First we need to know how to upload code onto the M5. After powering on Core and pressing the red button on the left hand side of the M5，you will be greeted by this screen.** + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page.png) + +**After pressing the upload button you will arrive at a screen with a QR code which you scan with your phone or tablet to start programming on your mobile device. If you want to program the M5 from your computer, enter the url shown at the top of the screen `flow.m5stack.com`** + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg) + +*After a few seconds if nothing is pressed the M5 will automatically run the code that was previously uploaded. If we want to upload new code we have to make sure we press the A button which is the upload button on this menu before the M5 boots the code in it’s memory.* + +***Note:*** +***But if it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access `flow.m5stack.com`, you need visit this article for setting wifi `How to connect wifi using Core`.*** + + +### Program with Core + +Visit the [WebIDE](flow.m5stack.com), it will show as following figure. + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png) + +Whenever we want to upload code to the M5 from UI flow we need to make sure the device is paired. + +So press the little gear in the top right corner of the screen and enter the `APIKEY` which shows on the screen of M5(Now, my APIKEY is `9C6469`) and click `SAVE`. + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png) + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png) + +Then M5Flow will connect with this Core. + +At the moment, you can draw a UI or program it through Blockly(or Python) as shown below. + +***Note:*** +Once you've run a program, + +**1. Draw a UI** + +Drag 4 kinds of elements into `M5Stack Core` UI and click `Run` buttom on M5UI.Flow + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png) + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png) + +**2. Program with Blockly** + +Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom on M5UI.Flow + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png) + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png) + +**3. Program with MicroPython** + + + +### Play a song now + +Now, let's make a music player and play a song in a few minutes using M5Stack Core. + +Drag a loop, music and timer block into the coding area from the components section. + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png) + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_music_block.png) + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_timer_block.png) + +Then set parameters of `music block` and `timer block` as shown belown. + +![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png) + +Now, run it and enjoy your musical work! + +##### Also, here some simple pratices and a workshop for you being familiar with M5. +* Blockly +https://m5stack.readthedocs.io/en/latest/get-started/practices_blockly.html +* MicroPython +https://m5stack.readthedocs.io/en/latest/get-started/practices_micropython.html +* WorkShop diff --git a/en/get-started/m5stack_core_get_started_MicroPython.rst b/en/get-started/m5stack_core_get_started_MicroPython.rst new file mode 100644 index 00000000..9d597a04 --- /dev/null +++ b/en/get-started/m5stack_core_get_started_MicroPython.rst @@ -0,0 +1,106 @@ +M5Stack Core Get Started(Blockly/MicroPython) +============================================= + +This article will guide you for getting started with Blockly(or MicroPython) through `UIFlow`_. + +.. _UIFlow: http://flow.m5stack.com + +.. note:: + + If your M5Stack Core was not burnt with a firmware in advance, please visit this article `How to burn firmware`_ for burnning. + + .. _how to burn firmware: how_to_burn_firmware_en.html + + +**First we need to know how to upload code onto the M5. After powering on Core and pressing the red button on the left hand side of the M5，you will be greeted by this screen.** + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page.png + +**After pressing the upload button you will arrive at a screen with a QR code which you scan with your phone or tablet to start programming on your mobile device. If you want to program the M5 from your computer, enter the url shown at the top of the screen flow.m5stack.com** + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg + +*After a few seconds if nothing is pressed the M5 will automatically run the code that was previously uploaded. If we want to upload new code we have to make sure we press the A button which is the upload button on this menu before the M5 boots the code in it’s memory.* + +.. note:: + + But if it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access ``flow.m5stack.com``, you need visit this article for setting wifi `How to connect wifi using Core`_. + + .. _How to connect wifi using Core: how_to_connect_wifi_using_core.html + +Program with Core +~~~~~~~~~~~~~~~~~ + +Visit the `WebIDE`_, it will show as following figure. + +.. _WebIDE: http://flow.m5stack.com + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png + +Whenever we want to upload code to the M5 from UI flow we need to make sure the device is paired. + +So press the little gear in the top right corner of the screen and enter the ``APIKEY`` which shows on the screen of M5(Now, my APIKEY is ``9C6469``) and click ``SAVE``. + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png + +Then M5Flow will connect with this Core. + +At the moment, you can draw a UI or program it through Blockly(or Python) as shown below. + +.. note:: + Once you've run another program + +**1. Draw a UI** + +Drag 4 kinds of elements into ``M5Stack Core`` UI and click ``Run`` buttom on M5UI.Flow + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png + +**2. Program with Blockly** + +Drag some blocks named ``Set emoji map in0`` from ``Emoji`` class and click ``Run`` buttom on M5UI.Flow + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png + +**3. Program with MicroPython** + +Play a song now +~~~~~~~~~~~~~~~ + +Now, let's make a music player and play a song in a few minutes using M5Stack Core. + +Drag a loop, music and timer block into the coding area from the components section. + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_music_block.png + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_timer_block.png + +Then set parameters of ``music block`` and ``timer block`` as shown belown + +.. image:: ../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png + +Now, run it and enjoy your musical work! + +.. note:: + + **Also, here some simple pratices and workshop for you being familiar with M5.** + + - Blockly + + https://m5stack.readthedocs.io/en/latest/get-started/practices\_blockly.html + + - MicroPython + + https://m5stack.readthedocs.io/en/latest/get-started/practices\_micropython.html + + - WorkShop - if you want to participate our workshop, contact us through support email. + + support@m5stack.com diff --git a/en/get-started/m5stack_core_get_started_MicroPython_MacOS.md b/en/get-started/m5stack_core_get_started_MicroPython_MacOS.md deleted file mode 100644 index e69de29b..00000000 diff --git a/en/get-started/m5stack_core_get_started_MicroPython_MacOS.rst b/en/get-started/m5stack_core_get_started_MicroPython_MacOS.rst deleted file mode 100644 index a4355b45..00000000 --- a/en/get-started/m5stack_core_get_started_MicroPython_MacOS.rst +++ /dev/null @@ -1,7 +0,0 @@ -M5Stack Core Get Started(MacOS, MicroPython) -======================================== - -.. note:: - If your OS is Windows, please click `here`_. - -.. _here: m5stack_core_get_started_MicroPython_Windows.html diff --git a/en/get-started/m5stack_core_get_started_MicroPython_Windows.md b/en/get-started/m5stack_core_get_started_MicroPython_Windows.md deleted file mode 100644 index 5f887c35..00000000 --- a/en/get-started/m5stack_core_get_started_MicroPython_Windows.md +++ /dev/null @@ -1,121 +0,0 @@ -# M5Stack Core Get Started(Windows, MicroPython) - -### CONTENT - -1. [Burn Firmware](#Burn-Firmwared) - - - [1. Download Firmware](#1-download-firmware) - - - [2. Burn to M5Stack](#2-Burn-to-M5Stack) - -1. [Connect Wi-Fi](#connect-wi-fi) - -3. [Binding device](#binding-device) - -4. [Coding MicroPython](#coding-micropython) - -#### Note: -*Before setting the development environment, we suggest you confirm whether the USB driver has installed. If not, please visit this link `establish serial connection`.* - -### Burn Firmware - -If you do not sure your device has been burnt with `M5Flow` firmware, please view this article `How to burn firmware`. - -#### Burn to M5Stack - -After resetting your device, your device will beep and then press the third button(C button) on the device, and choice `Link Server: flow`. - -At that moment, the device creates an access AP and prompt you to connect to it. - -![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/5.jpg) - - -***Windows*** - -open Flash Download Tools([点击下载](https://www.espressif.com/sites/default/files/tools/flash_download_tools_v3.6.4.rar)) apply by Espressif, choose `ESP32 DownloadTool` option and execute three steps ( *choose firmware file, your serial port, erase and program flash* ) as shown below - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/windows_download_firmware.png) - - - -***MacOS/Linux*** - -*1. Check port on Linux and MacOS* - - To check the device name for the serial port of your M5Stack board (or external converter dongle), run this command two times, first with the board / dongle unplugged, then with plugged in. The port which appears the second time is the one you need: - - Linux - - ``` - ls /dev/tty* - ``` - - MacOS - - ``` - ls /dev/cu.* - ``` - - -*2. Adding user to `dialout` on Linux* - -The currently logged user should have read and write access the serial port over USB. On most Linux distributions, this is done by adding the user to `dialout` group with the following command: - - ``` - sudo usermod -a -G dialout $USER - ``` -Now, my serial port named `ttyUSB0` - -*3. Download M5Cloud firmware to M5Stack board* - - Installing esptool： - ``` - pip install esptool - ``` - - Erase flash on M5Stack: - ``` - esptool.py --chip esp32 --port /dev/ttyUSB0 erase_flash - ``` - - Download firmware to M5Stack: - ``` - esptool.py --chip esp32 --port /dev/ttyUSB0 write_flash --flash_mode dio -z 0x1000 m5cloud-20180516-v0.4.0.bin - ``` - -### Connect Wi-Fi - - -Mobile Phone or PC connect to M5Stack AP(like `M5Stack-a67c`), and then open brower to login 192.168.4.1 setting your LAN SSID and Password - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/m5stack_connet_wifi.png) - -### Binding device - -*1.login http://io.m5stack.com and register your own account(or login your account)* - -*2. press `Device->Add` buttom on M5Cloud IDE for binding M5Stack board to your account* - -*3. Input the Check Code for the M5Stack screen display，Check Code is random, after 60s will refresh* - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/WebIDE_check_code.png) - -### Coding MicroPython - -*1. create a new python project* - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/create_a_new_project.png) - -*2. write your own code and press `Upload & Run` buttom on the M5Cloud IDE* - -copy below code to `main.py` file and press `Upload & Run` - -``` python -from m5stack import lcd - -lcd.clear() -lcd.setCursor(0, 0) -lcd.setColor(lcd.WHITE) - -lcd.print("Hello World!") - -``` - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/display_hello_world.png) diff --git a/en/get-started/m5stack_core_get_started_MicroPython_Windows.rst b/en/get-started/m5stack_core_get_started_MicroPython_Windows.rst deleted file mode 100644 index b26cf93c..00000000 --- a/en/get-started/m5stack_core_get_started_MicroPython_Windows.rst +++ /dev/null @@ -1,156 +0,0 @@ -M5Stack Core Get Started(Windows, MicroPython) -============================================== - -CONTENT -~~~~~~~ - -1. `Burn Firmware <#Burn-Firmwared>`__ - - - `1. Download Firmware <#1-download-firmware>`__ - - - `2. Burn to M5Stack <#2-Burn-to-M5Stack>`__ - -2. `Connect Wi-Fi <#connect-wi-fi>`__ - -3. `Binding device <#binding-device>`__ - -4. `Coding MicroPython <#coding-micropython>`__ - -.. note:: - Before programing through Blockly(or MicroPython), you need to burn a appropriate firmware to your board follwing this article `How to burn firmare`_. - -.. _How to burn firmare: how_to_burn_firmware_en.html - -Connect the LAN -~~~~~~~~~~~~~~~~ - -.. note:: - - M5Flow和M5GO连接wifi的界面和步骤完全不一样 - 输入checkcode也是不一样 - 连接也是不一样 - - m5cloud m5go m5flow - -Burn Firmware -~~~~~~~~~~~~~ - -1. Download Firmware -^^^^^^^^^^^^^^^^^^^^ - -https://github.com/m5stack/M5Cloud/tree/master/firmwares - -Now, the M5Cloud firmware I downloaded named -``m5cloud-20180516-v0.4.0.bin`` and it saved at ``~/smbshare`` - -2. Burn to M5Stack -^^^^^^^^^^^^^^^^^^ - -+-----------+-----------+-----------+ -| |image| | |image| | |image| | -+===========+===========+===========+ -| Windows | Linux | MacOS | -+-----------+-----------+-----------+ - -***Windows*** - -open Flash Download -Tools(\ `点击下载 `__) -apply by Espressif, choose ``ESP32 DownloadTool`` option and execute -three steps ( *choose firmware file, your serial port, erase and program -flash* ) as shown below - -.. figure:: ../../_static/M5Stack_MicroPython_UserGuidePictures/windows_download_firmware.png - :alt: image - - image -***MacOS/Linux*** - -*1. Check port on Linux and MacOS* - -To check the device name for the serial port of your M5Stack board (or -external converter dongle), run this command two times, first with the -board / dongle unplugged, then with plugged in. The port which appears -the second time is the one you need: - -Linux - -``ls /dev/tty*`` - -MacOS - -``ls /dev/cu.*`` - -*2. Adding user to ``dialout`` on Linux* - -The currently logged user should have read and write access the serial -port over USB. On most Linux distributions, this is done by adding the -user to ``dialout`` group with the following command: - -``sudo usermod -a -G dialout $USER`` Now, my serial port named -``ttyUSB0`` - -*3. Download M5Cloud firmware to M5Stack board* - Installing esptool： -``pip install esptool`` - Erase flash on M5Stack: -``esptool.py --chip esp32 --port /dev/ttyUSB0 erase_flash`` - Download -firmware to M5Stack: -``esptool.py --chip esp32 --port /dev/ttyUSB0 write_flash --flash_mode dio -z 0x1000 m5cloud-20180516-v0.4.0.bin`` - -Connect Wi-Fi -~~~~~~~~~~~~~ - -Mobile Phone or PC connect to M5Stack AP(like ``M5Stack-a67c``), and -then open brower to login 192.168.4.1 setting your LAN SSID and Password - -.. figure:: ../../_static/M5Stack_MicroPython_UserGuidePictures/m5stack_connet_wifi.png - :alt: image - - image -Binding device -~~~~~~~~~~~~~~ - -*1.login http://io.m5stack.com and register your own account(or login -your account)* - -*2. press ``Device->Add`` buttom on M5Cloud IDE for binding M5Stack -board to your account* - -*3. Input the Check Code for the M5Stack screen display，Check Code is -random, after 60s will refresh* - -.. figure:: ../../_static/M5Stack_MicroPython_UserGuidePictures/WebIDE_check_code.png - :alt: image - - image -Coding MicroPython -~~~~~~~~~~~~~~~~~~ - -*1. create a new python project* - -.. figure:: ../../_static/M5Stack_MicroPython_UserGuidePictures/create_a_new_project.png - :alt: image - - image -*2. write your own code and press ``Upload & Run`` buttom on the M5Cloud -IDE* - -copy below code to ``main.py`` file and press ``Upload & Run`` - -.. code:: python - - from m5stack import lcd - - lcd.clear() - lcd.setCursor(0, 0) - lcd.setColor(lcd.WHITE) - - lcd.print("Hello World!") - -.. figure:: ../../_static/M5Stack_MicroPython_UserGuidePictures/display_hello_world.png - :alt: image - - image - -.. |image| image:: ../../_static/windows-logo.png -.. |image| image:: ../../_static/linux-logo.png -.. |image| image:: ../../_static/macos-logo.png diff --git a/en/get-started/m5stack_core_get_started_MicroPython_Windows_1.md b/en/get-started/m5stack_core_get_started_MicroPython_Windows_1.md deleted file mode 100644 index b710470c..00000000 --- a/en/get-started/m5stack_core_get_started_MicroPython_Windows_1.md +++ /dev/null @@ -1,144 +0,0 @@ -# M5Stack Core Get Started(Windows, Blockly/MicroPython) - -This article will guide you for getting started with Blockly(or MicroPython) through [UIFlow](flow.m5stack.com) - -### CONTENT - -1. [Burn Firmware](#Burn-Firmwared) - - - [1. Download Firmware](#1-download-firmware) - - - [2. Burn to M5Stack](#2-Burn-to-M5Stack) - -1. [Connect Wi-Fi](#connect-wi-fi) - -3. [Binding device](#binding-device) - -4. [Coding MicroPython](#coding-micropython) - - -### Burn Firmware -#### 1. Download Firmware -https://github.com/m5stack/M5Cloud/tree/master/firmwares - -Now, the M5Cloud firmware I downloaded named `m5cloud-20180516-v0.4.0.bin` -and it saved at `~/smbshare` - -#### 2. Burn to M5Stack -![image](../../_static/windows-logo.png) | ![image](../../_static/linux-logo.png) | ![image](../../_static/macos-logo.png) ----|---|--- -Windows | Linux | MacOS - -***Windows*** - -open Flash Download Tools([点击下载](https://www.espressif.com/sites/default/files/tools/flash_download_tools_v3.6.4.rar)) apply by Espressif, choose `ESP32 DownloadTool` option and execute three steps ( *choose firmware file, your serial port, erase and program flash* ) as shown below - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/windows_download_firmware.png) - - - -***MacOS/Linux*** - -*1. Check port on Linux and MacOS* - - To check the device name for the serial port of your M5Stack board (or external converter dongle), run this command two times, first with the board / dongle unplugged, then with plugged in. The port which appears the second time is the one you need: - - Linux - - ``` - ls /dev/tty* - ``` - - MacOS - - ``` - ls /dev/cu.* - ``` - - -*2. Adding user to `dialout` on Linux* - -The currently logged user should have read and write access the serial port over USB. On most Linux distributions, this is done by adding the user to `dialout` group with the following command: - - ``` - sudo usermod -a -G dialout $USER - ``` -Now, my serial port named `ttyUSB0` - -*3. Download M5Cloud firmware to M5Stack board* - - Installing esptool： - ``` - pip install esptool - ``` - - Erase flash on M5Stack: - ``` - esptool.py --chip esp32 --port /dev/ttyUSB0 erase_flash - ``` - - Download firmware to M5Stack: - ``` - esptool.py --chip esp32 --port /dev/ttyUSB0 write_flash --flash_mode dio -z 0x1000 m5cloud-20180516-v0.4.0.bin - ``` - -### - -Visit the [WebIDE](flow.m5stack.com), it will show as following figure. - -![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png) - -Input the `APIKEY` which shows on the screen of M5Stack Core(Now, my APIKEY is `9C6469`) and click `SAVE`, that means your PC will bond with this Core so that you do not need to input `9C6469` again next time. - -![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png) - -![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png) - -Then connect it - -![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/connecting.png) - -At the moment, you can draw a UI or program it through Blockly(or Python) as shown below. - - -**Draw a UI** - -![image](../../_static/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png) - - -### Connect Wi-Fi - - -Mobile Phone or PC connect to M5Stack AP(like `M5Stack-a67c`), and then open brower to login 192.168.4.1 setting your LAN SSID and Password - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/m5stack_connet_wifi.png) - -### Binding device - -*1.login http://io.m5stack.com and register your own account(or login your account)* - -*2. press `Device->Add` buttom on M5Cloud IDE for binding M5Stack board to your account* - -*3. Input the Check Code for the M5Stack screen display，Check Code is random, after 60s will refresh* - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/WebIDE_check_code.png) - -### Coding MicroPython - -*1. create a new python project* - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/create_a_new_project.png) - -*2. write your own code and press `Upload & Run` buttom on the M5Cloud IDE* - -copy below code to `main.py` file and press `Upload & Run` - -``` python -from m5stack import lcd - -lcd.clear() -lcd.setCursor(0, 0) -lcd.setColor(lcd.WHITE) - -lcd.print("Hello World!") - -``` - -![image](../../_static/M5Stack_MicroPython_UserGuidePictures/display_hello_world.png)