M5StickCのUIFlow-Desktop-IDE使用時のファームウェア書き込み失敗した時の手順

M5StickCでUIFlowの初回利用時にファームウェア周りで上手く行かなかったの時のメモです。

#### 環境
* OS:MacOS Catalina v10.15.4
* UIFlow：v1.4.5

## M5StickCの使用

基本のチュートリアルが用意されているのでこれを読んでそのまま進めて上手くいけば問題ない(日本語版もあり）
https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/M5StickC_Guide_Japanese.pdf
<img width="744" alt="6df7351b27309bcab1a3fa23214ac732.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23/2f2c776f-0901-745c-cb68-a2149c7826f5.png">

## UIFlowのインストール
UIFlowはGUIでもプログラミングとMicroPythonでのプログラミングが可能なIDE環境で、Webとデスクトップ版があります(今回はデスクトップ版を使用)。

* M5Stackのダウンロードページから各OS向けのデスクトップ版をダウンロード
https://m5stack.com/pages/download
<img width="535" alt="ec9c6b5377fd4f4a392411d6e529fea2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23/d709e72c-4721-5248-0a34-bce1bb536077.png">

* UIFlow-Desktop-IDEをインストール後、起動する。
<img width="1272" alt="516ffad9568de0ad0a26fb2cfcbbe873.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23/485d4f72-0745-7367-2c7c-e92b99dc5533.png">

* M5StickCをUSBケーブルでPCに接続。COMポートで接続したUSBを選択
<img width="890" alt="f0e8cbe323a431458a40e24332e56d8a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23/29d07e73-431a-4402-8cb7-21592525198d.png">
IDEの下部に[接続済み]の表示がされていれば完了
<img width="574" alt="a74d9f1b863dc428a48949360002eb98.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23/b407795e-ac6b-e730-fa62-3871fb481ffc.png">


## ファームウェアの更新
M5StickCのファームウェアはUIFlowのバージョンと基本的に合わせるのが推奨のようなので、書き込みツールのM5Burnerを利用してファームウェアを更新します(M5Burnerは個別にインストールするかUIFlow-Desktop-IDEインストール時に一緒に入っている)。

### M5Burnerで上手くいかない場合
#### ファームウェアのダウンロードが出来ない
UIFlow-Desktop-IDEのメニューから[FirmwareBurner]を選択するとM5Burnerが起動する。対象のファームウェアを選択してダウンロード(ダウンロードアイコンをクリック)すると何も表示されず先に進まない。
※後述の手順でファームウェアダウンロード後に削除しようとすると以下のエラーが表示。(JavaScriptでread-only file systemが出ていた)

```javascript

Uncaught Exception:
Error: EROFS: read-only file system, unlink '/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/assets/firmwares/UIFlow-v1.4.5/UIFlow-Firmware-1.4.5/LICENSE.md'
    at Object.unlinkSync (fs.js:930:3)
    at files.forEach (/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/app.asar/src/views/burner/index.js:338:24)
    at Array.forEach (<anonymous>)
    at removeDir (/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/app.asar/src/views/burner/index.js:335:19)
    at files.forEach (/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/app.asar/src/views/burner/index.js:340:21)
    at Array.forEach (<anonymous>)
    at removeDir (/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/app.asar/src/views/burner/index.js:335:19)
    at EventEmitter.<anonymous> (/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/app.asar/src/views/burner/index.js:345:9)
    at EventEmitter.emit (events.js:182:13)
    at WebContents.<anonymous> (/private/var/folders/gz/rfckyr652k11wvwys96x_2kc0000gn/T/AppTranslocation/AED784CB-6E36-432D-B88F-0D53BF4F6152/d/UIFlow-Desktop-IDE.app/Contents/Resources/electron.asar/browser/api/web-contents.js:355:13)
```

* エラーからMacOSのファイルに対する権限周りの問題と思われるのでUIFlow-Desktop-IDEを管理者ユーザで実行する
    * ターミナルから `/Applications/UIFlow-Desktop-IDE.app/Contents/MacOS/UIFlow-Desktop-IDE` で実行する
    * または管理者ユーザでログインした上で、Finderで[アプリケーション]→[UIFlow-Desktop-IDE]を選択→右クリックメニューから[パッケージの場所を開く]→Contents/MacOS/UIFlow-Desktop-IDEをダブルクリック 

#### ファームウェアの書き込みが出来ない
ファームウェア書き込みを実行時、以下のエラーで失敗する。

```python

A fatal error occurred: Failed to connect to ESP32: Invalid head of packet(0xXX)
```
<img width="698" alt="aac8aaf7a8dbee6c64c960718a850715.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23/19dfb8a3-43a0-39f6-8fb7-f8b2ded94954.png">

* M5StickCの強制書き込みモードの状態で書き込むか、M5StickCのUSBコントローラーのファームウェアを更新することで書き込みが可能
    * 強制書き込みモードはM5StickCの**G0**と**GND**をジャンパ線で短絡させる(短絡状態で書き込みを実行 ※実行後に手動で再起動(電源OFF/ON)が必要
    * M5StickCのUSBコントローラーのファームウェアを更新
        * URLからアップデートツールをダウンロード → 
         https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/Updater_FW20200114_A2_BTV231
        * ターミナルから実行権限を付与 `chmod +x Updater_FW20200114_A2_BTV231`
        * 直接実行する

```zsh

% ./Updater_FW20200114_A2_BTV231 

==================== M5 Serial Converter Firmware Updater ====================
    
    FW Version: FW20200114_A2

    This is only for update M5StickC or M5Atom Series USB Controller's Firmware 
, using it for any other purpose may cause damage to your devices.

    When you are using this software, make sure you have a reliable connection 
to your device. Any disruption during the process will cause the device 
not functioning.


                        NO WARRANTIES
To the extent permitted by applicable law, neither wsdot,
nor any person, either expressly or implicitly, warrants any aspect of
this software or program, including any output or results of this software
or program. Unless agreed to in writing. This software and program is
being provided "as is", without any warranty of any type or nature,
either express or implied, including, but not limited to, the implied
warranties of merchantability and fitness for a particular purpose,
and any warranty that this software or program is free from defects.
==========================================================================

Press enter to continue . . .


Detecting M5Stack products.
Find M5Stack products.
Kernel driver deteched.
Apply magic success.
Waiting for device in DFU mode...
Find M5Stack device in DFU mode.
Claim interface success.
Starting flash routine.
Sending Stage1...
Reading Config...
BTVER: V2.31
Writing Magic...A: 0x0, B: 0x52
Erasing Chip...
Unpacking payload...
Verifying the payload...
Packing the payload...
Start sending new firmware...
Sending to device, 4032/4032
Start verifying new firmware...
Sending to device, 4032/4032
Firmware verified, end flashing.
Resetting to run new firmware.
Have Fun :p
```


* 参考記事：[macOS CatalinaのArduino IDEでM5StickCに書き込みができない問題の解決方法](https://tech.fusic.co.jp/posts/2020-02-12-macos-catalina-m5stickc/)

#### デバイス自体認識しない場合
* ドライバ関連を導入
M5StickCの場合、Mac(HighSierra以降)でない場合、以下のドライバをインストールが必要(チュートリアルに記載あり)。

 * FTDIドライバ → https://www.ftdichip.com/Drivers/VCP.htm → ]Mac OS X 10.9 and above]のドライバをダウンロード(現状2.4.2)
 * CP210Xドライバ → https://m5stack.com/pages/download のページから[CP2104 Driver]をダウンロード

* 物理的な部分を変える
 * 付属のUSB-typeCケーブルで接続しても認識しない場合、上下を変えて挿し直す、別のUSBケーブルに変えて接続してみる
 * M5StickCの電源がオンにならず起動しない(LCD画面に何も表示されない)場合はUSB電源に繋いで充電してから起動してみる


書き込み後、M5StickCを起動してUIFlowのタイトル画面が表示されれば問題なし。WifiのSSIDとパスワードをファームウェア書き込み時に設定した場合、起動時にアクセスポイントへ接続していってくれるので、表示されたAPIKEYでWeb版のUIFlowからインターネット越しにコネクションできるようになるので、遠隔でのプログラミングも可能です。