Flutter를 이용한 웹앱 기반 사족보행 로봇 제어:

 

Flutter & Dart를 기반으로 로봇을 조종 및 모니터링하는 웹 앱을 만든다고 할 때, 우선은 ROS topic을 웹소켓으로 받을 것이기 때문에 rosbridge_websocket의 rosbridge_server를 켜 줘야 한다. 이걸 켜면 웹소켓으로 ros topic을 json으로 받고 파싱해서 앱으로 넘겨줄 수 있다. 

 

# Ubuntu 쪽 환경 설정

sudo apt-get install ros-${ROS_DISTRO}-rosbridge-server
sudo apt-get install curl git unzip xz-utils zip libglu1-mesa


# Flutter SDK 다운로드
cd ~/development
curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.16.9-stable.tar.xz
tar xf flutter_linux_3.16.9-stable.tar.xz

export PATH="$PATH:~/development/flutter/bin"

flutter create ros_web_app
cd ros_web_app

 

 

그러면 /ros_web_app/lib/main.dart라는 파일이 생긴다. pubspec.yaml을 빼면 lib 폴더 밖에 있는 파일은 거의 건드릴 일이 없다. 

 

 

flutter run -d chrome

 

을 실행하면 우리가 흔히 보던 그 화면이 나온다. 앱을 안 쓰고 웹만으로 할 거라면 세팅이 간단하다. 

 

<자주 쓰는 flutter 명령어들>

# pubspec.yaml 파일에 새로운 dependency를 추가한 후
flutter pub get

# 모든 패키지를 최신 버전으로 업그레이드
flutter pub upgrade
# 특정 패키지만 업그레이드
flutter pub upgrade package_name


# 프로젝트 리빌드
flutter clean
flutter pub get
flutter run

# 패키지 충돌 확인
flutter pub deps | grep package_name

# Flutter 재설정 (문제가 있을 때)
flutter doctor
flutter clean
flutter pub cache clean
flutter pub get

 

 

*flutter run -d chrome으로 실행하는 앱을 다른 기기에서도 볼려면

 

flutter run -d chrom --web-hostname 0.0.0.0 --web-port 8080 --release

 

이렇게 실행 해 주는데, 문제는 잘 보이던 토픽 이미지들이 다른 기기에서는 안 보인다는 것이다. 

좌) 로컬 우) 다른 기기

 

 

$ roslaunch rosbridge_server rosbridge_websocket address:=0.0.0.0
$ sudo ufw allow 9090 # port number

 

이렇게 실행하면 다른 디바이스에서도 잘 보인다.