2019年3月18日 / 最終更新日時 : 2020年1月21日 もんごんた M5Stack

M5Stack LovyanLauncherの使い方

　前の記事初心者向けM5Stackの始め方（M5Burner/LovyanLauncher編）ではインストールの方法と、アプリを起動してメニューに戻るまでの簡単な操作を説明しました。この記事ではM5Stack LovyanLauncherの使い方を具体的に説明していきます。

　もくじ(Index)

M5Stack関連の目次へ戻る

記事で使っている環境

（2019/7/28 Update）

  • M5Stack Gray　及び　M5Stack Fire
  • M5Stack LovyanLauncher v0.1.8

　機能強化は日々行われているので画面や操作方法の変更は頻繁にあると思います。最新情報が欲しい方は、らびやん氏のGitHubをチェックしましょう。

画面表示について

メニュー(Menu)

  1. 充電／バッテリーの状態(Battery or Charge Status)
  2. IPアドレス(IP address) ※1
  3. メモリの空き容量(Free Memory)
  4. メニュー(Menu)
  5. ボタンAの機能(ButtonA Function)
  6. ボタンBの機能(ButtonB Function)
  7. ボタンCの機能(ButtonC Function)

※1．WiFi未接続の場合は非表示かDISCONNECTED（Hide or 「DISCONNECTED」 when WiFi is not connected.)

充電／バッテリー状態について

　バッテリー状態の表示機能を使うには、M5Stackが対応している必要があります。I2C Scannerで0x75が白で表示される端末であれば大丈夫です。古いM5Stackは対応していない場合があるようです。

（１）充電中（Charging）
  • FC：満充電（Full Charge）
  • CC：定電流充電（Constant Current)
  • CV：定電圧充電（Constant Voltage)
（２）バッテリー駆動中（Powered by Battary)

　バッテリーマークが表示されます。
　

メニュー(Menu)

　メニューの詳細は下記の記事を見てください。

M5Stack LovyanLauncherメニュー

SD-Updater対応アプリの収納方法

　SD-Updater対応アプリはSDカードに収納します。

配布ファイル

　SD-Updater対応の配布ファイルは以下の４つのファイルからなります。

ファイルの種類ファイル名
バイナリファイル(.bin)<アプリ名>.bin
JSON<アプリ名>.json
プレビュー画像<アプリ名>.jpg
作者アイコン<アプリ名>_gh.jpg

フォルダ構成

以下のように配置します。

/--------｜ExampleApp.bin
         ｜
         ｜jpg/-------------------｜ExampleApp.jpg
         ｜                       ｜ExampleApp_gh.jpg
         ｜
         ｜json/------------------｜ExampleApp.json

【補足】階層化する場合

　LovyanLauncher v0.1.5からフォルダの階層化が利用できるようになりました。jpgとjsonファイルはbinが収納されているサブフォルダに置くか、ルートのjpg、jsonフォルダに置くことができます。

●例１．サブフォルダに置く場合


/-----｜Examplebin/-----｜ExampleApp.bin
                        ｜
                        ｜jpg/---------------｜ExampleApp.jpg
                        ｜                   ｜ExampleApp_gh.jpg
                        ｜
                        ｜json/--------------｜ExampleApp.json


●例２．ルートに置く場合


/-----｜Examplebin/-----｜ExampleApp.bin
      ｜
      ｜jpg/------------｜ExampleApp.jpg
      ｜                ｜ExampleApp_gh.jpg
      ｜
      ｜json/-----------｜ExampleApp.json

フォルダ分け

　LovyanLauncher v0.1.5から、アプリを収納するフォルダを作成することが可能になりました。フォルダ名の先頭か末尾に「bin」を追加することによってフォルダが表示されます。

　下記の写真だと「Avatar.bin」「binSDUpdaterApp」「Emulatorbin」というフォルダが表示されています。

【注意事項】フルパス32文字の制限

　M5Stackのファイルシステムはフルパス32文字をオーバーすると問題が起きやすくなるようです。なるべく短い名前にしましょう。(フルパスというのは「/」も含んだ全体の文字数です。)

●フルパス32文字の数え方

⁄Avatar.bin⁄jpg⁄appname01_gh.jpg
01234567890123456789012345678901</pre>

WiFiの設定方法(WiFi Setting)

　LovyanLauncherでは、4種類のWiFi設定方法があります。

  1. 手動で設定（スクリーンキーボードを使用）(Manual Setting)
  2. WPSで設定(WPS Setting)
  3. スマホにアプリをインストールして接続設定する。(WiFi SmartConfig)　※v0.1.3で追加
  4. スマホから接続してブラウザ上で設定(WiFi setting from smartphone’s browser)

１と２は特に説明の必要はないと思うので、3と4だけ説明します。

WiFiの設定（SmartConfig）※v0.1.3で追加

　操作は、「スマホで2.4G帯のアクセスポイントに接続」→「M5StackでWiFi SmartConfigを開く」→「スマホでアプリを起動」→「無線親機のパスワードを入力」です。

①2.4GHz帯のアクセスポイントに接続

