FlutterをROS(ロボティクス)と一緒使ったらマジですごかった話 - Droidkaigi2022

Droidkaigi2022
FlutterをROS(ロボティクス)と一緒使ったらマジですごかった話

code:
1. https://github.com/JAICHANGPARK/flutter_droidkaigi_2022
2. https://github.com/JAICHANGPARK/ros2_droidkaigi2022

Transcript

1. をROS(ロボティクス)と 一緒使ったらマジで すごかった話 @Dreamwalker JaiChang. Park 1 Flutter
2. 自己紹介 アンニョンハセヨ • Park. Jai-Chang (@Dreamwalker) • 現 | Dreamus Company (Cloud Engineer) • 前 | Angel Robotics • Flutter Korea Seoul - Organizer 2 JAICHANGPARK
3. 一緒に楽しみましょう。 3 https://droidkaigi-2022.web.app/ Stack 1. Flutter : 3.4.0-34.0.pre.33 2. Firebase
4. Agenda 今年のFlutterまとめ -------------------------------------------------------- ROSについて ---------------------------------------------------------------- なぜFlutterだったのか ------------------------------------------------------ FlutterとROSの間やり取りする(インターフェース)方法 -------------------- Demo 🔥-------------------------------------------------------------------- 01 02 03 04 05 4 8分 7分 10分 10分 5分 40分
5. 1 今年のFlutterまとめ 5
6. 1. 今年のFlutterまとめ 6 @ https://medium.com/flutter/introducing-flutter-3-5eb69151622f Flutter 3
7. 1. 今年のFlutterまとめ 7 @ https://medium.com/flutter/introducing-flutter-3-5eb69151622f Flutter 3 2022年5月12日、Google I / Oで Flutter 3 バージョンを発表 2021年 9月 2022年 2月3日 2022年 5月11日 2018年12月4日 Flutter Live in London 約4年前 3.3 2022年 8月30日
8. 1. 今年のFlutterまとめ 8 Flutter 3 1.1 Desktop - macOS & Linux stable & all desktop platform stable support Windows、macOS、Linuxデスクトッププラットフォームがすべて stableに上方になった。 https://docs.flutter.dev/development/platform-integration/desktop 1.2 Apple Silicon processors のサポート https://docs.flutter.dev/get-started/install/macos 1.3 Firebaseの公式ドキュメントを移動 https://firebase.google.com/docs/flutter/setup?platform=ios 1.4 Material 3 Component サポート 1.5 Casual Games Toolkit 1.6 Dart 2.17 Foldable phone support 要約
9. 1. 今年のFlutterまとめ 9 Flutter 3 1.1. Desktop - macOS & Linux stable https://github.com/flutter/flutter/wiki/Roadmap Roadmap - Desktop In 2022 we plan to bring our desktop support to the stable channel. We plan on focusing on testing and announcing one platform at a time, as they become ready, starting with Windows, then Linux, and macOS. A significant part of this effort is expanding our regression test suite to give us the confidence that enables us to expand on these efforts without breaking existing code.
10. 1. 今年のFlutterまとめ 10 Flutter 3 1.1. Desktop - macOS & Linux stable 2018年からテストトップ プラットフォーム関連の開発は進行中であった。
11. 1. 今年のFlutterまとめ 11 Flutter 3 今年5月、Flutter 3 発表でデスクトップ プラットフォーム関連の stableプロジェクトがすべて終了しました。 (beta→stable) 1.1. Desktop - macOS & Linux stable
12. 1. 今年のFlutterまとめ 12 Flutter 3 1.1. Desktop - macOS & Linux stable https://github.com/google/flutter-desktop-embedding
13. 1. 今年のFlutterまとめ 13 Flutter 3 1.1. Desktop - macOS & Linux stable • Cascading menus and support for the macOS system menu bar https://medium.com/flutter/whats-new-in-flutter-3-8 c74a5bc32d0 • canonicalでのLinuxプラットフォームパッ ケージの開発とサポート
14. 1. 今年のFlutterまとめ 14 Flutter 3 1.2. Apple Silicon processors サポート Dart 2.14バージョンからApple Siliconサポートを開始 しました。
15. 1. 今年のFlutterまとめ 15 Flutter 3 1.2. Apple Silicon processors サポート ちなみに、32ビットiOSデバイスのサポートが中 止されました。 https://github.com/flutter/flutter/issues/97327 Sunsetting 32-bit iOS/iOS 9/iOS 10 As we announced in Feb 2022 with the 2.10 stable release, Flutter’s support for 32-bit iOS devices and iOS versions 9 and 10 is coming to an end. This change affects the iPhone 4S, iPhone 5, iPhone 5C, and the 2nd, 3d, and 4th gen iPad devices. Flutter 3 is the last stable release that supports these iOS versions and devices.
16. 1. 今年のFlutterまとめ 16 Flutter 3 1.3. Firebaseの公式ドキュメントを移動
17. 1. 今年のFlutterまとめ 17 Flutter 3 1.3. Firebaseの公式ドキュメントを移動 • Webとデスクトッププラット フォームには まだ完全にサポートされて いないプラグインがあり、開 発時に参考にしてください。 https://firebase.google.com/docs/flutter/se tup?platform=ios#available-plugins
18. 1. 今年のFlutterまとめ 18 Flutter 3 1.4. Material 3 Component サポート https://m3.material.io/ Work in progress 🚧
19. 1. 今年のFlutterまとめ 19 Flutter 3 1.5. Casual Games Toolkit https://docs.flutter.dev/resources/games-toolkit https://flutter.dev/games
20. 1. 今年のFlutterまとめ 20 Flutter 3 1.5. Casual Games Toolkit • ゲーム開発に必要なテンプレート を提供します。 Animations & sprites rive package spriteWidget package App review app_review package Audio audioplayers package Firebase Flutter Firebase getting started guide NEWLY UPDATED firebase_crashlytics package (tracks crashes of your app) Game engines Flame engine Bonfire engine forge2d package Games services game center and google play games services. games_services package Images and icons CraftPix (free and purchasable assets) Game Developer Studio (purchasable asset packs) GIMP (a free image editor to create your own assets) Persistence shared_preferences package sqflite package Win 32 win32_gamepad package (supports win32 gamepad)
21. 1. 今年のFlutterまとめ 21 Flutter 3 1.6. Dart 2.17 https://medium.com/dartlang/dart-2-17-b216bfc80c5d https://dart.dev/guides/whats-new#may-11-2022-217-release
22. 1. 今年のFlutterまとめ 22 Flutter 3 1.6. Dart 2.17 https://medium.com/dartlang/dart-2-17-b216bfc80c5d
23. 1. 今年のFlutterまとめ 23 Flutter 3 1.6. Dart 2.17 https://medium.com/dartlang/dart-2-17-b216bfc80c5d
24. 1. 今年のFlutterまとめ 24 Flutter 3.3 2022年8月30日Flutterバージョン3.3が発表されました。
25. 1. 今年のFlutterまとめ 25 1.1 Global Selection Widget 1.2 Scribble Widget 1.3 Text input - improve support for rich text editing 1.4 Material Design 3 Widget 1.5 go_router 5.0 Router 1.6 Impeller - Flutter Engine renderer Flutter 3.3 要約
26. 1. 今年のFlutterまとめ 26 1.1. Global Selection https://medium.com/flutter/whats-new-in-flutter-3-3-893c7b9af1ff Flutter 3.3
27. 1. 今年のFlutterまとめ 27 1.2. Scribble https://medium.com/flutter/whats-new-in-flutter-3-3-893c7b9af1ff • Flutter now supports Scribble handwriting input using the Apple Pencil on iPadOS. Flutter 3.3 https://unsplash.com/photos/KdjwLc4Ihtk
28. 1. 今年のFlutterまとめ 28 1.3. Text input - improve support for rich text editing https://medium.com/flutter/whats-new-in-flutter-3-3-893c7b9af1ff https://flutter.github.io/samples/web/simplistic_editor/#/ Flutter 3.3
29. 1. 今年のFlutterまとめ 29 1.4. Material Design 3 - Flutterまとめ Flutter 3.3 https://github.com/flutter/flutter/issues/91605 • Flutter 3.3バージョンでは、3つのコ ンポーネントが追加されました。 ◦ IconButton ◦ Chips ◦ AppBar
30. 1. 今年のFlutterまとめ 30 1.4. Material Design 3 - Flutterまとめ Flutter 3.3 Chips Bottom AppBar Bottom Sheet Slider Switch CheckBox DatePicker TimePicker Stable ⚠ ❌ ❌ ❌ ❌ ❌ ❌ ❌ Master ✅ 🚧 🚧 🚧 ⚠ ✅ 🚧 🚧 完了 作業中 作業中 計画中 作業中 完了 作業中 作業中 Menu TextField Drawer Divider Top AppBar Radio Button Progress Indicator Material Banner Stable ❌ ❌ ❌ ❌ ❌ ❌ ❌ ❌ Master ⚠ ✅ 🚧 ✅ 🚧 ✅ ✅ ✅ 作業中 完了 作業中 完了 作業中 完了 完了 完了
31. 1. 今年のFlutterまとめ 31 1.4. Material Design 3 - Jetpack Compose Flutter 3.3 https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary Bottom app bar Planned Bottom sheets Planned
32. 1. 今年のFlutterまとめ 32 1.4. Material Design 3 - Flutterまとめ Flutter 3.3 • Material3 適用方
33. 1. 今年のFlutterまとめ 33 1.5. go_router 5.0 Flutter 3.3 https://docs.google.com/document/d/10l22o4ml4S s83UyzqUC8_xYOv_QjZEi80lJDNE4q7wM/edit?u sp=sharing&resourcekey=0-U-BXBQzNfkk4v241 Ow-vZg 初期のNavigator & router Navigator2 登場 使いやすく包まれた パッケージ webプラットフォー ムに ちょっと不適切だと 思いませんか？ あ、、なんか難しい ですね。 使いにくいです ね。 go_router 改善
34. 1. 今年のFlutterまとめ 34 1.5. go_router 5.0 Flutter 3.3 AS-IS TO-BE
35. 1. 今年のFlutterまとめ 35 1.6. Impeller Flutter 3.3 • Impeller is a rendering runtime for Flutter https://docs.flutter.dev/perf/shader https://github.com/flutter/engine/tree/main/impeller
36. 1. 今年のFlutterまとめ 36 1.6. Impeller Flutter 3.3 Flutter Build Shader生成 • Flutter エンジンを構築するときに、 Impeller は必要なすべてのシェーダーを生成してコンパイルします。 Shader コンパイル App Run Runtime Flutter Build Shader生成 Shader コンパイル App Run Runtime コンパイルによって数十フレームが欠落し、 fpsが 60 から 6 に低下する可能性があります。 AS-IS TO-BE compilation jank
37. 1. 今年のFlutterまとめ 37 1.6. Impeller Flutter 3.3 IOS - Info.plist Android - AndroidManifest.xml impeller 適用して実行
38. 2 ROSについて 38
39. 2. ROSについて 39 The Robot Operating System (ROS) is a set of software libraries and tools for building robot applications.
40. 2. ROSについて 40 Walt Disney Imagineering Disney Parks Walt Disney Imagineering Walt Disney Imagineering Disney Parks Amusement Labs
41. 2. ROSについて 41 ubuntu 20.04 ubuntu 22.04 22年5月23日発表 ubuntu 20.04
42. 2. ROSについて 42 • Distribution ここ 注目ポイント 2つあるよ
43. 2. ROSについて 43 Arctic Fox | 2020.3.1 Bumblebee | 2021.1.1 Chipmunk | 2021.2.1 Dolphin | 2021.3.1 Electric Eel | 2022.1.1 Flamingo | 2022.2.1 • Point 1
44. 2. ROSについて 44 • Point 2
45. 2. ROSについて 45 05-23 世界カメの日
46. 2. ROSについて 46 Node, Service, Action..Goal.. Topic, Publisher, Subscriber… Point 1
47. 2. ROSについて 47 ROS1 とROS2の差はなんでしょうか？ Point 2
48. 2. ROSについて 48 https://design.ros2.org/articles/ros_on_dds.html By default, ROS 2 uses DDS as its middleware. It is compatible with multiple DDS or RTPS (the DDS wire protocol) vendors. There is currently support for eProsima’s Fast DDS, RTI’s Connext DDS, Eclipse Cyclone DDS, and GurumNetworks GurumDDS. See https://ros.org/reps/rep-2000.html for supported DDS vendors by distribution. In Foxy, the default DDS vendor is eProsima’s Fast DDS. • Working with Eclipse Cyclone DDS explains how to utilize Cyclone DDS. • Working with eProsima Fast DDS explains how to utilize Fast DDS. • Working with GurumNetworks GurumDDS explains how to utilize GurumDDS. Data Distribution Service(DDS)
49. 2. ROSについて 49 Data Distribution Service(DDS) B Machine C Machine N Machine A Robot Router Network Data Sensor1 Data SensorA SensorB Node ROS_DOMAIN に制限することができます。 Sensors A Sensors B
50. 2. ROSについて 50 最大の利点は、マシン間情報通信に標準化された メッセージがあることです。 Point 3
51. 2. ROSについて 51 ROS2 インストール https://docs.ros.org/en/foxy/Installation.html https://docs.ros.org/en/humble/Installation.html 個人的にUbuntu OS上で 開発して使用することをお勧めします。
52. 2. ROSについて 52 今年は京都でROSConが 10月19日から22日まで 開催されます。 https://roscon.ros.org/2022/ Point 4
53. 3 なぜFlutterだったのか 53
54. 3. なぜFlutterだったのか 54 Q. ロボットとFlutterとは どんな関係があり、 なぜFlutterを選んだのですか？
55. 3. なぜFlutterだったのか 55 まず.. 目標は、製品を使用できるようにユーザーのための アプリケーションを開発して提供することでした。 これは製品開発の立場で非常に重要な要素の1つです。 最近、すべての製品にディスプレイがついています。 そして、モバイルアプリと連動しています。 https://dream.kotra.or.kr/kotranews/cms/news/actionKotraBoardDetail.d o?SITE_NO=3&MENU_ID=180&CONTENTS_NO=1&bbsGbn=243&bb sSn=243&pNttSn=179934 https://robohon.com/application/ 写真はFlutterとは関係ありません アプリ開発ための 何かUI Framework が必要だ。
56. 3. なぜFlutterだったのか 56 1 適切な時期 2 生産性側面 3 コスト側面 4 開発者の経 験(DX)側面 5 UI品質 側面
57. 3. なぜFlutterだったのか 57 3.1. 適切な時期 NVIDIA Jetson AGX Xavier SBC / Embedded • ロボットはどのコンピュータまたはプロセッサが使用されますか？ Computing Power(コンピュー ティングパワー)の増 加
58. 3. なぜFlutterだったのか 58 3.1. 適切な時期 • Embedded ハードウェアとしてNvidiaのJetson Xavier NXを使っていました。 • Jetpack SDKはUbuntu OS(Linux)を使用している。 • 別のハードウェアなしで、そのままユーザーが使用できる Debugアプリが必要でした。 Nvidia Jetson Xavier NX
59. 3. なぜFlutterだったのか 59 3.1. 適切な時期 https://developer.nvidia.com/embedded/jetpack • 今年、新しいJETPACK SDKが公開され、前の18.04から20.04に上向き サポート
60. 3. なぜFlutterだったのか 60 3.1. 適切な時期 Desktop Platform Stable Flutter 2.10 Stable Flutter 3.0 Stable • FlutterのLinux Desktopサポート+マルチプラットフォーム linux環境 でも 使えるyo-!
61. 3. なぜFlutterだったのか 61 3.2. 生産性側面 A君 こんにちは。今回の製品をユーザーが使えるようにインターフェー スを持つアプリケーションが必要だと思います。 (モニタリング、操作など ) B君 どのプラットフォームで提供されるのが良いでしょ うか？ A君 Androidユーザーが多いので、 AndroidOSで使 用できるようにしてください。 B君 はい、、了解です。 例
62. 3. なぜFlutterだったのか 62 3.2. 生産性側面 아~ 이제 안드개발 다했는데 클라이언트 ios에도 되게 해주세요 ^^ 저의 경우 기존 네이티브 개발 대비 생산성이 40%정도 올랐고 코드 작성량은 50% 가량 감소 개발 소요시간 70%이상 감소 (윈도우, 리눅스, 웹, 모바일 ) 제품을 사용자가 쓸 수 있는 인터페이스가 있는 애플리케이션이 필요할거 같습니다. 어떤 플랫폼으로 제공되는게 좋을까요? 안드로이드 사용자가 많으니 안드로이드OS에서 사용할 수 있도록 해주세요.
63. 3. なぜFlutterだったのか 63 3.2. 生産性側面 クラ イア ント そして、Appleデバイスのユーザーもアプリを使え るようになってほしいです。 B君 アプリ開発完了しました。 ご確認お願い致します。 クラ イア ント あの。。もし、 タブレットでも使いたいのですが可能ですか？ B君 …..　（） …..　（今iOS開発者いない。。） PM B君 PM 💦 💦 例
64. 3. なぜFlutterだったのか 64 3.2. 生産性側面 40% 生産性 Up 50% コード作成量 Down 70% 開発時間 Down • Flutterを適用することで、Single Code Baseで Android、iOS、Web、Linux Desktopなどに対応出来ました。
65. 3. なぜFlutterだったのか 65 3.3. コスト側面 • 一般的にQTの場合、個人研究、教育機関などは使用に大きな問題はない。 ◦ 販売を目的としない場合 ◦ ライセンスの購入が必要な場合もあります。 • 販売する製品に入る場合は、ライセンス料を支払う必要があります。(commercial license) • スタートアップやユニコーン企業の場合、費用の負担が大きい。 販売数 費用 AS-IS
66. 3. なぜFlutterだったのか 66 3.3. コスト側面 Open Source Commercial Licenseについて コマーシャルライセンス費用の心配はない。 TO-BE
67. 3. なぜFlutterだったのか 67 3.3. コスト側面 Open Source Commercial Licenseについて コマーシャルライセンス費用の心配はない。 TO-BE
68. 3. なぜFlutterだったのか 68 3.4. 開発者の経験(DX)側面 • DX(Developer Experience) も重要です。 まず、フラッターは既存のモバイル開発者 (Android, iOS)やWeb開発者に 慣れているVSCやAndroid Studioでアプリケーション開発が可能。 • これとは逆に、QTの場合、QTツールを別々に学ぶ時間がかなりかかります。 • Hot Reload🔥 https://wiki.qt.io/QtCreatorWhitepaper
69. 3. なぜFlutterだったのか 69 3.4. 開発者の経験(DX)側面 • Androidアプリ開発者も簡単にアプリ開発可能 ◦ 基本的なフラッターアプリ開発のための 学習曲線(ランニングカーブ)が低い • Dart言語のOOP（object-orientated language）サポート ◦ kotlin, swift.. • CLI サポート ◦ flutter_tools • i18n (Internationalization )
70. 3. なぜFlutterだったのか 70 3.5. UI品質側面 rqt https://cafe.naver.com/openrt/25073 • UbuntuOSでは、ROSベースのアプリケーションはQTを使って作ったりします。 ROS 専用rqtというものも存在します。 AS-IS
71. 3. なぜFlutterだったのか 71 3.5. UI品質側面 • 宣言的UI • 全てがWidgetである TO-BE Everything is a widget
72. 3. なぜFlutterだったのか 72 3.5. UI品質側面 • Material Design 2または3を適用できます。 • カスタマイズももちろん可能です。 • 開発することとは別に、開発者がDesign Componentsを心配する必要なく、すでによく作ら れたDesign Componentsを使用できます。 TO-BE
73. 3. なぜFlutterだったのか 73 3.6. 最後にusecase側面 ロボティクスでROS2 + Flutterの適用例が少ない（usecase） • 一般的にAndroidやQT、etcで開発されています。 • 挑戦的な目標課題（動機付け）
74. 3. なぜFlutterだったのか 74 制限または 欠点(デメリット) しかし、すべてが完璧ではありません。 1. 現時点のWeb SEO未サポート 2. CJK(中国語、日本語、韓国語)フォントのcanvasKitレンダリング問題 3. キーボード入力の問題（サムスンスマホキーボードなど） 4. その他のマイナーなバグなど
75. 4 FlutterとROSの間 インターフェース方法 75
76. 76 Jetson (Embedded/SBC) Jetpack SDK > 5.0 Ubuntu 20.04 Flutter ROS2 Foxy Ros Node Topic Flutter App Subscription 通信のため 何かが必要 4. FlutterとROSの間インターフェース方法
77. 77 Jetpack SDK > 5.0 Ubuntu 20.04 Flutter ROS2 Foxy Ros Node Flutter App 4. FlutterとROSの間インターフェース方法 AS-IS Publisher Ros Node Subscriber Msg Converter Msg Converter Msg(Data) ProtocolBuffers Decoder gRPC Client gRPC Server Python & Go gRPC Server gRPC
78. 78 Jetpack SDK > 5.0 Ubuntu 20.04 Flutter ROS2 Foxy Ros Node A Flutter App roslibdart 4. FlutterとROSの間インターフェース方法 TO-BE publisher Ros Node rosbridge _server Websocket Server WebSocket Client Ros Node B publisher Topic :9090 JSON
79. 79 4. FlutterとROSの間インターフェース方法 https://github.com/RobotWebTools/rosbridge_suite rosbridge_suite Server Implementations of the rosbridge v2 Protocol rosbridge provides a JSON interface to ROS, allowing any client to send JSON to publish or subscribe to ROS topics, call ROS services, and more. rosbridge supports a variety of transport layers, including WebSockets and TCP. For information on the protocol itself, see the rosbridge protocol specification.
80. 80 4. FlutterとROSの間インターフェース方法 https://github.com/RobotWebTools/rosbridge_suite rosbridge_suite Rosbridge_suit rosbridge_library rosbridge_server rosapi Packages rosbridge_server a WebSocket server implementation that exposes the rosbridge_library.
81. 81 4. FlutterとROSの間インターフェース方法 https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md rosbridge v2.0 Protocol Specification
82. 82 4. FlutterとROSの間インターフェース方法 rosbridge v2.0 Protocol Specification op required subscribe id optional if specified, then this specific subscription can be unsubscribed by referencing the ID. topic required the name of the topic to subscribe to type optional the (expected) type of the topic to subscribe to. If left off, type will be inferred, and if the topic doesn't exist then the command to subscribe will fail throttle_rate optional the minimum amount of time (in ms) that must elapse between messages being sent. Defaults to 0 queue_length optional the size of the queue to buffer messages. Messages are buffered as a result of the throttle_rate. Defaults to 0 (no queueing). fragment_size optional the maximum size that a message can take before it is to be fragmented. compression optional an optional string to specify the compression scheme to be used on messages. Valid values are "none", "png", "cbor", and "cbor-raw".
83. 83 4. FlutterとROSの間インターフェース方法 rosbridge_suite humble ＆ distro
84. 84 4. FlutterとROSの間インターフェース方法 rosbridge_suite Websocket ポート9090を使用してクライアントと通信可能
85. 85 4. FlutterとROSの間インターフェース方法 Flutter Side
86. 86 4. FlutterとROSの間インターフェース方法 Flutter Side 1
87. 87 4. FlutterとROSの間インターフェース方法 Flutter Side 2
88. 88 4. FlutterとROSの間インターフェース方法 Flutter Side 3
89. 89 4. FlutterとROSの間インターフェース方法 Flutter Side 4
90. 90 4. FlutterとROSの間インターフェース方法 Flutter Side
91. 91 4. FlutterとROSの間インターフェース方法 Flutter Side - Websocket web_socket_channel https://pub.dev/packages/web_socket_chan nel
92. 92 4. FlutterとROSの間インターフェース方法 ですが 解像度の高いデータの完全なReal-Timeモニタリングには多少制限がありま す。 60fps(frame per second) 1 frame = 1/60 = 0.0167second = 16.7ms 1k = 1000Hzセンサーデータまたは 60fps以上の解像度を持つセンサーデータは、 解像度を合わせるためのデータ加工が少し必要になります。
93. 93 4. FlutterとROSの間インターフェース方法 Q. インターネットのない環境で スマートフォンやタブレットとどのように通信しますか？ 1. BLE(Bluetooth Low Energy) 2. Wi-Fi Direct(P2P) a. Android 限定 ROS based Product スマホや タブレット Network & Server 直接通信 TCP/IP BLE
94. 94 4. FlutterとROSの間インターフェース方法 Wi-Fi Direct(P2P) https://pub.dev/packages/flutter_p2p https://pub.dev/packages/flutter_p2p_plus
95. 5 🔥 Demo 🔥 95
97. 97 まとめ １。Flutter ３.３になりました ２。ロボット開発はほぼROSを使ってます。 ３。Flutterを使って生産性上がり、コスト利点ありました。 ４。WebSocketを使ってFlutterアプリと通信できます。
98. 98 Thank you! ありがとうございました󰢛 JaiChang Park Contact JAICHANGPARK @jaichangpark @Dreamwalker Dreamus Company
99. Appendix 99 A. macOSでUTM設定方
100. Appendix 100 A. macOSでUTM設定方
101. Appendix 101 A. macOSでUTM設定方
102. Appendix 102 B. ROSとカメ 1. https://en.wikipedia.org/wiki/Elmer_and_Elsie_(robots) 2. https://discourse.ros.org/t/why-are-ros-releases-named-after-turtles/14471 3. https://en.wikipedia.org/wiki/Logo_(programming_language)
103. Appendix 103 C. FLUTTER RENDERING
104. Appendix 104 C. FLUTTER RENDERING • On iOS and macOS, Flutter is loaded into the embedder as a UIViewController or NSViewController, respectively. The platform embedder creates a FlutterEngine, which serves as a host to the Dart VM and your Flutter runtime, and a FlutterViewController, which attaches to the FlutterEngine to pass UIKit or Cocoa input events into Flutter and to display frames rendered by the FlutterEngine using Metal or OpenGL. • On Android, Flutter is, by default, loaded into the embedder as an Activity. The view is controlled by a FlutterView, which renders Flutter content either as a view or a texture, depending on the composition and z-ordering requirements of the Flutter content. • On Windows, Flutter is hosted in a traditional Win32 app, and content is rendered using ANGLE, a library that translates OpenGL API calls to the DirectX 11 equivalents. Efforts are currently underway to also offer a Windows embedder using the UWP app model, as well as to replace ANGLE with a more direct path to the GPU via DirectX 12.
105. Appendix 105 C. FLUTTER RENDERING
106. Appendix 106 C. FLUTTER RENDERING Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products. Skia is sponsored and managed by Google, but is available for use by anyone under the BSD Free Software License. While engineering of the core components is done by the Skia development team, we consider contributions from any source.
107. Appendix 107 C. FLUTTER RENDERING
108. Appendix 108 C. FLUTTER RENDERING ANGLE - Almost Native Graphics Layer Engine The goal of ANGLE is to allow users of multiple operating systems to seamlessly run WebGL and other OpenGL ES content by translating OpenGL ES API calls to one of the hardware-supported APIs available for that platform. ANGLE currently provides translation from OpenGL ES 2.0, 3.0 and 3.1 to Vulkan, desktop OpenGL, OpenGL ES, Direct3D 9, and Direct3D 11. Future plans include ES 3.2, translation to Metal and MacOS, Chrome OS, and Fuchsia support.
109. Appendix 109 C. FLUTTER RENDERING
110. Appendix 110 C. FLUTTER RENDERING Virtual Hematoxylin and Eosin Transillumination Microscopy Using Epi-Fluorescence Imaging
111. Appendix 111 D. FLUTTER DESKTOP SETUP Additional requirements • Windows a. Visual Studio 2022 When installing Visual Studio you need the “Desktop development with C++” workload installed for building windows, including all of its default components. • maxOS a. Xcode b. CocoaPods if you use plugins • Linux a. Clang b. CMake c. GTK development headers d. Ninja build e. pkg-config f. liblzma-dev This dependency may be required https://docs.flutter.dev/development/platform-integration/desktop
112. Appendix 112 D. FLUTTER DESKTOP SETUP
113. Appendix 113 D. FLUTTER DESKTOP SETUP Config
114. Appendix 114 D. FLUTTER DESKTOP SETUP Config
115. Appendix 115 D. FLUTTER DESKTOP SETUP Create Project
116. Appendix 116 D. FLUTTER DESKTOP SETUP Select Device & Run
117. Appendix 117 D. FLUTTER DESKTOP SETUP Select Device & Run