工作と競馬2

電子工作、プログラミング、木工といった工作の記録記事、競馬に関する考察記事を掲載するブログ

Flutterアプリ開発環境構築メモ

概要

Flutterアプリ開発するための自分用メモ。環境構築~Visual Studio Code上でサンプルアプリを作成して動かすまでを行った。




背景と目的

最近、Flutterでアプリを作成しなければならなくなった。そのため、環境構築からサンプルアプリの動作確認までを行ってみる。



詳細

環境

winget install --id Microsoft.Powershell --source winget

Flutterのインストール

https://docs.flutter.dev/get-started/install

上記リンクに従い、VSCodeで、Flutterの新規プロジェクトを作成し、

が出たらDownload SDKを選択し、保存先を訊かれるので以下のディレクトリを指定。

C:\dev

実行結果は以下。

Checking Dart SDK version... 
Downloading Dart SDK from Flutter engine ... 
Expanding downloaded archive with PowerShell...
Building flutter tool... 
Running pub upgrade... 
Resolving dependencies...
Downloading packages...
Got dependencies.
Downloading Material fonts...                                      434ms
Downloading Gradle Wrapper...                                       15ms
Downloading package sky_engine...                                   92ms
Downloading flutter_patched_sdk tools...                           335ms
Downloading flutter_patched_sdk_product tools...                   260ms
Downloading windows-x64 tools...                                 2,538ms
Downloading windows-x64/font-subset tools...                       246ms
[!] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3672], locale ja-JP)
    • Flutter version 3.22.2 on channel stable at C:\dev\flutter
    ! The flutter binary is not on your path. Consider adding C:\dev\flutter\bin to your path.
    ! The dart binary is not on your path. Consider adding C:\dev\flutter\bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (5 days ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[X] Android toolchain - develop for Android devices
    • Android SDK at C:\Users\conqu\AppData\Local\Android\sdk
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.32)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.34301.259
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    X Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[√] VS Code (version 1.89.1)
    • VS Code at C:\Users\conqu\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.90.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3672]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 125.0.6422.142
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 125.0.2535.92

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 3 categories.
exit code 0

パスの設定

自分で、環境変数PATHに

C:\dev\flutter\bin

を追加した。これでflutterコマンドが使えるようになる。


Android Studioの設定

https://docs.flutter.dev/get-started/install/windows/mobile#configure-android-development


開発用Android Device

手持ちのSH-M24をPCに接続。開発者オプション > USBデバッグを有効化し、

flutter devices

を実行。ちゃんと認識された。

Found 4 connected devices:
  SH M24 (mobile)   • 354570320521424 • android-arm64  • Android 14 (API 34)
  Windows (desktop) • windows         • windows-x64    • Microsoft Windows [Version 10.0.22631.3672]
  Chrome (web)      • chrome          • web-javascript • Google Chrome 125.0.6422.142
  Edge (web)        • edge            • web-javascript • Microsoft Edge 125.0.2535.92


Flutter doctor

最後に、確認。

PS C:\Users\{USERNAME}> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3672], locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc4)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.32)
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.90.0)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!


Visual Studio Code上でサンプルアプリを作成

https://docs.flutter.dev/get-started/test-drive

上記リンクにしたがう。

コマンドパレットから、

Flutter: New Project

を選び、Applicationを選択。プロジェクト名は、Flutter_application_1。プロジェクトディレクトリを選択すると、プロジェクト名のフォルダができて、その中に必要ファイル一式が生成された。ioslinuxwindowsというフォルダがある。

lib/main.dartというファイルを開くと、コードが書かれている。参考リンクにコメントを読めと書いてあるので、一応目を通すが、とりあえず動かしたいので、コマンドパレットから、

Flutter: Select Device

を選び、先ほど接続確認できた実機を選択。メニューバーの

実行 > デバッグの開始

を選択。デバッグが実行し始めるが、初回はそれなりに時間がかかる。数分を要した。数分後、以下の画面が表示されて無事実行できたことが確認できた。

参考リンクには、ホットリロードの確認の手順があるのでやっておく。109行目のpushedをclickedに変更。

ファイルを保存すると自動でリビルドが走り、以下が表示された。これで、ひとまずサンプルアプリの動作確認はOK。


参考



まとめと今後の課題

