Flutter Linux Desktop with ROS2

https://festa.io/events/2361

Transcript

2. Flutter Linux Desktop Flutter I/O Extended Korea 2022 @jaichangpark Angel Robotics Flutter With
3. Flutter I/O Extended Korea 2022 JAICHANGPARK 박제창 Dreamwalker Flutter Korea Organizer - Operation Angel Robotics
4. Flutter I/O Extended Korea 2022 5/30m
5. Index 1. Google I/O 22 Flutter Desktop 2. What’s Flutter Desktop 3. How to Setup Linux Desktop 4. What’s ROS 5. How to interface with ROS using flutter? Flutter I/O Extended Korea 2022
6. Flutter I/O Extended Korea 2022 1. Google I/O 22 Flutter Desktop
7. Flutter I/O Extended Korea 2022
8. Flutter I/O Extended Korea 2022
9. Flutter I/O Extended Korea 2022 1. Google I/O 22 Flutter Desktop 1.1 Google I/O 22 Flutter Desktop Contents • What’s New In Flutter a. macOS and Linux platforms have reached stable • Learn About Flutter Desktop a. Platform Adaptive b. TextField Focus Node c. FocusableActionDetector & CallbackShortcuts • How to write a Flutter desktop application a. Build a Flutter desktop app that accesses GitHub APIs to retrieve your repositories, assigned issues, and pull request b. https://codelabs.developers.google.com/codelabs/flutter-github-client#0
10. Flutter I/O Extended Korea 2022 1. Google I/O 22 Flutter Desktop 1.2 Summary • In Flutter 3, the macOS and Linux platforms have reached stable, in addition to Windows. • You can now develop your app to run on any or all of these platforms. • As a result, the Desktop (and related) pages are updated.
11. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.1 install 2.2 Additional requirements. 2.3 Configuration 2.4 Create Project …
12. Flutter I/O Extended Korea 2022 Flutter Desktop 사용해 보신분 계신가요?? Q.
13. Flutter I/O Extended Korea 2022 Flutter Desktop 실무에 적용해 보신분 계신가요?? Q.
14. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop Flutter 2022 Strategy Our mission is to build the most popular, highest-quality, and highest-productivity UI toolkit for developers.
15. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop https://github.com/flutter/flutter
16. Flutter I/O Extended Korea 2022 asd 2. What’s Flutter Desktop 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.
17. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
18. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
19. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop https://github.com/google/flutter-desktop-embedding
20. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 출처: https://developers-kr.googleblog.com/2022/03/announcing-flutter-for-windows.html
21. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.1 install 기본적으로 Flutter 설치가 필요합니다.
22. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.2 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
23. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.2 Additional requirements •
24. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.3 Config •
25. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.3 Config •
26. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.4 Create Project
27. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.4 Select Device & Run
28. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
29. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.5 이렇게 된거 Material 3도 적용해볼까요?
30. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
31. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop That Easy
32. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 하지만 지금 Material 3의 모든 컴포넌트를 사용할 수 있도록 적용된 상태는 아니에요. (개발 진행중) https://github.com/orgs/flutter/projects/19
33. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 근데 처음이랑 화면의 출력 결과가 조금 바뀐거 같지 않나요?
34. Flutter I/O Extended Korea 2022
35. Flutter I/O Extended Korea 2022
36. Flutter I/O Extended Korea 2022 <div style="width:100%;height:0;padding-bottom:54%;position:relative;"><iframe src="https://giphy.com/embed/777Aby0ZetYE8" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/cute-think-pooh-777Aby0ZetYE8">via GIPHY</a></p> 2. What’s Flutter Desktop 여기서 잠깐 다같이 생각해볼까요? 2.6
37. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop Flutter가 Multi Platform인것은 알겠는데.. 어떻게 각 플랫폼에 material, cupertino widget을 동일하게 그려낼 수 있을까요? https://flutter.dev/multi-platform
38. Flutter I/O Extended Korea 2022 https://docs.flutter.dev/development/ui/widgets 2. What’s Flutter Desktop https://docs.flutter.dev/development/ui/widgets
39. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
40. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
41. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
42. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop • 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.
43. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 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.
44. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 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.
45. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
46. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 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. https://chromium.googlesource.com/angle/angle/+/master/README.md
47. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop https://ko.wikipedia.org/wiki/OpenGL
48. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop Virtual Hematoxylin and Eosin Transillumination Microscopy Using Epi-Fluorescence Imaging
49. Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop
50. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop
51. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop Nvidia Jetson Xavier NX
52. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop • Operating Systems: Linux (64-bit) • Disk Space: 600 MB (does not include disk space for IDE/tools). • Tools: Flutter depends on these command-line tools being available in your environment. ◦ bash ◦ curl ◦ file ◦ git 2.x ◦ mkdir ◦ rm ◦ unzip ◦ which ◦ xz-utils ◦ zip • Shared libraries: Flutter test command depends on this library being available in your environment. ◦ libGLU.so.1 - provided by mesa packages such as libglu1-mesa on Ubuntu/Debian and mesa-libGLU on Fedora.
53. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev liblzma-dev
54. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop • 간편하게 snap을 통해 설치 Flutter sdk-path 실행
55. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop •
56. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop Flutter doctor 실행 리눅스 arm 환경에 필요한 추가적인 파일을 자동으로 다운로드 받습니다.
57. Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop Flutter doctor 실행 리눅스 arm 환경에 필요한 추가적인 파일을 자동으로 다운로드 받습니다.
58. 3. How to Setup Linux Desktop Flutter run 실행 빌드시 사용되는 몇가지 tool을 자동으로 다운로드 받은 후 빌드를 수행 임베디드 시스템의 경우 빌드 시간은 다소 소요됩니다. 성능에 따라 처리속도는 차이가 있을 수 있습니다.
59. 3. How to Setup Linux Desktop
60. Flutter I/O Extended Korea 2022 4. What’s ROS
61. Flutter I/O Extended Korea 2022 ROS 들어보거나 사용해 보신분 계신가요?? Q.
62. Flutter I/O Extended Korea 2022 4. What’s ROS The Robot Operating System (ROS) is a set of software libraries and tools for building robot applications.
63. Flutter I/O Extended Korea 2022 4. What’s ROS ubuntu 20.04 ubuntu 22.04 22년 5월 23일 발표 ubuntu 20.04
64. Flutter I/O Extended Korea 2022 4. What’s ROS
65. Flutter I/O Extended Korea 2022 4. What’s ROS
66. Flutter I/O Extended Korea 2022 4. What’s ROS
67. Flutter I/O Extended Korea 2022 4. What’s ROS 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
68. Flutter I/O Extended Korea 2022 4. What’s ROS Data Distribution Service B Machine C Machine N Machine A Robot Router Network Data Sensor1 Data Sensor1 Node ROS_DOMAIN 으로 제한할 수 있음. Sens ors
69. Flutter I/O Extended Korea 2022 4. What’s ROS
70. Flutter I/O Extended Korea 2022 4. What’s ROS https://post.naver.com/viewer/postView.naver?volumeNo=28917578&memberNo=42232075
71. Flutter I/O Extended Korea 2022 4. What’s ROS 아니;; Flutter랑 ROS 랑 도대체 무슨 연관이 있는 거예요?
72. Flutter I/O Extended Korea 2022 4. What’s ROS 기존에는 …. Ubuntu 운영체제에서 ROS 기반 애플리케이션은 QT를 가지고 만들곤 합니다. ROS전용 rqt라는것도 존재합니다. rqt
73. Flutter I/O Extended Korea 2022 4. What’s ROS https://cafe.naver.com/openrt/25073
74. Flutter I/O Extended Korea 2022 4. What’s ROS ROS 애플리케이션 개발에 Flutter를 적용해 볼만한 이유 1. Flutter의 Linux Desktop 지원 + multi-platform 2. rcldart 개발 3. Websocket OK a. Dart socket 4. 로보틱스에서 ROS2 + Flutter 적용사례 적음 (usecase) a. 대부분 android, qt, etc b. 도전적 목표 과제 (동기부여) 5. Open Source a. 커머셜 라이선스 비용 걱정 X * Rcl: the ROS2 client library
75. Flutter I/O Extended Korea 2022 4. What’s ROS ROS2 설치 https://docs.ros.org/en/foxy/Installation.html 시간관계상… https://namu.wiki/w/%EB%8D%94%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%9E%90%EC%84%B8%ED%95%9C %20%EC%84%A4%EB%AA%85%EC%9D%80%20%EC%83%9D%EB%9E%B5%ED%95%9C%EB%8B%A4.
76. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter?
77. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? 로봇은 어떤 컴퓨터 또는 프로세서가 가 사용될까요? NVIDIA Jetson AGX Xavier SBC / 임베디드.
78. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? Nvidia Jetson Xavier NX https://www.nvidia.com/ko-kr/autonomous-machines/embedded-systems/jetson-xavier-nx/
79. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? Nvidia Jetson Xavier NX
80. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? Computing Power Nvidia Jetson Xavier NX
81. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter?
82. 5. How to interface with ROS using flutter? Jetson Jetpack 5.0 DP Ubuntu 20.04 Flutter ROS2 Foxy Jetson JetPack 4.6.1 Ubuntu 18.04 Flutter Container ROS2 Foxy Docker Engine
83. 5. How to interface with ROS using flutter? Jetson Jetpack 5.0 DP Ubuntu 20.04 Flutter ROS2 Foxy Ros Node Topic Flutter App Subscription 통신을 위한 매개체 필요
84. 5. How to interface with ROS using flutter? https://github.com/RobotWebTools/rosbridge_suite
85. 5. How to interface with ROS using flutter? https://github.com/RobotWebTools/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. • rosbridge_suite is a ROS meta-package including all the rosbridge packages. • rosbridge_library contains the Python API that receives JSON-formatted strings as input and controls ROS publishers/subscribers/service calls according to the content of the JSON strings. • rosbridge_server contains a WebSocket server implementation that exposes the rosbridge_library. • rosapi provides service calls for getting meta-information related to ROS like topic lists as well as interacting with the Parameter Server.
86. 5. How to interface with ROS using flutter? rosbridge v2.0 Protocol Specification https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md
87. 5. How to interface with ROS using flutter? rosbridge v2.0 Protocol Specification https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md
88. 5. How to interface with ROS using flutter? Host Machine Requirement
89. 5. How to interface with ROS using flutter? 웹 소켓 포트 9090를 사용하여 클라이언트와 통신 가능
90. 5. How to interface with ROS using flutter? Dart side 프로토콜 Spec에 맞게
91. 5. How to interface with ROS using flutter? Dart side 프로토콜 spec에 맞게 Subscription
92. 5. How to interface with ROS using flutter? Flutter side
93. Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? https://youtu.be/jW3pqIpQtQE
94. 5. How to interface with ROS using flutter? Mission 대학원생 A는 교수님 방안의 커피로봇 온도를 매일 모니터링해서 온도가 너무 높으면 비상버튼을 눌러 정지해달라는 교수님의 요청 메일을 받았다. https://www.joongang.co.kr/article/23540445#home
95. 5. How to interface with ROS using flutter? Jetson 커피로봇 모니터 비상버튼 Node A 비상버튼 Node B 온도 읽기 Flutter App Display 온도 모니터링 Flutter Dart VM RosBridge 온도 모니터링 앱 CPU 온도 GPU 온도
96. 5. How to interface with ROS using flutter? Jetson 커피로봇 비상버튼 Node A 비상버튼 Node B 온도 읽기 Flutter Dart VM RosBridge Node A, Node B 실행 후
97. 5. How to interface with ROS using flutter? Jetson 온도 모니터링 { "header": { "stamp": { "sec": 1656205815, "nanosec": 592813412 }, "frame_id": "546" }, "temperature": 45.5, "variance": 0 } Json
98. 5. How to interface with ROS using flutter? 모델 만들기 Json Parsing
99. 5. How to interface with ROS using flutter? 상태관리
100. 5. How to interface with ROS using flutter? 온도 Topic 생성 Topic 구독 Sub Handler
101. 5. How to interface with ROS using flutter? gpu온도 상태 모니터링 변경이 있을때 업데이트 Consumer Widget UI View 처리
102. 5. How to interface with ROS using flutter? Flutter App 온도 로그 Ros Temperature Msg Node B 온도 읽기 RosBridge Flutter App 60 fps를 맞추기 위해 0.0167초 마다 msg publish
103. 5. How to interface with ROS using flutter? https://github.com/JAICHANGPARK/flutter_io_extended_2022
104. 5. How to interface with ROS using flutter? https://github.com/JAICHANGPARK/flutter_io_extended_2022 대학원생 A : Flutter로 만들었는데 집에서 태블릿으로 보고싶다…
105. 5. How to interface with ROS using flutter? Mission 대학원생 A는 교수님 방안의 커피로봇 온도를 매일 모니터링해서 온도가 너무 높으면 비상버튼을 눌러 정지해달라는 교수님의 요청 메일을 받았다. Mission Completed 아쉬운점: 완벽한 Real-Time 모니터링은 다소 한계가 있음.
106. Thank you! JaiChang Park Flutter Developer Angel Robotics Contact JAICHANGPARK Flutter I/O Extended Korea 2022
107. • https://docs.google.com/document/d/15AwPXNd5FvItAqM0wa2VK0tRrqtRTgM8vR5LQeT2Mag/edit?resourcekey=0-yZ2FAN-wEK wKT-ymdisetA#heading=h.s6balucy11bi • https://docs.google.com/document/d/e/2PACX-1vTI9X2XHN_IY8wDO4epQSD1CkRT8WDxf2CEExp5Ef4Id206UOMopkYqU73FvAnn YG6NAecNSDo9TaEO/pub • https://github.com/flutter/flutter/wiki/Values#focus-on-the-user-and-all-else-will-follow References