Slide 1

Slide 1 text

をROS(ロボティクス)と 一緒使ったらマジで すごかった話 @Dreamwalker JaiChang. Park 1 Flutter

Slide 2

Slide 2 text

自己紹介 アンニョンハセヨ ● Park. Jai-Chang (@Dreamwalker) ● 現 | Dreamus Company (Cloud Engineer) ● 前 | Angel Robotics ● Flutter Korea Seoul - Organizer 2 JAICHANGPARK

Slide 3

Slide 3 text

一緒に楽しみましょう。 3 https://droidkaigi-2022.web.app/ Stack 1. Flutter : 3.4.0-34.0.pre.33 2. Firebase

Slide 4

Slide 4 text

Agenda 今年のFlutterまとめ -------------------------------------------------------- ROSについて ---------------------------------------------------------------- なぜFlutterだったのか ------------------------------------------------------ FlutterとROSの間やり取りする(インターフェース)方法 -------------------- Demo 🔥-------------------------------------------------------------------- 01 02 03 04 05 4 8分 7分 10分 10分 5分 40分

Slide 5

Slide 5 text

1 今年のFlutterまとめ 5

Slide 6

Slide 6 text

1. 今年のFlutterまとめ 6 @ https://medium.com/flutter/introducing-flutter-3-5eb69151622f Flutter 3

Slide 7

Slide 7 text

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日

Slide 8

Slide 8 text

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 要約

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

1. 今年のFlutterまとめ 10 Flutter 3 1.1. Desktop - macOS & Linux stable 2018年からテストトップ プラットフォーム関連の開発は進行中であった。

Slide 11

Slide 11 text

1. 今年のFlutterまとめ 11 Flutter 3 今年5月、Flutter 3 発表でデスクトップ プラットフォーム関連の stableプロジェクトがすべて終了しました。 (beta→stable) 1.1. Desktop - macOS & Linux stable

Slide 12

Slide 12 text

1. 今年のFlutterまとめ 12 Flutter 3 1.1. Desktop - macOS & Linux stable https://github.com/google/flutter-desktop-embedding

Slide 13

Slide 13 text

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プラットフォームパッ ケージの開発とサポート

Slide 14

Slide 14 text

1. 今年のFlutterまとめ 14 Flutter 3 1.2. Apple Silicon processors サポート Dart 2.14バージョンからApple Siliconサポートを開始 しました。

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

1. 今年のFlutterまとめ 16 Flutter 3 1.3. Firebaseの公式ドキュメントを移動

Slide 17

Slide 17 text

1. 今年のFlutterまとめ 17 Flutter 3 1.3. Firebaseの公式ドキュメントを移動 ● Webとデスクトッププラット フォームには まだ完全にサポートされて いないプラグインがあり、開 発時に参考にしてください。 https://firebase.google.com/docs/flutter/se tup?platform=ios#available-plugins

Slide 18

Slide 18 text

1. 今年のFlutterまとめ 18 Flutter 3 1.4. Material 3 Component サポート https://m3.material.io/ Work in progress 🚧

Slide 19

Slide 19 text

1. 今年のFlutterまとめ 19 Flutter 3 1.5. Casual Games Toolkit https://docs.flutter.dev/resources/games-toolkit https://flutter.dev/games

Slide 20

Slide 20 text

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)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

1. 今年のFlutterまとめ 22 Flutter 3 1.6. Dart 2.17 https://medium.com/dartlang/dart-2-17-b216bfc80c5d

Slide 23

Slide 23 text

1. 今年のFlutterまとめ 23 Flutter 3 1.6. Dart 2.17 https://medium.com/dartlang/dart-2-17-b216bfc80c5d

Slide 24

Slide 24 text

1. 今年のFlutterまとめ 24 Flutter 3.3 2022年8月30日Flutterバージョン3.3が発表されました。

Slide 25

Slide 25 text

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 要約

Slide 26

Slide 26 text

1. 今年のFlutterまとめ 26 1.1. Global Selection https://medium.com/flutter/whats-new-in-flutter-3-3-893c7b9af1ff Flutter 3.3

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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 ⚠ ✅ 🚧 ✅ 🚧 ✅ ✅ ✅ 作業中 完了 作業中 完了 作業中 完了 完了 完了

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

1. 今年のFlutterまとめ 32 1.4. Material Design 3 - Flutterまとめ Flutter 3.3 ● Material3 適用方

Slide 33

Slide 33 text

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 改善

Slide 34

Slide 34 text

