UIFlow - M5Core

このチュートリアルはBASIC/GRAY/M5GO/FIRE/FACESのキットに適しています。

ドライバのインストール

以下のリンクをクリックして、OSに合ったドライバをダウンロードしてください。現在、2種類のドライバチップバージョン(CP210X/CH9102)が存在します。お使いのバージョンに合わせて、対応するドライバの圧縮パッケージをダウンロードしてください。圧縮パッケージを解凍後、インストールするOSの数に応じたインストールパッケージを選択してください(お使いの機器が使用しているUSBチップが不明な場合は、両方のドライバを同時にインストールすることができます)。CH9102_VCP_SER_MacOS v1.7`のインストール中にエラーが発生することがありますが、実際にはインストールが完了していますので無視してください)

ドライバ名 適用ドライバチップ ダウンロードリンク
CP210x_VCP_Windows CP2104 ダウンロード
CP210x_VCP_MacOS CP2104 ダウンロード
CP210x_VCP_Linux CP2104 ダウンロード
CH9102_VCP_SER_Windows CH9102 ダウンロード
CH9102_VCP_SER_MacOS v1.7 CH9102 ダウンロード

バーニングツール

お使いのOSに対応したM5Burnerファームウェア書き込みツールを下のボタンからダウンロードしてください。解凍後、アプリケーションを開いてください。

ソフトウエア リンク
M5Burner_Windows ダウンロード
M5Burner_MacOS ダウンロード
M5Burner_Linux ダウンロード

注意:
MacOSの場合、インストールが完了したら、下図のようにApplicationフォルダにアプリケーションを配置してください。<br> Linuxユーザーの方は、解凍したファイルのパスに切り替え、ターミナルで./M5Burner`を実行するとアプリケーションが起動します。

ファームウェアの書き込み

ダブルクリックでBurner書き込みツールを開き、左メニューで対応するデバイスクラスを選択し、一致するデバイスのファームウェアを選択し、ダウンロードボタンをクリックしダウンロードします。

.

M5デバイスをType-Cデータケーブルでコンピュータに接続し、対応するCOMポートを選択し、ボーレートはM5Burnerのデフォルト設定を使用することができます。

ファームウェアの書き込みステージでは、ファームウェアの書き込みを行います。

ファームウェアの書き込みの段階で、WiFiの設定ボックスに「WiFi」の情報を入力する必要があります。この情報はファームウェアと一緒にM5デバイスに書き込まれ、Startをクリックすると書き込みが開始されます。注意:プログラミングのタイムアウトが発生する場合は、ボーレートを115200に下げてみてください。

.

書き込みログに「Burn Successfully」と表示されたら、ファームウェアの書き込みが完了したことを意味します。

>?

初めて書き込みを行う場合や、ファームウェアのプログラムが異常終了した場合は、右上のEraseをクリックするとフラッシュメモリが消去されます。その後のファームウェアのアップデートでは、再度消去する必要はありません。そうしないと、保存されているWi-Fi情報が削除され、API KEYがリフレッシュされます。

API KEYを取得する

M5をType-Cデータケーブルでパソコンに接続し、対応するCOMポートを選択します。設定」をクリックすると、「API KEY」情報が設定ボックスに表示されます。(
SNRは信号の量に対するノイズの量で単位はdB[デシベル]で表されます)
SNRが0.0001%の時)
1.2.0%に設定し直してください。

(画像はイメージです。

M5Burnerの設定項目の説明

設定ファイルを修正する必要がある場合は、M5デバイスをType-Cデータケーブルでコンピューターに接続し、対応するCOMを選択した後、configurationをクリックして修正してください。

APIKEY: UIFlowウェブプログラミングを使用する際のM5デバイスの通信認証情報
Start Mode: スタートアップ後に入る設定可能なモード
Quick Start: UIインターフェースのないデバイスでは、クイックスタートを選択して起動時のインターフェースを省略することができます。
Server: サーバーの選択
Wifi。WifiのSSIDとパスワードの設定
COMX: COMX.LTEネットワークを有効にするかどうかを選択します(This function needs to stack COMX.LTE module, please explain in detail) Reference to Network Over COM.LTE Tutorial )
APN: COMX.LTEモジュールのAPNアクセスポイントの設定