Flutterの開発環境を構築し、Visual Studio Codeからサンプルアプリを動かすことができた。これを基に、アプリを作成していく。


M5UnitV2用の物体検出モデルを作成する

概要

M5UnitV2用の物体検出モデルをEdge Impulseにて作成し動作させた。




背景と目的



詳細

0. 実施環境

  • Windows PC
  • Ubuntu 20.04.6(WSL)
  • 社内プロキシ設定は適宜やっておくこと。やっておかないと後述のapt、cmakeなどでダウンロード失敗する。


1. クロスビルド環境の用意

ターゲットデバイスであるM5UnitV2は、ハードウェアリソースが限られるためセルフビルトが難しい。そこで、PC(Ubuntu)上にM5UnitV2すなわちARM/Linux用クロスビルド環境を準備する。

参考1に従い、クロスコンパイラ一式をダウンロード。解凍して、/opt/externalに配置。

apt update
apt install cmake
wget -O gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf.tar.xz "https://developer.arm.com/-/media/Files/downloads/gnu-a/10.2-2020.11/binrel/gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf.tar.xz?revision=d0b90559-3960-4e4b-9297-7ddbc3e52783&la=en&hash=985078B758BC782BC338DB947347107FBCF8EF6B"
tar -xf gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf.tar.xz
sudo mkdir /opt/external
sudo mv gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf /opt/external

.bashrcを編集して、クロスコンパイラへのパスを通す。

sudo nano ~/.bashrc

最下行に以下を追記。

export PATH="$PATH:/opt/external/gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf/bin/"

現在のコマンドラインに適用。

source ~/.bashrc


2. アプリケーションソースコードの準備

2.1 アプリケーションのひな型ソースコード

参考1サイトにある以下のリポジトリからダウンロードする。

git clone https://github.com/metanav/example-standalone-inferencing-linux.git

2.2 OpenCV関連のビルド

アプリケーションで利用するため、OpenCVのライブラリ群をビルドする。example-standalone-inferencing-linuxに入っているbuild-opencv-linux.shを使用するが、その前にクロスコンパイラを使うように修正が必要。まず、build-opencv-linux.shの以下部分をコメントアウト

# mkdir -p build_opencv
# cd build_opencv
# cmake -DCMAKE_TOOLCHAIN_FILE=../opencv/platforms/linux/arm-gnueabi.toolchain.cmake -DOPENCV_EXTRA_MODULES_PATH=../opencv_contrib/modules  -DBUILD_LIST=photo,stitching,objdetect,tracking,imgcodecs,videoio,highgui,features2d,ml,xfeatures2d -DCMAKE_BUILD_TYPE=Release -DBUILD_EXAMPLES=ON ../opencv
# make -j
# sudo make install

そのうえで、実行。

./build-opencv-linux.sh

example-standalone-inferencing-linuxディレクトリにopencvディレクトリができる。ここで、opencv/opencv/platforms/linux/arm-gnueabi.toolchain.cmakeを修正する。

set(GCC_COMPILER_VERSION "" CACHE STRING "GCC Compiler version")
set(GNU_MACHINE "arm-linux-gnueabi" CACHE STRING "GNU compiler triple")

# この2行を追記
set(CMAKE_C_COMPILER "arm-none-linux-gnueabihf-gcc")
set(CMAKE_CXX_COMPILER "arm-none-linux-gnueabihf-g++")

include("${CMAKE_CURRENT_LIST_DIR}/arm.toolchain.cmake")

ジョブ数を指定。指定しないと、メモリを使い果たして途中でエラーが起きるのでbuild-opencv-linux.shを修正。

make -j
↓
make -j 2

再度、build-opencv-linux.shのコメントアウトした部分を戻す。

mkdir -p build_opencv
cd build_opencv
cmake -DCMAKE_TOOLCHAIN_FILE=../opencv/platforms/linux/arm-gnueabi.toolchain.cmake -DOPENCV_EXTRA_MODULES_PATH=../opencv_contrib/modules  -DBUILD_LIST=photo,stitching,objdetect,tracking,imgcodecs,videoio,highgui,features2d,ml,xfeatures2d -DCMAKE_BUILD_TYPE=Release -DBUILD_EXAMPLES=ON ../opencv
make -j
sudo make install

そのうえで、実行。10分くらいかかった。