1. 今年のFlutterまとめ 34 1.5. go_router 5.0 Flutter 3.3 AS-IS TO-BE

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

1. 今年のFlutterまとめ 37 1.6. Impeller Flutter 3.3 IOS - Info.plist Android - AndroidManifest.xml impeller 適用して実行

Slide 38

Slide 38 text

2 ROSについて 38

Slide 39

Slide 39 text

2. ROSについて 39 The Robot Operating System (ROS) is a set of software libraries and tools for building robot applications.

Slide 40

Slide 40 text

2. ROSについて 40 Walt Disney Imagineering Disney Parks Walt Disney Imagineering Walt Disney Imagineering Disney Parks Amusement Labs

Slide 41

Slide 41 text

2. ROSについて 41 ubuntu 20.04 ubuntu 22.04 22年5月23日発表 ubuntu 20.04

Slide 42

Slide 42 text

2. ROSについて 42 ● Distribution ここ 注目ポイント 2つあるよ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

2. ROSについて 44 ● Point 2

Slide 45

Slide 45 text

2. ROSについて 45 05-23 世界カメの日

Slide 46

Slide 46 text

2. ROSについて 46 Node, Service, Action..Goal.. Topic, Publisher, Subscriber… Point 1

Slide 47

Slide 47 text

2. ROSについて 47 ROS1 とROS2の差はなんでしょうか? Point 2

Slide 48

Slide 48 text

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)

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

2. ROSについて 50 最大の利点は、マシン間情報通信に標準化された メッセージがあることです。 Point 3

Slide 51

Slide 51 text

2. ROSについて 51 ROS2 インストール https://docs.ros.org/en/foxy/Installation.html https://docs.ros.org/en/humble/Installation.html 個人的にUbuntu OS上で 開発して使用することをお勧めします。

Slide 52

Slide 52 text

2. ROSについて 52 今年は京都でROSConが 10月19日から22日まで 開催されます。 https://roscon.ros.org/2022/ Point 4

Slide 53

Slide 53 text

3 なぜFlutterだったのか 53

Slide 54

Slide 54 text

3. なぜFlutterだったのか 54 Q. ロボットとFlutterとは どんな関係があり、 なぜFlutterを選んだのですか?

Slide 55

Slide 55 text

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 が必要だ。

Slide 56

Slide 56 text

3. なぜFlutterだったのか 56 1 適切な時期 2 生産性側面 3 コスト側面 4 開発者の経 験(DX)側面 5 UI品質 側面

Slide 57

Slide 57 text

3. なぜFlutterだったのか 57 3.1. 適切な時期 NVIDIA Jetson AGX Xavier SBC / Embedded ● ロボットはどのコンピュータまたはプロセッサが使用されますか? Computing Power(コンピュー ティングパワー)の増 加

Slide 58

Slide 58 text

3. なぜFlutterだったのか 58 3.1. 適切な時期 ● Embedded ハードウェアとしてNvidiaのJetson Xavier NXを使っていました。 ● Jetpack SDKはUbuntu OS(Linux)を使用している。 ● 別のハードウェアなしで、そのままユーザーが使用できる Debugアプリが必要でした。 Nvidia Jetson Xavier NX

Slide 59

Slide 59 text

3. なぜFlutterだったのか 59 3.1. 適切な時期 https://developer.nvidia.com/embedded/jetpack ● 今年、新しいJETPACK SDKが公開され、前の18.04から20.04に上向き サポート

Slide 60

Slide 60 text

3. なぜFlutterだったのか 60 3.1. 適切な時期 Desktop Platform Stable Flutter 2.10 Stable Flutter 3.0 Stable ● FlutterのLinux Desktopサポート+マルチプラットフォーム linux環境 でも 使えるyo-!

Slide 61

Slide 61 text

3. なぜFlutterだったのか 61 3.2. 生産性側面 A君 こんにちは。今回の製品をユーザーが使えるようにインターフェー スを持つアプリケーションが必要だと思います。 (モニタリング、操作など ) B君 どのプラットフォームで提供されるのが良いでしょ うか? A君 Androidユーザーが多いので、 AndroidOSで使 用できるようにしてください。 B君 はい、、了解です。 例

Slide 62

Slide 62 text

