pdf-icon

UiFlow チュートリアル

UiFlow1 開発ガイド

プロジェクト管理

LTEネットワークを使用する

UiFlow1 Blockly

Event

Unit

Cardputer-Adv ファーム書き込み・プログラム配信

1. UiFlow2 ファームウェア書き込み

  1. UiFlow2 Web IDE チュートリアルを参照して、UiFlow2 の基本的な使用フローを確認し、M5Burner ファームウェア書き込みツールのインストールを完了します。

  2. M5Burner で Cardputer-Adv に対応するファームウェアをダウンロードします。以下の図を参照してください。

  1. Cardputer-Adv 側面の電源スイッチを OFF にし、電源を入れる前に G0 ボタンを押し続けます。デバイスに電源が入ったらボタンを離すと、デバイスはダウンロードモードに入ります。
  1. USB ケーブルでデバイスを PC に接続します。M5Burner で該当ファームウェアの Burn ボタンをクリックし、対応するデバイスポートを選択して Start をクリックします。
  1. デバイスが接続する Wi-Fi 設定として Wi-Fi SSID と Wi-Fi Password を入力し、必要に応じてその他のデバイス設定を追加または変更してから、Next をクリックして書き込みを開始します。

設定情報の説明:

  • COM:デバイスに対応するシリアルポートを選択します
  • BaudRate:シリアル通信のボーレート
  • Server:デバイスが接続するサーバーアドレス
  • WIFI SSID/WIFI Password:デバイスが接続する Wi-Fi 名とパスワード
  • SNTP サーバー:
    • SNTP0:Alibaba Cloud NTP サーバー (中国)
    • SNTP1:日本 NTP サーバープール
    • SNTP2:グローバル公開 NTP サーバープール
  • Timezone:タイムゾーン設定
  • Boot Option:ファームウェア書き込み完了後のデバイス起動モードを設定します
    • run main.py directly:書き込み完了後、ネットワークに接続せず、UiFlow2 の起動画面も表示せずに main.py 内のプログラムを直接実行します
    • show startup menu and network setup:デバイスがネットワークに接続し、画面付きデバイスでは UiFlow2 の起動画面を表示します
    • only net work setup:デバイスはネットワーク接続のみを行い、UiFlow2 の起動画面は表示しません
  1. Burn successfully, click here to return と表示されたら書き込み成功です。この時点でデバイスをリセットしてください。
  1. ファームウェア書き込み後にデバイス設定を変更する必要がある場合は、USB 接続を維持したままデバイスを再起動し、Configure オプションをクリックして、画面の指示に従って変更します。

2. デバイス接続

デバイスは Access Code (無線ネットワーク経由) または USB (PC との有線接続) で UiFlow2 に接続でき、プログラムの転送とデバッグを行えます。詳しい操作は以下のチュートリアルを参照してください。

Access Code 無線接続

  1. 接続前に、デバイスがネットワークに接続されていることを確認してください。ネットワークに接続されていない場合は、ファームウェア書き込み時に入力した Wi-Fi 名とパスワードが正しいか確認し、M5Burner の Configure オプションで修正してから再度書き込んでください。

  1. デバイスの UiFlow2 起動画面で、現在生成されている有効な Access Code を確認します。
  1. uiflow2.m5stack.com にアクセスして UiFlow2 Web IDE を開きます。

  2. ページ上の Select Your Controller (初回表示時に表示) または Controller ボタンをクリックして、Select Device ページに入ります。

  1. Connect Device をクリックし、アクセスコードと任意のデバイス名を入力してから Confirm をクリックすると、Cardputer-Adv を UiFlow2 に接続できます。
Access Code の説明
1. ブラウザを変更する、プライベート / シークレットモードを使用する、または UiFlow サイトのキャッシュを削除すると、元のペアリング状態は無効になります。
2. タブを閉じる、ブラウザを再起動する、ログインまたはログアウトするだけでは、既存のペアリング関係には影響しません。
3. デバイスが他のブラウザでペアリングされると、元のブラウザのペアリング関係は直ちに無効になります。

