Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Flutter Linux Desktop Flutter I/O Extended Korea 2022 @jaichangpark Angel Robotics Flutter With

Slide 3

Slide 3 text

Flutter I/O Extended Korea 2022 JAICHANGPARK 박제창 Dreamwalker Flutter Korea Organizer - Operation Angel Robotics

Slide 4

Slide 4 text

Flutter I/O Extended Korea 2022 5/30m

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Flutter I/O Extended Korea 2022 1. Google I/O 22 Flutter Desktop

Slide 7

Slide 7 text

Flutter I/O Extended Korea 2022

Slide 8

Slide 8 text

Flutter I/O Extended Korea 2022

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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 …

Slide 12

Slide 12 text

Flutter I/O Extended Korea 2022 Flutter Desktop 사용해 보신분 계신가요?? Q.

Slide 13

Slide 13 text

Flutter I/O Extended Korea 2022 Flutter Desktop 실무에 적용해 보신분 계신가요?? Q.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop https://github.com/flutter/flutter

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 18

Slide 18 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 19

Slide 19 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop https://github.com/google/flutter-desktop-embedding

Slide 20

Slide 20 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 출처: https://developers-kr.googleblog.com/2022/03/announcing-flutter-for-windows.html

Slide 21

Slide 21 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.1 install 기본적으로 Flutter 설치가 필요합니다.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.2 Additional requirements ●

Slide 24

Slide 24 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.3 Config ●

Slide 25

Slide 25 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.3 Config ●

Slide 26

Slide 26 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.4 Create Project

Slide 27

Slide 27 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.4 Select Device & Run

Slide 28

Slide 28 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 29

Slide 29 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 2.5 이렇게 된거 Material 3도 적용해볼까요?

Slide 30

Slide 30 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 31

Slide 31 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop That Easy

Slide 32

Slide 32 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 하지만 지금 Material 3의 모든 컴포넌트를 사용할 수 있도록 적용된 상태는 아니에요. (개발 진행중) https://github.com/orgs/flutter/projects/19

Slide 33

Slide 33 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop 근데 처음이랑 화면의 출력 결과가 조금 바뀐거 같지 않나요?

Slide 34

Slide 34 text

Flutter I/O Extended Korea 2022

Slide 35

Slide 35 text

Flutter I/O Extended Korea 2022

Slide 36

Slide 36 text

Flutter I/O Extended Korea 2022

via GIPHY

2. What’s Flutter Desktop 여기서 잠깐 다같이 생각해볼까요? 2.6

Slide 37

Slide 37 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop Flutter가 Multi Platform인것은 알겠는데.. 어떻게 각 플랫폼에 material, cupertino widget을 동일하게 그려낼 수 있을까요? https://flutter.dev/multi-platform

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 40

Slide 40 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 41

Slide 41 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop https://ko.wikipedia.org/wiki/OpenGL

Slide 48

Slide 48 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop Virtual Hematoxylin and Eosin Transillumination Microscopy Using Epi-Fluorescence Imaging

Slide 49

Slide 49 text

Flutter I/O Extended Korea 2022 2. What’s Flutter Desktop

Slide 50

Slide 50 text

Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop

Slide 51

Slide 51 text

Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop Nvidia Jetson Xavier NX

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop ● 간편하게 snap을 통해 설치 Flutter sdk-path 실행

Slide 55

Slide 55 text

Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop ●

Slide 56

Slide 56 text

Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop Flutter doctor 실행 리눅스 arm 환경에 필요한 추가적인 파일을 자동으로 다운로드 받습니다.

Slide 57

Slide 57 text

Flutter I/O Extended Korea 2022 3. How to Setup Linux Desktop Flutter doctor 실행 리눅스 arm 환경에 필요한 추가적인 파일을 자동으로 다운로드 받습니다.

Slide 58

Slide 58 text

3. How to Setup Linux Desktop Flutter run 실행 빌드시 사용되는 몇가지 tool을 자동으로 다운로드 받은 후 빌드를 수행 임베디드 시스템의 경우 빌드 시간은 다소 소요됩니다. 성능에 따라 처리속도는 차이가 있을 수 있습니다.

Slide 59

Slide 59 text

3. How to Setup Linux Desktop

Slide 60

Slide 60 text

Flutter I/O Extended Korea 2022 4. What’s ROS

Slide 61

Slide 61 text

Flutter I/O Extended Korea 2022 ROS 들어보거나 사용해 보신분 계신가요?? Q.

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

Flutter I/O Extended Korea 2022 4. What’s ROS ubuntu 20.04 ubuntu 22.04 22년 5월 23일 발표 ubuntu 20.04

Slide 64

Slide 64 text

Flutter I/O Extended Korea 2022 4. What’s ROS

Slide 65

Slide 65 text

Flutter I/O Extended Korea 2022 4. What’s ROS

Slide 66

Slide 66 text

Flutter I/O Extended Korea 2022 4. What’s ROS

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Flutter I/O Extended Korea 2022 4. What’s ROS

Slide 70

Slide 70 text

Flutter I/O Extended Korea 2022 4. What’s ROS https://post.naver.com/viewer/postView.naver?volumeNo=28917578&memberNo=42232075

Slide 71

Slide 71 text