3. なぜFlutterだったのか 62 3.2. 生産性側面 아~ 이제 안드개발 다했는데 클라이언트 ios에도 되게 해주세요 ^^ 저의 경우 기존 네이티브 개발 대비 생산성이 40%정도 올랐고 코드 작성량은 50% 가량 감소 개발 소요시간 70%이상 감소 (윈도우, 리눅스, 웹, 모바일 ) 제품을 사용자가 쓸 수 있는 인터페이스가 있는 애플리케이션이 필요할거 같습니다. 어떤 플랫폼으로 제공되는게 좋을까요? 안드로이드 사용자가 많으니 안드로이드OS에서 사용할 수 있도록 해주세요.

Slide 63

Slide 63 text

3. なぜFlutterだったのか 63 3.2. 生産性側面 クラ イア ント そして、Appleデバイスのユーザーもアプリを使え るようになってほしいです。 B君 アプリ開発完了しました。 ご確認お願い致します。 クラ イア ント あの。。もし、 タブレットでも使いたいのですが可能ですか? B君 ….. () ….. (今iOS開発者いない。。) PM B君 PM 💦 💦 例

Slide 64

Slide 64 text

3. なぜFlutterだったのか 64 3.2. 生産性側面 40% 生産性 Up 50% コード作成量 Down 70% 開発時間 Down ● Flutterを適用することで、Single Code Baseで Android、iOS、Web、Linux Desktopなどに対応出来ました。

Slide 65

Slide 65 text

3. なぜFlutterだったのか 65 3.3. コスト側面 ● 一般的にQTの場合、個人研究、教育機関などは使用に大きな問題はない。 ○ 販売を目的としない場合 ○ ライセンスの購入が必要な場合もあります。 ● 販売する製品に入る場合は、ライセンス料を支払う必要があります。(commercial license) ● スタートアップやユニコーン企業の場合、費用の負担が大きい。 販売数 費用 AS-IS

Slide 66

Slide 66 text

3. なぜFlutterだったのか 66 3.3. コスト側面 Open Source Commercial Licenseについて コマーシャルライセンス費用の心配はない。 TO-BE

Slide 67

Slide 67 text

3. なぜFlutterだったのか 67 3.3. コスト側面 Open Source Commercial Licenseについて コマーシャルライセンス費用の心配はない。 TO-BE

Slide 68

Slide 68 text

3. なぜFlutterだったのか 68 3.4. 開発者の経験(DX)側面 ● DX(Developer Experience) も重要です。 まず、フラッターは既存のモバイル開発者 (Android, iOS)やWeb開発者に 慣れているVSCやAndroid Studioでアプリケーション開発が可能。 ● これとは逆に、QTの場合、QTツールを別々に学ぶ時間がかなりかかります。 ● Hot Reload🔥 https://wiki.qt.io/QtCreatorWhitepaper

Slide 69

Slide 69 text

3. なぜFlutterだったのか 69 3.4. 開発者の経験(DX)側面 ● Androidアプリ開発者も簡単にアプリ開発可能 ○ 基本的なフラッターアプリ開発のための 学習曲線(ランニングカーブ)が低い ● Dart言語のOOP(object-orientated language)サポート ○ kotlin, swift.. ● CLI サポート ○ flutter_tools ● i18n (Internationalization )

Slide 70

Slide 70 text

3. なぜFlutterだったのか 70 3.5. UI品質側面 rqt https://cafe.naver.com/openrt/25073 ● UbuntuOSでは、ROSベースのアプリケーションはQTを使って作ったりします。 ROS 専用rqtというものも存在します。 AS-IS

Slide 71

Slide 71 text

3. なぜFlutterだったのか 71 3.5. UI品質側面 ● 宣言的UI ● 全てがWidgetである TO-BE Everything is a widget

Slide 72

Slide 72 text

3. なぜFlutterだったのか 72 3.5. UI品質側面 ● Material Design 2または3を適用できます。 ● カスタマイズももちろん可能です。 ● 開発することとは別に、開発者がDesign Componentsを心配する必要なく、すでによく作ら れたDesign Componentsを使用できます。 TO-BE

Slide 73

Slide 73 text

3. なぜFlutterだったのか 73 3.6. 最後にusecase側面 ロボティクスでROS2 + Flutterの適用例が少ない(usecase) ● 一般的にAndroidやQT、etcで開発されています。 ● 挑戦的な目標課題(動機付け)

Slide 74

Slide 74 text

3. なぜFlutterだったのか 74 制限または 欠点(デメリット) しかし、すべてが完璧ではありません。 1. 現時点のWeb SEO未サポート 2. CJK(中国語、日本語、韓国語)フォントのcanvasKitレンダリング問題 3. キーボード入力の問題(サムスンスマホキーボードなど) 4. その他のマイナーなバグなど

Slide 75

Slide 75 text

