m5/m5-docs
0
0
Fork 0
mirror of https://github.com/m5stack/m5-docs.git synced 2026-05-20 10:23:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Update: update quickstart docs

Browse Source
This commit is contained in:
塩入孔章
2019-03-19 19:39:08 +08:00
parent d9b0cac3bf
commit 6af8bfc1aa
7 changed files with 204 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md
+1 -1
View File
@@ -62,7 +62,7 @@ Open your browser, enter the official website of M5Stack https://m5stack.com/do
<img src="assets/img/getting_started_pics/establish_serial_connection/9.png">
#### (4) Check the serial port number `COMx`
#### (3) Check the serial port number `/dev/tty.SLAB_USBtoUART`
Comfirm if the USB to Serial Driver was successfully installed already:
docs/en/quick_start/m5core/m5stack_core_get_started_MicroPython.md
+2 -2
View File
@@ -102,7 +102,7 @@ Turn on Wi-Fi on your phone or computer, then connect to the M5Core hotspot `AP`
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_05.png">
#### (2) Connect to Wi-Fi
#### (3) Connect to Wi-Fi
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.
@@ -118,7 +118,7 @@ The status of the small dot on the screen:
## 4. Program
#### (2) 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
docs/ja/faq.md
+16 -14
View File
@@ -4,7 +4,7 @@
## Core
### Q. 各M5Coreの違いを教えてください。
### Q1. 各M5Coreの違いを教えてください。
A. 各M5Coreの主な違いは、内部ハードウェアの構成とキットのセット内容です。 基本モデルから上位モデルになるにつれ、姿勢センサーMPU9250の追加、FLASHの増量、PSRAMの追加などの違いがあります。 詳しくは[こちら](https://github.com/m5stack/M5-Schematic/blob/master/Core/hardware_difference_between_cores_ja.md)をご覧ください。
@@ -14,7 +14,7 @@ A. 各M5Coreの主な違いは、内部ハードウェアの構成とキット
---
### Q. 内蔵スピーカーをどうしたらオフにできますか？
### Q2. 内蔵スピーカーをどうしたらオフにできますか？
A. Setup()関数の中に以下の命令を追記してください。
@@ -24,19 +24,19 @@ dacWrite(M5STACKFIRE_SPEAKER_PIN, 0);
---
### Q. M5Coreとモジュールを積み重ねたあとだと、ソフトウェアを書き込みできません。（例えばUSB Host モジュール）
### Q3. M5Coreとモジュールを積み重ねたあとだと、ソフトウェアを書き込みできません。（例えばUSB Host モジュール）
A. GPIO0 ピンとM5CoreのM-Busとの接触が悪いために起きている可能性があります。しっかりと挿さっているか確認してください。どうしてもダメな場合は、自分でGPIO０ピンをGNDにプルダウンしてみてください。
---
### Q. M5GOと[M5GO bottom](ja/base/m5go_bottom)を組み合わせた時に、バッテリは満充電のはずなのに、電源が入りません。
### Q4. M5GOと[M5GO bottom](ja/base/m5go_bottom)を組み合わせた時に、バッテリは満充電のはずなのに、電源が入りません。
A. スタッキング後、ベース上のM-Busの左下隅のBATTERYピンがM5Coreに正しく接続されていない可能性があります。これは製造時のはんだ付け位置のずれが原因です。バスピンの位置がわずかに偏っていると、BATTERYピンがM5Coreとうまく接触しないことがあります。再度はんだ付けをして直す必要があります。自分で直せない方は、購入元または @M5Stack にご相談ください。
---
### Q. 書き込み時に以下の図のようなエラーになってしまいます。
### Q5. 書き込み時に以下の図のようなエラーになってしまいます。
<img src="assets/img/faq/faq_03.png">
@@ -46,56 +46,58 @@ A. PCによって書き込みができない場合があるようです。そこ
<img src="assets/img/faq/faq_06.png" width="80%" height="80%">
<img src="assets/img/faq/faq_07.png" width="100%" height="100%">
---
### Q. ESP32で取り扱いに注意しないといけないピンはありますか？
### Q6. ESP32で取り扱いに注意しないといけないピンはありますか？
A. GPIO34-39までは入力専用です。出力には使用できません。その他は入出力に使用できます。
---
### Q. M5Stick Gray（MPU9250あり）で工場出荷時のファームウェアを起動し、ボタンAを押すとNoと表示されますが、これはMPU9250がないということですか？
### Q7. M5Stick Gray（MPU9250あり）で工場出荷時のファームウェアを起動し、ボタンAを押すとNoと表示されますが、これはMPU9250がないということですか？
A. 再起動してみてください。認識されるはずです。
## Unit
### Q. M5Stack向けの各カメラの違いはなんですか？
### Q1. M5Stack向けの各カメラの違いはなんですか？
A. 各カメラの主な違いは、いくつかのピンの位置(OV2640-SIOD、OV2640-VSYNC, GROVEポート)、 レンズタイプ、 PSRAMの有無があります。詳しくは[こちら](https://shimo.im/sheets/gP96C8YTdyjGgKQC/09fd4)をご覧ください。
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/camera_comparison/camera_comparison_ja.png">
### Q. WiFiを用いて、カメラの画像をスマートフォンに送信できますが、どの程度の距離まで大丈夫ですか？
### Q2. WiFiを用いて、カメラの画像をスマートフォンに送信できますが、どの程度の距離まで大丈夫ですか？
A. M5Cameraで実験したところ、室内では約20メートルでした。
## 共通
### Q. USB Type-C ケーブルに表裏はありますか？
### Q1. USB Type-C ケーブルに表裏はありますか？
A. 仕様上は表裏の区別はありませんが、たまに接触が悪い場合があるようです。その場合は表裏を逆に差し替えてみてください。
---
### Q. ArduinoでI2Cがうまく動きません。
### Q2. ArduinoでI2Cがうまく動きません。
A. Arduino IDEのボードマネージャから最新のesp32ライブラリ(>=1.0.1)を導入してください。
---
### Q. UIFlowのソースは公開されていますか？
### Q3. UIFlowのソースは公開されていますか？
A. 現在公開はされていません。もしかしたら将来公開されるかもしれません。
---
### Q. XXX の使い方がわかりません。
### Q4. XXX の使い方がわかりません。
A. Twitterで [@M5Stack](https://twitter.com/M5Stack) 宛てにメッセージをお送りください。
---
### Q. 買った時から XXX が壊れています。
### Q5. 買った時から XXX が壊れています。
A. お買い求め担ったお店にお問い合わせいただくか、またはTwitterで [@M5Stack](https://twitter.com/M5Stack) 宛てにメッセージをお送りください。
docs/ja/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md
+81 -29
View File
@@ -6,69 +6,121 @@
## テキストチュートリアル
1. [環境設定](#環境設定)
1. [Arduino IDE インストール](#_1-arduino-ide-インストール)
2. [USBシリアル変換ドライバ インストール](#_2-USBシリアル変換ドライバ-インストール)
3. [ESP32ボード インストール](#_3-esp32ボード-インストール)
4. [M5Stackライブラリ インストール](#_4-m5stackライブラリ-インストール)
5. [例題](#_5-例題)
- Step1. [Arduino IDEインストール](#step1-arduino-ideインストール)
## 1. Arduino IDE インストール
- Step2. [ESP32ボードサポート](#step2-esp32ボードサポート)
ブラウザからアドレス https://www.arduino.cc/en/Main/Software にアクセスします。
- Step3. [M5Stack Libインストール](#step3-m5stack-libインストール)
2. [例題](#例題)
## 環境設定
### Step1. `Arduino IDE`インストール
最初にArduino IDEをインストールします。ダウンロードアドレスは https://www.arduino.cc/en/Main/Software です。
#### (1) `Mac OS X` のパッケージをクリックします。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide.png">
### Step2. ESP32ボードサポート
#### (2) 次のページで`JUST DOWNLOAD`をクリックします。
Arduino IDEを起動し、メニューから、`Arduino`->`Peferences`->`Settings`と選択します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide_02.png">
#### (3) ダウンロードしたArduino IDEをアプリケーションフォルダにドラッグし、アプリケーション一覧からArduino IDEを開きます。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide_03.png">
## 2. USBシリアル変換ドライバ インストール
ブラウザからアドレス https://m5stack.com/download にアクセスします。
#### (1) `CP210X Driver`から`Mac`を選択し、ドライバをダウンロードし、解凍します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/download_usb_driver_mac_01.png">
#### (2) 解凍後、`SiLabsUSBDriverDisk.dmg` をダブルクリックしてドライバをインストールします。
<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">
#### (３) シリアルポート `/dev/tty.SLAB_USBtoUART` を調べます。
ドライバが正しくインストールされたら`Terminal`を開きます。
`M5Core`と`PC`を`USB Type-C ケーブル`で接続し、次の図のコマンド `ls /dev/tty*` を実行します。
<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">
M5とPCの接続を解除し、再度同じコマンドを実行します。そしてもしリストから表示が消えたら、それが該当するシリアルポートになります。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_03.png">
この図では `/dev/tty.SLAB_USBtoUART` がシリアルポートの名前です。
## 3. ESP32ボード インストール
#### (1) Arduino IDEのメニューから、`Arduino`->`Peferences...`->`設定`と選択します。
<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">
最新のESP32ボードマネージャにURLを追加してください。`Additional Boards Manager URLs: `
#### (2) 最新のESP32ボードマネージャにURLを追加してください。`追加のボードマネージャのURL:`
*最新のボードマネージャ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">
確認後、`Tools`->`Board:`->`Boards Manager...`を選び、新しいポップアップダイアログで、`ESP32`と入力して検索します。そして`Install`をクリックします。
#### (3) `ツール`->`ボード:`->`ボードマネージャ...`と選択します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_04.png">
#### (4) 検索ボックスに`ESP32`と入力し検索し、esp32ライブラリの`インストール`をクリックします。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_05.png">
### Step3. M5Stack Libインストール
## 4. M5Stackライブラリ インストール
Arduino IDEを起動し、メニューから`スケッチ`->`ライブラリをインクルード`->`ライブラリを管理...`を選択します。
検索ボックスに`m5stack`と入力して検索し、M5Stackのライブラリをインストールします。
#### (1) Arduino IDEのメニューから`スケッチ`->`ライブラリをインクルード`->`ライブラリを管理...`を選択します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_06.png">
#### (2) 検索ボックスに`m5stack`と入力して検索し、M5Stackライブラリの`インストール`をクリックします。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_07.png">
## 例題
## 5. 例題
USBケーブルをM5Stackに接続し、ボードとシリアルポートを選択します。そしてサンプルプログラムをコンパイルし、アップロードしてみましょう。
USBケーブルでM5StackをPCに接続し、ボードとシリアルポートを選択します。
次にサンプルプログラムをコンパイルし、アップロードしてみましょう。
### 1. ボードとシリアルポートを選択
#### (1) ボードとシリアルポートを選択
Arduino IDEを起動し、メニューから`ツール -> ボード -> M5Stack-Core-ESP32`とボードを選択します。
次に、メニューから`ツール -> シリアルポート -> /dev/cu.SLAB_USBtoUART` とシリアルポートを選択します。
Arduino IDEのメニューから`ツール` -> `ボード` -> `M5Stack-Core-ESP32`と選択します。
次に、メニューから`ツール` -> `シリアルポート` -> `/dev/cu.SLAB_USBtoUART`と選択します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
### 2. サンプルスケッチ
#### (2) サンプルスケッチ
サンプルスケッチを利用して、定番のHelloWorldを表示してみましょう。メニューから`ファイル -> スケッチ例 -> M5Stack -> Basics -> HelloWorld`と選択します。
サンプルスケッチを利用して、定番のHelloWorldを表示してみましょう。
メニューから`ファイル` -> `スケッチ例` -> `M5Stack` -> `Basics` -> `HelloWorld`と選択します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_09.png">
@@ -78,7 +130,7 @@ Arduino IDEを起動し、メニューから`ツール -> ボード -> M5Stack-C
## ノート
もしシリアルポートが見つからない場合は、Macの`システム環境設定 -> セキュリティとプライバシー`を開いてブロックされているアプリを許可してください。それでもダメな場合は、再度シリアルドライバをインストールしてください。
もしシリアルポートが見つからない場合は、Macの`システム環境設定` -> `セキュリティとプライバシー`を開いてブロックされているアプリを許可してください。それでもダメな場合は、再度シリアルドライバをインストールしてください。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy.png">
docs/ja/quick_start/m5core/m5stack_core_get_started_MicroPython.md
+101 -54
View File
@@ -2,98 +2,151 @@
:memo: **[テキストチュートリアル](#テキストチュートリアル)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:clapper: **[ビデオチュートリアル](#ビデオチュートリアル)**
?> **Note** *初めてM5Stackを使う場合、あらかじめ指定のファームウェアを書き込む必要があります。[ファームウェアの更新方法](ja/related_documents/how_to_burn_firmware)を参照してください。初めてM5Coreを起動した際にはまだWi-Fi接続先を設定していないため、[flow.m5stack.com](http://flow.m5stack.com)に接続することができません。このページを参照して設定を行ってください。 [M5StackのWi-Fi接続方法](/ja/related_documents/how_to_connect_wifi_using_core)*
M5Stackを起動したらすぐに `UPLOAD` ボタンを連打します。以下の画面に遷移しなかった場合は、M5Stack本体横の赤いリセットスイッチを押して、再起動してやり直してください。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg">
?> **Note** *最初の起動では何もしないと、デモプログラムに遷移します。Wi-Fiの設定が完了していると自動的にWi-FiのAPに接続しにいきます。Wi-Fiを再設定したい場合は、`SETUP`ボタンを押してください。*
## テキストチュートリアル
1. [UIFlowに接続](#_1-uiflowに接続)
1. [USBシリアル変換ドライバ インストール](#_1-USBシリアル変換ドライバ-インストール)
2. [UIFlowファームワエア 書き込み](#_2-uiflowファームウェア-書き込み)
3. [Wi-Fi 設定](#_3-Wi-Fi-設定)
4. [例題](#_4-例題)
2. [プログラム作成](#_2-プログラム作成)
## 1. USBシリアル変換ドライバ インストール
3. [音楽演奏デモ](#_3-音楽演奏デモ)
ブラウザでこのアドレス https://m5stack.com/download にアクセスします。
## 1. UIFlowに接続
#### (1) `CP210X Driver`の`Windows`版のパッケージをダウンロードし、解凍します。
1. M5Stackに表示されている二次元コードをあなたのスマートフォンやタブレットPCで読み取ってプログラムを始めることができます。もしPCでプログラムをする場合は、ブラウザで次のURLを入力してください。 `flow.m5stack.com`
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/download_usb_driver_win_01.png">
#### (2) お使いのWindowsが何ビット版か確認し、対応したドライバを選択します。
* 32ビットの場合 `CP210xVCPInstaller_x86_vx.x.x.x.exe`
* 64ビットの場合 `CP210xVCPInstaller_x64_vx.x.x.x.exe`
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
#### (3) ファイルをダブルクリックして、インストールを開始します。
<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) シリアルポート番号`COMx`を確認します。
シリアルドライバのインストールが成功したら、シリアルポートの番号を確認します。まずM5CoreとPCをUSBケーブルで接続します。そして`Windowsデバイスマネージャー`の`ポート(COM & LPT)`をチェックします。USBケーブルを抜いて消えたポートがM5Coreで使用するシリアルポート番号になります。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/check_serial_port_01.png">
## 2. UIFlowファームワエア 書き込み
#### (1) M5Burnerのダウンロード
ブラウザで [M5Stack Official Website](http://www.m5stack.com/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) ファームウェアの書き込み
USB Type-C ケーブルでM5CoreとPCを接続します。そしてダウンロードしたファイルを解凍し、`M5Burner.exe` を実行します。そして先ほど確認したシリアルポート番号`COMx`、ボーレート`921600`を選択します。最後にUIFlowの最新ファームウェアを選択します。
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_02.png">
全て選択したら、`Burn` ボタンをクリックします。
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_06_02.png">
次の図のように表示されたら、ファームウェアの書き込み成功です！
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_05.png">
## 3. Wi-Fi 設定
#### (1) `SETUP`を選択
ファームウェアの書き込みが成功したら、M5Stack本体横の赤いボタンを一回押すと電源が入ります。 起動したらすぐに `C button` を押します。うまくいくとネットワーク設定のための`SETUP` 画面に遷移します。`A or C button` で `Link Server: Flow.m5stack.com`を選択し、`B button`で決定します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_04.png">
#### (2) M5Coreに接続
あなたのPCまたはスマホの`Wi-Fi`をオンにし、M5Coreに表示されている`AP(アクセスポイント)`に接続します（図の例では`M5Stack-0d60`）。接続に成功したらブラウザを開き、`192.168.4.1`にアクセスします。そして普段使用しているWi-FiのSSIDを選択し、Wi-Fiパスワードを入力します。 (図ではM5)
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_05.png">
#### (3) Wi-Fiに接続
M5CoreがWi-Fiに接続したら、画面に `APIKEY` と UIFlowのウェブサイトへアクセスするための `QRコード` が表示されます。
*APIKEYとは？: APIKEYはデバイス毎のユニークなIDです。UIFlowはこのAPIKEYでデバイスを識別し、あなたの作成したプログラムをあなたのM5Coreにダウンロードすることができます。*
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_06.png">
右上の点は接続状態を表しています:
* 緑： M5Core はオンラインです。
* 赤： M5Core はオフラインです。
## 4. 例題
#### (1) UiFlowに接続
スマホ / タブレットでM5Coreに表示されているQRコードをスキャン またはPCのブラウザで次のアドレス `flow.m5stack.com` にアクセスします。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
2. UIFlowを利用するためには、お持ちのM5Stackをペアリングする必要があります。
UiFlowからM5Coreに作成したプログラムを送信する前に、 一度だけAPIKEYを設定する必要があります。
最初にUIFlowの画面の右上にある歯車の設定を開きます。`APIKEY` の欄にM5Stack本体に表示されているAPIKEYを入力します。(写真の場合は `9C6469`) 入力が終わったら`SAVE`をクリックします。
UiFlow画面右上から歯車マークの`settings`をクリックすると、モーダルウィンドウが開きます。M5Coreに表示されているAPIKEYを入力し、`Save` をクリックするとM5CoreがUiFlowと接続します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/enter_apikey.gif">
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png">
正しいAPIKEYが入力されるとUIFlowはあなたのM5Stackと接続します。
さあ、UiFlowでプログラミングを始めましょう！
しばらくすると下図のように、Blockly(や Python)を用いてプログラムが可能になります。
#### (2) プログラムサンプル
## 2. プログラム作成
#### a. UIの表示
### a. UIデザイン
4種類のUI要素が用意されており、UIFlow内のUIエディタにドラッグすることで利用できます。試しにいくつかUIオブジェクトを配置して`実行(Run)`をクリックしてみましょう。
4種類のUIコントロールを左上からドラッグして、UiFlowのデザイナーに貼り付けます。そして、右上から三角の`Run`ボタンをクリックします。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif">
### b. Blocklyでプログラミング
`Emoji`クラスの中にある`Set emoji map in0`ブロックをドラッグしてブロックエディタに配置し、`実行(Run)`をクリックしてみましょう。
#### b. Blocklyでプログラミング
`Emoji`の中から`Set emoji map in color`ブロックをドラッグして、`Blocklyコードエリア`に貼り付けます。そして、右上から三角の`Run`ボタンをクリックします。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif">
*このデモのソースコード: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
*完全なソースコードは[こちら](https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f)*
### c. MicroPythonでプログラミング
#### c. MicroPythonでプログラミング
Blockly/MicroPython切り替えボタンを使って、MicroPythonに切り替えます。そして次のコードをコピーして`Python エディタ`に貼り付け、`実行(Run)`をクリックしてみましょう。
以下のコードをコピーして、`MicroPythonコードエリア`に貼り付けます。そして、右上から三角の`Run`ボタンをクリックします。
```Python
from m5stack import *
from m5ui import *
clear_bg(0x111111)
btnA = M5Button(name='ButtonA', text='ButtonA', visibility=False)
btnB = M5Button(name='ButtonB', text='ButtonB', visibility=False)
btnC = M5Button(name='ButtonC', text='ButtonC', visibility=False)
lcd.print("Hello M5Stack")
```
この図の部分をクリックすると `Blockly` <-> `MicroPython` を切り替えることができます。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_micropython.png">
M5Stackの画面に`Hello M5Stack`と表示されます。
## 3. 音楽演奏デモ
M5Stackを用いればたった数分でミュージックプレイヤーを作成して、音楽を演奏することができます。
`loop`、`music`、`timer`から下図のブロックをブロックエディタに配置します。
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/play_a_song.gif">
実行すると音楽がなります！
*このデモのソースコード: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_play_a_song.m5f*
## 完成
?> **Note** *UIFlowでのプログラミングについて知りたい場合は、[UIFlowのチュートリアルドキュメント](https://m5stack.github.io/UIFlow_doc/ja/index.html)を読んでください。*
'Hello M5Stack`というメッセージがM5Coreの画面に表示されます。
## ビデオチュートリアル
**UIFlow概要**
**UIFlow紹介**
<video width="500" controls>
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/UI%20Flow%20Overview.mp4" type="video/mp4">
@@ -104,9 +157,3 @@ M5Stackを用いればたった数分でミュージックプレイヤーを作
<video width="500" controls>
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/UIFlow%20Tutorials/A3%20-%20UIflow%E7%AE%80%E4%BB%8B.mp4" type="video/mp4">
</video>
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/rdz6hBoqamA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<!-- **UIFlow (Mac & Linux) 初めの一歩（この動画は少し内容が古いです）**
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEiFLsukAEE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
docs/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md
+2 -2
View File
@@ -64,9 +64,9 @@
<img src="assets/img/getting_started_pics/establish_serial_connection/9.png">
#### (4) 检查确认 COM 串口名
#### (3) 检查确认 COM 串口名
检查确认 COM 串口名，以确定串口驱动是否安装成功：
检查确认 `/dev/tty.SLAB_USBtoUART` 串口名，以确定串口驱动是否安装成功：
打开终端 `Terminal`，将 Core 通过 USB Type-C 线连接电脑，执行以下命令
docs/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython.md
+1 -1
View File
@@ -94,7 +94,7 @@
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_05.png">
#### (2) 连接 Wi-Fi
#### (3) 连接 Wi-Fi
M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 `APIKEY` 和 可以访问到 UIFlow 网页的二维码