DEV Community

vmodal_ai
vmodal_ai

Posted on

Real-Time Robot Telemetry Visualization on Android

#android #kotlin #jetpackcompose #robotics

Real-Time Robot Telemetry Visualization on Android

Introduction

Robots continuously generate telemetry such as position, velocity, battery level, temperature, sensor readings, and operating state. A mobile application can turn this data into a real-time monitoring interface.

This tutorial demonstrates a clean Android architecture for receiving telemetry and rendering it efficiently.

Architecture 

Robot Sensors
     |
 ROS 2 / Gateway
     |
 WebSocket / MQTT
     |
 Kotlin Repository
     |
 StateFlow
     |
 Compose Dashboard
Enter fullscreen mode Exit fullscreen mode

Telemetry Model

Start with a strongly typed model:

data class Telemetry(
    val timestamp: Long,
    val x: Double,
    val y: Double,
    val velocity: Double,
    val battery: Float,
    val temperature: Float
)
Enter fullscreen mode Exit fullscreen mode

Strong typing makes the UI and processing layer easier to maintain.

Streaming Data

A repository can expose telemetry as a Flow:

interface TelemetryRepository {
    fun telemetry(): Flow<Telemetry>
}
Enter fullscreen mode Exit fullscreen mode

The ViewModel collects the stream:

viewModelScope.launch {
    repository.telemetry().collect {
        _telemetry.value = it
    }
}
Enter fullscreen mode Exit fullscreen mode

Compose Visualization

Display the latest values:

@Composable
fun TelemetryPanel(data: Telemetry) {
    Column {
        Text("Position: ${data.x}, ${data.y}")
        Text("Velocity: ${data.velocity} m/s")
        Text("Battery: ${data.battery}%")
        Text("Temperature: ${data.temperature} °C")
    }
}
Enter fullscreen mode Exit fullscreen mode

For historical values, keep a bounded buffer rather than storing unlimited telemetry in memory.

Real-Time Charts

Telemetry charts can visualize:

Velocity
  |
  |       /\ 
  |  /\  /  \__
  |_/  \/       \_
  +---------------- Time
Enter fullscreen mode Exit fullscreen mode

Store only the amount of history required by the dashboard.

For example:

val history = ArrayDeque<Telemetry>()
Enter fullscreen mode Exit fullscreen mode

Remove old samples when the configured buffer size is reached.

Handling High-Frequency Data

Robots may produce data much faster than the UI needs to refresh. Separate ingestion from rendering.

A practical strategy is:

Robot:       100 Hz
Processing:   50 Hz
UI updates:   10-30 Hz
Enter fullscreen mode Exit fullscreen mode

The exact rates depend on the application.

Connection State

The dashboard should distinguish between:

  • Connected
  • Connecting
  • Disconnected
  • Reconnecting
  • Error

Do not display stale telemetry as if it were current.

Network Resilience

Implement:

  • Automatic reconnection
  • Connection timeout
  • Heartbeats
  • Timestamp validation
  • Backpressure
  • Offline/error state

Security

Telemetry can reveal sensitive information about robot operations. Use encrypted transport and authenticated robot gateways in production.

Conclusion

Real-time telemetry visualization becomes manageable when streaming, state management, and rendering are separated. Kotlin Flow and StateFlow provide a natural foundation for reactive robot dashboards, while Jetpack Compose efficiently reflects the latest state.

Useful Links

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

Top comments (0)