Flutter I/O Extended Korea 2022 4. What’s ROS 아니;; Flutter랑 ROS 랑 도대체 무슨 연관이 있는 거예요?

Slide 72

Slide 72 text

Flutter I/O Extended Korea 2022 4. What’s ROS 기존에는 …. Ubuntu 운영체제에서 ROS 기반 애플리케이션은 QT를 가지고 만들곤 합니다. ROS전용 rqt라는것도 존재합니다. rqt

Slide 73

Slide 73 text

Flutter I/O Extended Korea 2022 4. What’s ROS https://cafe.naver.com/openrt/25073

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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.

Slide 76

Slide 76 text

Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter?

Slide 77

Slide 77 text

Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? 로봇은 어떤 컴퓨터 또는 프로세서가 가 사용될까요? NVIDIA Jetson AGX Xavier SBC / 임베디드.

Slide 78

Slide 78 text

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/

Slide 79

Slide 79 text

Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? Nvidia Jetson Xavier NX

Slide 80

Slide 80 text

Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? Computing Power Nvidia Jetson Xavier NX

Slide 81

Slide 81 text

Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter?

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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 통신을 위한 매개체 필요

Slide 84

Slide 84 text

5. How to interface with ROS using flutter? https://github.com/RobotWebTools/rosbridge_suite

Slide 85

Slide 85 text

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.

Slide 86

Slide 86 text

5. How to interface with ROS using flutter? rosbridge v2.0 Protocol Specification https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md

Slide 87

Slide 87 text

5. How to interface with ROS using flutter? rosbridge v2.0 Protocol Specification https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md

Slide 88

Slide 88 text

5. How to interface with ROS using flutter? Host Machine Requirement

Slide 89

Slide 89 text

5. How to interface with ROS using flutter? 웹 소켓 포트 9090를 사용하여 클라이언트와 통신 가능

Slide 90

Slide 90 text

5. How to interface with ROS using flutter? Dart side 프로토콜 Spec에 맞게

Slide 91

Slide 91 text

5. How to interface with ROS using flutter? Dart side 프로토콜 spec에 맞게 Subscription

Slide 92

Slide 92 text

5. How to interface with ROS using flutter? Flutter side

Slide 93

Slide 93 text

Flutter I/O Extended Korea 2022 5. How to interface with ROS using flutter? https://youtu.be/jW3pqIpQtQE

Slide 94

Slide 94 text

5. How to interface with ROS using flutter? Mission 대학원생 A는 교수님 방안의 커피로봇 온도를 매일 모니터링해서 온도가 너무 높으면 비상버튼을 눌러 정지해달라는 교수님의 요청 메일을 받았다. https://www.joongang.co.kr/article/23540445#home

Slide 95

Slide 95 text

5. How to interface with ROS using flutter? Jetson 커피로봇 모니터 비상버튼 Node A 비상버튼 Node B 온도 읽기 Flutter App Display 온도 모니터링 Flutter Dart VM RosBridge 온도 모니터링 앱 CPU 온도 GPU 온도

Slide 96

Slide 96 text

5. How to interface with ROS using flutter? Jetson 커피로봇 비상버튼 Node A 비상버튼 Node B 온도 읽기 Flutter Dart VM RosBridge Node A, Node B 실행 후

Slide 97

Slide 97 text

5. How to interface with ROS using flutter? Jetson 온도 모니터링 { "header": { "stamp": { "sec": 1656205815, "nanosec": 592813412 }, "frame_id": "546" }, "temperature": 45.5, "variance": 0 } Json

Slide 98

Slide 98 text

5. How to interface with ROS using flutter? 모델 만들기 Json Parsing

Slide 99

Slide 99 text

5. How to interface with ROS using flutter? 상태관리

Slide 100

Slide 100 text

5. How to interface with ROS using flutter? 온도 Topic 생성 Topic 구독 Sub Handler

Slide 101

Slide 101 text

5. How to interface with ROS using flutter? gpu온도 상태 모니터링 변경이 있을때 업데이트 Consumer Widget UI View 처리

Slide 102

Slide 102 text

5. How to interface with ROS using flutter? Flutter App 온도 로그 Ros Temperature Msg Node B 온도 읽기 RosBridge Flutter App 60 fps를 맞추기 위해 0.0167초 마다 msg publish

Slide 103

Slide 103 text

5. How to interface with ROS using flutter? https://github.com/JAICHANGPARK/flutter_io_extended_2022

Slide 104

Slide 104 text

5. How to interface with ROS using flutter? https://github.com/JAICHANGPARK/flutter_io_extended_2022 대학원생 A : Flutter로 만들었는데 집에서 태블릿으로 보고싶다…

Slide 105

Slide 105 text

5. How to interface with ROS using flutter? Mission 대학원생 A는 교수님 방안의 커피로봇 온도를 매일 모니터링해서 온도가 너무 높으면 비상버튼을 눌러 정지해달라는 교수님의 요청 메일을 받았다. Mission Completed 아쉬운점: 완벽한 Real-Time 모니터링은 다소 한계가 있음.

Slide 106

Slide 106 text

Thank you! JaiChang Park Flutter Developer Angel Robotics Contact JAICHANGPARK Flutter I/O Extended Korea 2022

Slide 107

Slide 107 text

● 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