USB 有線接続

  1. uiflow2.m5stack.com にアクセスして UiFlow2 Web IDE を開き、Cardputer-Adv を USB Type-C ケーブルで PC に接続します。

  2. ページ上の Select Your Controller (初回表示時に表示) または Controller ボタンをクリックして、Select Device ページに入ります。

  1. デバイス一覧で Cardputer-Adv デバイスを選択し、Confirm をクリックします。
  1. WebTerminal ボタンをクリックし、ダイアログで Cardputer-Adv のシリアルポートを選択して 接続 をクリックします。

WebTerminal 画面に Connected to Serial Port! と表示されれば、USB 接続は成功です。

3. プログラム実行とダウンロード

デバイスを UiFlow2 に接続した後、Blockly をドラッグしてプログラムを編集できます。

プログラム編集後、画面右下の Run Once ボタンをクリックするとテストプログラムを 1 回実行できます。Run Always ボタンをクリックすると、プログラムをデバイスにダウンロードできます。

WebTerminal ウィンドウでもプログラムを 1 回実行またはダウンロードできます。

4. 関連リンク

UiFlow2 ファームウェアメイン画面の機能モジュール説明

UiFlow2 プログラムには 5 つの機能モジュールが含まれます
DEVELOP:現在のデバイスの基本情報を表示します。MAC アドレスやバインドされたユーザーアカウントを含みます。
APP.RUN:UiFlow2 でダウンロードしたプログラムの実行モードを設定します。
APP.LIST:保存済みプログラム一覧を管理します。
EZDATA:クラウドとのデータ連携機能を提供し、データのアップロードと同期をサポートします。
SETTING:画面輝度調整や Wi-Fi ネットワーク設定など、デバイスでよく使うシステム設定を一元管理します。

デバイス (Cardputer-Adv) 起動後、キーボードはデフォルトで低消費電力のスリープ状態になります。キーボード入力機能を有効にするには、以下の操作を同時に行います。左手でキーボード上の fn キーを押し続けてキーボードを起動し、右手で実行したいキーを押します。この操作により、キーボードが正常に有効化され、以降の入力に応答します。具体的な操作方法は、公式ドキュメントを参照してください。

  • DEVELOP
    • デバイスの MAC アドレス
    • M5Burner 書き込み時にバインドされたアカウント。オフライン開発に使用します
  • APP.RUN
    • UiFlow2 を使用して編集済みプログラムをデバイスにダウンロードすると、システムはそのプログラムを APP.RUN ディレクトリ内の main.py ファイルに自動的に書き込み (既存内容を上書き)、すぐに実行します
    • 他の方法 (手動インポートなど) で APP.RUN ディレクトリに main.py という名前のプログラムを追加した場合も、デバイス上で RUN(ONCE) の 1 回実行、または RUN(ALWAYS) の継続実行オプションから実行できます

注意:main.py は削除しないでください。削除すると、APP.RUN プログラムに入った際にデバイスがフリーズします。UiFlow2 プログラムの書き込み、または main.py プログラムの実行後は、UiFlow2 メイン画面に戻ることはできません。M5Burner を再度使用して Configure 設定を行い、ファームウェアを更新する必要があります。

  • APP.LIST
    • UiFlow2 開発に慣れた後は、任意のコードエディタを使用して Python プログラムを手動で作成できます。UiFlow2 画面左下の WebTerminal をクリックし、USB でデバイスに接続して file フォルダをクリックし、プログラムファイルをデバイスの /flash/apps ディレクトリにインポートします。このディレクトリに置いたファイルは、デバイス起動後いつでもテストおよび実行できます
  • SETTING
    • Wi-Fi を設定
    • 画面輝度を設定

関連動画

On This Page