./build-opencv-linux.sh


3. Edge Impulseでモデルを作成

諸設定があるが、出力がTensorFlow Lite形式とする。


4. アプリケーションにモデルを埋め込む

4.1 cpp-mjpeg-streamerのソースコードを取得

git clone https://github.com/nadjieb/cpp-mjpeg-streamer.git 

なお、後述のいくつかのファイル修正は、このソースコードに関連したもののようだが、このソースコードが作成された時と関連するライブラリのバージョン等が整合しないために起きていると思われる。なので、現物に合わせて修正をしていくしかない。

4.2 モデルデータをコピー

Edge Impulseからダウンロードしたファイル一式を解凍し、以下のフォルダ、ファイルを、example-standalone-inferencing-linuxディレクトリ直下にコピーする。

  • edge-impulse-sdk
  • model-parameters
  • tflite-model
  • CMakeList.txt


4.3 Makefile修正

example-standalone-inferencing-linuxMakefileをそのまま使ってビルドすると、cpp-mjpeg-streamer関連で以下のいくつかエラーが出るのであらかじめ修正をしておく。

エラー内容: shared_mutexが存在しないなどと一連のエラーが出る

cpp-mjpeg-streamer/include/nadjieb/net/topic.hpp:73:10: error: ‘shared_mutex’ in namespace ‘std’ does not name a type
   73 |     std::shared_mutex buffer_mtx_;
      |          ^~~~~~~~~~~~
cpp-mjpeg-streamer/include/nadjieb/net/topic.hpp:73:5: note: ‘std::shared_mutex’ is only available from C++17 onwards
   73 |     std::shared_mutex buffer_mtx_;

C++17でしか使えないため、Makefileで以下を修正。

CXXFLAGS += -std=c++14
↓
CXXFLAGS += -std=c++17

エラー内容: opencvの各種ライブラリが参照できないエラー

opencv/build_opencv/libを参照する必要があるのでMakefileの以下の部分を修正。

LDFLAGS += -Lopencv/build_opencv/install/lib -Wl,-Ropencv/build_opencv/install/lib
↓
LDFLAGS += -Lopencv/build_opencv/lib -Wl,-Ropencv/build_opencv/lib

ロスコンパイラーのパス指定

CC := ../gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf/bin/arm-none-linux-gnueabihf-gcc
CXX := ../external/gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf/bin/arm-none-linux-gnueabihf-g++
↓
CC := /opt/external/gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf/bin/arm-none-linux-gnueabihf-gcc
CXX := /opt/external/gcc-arm-10.2-2020.11-x86_64-arm-none-linux-gnueabihf/bin/arm-none-linux-gnueabihf-g++

4.4 camera.cpp修正

isAliveが存在しない旨のエラーが出るので、camera.cppを修正。