4 FlutterとROSの間 インターフェース方法 75

Slide 76

Slide 76 text

76 Jetson (Embedded/SBC) Jetpack SDK > 5.0 Ubuntu 20.04 Flutter ROS2 Foxy Ros Node Topic Flutter App Subscription 通信のため 何かが必要 4. FlutterとROSの間インターフェース方法

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

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.

Slide 81

Slide 81 text

81 4. FlutterとROSの間インターフェース方法 https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md rosbridge v2.0 Protocol Specification

Slide 82

Slide 82 text

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".

Slide 83

Slide 83 text

83 4. FlutterとROSの間インターフェース方法 rosbridge_suite humble & distro

Slide 84

Slide 84 text

84 4. FlutterとROSの間インターフェース方法 rosbridge_suite Websocket ポート9090を使用してクライアントと通信可能

Slide 85

Slide 85 text

85 4. FlutterとROSの間インターフェース方法 Flutter Side

Slide 86

Slide 86 text

86 4. FlutterとROSの間インターフェース方法 Flutter Side 1

Slide 87

Slide 87 text

87 4. FlutterとROSの間インターフェース方法 Flutter Side 2

Slide 88

Slide 88 text

88 4. FlutterとROSの間インターフェース方法 Flutter Side 3

Slide 89

Slide 89 text

89 4. FlutterとROSの間インターフェース方法 Flutter Side 4

Slide 90

Slide 90 text

90 4. FlutterとROSの間インターフェース方法 Flutter Side

Slide 91

Slide 91 text

91 4. FlutterとROSの間インターフェース方法 Flutter Side - Websocket web_socket_channel https://pub.dev/packages/web_socket_chan nel

Slide 92

Slide 92 text

92 4. FlutterとROSの間インターフェース方法 ですが 解像度の高いデータの完全なReal-Timeモニタリングには多少制限がありま す。 60fps(frame per second) 1 frame = 1/60 = 0.0167second = 16.7ms 1k = 1000Hzセンサーデータまたは 60fps以上の解像度を持つセンサーデータは、 解像度を合わせるためのデータ加工が少し必要になります。

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

94 4. FlutterとROSの間インターフェース方法 Wi-Fi Direct(P2P) https://pub.dev/packages/flutter_p2p https://pub.dev/packages/flutter_p2p_plus

Slide 95

Slide 95 text

5 🔥 Demo 🔥 95

Slide 96

Slide 96 text

96

Slide 97

Slide 97 text

97 まとめ 1。Flutter 3.3になりました 2。ロボット開発はほぼROSを使ってます。 3。Flutterを使って生産性上がり、コスト利点ありました。 4。WebSocketを使ってFlutterアプリと通信できます。

Slide 98

Slide 98 text

98 Thank you! ありがとうございました󰢛 JaiChang Park Contact JAICHANGPARK @jaichangpark @Dreamwalker Dreamus Company

Slide 99

Slide 99 text

Appendix 99 A. macOSでUTM設定方

Slide 100

Slide 100 text

Appendix 100 A. macOSでUTM設定方

Slide 101

Slide 101 text

Appendix 101 A. macOSでUTM設定方

Slide 102

Slide 102 text

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)

Slide 103

Slide 103 text

Appendix 103 C. FLUTTER RENDERING

Slide 104

Slide 104 text

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.

Slide 105

Slide 105 text

Appendix 105 C. FLUTTER RENDERING

Slide 106

Slide 106 text

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.

Slide 107

Slide 107 text

Appendix 107 C. FLUTTER RENDERING

Slide 108

Slide 108 text

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.

Slide 109

Slide 109 text

Appendix 109 C. FLUTTER RENDERING

Slide 110

Slide 110 text

Appendix 110 C. FLUTTER RENDERING Virtual Hematoxylin and Eosin Transillumination Microscopy Using Epi-Fluorescence Imaging

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Appendix 112 D. FLUTTER DESKTOP SETUP

Slide 113

Slide 113 text

Appendix 113 D. FLUTTER DESKTOP SETUP Config

Slide 114

Slide 114 text

Appendix 114 D. FLUTTER DESKTOP SETUP Config

Slide 115

Slide 115 text

Appendix 115 D. FLUTTER DESKTOP SETUP Create Project

Slide 116

Slide 116 text

Appendix 116 D. FLUTTER DESKTOP SETUP Select Device & Run

Slide 117

Slide 117 text

Appendix 117 D. FLUTTER DESKTOP SETUP Select Device & Run

Slide 118

Slide 118 text

118