API KEYのペアリング

オンラインプログラミングモードでデバイスを設定した後、デバイスとUIFlowの間にAPI KEYを介して接続を確立し、指定されたデバイスのプログラムをプッシュできるようにする必要があります。ブラウザで flow.m5stack.com にアクセスしてUIFlowプログラミングページに入り、ページ右上のメニューバーで設定ボタンをクリックし、前のステップで行ったことを入力します API KEYを取得してOKをクリックして保存し、接続に成功した旨のプロンプトが出るまで待つ必要があります。

Hello M5

上記の手順が完了したら、UIFlowを使ったプログラミングを開始します。以下では、画面を駆動して「Hello M5」を表示させる簡単なプログラムを紹介します。(1.ラベルを配置する 2. ラベルブロックを追加します。3 右上の実行ボタンをクリック)

プログラムの実行/ダウンロード

プログラムのRun/Downloadを実行します。
1. UIFlowオンライン版のメニューバーにあるRunボタン(三角形)はSingle test操作であり、デバイスはリセット後にオンラインプログラミングモードに再突入します。
2.ダウンロードボタンは、現在のプログラムをデバイスにダウンロードし、自動的に起動するように設定します。注:ダウンロードしたプログラムがネットワーク通信を含む場合、プログラムの最初にWiFi接続プログラムを追加してください。オフライン動作モードで再度プログラミングモードに入る必要がある場合は、本書末尾のモード切替方法を参照してください。

UIFlowオフライン・プログラミング・モード

UIFlow Desktop IDEは、UIFlowプログラマーのオフライン版です。ネットワークに依存することなく、高速なプログラムプッシュを実現できます。お使いのOSに応じたUIFlow-Desktop-IDEのバージョンをクリックし、ダウンロードしてください。

ソフトウェアバージョン ダウンロードリンク
UIFlow-Desktop-IDE_Windows ダウンロード
UIFlow-Desktop-IDE_MacOS ダウンロード
UIFlow-Desktop-IDE_Linux ダウンロード

ダウンロードしたUIFlow Desktop IDEの圧縮パッケージを解凍し、ダブルクリックでアプリケーションを実行します。ソフトを起動すると、お使いのパソコンにUSBドライバ(CP210X)がインストールされているかどうかが自動的に検出されます。すでにデバイスドライバがインストールされている場合は、[スキップ]をクリックしてスキップしてください。

オフライン版のUIFlowでプログラミングする場合、デバイスをUSBモードに設定する必要があります:
1.

電源ボタンで起動
2.画面にメニューが表示されたら、パネルの右ボタンを素早く押して、設定画面に入ります。
3. USBモードを選択
4. UIFlow Desktop IDEの設定ボックスで、対応するポートとプログラミング機器を選択して、OKボタンを押すと、接続されます。正常に接続できない場合は、データケーブルを交換したり、ポートの抜き差しを行い、ポートの占有があるかどうかを確認してみてください。

補足説明

APホットスポット設定WiFi

M5デバイスは、携帯電話を使用してWiFiを設定することをサポートしています。
1.
1. デバイスの左側にある赤い電源ボタンをクリックして電源を入れ、画面にUIFlowロゴが表示された後、パネルの右側のテストボタンを素早く押して「設定」ページに入ります。
2. 左ボタンと右ボタンでメニューオプションを上下に切り替え、「AP経由Wi-Fi」オプションを選択し、中ボタンを押して選択し、APホットスポットWiFi設定モードに入ります。
3.デバイスがジャンプした後、WiFi Configページが表示されます。画面の指示に従い、携帯電話やパソコンのWiFiからSSIDホットスポットに接続し、ブラウザを起動して192.168.4.1にアクセスし、ポップアップページでWiFi情報を入力して設定に成功 ネットワーク配信(注:WiFi情報には「スペース」等の特殊文字が使えない)。設定に成功すると、デバイスは自動的に再起動します。そして、オンラインプログラミングモードに入ります。

関連リンク

関連動画

  • UIFlow入門

<ビデオ width="500" controls> <ソース src=" https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/UI%20Flow%20Overview.mp4" type="video/mp4"> </video

  • UIFlowでM5Coreを開発するためのビデオチュートリアル

<ビデオ> 幅="500" コントロール </video

On This Page