source/camera.cpp:183:15: error: ‘using MJPEGStreamer = class nadjieb::MJPEGStreamer’ {aka ‘class nadjieb::MJPEGStreame’} has no member named ‘isAlive’
  183 |  if (streamer.isAlive()) {
      |               ^~~~~~~
make: *** [Makefile:104: source/camera.o] Error 1

MJPEGStreamerの定義を見る限り、isAliveというメソッドはなく代わりにisRunningというものがある。なので、source/camera.cppの185行目を以下のように修正。

isAlive
↓
isRunning

4.5 ビルド

以下を実行。

APP_CAMERA=1 TARGET_LINUX_ARMV7=1 USE_FULL_TFLITE=1 make -j 4

buildディレクトリにcameraというアプリができる。


5. デバイスで実行

作成したアプリケーションをデバイスに転送。

scp build/camera root@10.254.239.1:/home/m5stack

UnitV2側のコンソールで、

cd /home/m5stack
./camera 0

として実行開始する。


6. シリアルに結果を出力する

プリインストールアプリのserver_core.pyを見ると、/dev/ttyS1を使用している。つまり、Grove端子に出ているのは/dev/ttyS1だ。

ser = serial.Serial('/dev/ttyS1', 115200, timeout=0.5)

なので、/home/m5stackの./cameraの標準出力を/dev/ttyS1に流すPythonスクリプトを作成。

import serial
import time
import traceback
import subprocess

ser = serial.Serial("/dev/ttyS1", 115200)

try:
    with subprocess.Popen(["./camera", "0"], stdout=subprocess.PIPE, stderr=subprocess.PIPE) as proc:
        while True:
            line = proc.stdout.readline()
            # print(line.decode("utf-8"))
            ser.write(line + b"\n")
            ser.flush()
            time.sleep(0.01)
except:
    traceback.print_exc()

ser.close()

これで、Grove端子に接続した他のデバイスで、検出結果がもらえるようになった。


7. その他

7.1 CPU温度をチェック

cat /sys/devices/system/cpu/cpufreq/temp_out

参考



まとめと今後の課題


ツールボックスの製作

概要

大工道具などを収納する木製ツールボックスを自作した。




背景と目的

昨年家を建て庭ができたことで、木工系の作業を行う機会が以前より増えた。庭で作業する場合には、家の中からいくつもの道具を運ぶのがなかなか面倒である。なので、必要な道具を収納できてまとめて持ち運びできるツールボックスを、ネット通販やホームセンターなどで探したのだが、希望のサイズ、形状(構造)で、かつ、値段的に満足できるものが残念ながら見つからなかった。

そこで、自作することにした。



詳細

仕様の整理

  • サイズ
    • 室内の収納のサイズ、持っている工具類の量を考慮し、横幅45cm程度、奥行30cm程度、高さ30cm程度以内
  • 形状(構造)
    • 高さは5cm程度の3つの引き出しを持たせる。木工(大工)系、金工系、その他汎用系のイメージ。
    • 引き出しの中は製作時点では仕切り等は設けない。工具の形に合わせて必要に応じて追加していく想定
  • コスト
    • 数1000円以内
  • 外観
    • 基本的機能と無関係であるため、コスト・製作工数を考慮して塗装なし。安全に使用できるように、最低限のやすり掛けを行う。


設計

  • 材質は、シナ合板を想定。
  • 板取効率から、横幅450mm+板厚、奥行300mm、高さ300mm。
  • 引き出しは3段あり、内寸はおよそ439mm×280mm×50mmである。引き出し底板や段の受けの分があるため、段ピッチは約70mmである。
  • 基本的な板厚は、引き出し部は5.5mm、その他は9mmとする。
  • 左右上部には、取っ手となる穴があり、持ち運びやすさを考慮した。
  • 天板の上にさらに約60mmの高さの囲いがあり、手持ちの電動ドリルを収めたケースをそのまま載せることができる。


製作

材料調達

ホームセンターで、シナ合板とラワン合板を購入本当は、すべてシナ合板にしたかったのだが、昨今の物価高、円高の影響か、以前と値段があまりに違うため、急遽ラワンに変更した。それでも、2年前の価格を基に見積もった値段に対して、3割くらい高くになってしまった。

トータル約6000円弱。


部材切り出し

大きめの部材は、ホームセンターのカットサービス。細かい部材は自分で切り出し。


引き出し部

引き出し部は、5.5mm厚のラワン。まず底板の周辺部に側板を接着し、その後前面、取っ手部分の順で接着。


フレーム部

引き出しの受け部分は、正確な寸法でないと、引き出しの動きが悪くなってしまうので慎重に寸法を確認して接着。三角形の補強材などもつけたので、それなりに丈夫に組みあがった。 正面の板と内部の補強材の一部がシナ合板。価格の都合でラワンを多めに使ったため、シナを外装部分で使用できなかった。

かなり、無骨な印象。


仕上げ

最後に、フレーム、引き出しともにやすり掛けをして角を丸めた。とくに、ラワンはシナよりササクレが多いので、注意して十分にかけておいた。手で触っても、滑らかで全く問題ない。角が丸くなり、多少無骨な印象も薄れた。


完成

天板に、手持ちの電動ドリル一式をそのまま納められる。引き出しは、高さ50mmの内寸があり、手持ちのツールを基本的にすべて収納できる。ツールの細かい配置は、使いながら決めていき、最終的には仕切りをつけて定物定置を徹底したい。 実際にツールを収納して運んでみたが、十分に使えるものになったなと実感できた。



まとめと今後の課題

自分の希望に合わせてツールボックスを自作することができた。今後は、引き出しの中に仕切りを入れ、定物定置を徐々に進めていくことで、より使いやすさを向上させていきたい。