DEV Community

vmodal_ai
vmodal_ai

Posted on

Building a Real-Time ROS 2 Robot Dashboard with Flutter and NVIDIA Jetson

Building a Real-Time ROS 2 Robot Dashboard with Flutter and NVIDIA Jetson

Introduction

This tutorial focuses on telemetry visualization rather than robot control.

Architecture 

ROS 2 Topics
     |
     v
Telemetry Gateway
     |
 WebSocket
     |
     v
Flutter Dashboard
Enter fullscreen mode Exit fullscreen mode

1. Define telemetry 

{
  "battery": 87,
  "cpu": 42,
  "temperature": 54.2,
  "state": "NAVIGATING"
}
Enter fullscreen mode Exit fullscreen mode

2. Gateway subscription

Subscribe to relevant ROS 2 topics and normalize their messages into compact JSON.

3. Flutter model 

class RobotTelemetry {
  final int battery;
  final double cpu;
  final double temperature;
  final String state;

  RobotTelemetry({
    required this.battery,
    required this.cpu,
    required this.temperature,
    required this.state,
  });

  factory RobotTelemetry.fromJson(Map<String, dynamic> json) {
    return RobotTelemetry(
      battery: json['battery'],
      cpu: (json['cpu'] as num).toDouble(),
      temperature: (json['temperature'] as num).toDouble(),
      state: json['state'],
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

4. Stream updates 

Stream<RobotTelemetry> telemetryStream() async* {
  // Convert WebSocket messages into RobotTelemetry.
}
Enter fullscreen mode Exit fullscreen mode

5. Display the dashboard

Useful cards include:

Battery     87%
CPU         42%
Temperature 54°C
State       NAVIGATING
Enter fullscreen mode Exit fullscreen mode

6. Handle stale data

Store the timestamp of the latest packet:

final lastUpdate = DateTime.now();
Enter fullscreen mode Exit fullscreen mode

Show a warning if telemetry becomes stale.

7. Optimize the stream

Do not rebuild the entire dashboard for every telemetry packet. Use targeted state management and update only affected widgets.

Conclusion

A lightweight telemetry gateway makes ROS 2 data easier to consume from Flutter while providing a useful security and protocol boundary.

Useful Links

Website: www.v-modal.com

SDK Flutter: https://github.com/v-modal/vmodal_sdk_flutter

SDK Android: https://github.com/v-modal/vmodal_sdk_android

Discord: https://discord.gg/K72z28KUx

Reddit: https://www.reddit.com/r/v_modal/

Top comments (0)