iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
0
Mobile Development

「Google Flutter」學習筆記系列 第 21

【Day 21】Flutter-AI-Rubik-cube-Solver - 讓 flutter 幫你解魔術方塊?

今日要點
》前言
》介紹 Flutter-AI-Rubik-cube-Solver 專案
》下載並編譯 Flutter-AI-Rubik-cube-Solver 專案
》程式架構研究


前言

先寫重點,這個專案,只有前端 Flutter 的部份,並沒有 Server 的部份,所以暫時沒法幫你解魔術方塊。
所以這篇只有研究一下 Flutter 的部份。

介紹 Flutter-AI-Rubik-cube-Solver 專案

今天要介紹的Github專案,Flutter-AI-Rubik-cube-Solver 可以用手機拍魔術方塊6個面,然後跟你說解決的步驟。brinesoftwares/Flutter-AI-Rubik-cube-Solver 有 619 的星星 。示範影片很酷,但因為他的 server api 沒有公開出來,所以實際上這個專案還不能協助你,處裡你手上亂亂的魔術方塊。

雖然如此,他的前端 flutter UI 介面是正常的,只要能知道他從 server 回傳的資料格式,展示方塊 6 個面的部份應該可以跑起來,不過解決步驟大概就不行,有賴之後他是否有進一步的說明,不然 Readme.md, 也有列出相關的參考連結,

Readme.md 裡的參考 Libraries。
Python Libraries
Flask (https://pypi.org/project/Flask/)
Numpy (https://pypi.org/project/numpy/)
Rubik Solver (https://pypi.org/project/rubik-solver/)
Rubiks Cube Tracker (https://github.com/dwalton76/rubiks-cube-tracker)
OpenCV (https://pypi.org/project/opencv-python/)

有興趣也許可以自己建立 server,來解這個魔術方塊,XD

build 成功還蠻興奮的,結果發現還不能動,不過都花時間研究了,就先記錄一下,以後有空再研究囉。

先看看他的運行畫面,來看看效果。

他需要你先拍魔術方塊的 6 個面的照片,他會把照片傳到 server 用 opencv 去看看是否辨識成功,這裡是他分享在Facebook社團的展示影片

下載並編譯 Flutter-AI-Rubik-cube-Solver 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 Flutter-AI-Rubik-cube-Solver 專案囉。

% git clone https://github.com/brinesoftwares/Flutter-AI-Rubik-cube-Solver.git

Cloning into 'Flutter-AI-Rubik-cube-Solver'...
remote: Enumerating objects: 158, done.
remote: Counting objects: 100% (158/158), done.
remote: Compressing objects: 100% (123/123), done.
remote: Total 158 (delta 20), reused 144 (delta 12), pack-reused 0
Receiving objects: 100% (158/158), 1.05 MiB | 619.00 KiB/s, done.
Resolving deltas: 100% (20/20), done.


% cd Flutter-AI-Rubik-cube-Solver 
% flutter pub get

Running "flutter pub get" in Flutter-AI-Rubik-cube-Solver...     2.5s

試 build 一下,

% flutter run -d all


ok,一次成功 Android 執行起來了,iOS也OK。

不過因為要用到相機,要實際把 App 放到你的手機裡去,所以要設定一下 Xcode 專案裡的 Signing & Capabilities 的設定

設定好後可以在Xcode直接run, 就可以在手機上看到畫面了,但是你按下拍照時,會當掉。看一下訊息。

Runner[1108:240946] [access] This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.

嗯,少了使用相機的設定。把 NSCameraUsageDescription 加到 Info.plist 去

再點 + 拍照時,就不會當掉了。

不過你拍照後,送給 server 辨識時,會出現 server error, 因為他的 server 是內部 ip 外面是連不到的。

程式架構研究

main.dart : ScopedModel(model: DataState(), child: MaterialApp())

home.dart : Scaffold

重要的一行 XD

 final server_url = "http://192.168.43.75:5000/";  //change your URL or local IP

Server Error 出現的地方。

今天就先這樣吧,這是個有趣的專案,可惜沒有 Server 的部份。不過我也認真的研究了一下,也算是一次實作練習。

好,第21天,寫完。

參考

Solving Rubik’s Cube with a Robot Hand


上一篇
【Day 20】Animated-Text-Kit - 來點動感的文字訊息
下一篇
【Day 22】flutter_shuqi - 模仿小說閱讀器App的版面配置專案
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言