　M5Stackは2.4GHz帯のWiFiしか対応していないので、注意しましょう。

　まずスマホをM5Stackを接続したい2.4GHzに対応した無線LAN親機に接続します。

②WiFi→WiFi SmartConfigを起動

　QRCodeを読み取って、アプリをスマホにインストールします。

②アプリをインストールして操作する。

（１）iOS版

　英語表記です。パスワードを入力して「Confirm」をタップします。

　設定が終わるとM5StackのIPアドレスが確認できます。

（２）Android版

　英語表記です。注意書きはありませんが、iOSとほぼ変わりません。設定が終わるとM5StackのIPアドレスが確認できます。

WiFiの設定（AP&HTTP）

　操作は、「M5StackでAPを起動」→「スマホでAPに接続」→「スマホのブラウザで設定画面を開いて設定」です。

①WiFi→WiFi Setting（AP&HTTP)を開く

  • WiFi Settingを開く
  • この画面になったら
    スマホで接続

　※　v0.1.3から下記のようにQRコードが表示されるようになりました。URLを手入力しなくても大丈夫です。

②スマホでWiFi接続設定を行う。

　「M5STACK_SETUP」というアクセスポイントを選び接続します。

③ブラウザを起動して設定をする。

　スマホでブラウザアプリを開き、「http://192.168.4.1」を開いて接続したい無線LAN親機の設定をします。接続が完了するとSetup complete.と表示されます。

FTP Serverの使い方(How to use FTP Server)

　FTP Serverが使えるようになると、microSDカードを取り外さないでPCからファイル転送ができるようになります。SDCardで説明しますが、FTP Server(SPIFFS)を使うとSPIFFSにも転送することができます。

FTP Serverを起動する。(Start FTP Server)

　M5Stack側で操作を行います。メニューから「Tools」→「FTP Server(SDCard)」を選ぶと、設定した、または前回接続したWiFiに自動接続してFTP Serverが起動します。

FTP Server 起動中の画面(FTP Server Screen)

  • host：M5StackのDHCPで割り当てられたIPアドレス
  • user：esp32　（FTPのユーザID)
  • pass：esp32　（FTPのパスワード）
  • URL

PCからファイルをコピーする。

　PCでエクスプローラーを開いてM5Stackに表示されているURLを入力するとSDCardの中身が表示されます。

①エクスプローラーを開いてURLを入力

②SDカードの内容が表示される

　接続が終わると、microSD内のコンテンツが表示されます。あとは通常のエクスプローラーと同じ操作でSD-Updater対応のbinファイルをコピーしたりすることができます。

FTP Serverの注意・制限事項

①接続が不安定な場合がある。

　ネットの接続環境が悪いとエクスプローラーを使って転送すると不安定な場合があります。

　その場合はWinSCPを使ってみましょう。

②ファイルのタイムスタンプが変わってしまう。

　M5StackのSD・SPIFFSライブラリがタイムスタンプに対応していないため、FTPサーバからファイルを転送するとタイムスタンプがおかしくなります。

　気になる方は今のところ、microSDカードでやり取りする方式を使ってください。

LovyanLauncherを最新にする

　LovyanLauncherの最新版へのアップデートはM5Bunnerで入れ替える方法が簡単ですが、下記の手順でも入れ替え可能です。

  1. LovyanLauncherのGitHubから「LovyanLauncher.bin」をダウンロード
  2. microSDHCカードの「LovyanLauncher.bin」を入れ替える。（FTPでも可能。）
  3. SD-Updaterから「LovyanLauncher」を起動する。

この３ステップでLovyanLauncherを最新にすることができます。

ダウンロードリンク

　リリース版はSource code(zip)をダウンロードします。

①リリース版

https://github.com/lovyan03/M5Stack_LovyanLauncher/releases

解凍したフォルダの中でLovyanLauncher\build\にLovyanLauncher.binがあります。

②開発版

https://github.com/lovyan03/M5Stack_LovyanLauncher/tree/master/LovyanLauncher

LovyanLauncher対応アプリを作る。

　LovyanLauncherから起動できるSD-Updater対応のアプリを作成する際のポイントを下記の記事で解説しています。簡単なので自作アプリもSD-Updater対応してみましょう。

M5Stack LovyanLauncher対応アプリの作り方

おわりに

　もし、この機能の使い方が分からないという場合はお気軽にコメントやメールください。

　Twitterを見るとLovyanLauncherをきっかけにM5Stackを購入している方も増えているようです。みんなでM5Stackを楽しんで使いましょう。

更新履歴

2019/7/29　v0.1.8に対応（大きな変更はなし。記述を見直し）
2019/4/02　v0.1.5に対応（SDUpdaterのbinフォルダ）
2019/3/20　v0.1.3に対応（WiFi SmartConfigを追加）　
2019/3/18　新規作成

カテゴリー
M5Stack
タグ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

M5Stack

前の記事

M5Stack LovyanLauncherメニュー
2019年3月17日
M5Stack

次の記事

M5Stack LovyanLauncher対応アプリの作り方
2019年3月19日