consti/dmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements for telemetry debugging

Browse Source
This commit is contained in:
Constantin Leue
2026-08-02 20:21:21 +02:00
parent 6cfb82bd77
commit f42d997d4c
7 changed files with 272 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/ui/screens/fly/fly_screen.dart
+61 -9
View File
@@ -1,3 +1,5 @@
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -114,6 +116,10 @@ class FlyScreen extends ConsumerWidget {
maxDescentRate: droneProfile.maxDescentRate,
);
final missionStats = computeMissionStats(waypoints);
final safeEdgeInset = math.max(
MediaQuery.of(context).padding.left,
MediaQuery.of(context).padding.right,
);
final terrainProfile = ref.watch(terrainProvider).profile;
final warnings = computeMissionWarnings(
waypoints: waypoints,
@@ -125,6 +131,28 @@ class FlyScreen extends ConsumerWidget {
terrain: terrainProfile,
);
// Vor der ersten Telemetrie (Verbindungsaufbau laeuft noch, oder Mock
// hat noch nicht getickt) auf dem ersten Wegpunkt statt gar nicht
// anzeigen - vermeidet einen leeren/verwirrenden Kartenausschnitt beim
// Eintritt in den Fly-Modus.
final droneMarker = telemetry != null
? Marker(
point: LatLng(telemetry.lat, telemetry.lon),
width: 28,
height: 28,
alignment: Alignment.center,
child: DroneMarkerIcon(headingDeg: telemetry.headingDeg),
)
: waypoints.isEmpty
? null
: Marker(
point: LatLng(waypoints.first.lat, waypoints.first.lon),
width: 28,
height: 28,
alignment: Alignment.center,
child: const DroneMarkerIcon(),
);
return Stack(
children: [
MissionMap(
@@ -142,15 +170,21 @@ class FlyScreen extends ConsumerWidget {
borderColor: Colors.white,
),
],
droneMarker: telemetry == null
? null
: Marker(
point: LatLng(telemetry.lat, telemetry.lon),
width: 28,
height: 28,
alignment: Alignment.center,
child: DroneMarkerIcon(headingDeg: telemetry.headingDeg),
),
droneMarker: droneMarker,
),
// Live-Hoehe/-Geschwindigkeit aus der Telemetrie (HTML-Demonstrator:
// #altReadout/#spdReadout im Fly-Modus) - anders als dort keine
// SET-Zeile, weil es im Waypoint-Fly-Modus kein editierbares
// Rad-Widget (curAlt/curSpeed) gibt, dessen Wert sinnvoll waere.
Positioned(
top: 56,
left: 14 + safeEdgeInset,
child: _liveReadout('Alt', telemetry?.altitudeM, 'm'),
),
Positioned(
top: 56,
right: 14 + safeEdgeInset,
child: _liveReadout('Speed', telemetry?.speedMs, 'm/s'),
),
Positioned(
left: 0,
@@ -174,4 +208,22 @@ class FlyScreen extends ConsumerWidget {
],
);
}
Widget _liveReadout(String label, double? value, String unit) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.7),
borderRadius: BorderRadius.circular(6),
),
child: Text(
'$label: ${value != null ? '${value.round()} $unit' : '—'}',
style: const TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500,
),
),
);
}
}
app/lib/ui/screens/settings/settings_screen.dart
+93 -105
View File
@@ -1,15 +1,16 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../transport/bluetooth/bluetooth_device_info.dart';
import '../../../transport/bluetooth/bluetooth_system_settings.dart';
import '../../../transport/connection_type.dart';
import '../../../transport/flight_controller_link.dart';
import '../../../transport/link_transport.dart';
import '../../dmc_colors.dart';
import '../../providers/bluetooth_connection_provider.dart';
import '../../providers/connection_settings_provider.dart';
import '../../providers/database_provider.dart';
import '../../providers/telemetry_provider.dart';
import '../../providers/wifi_connection_provider.dart';
/// Einstellungen: Drohnen-Profile (Doku 3.5/7.3, noch nicht hier
@@ -96,7 +97,7 @@ class _ConnectionSection extends ConsumerWidget {
/// ([_ConnectionSection]), damit die Beschriftungen an beiden Stellen
/// gleich lauten.
const _connectionTypeItems = [
DropdownMenuItem(value: ConnectionType.wifi, child: Text('WiFi')),
DropdownMenuItem(value: ConnectionType.wifi, child: Text('WiFi mLRS UDP')),
DropdownMenuItem(value: ConnectionType.cellular5g, child: Text('5G (soon)')),
DropdownMenuItem(value: ConnectionType.bluetooth, child: Text('Bluetooth')),
DropdownMenuItem(value: ConnectionType.usb, child: Text('USB (soon)')),
@@ -116,54 +117,34 @@ class _NotAvailablePanel extends StatelessWidget {
}
}
class _WifiPanel extends ConsumerStatefulWidget {
/// SSID-Praefix und Port werden bewusst nicht mehr als Textfelder angeboten
/// (Doku: "Preset WiFi mLRS UDP, alles automatisch setzen") - die
/// gespeicherten Defaults ("mLRS-"/14550, siehe AppDatabase) passen fuer die
/// mLRS-WLAN-Bruecke immer, ein manuelles Ueberschreiben war in der Praxis
/// nur eine Fehlerquelle beim Verbindungsaufbau.
class _WifiPanel extends ConsumerWidget {
const _WifiPanel();
@override
ConsumerState<_WifiPanel> createState() => _WifiPanelState();
}
class _WifiPanelState extends ConsumerState<_WifiPanel> {
late final TextEditingController _ssidPrefixController;
late final TextEditingController _portController;
bool _controllersSeeded = false;
@override
void initState() {
super.initState();
_ssidPrefixController = TextEditingController();
_portController = TextEditingController();
}
@override
void dispose() {
_ssidPrefixController.dispose();
_portController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final linkState = ref.watch(wifiLinkStateProvider).value;
final errorReason = ref.watch(wifiLinkErrorReasonProvider);
final isReceiving = ref.watch(wifiStreamActivityProvider);
final connectionSettings = ref.watch(connectionSettingsProvider).value;
final log = ref.watch(wifiConnectionLogProvider);
final packetCount = ref.watch(wifiConnectionLogProvider.notifier).packetCount;
// Kein eigener Reaktivitaets-Provider fuer connectedSsid noetig - der
// Rebuild wird bereits durch das Beobachten von wifiLinkStateProvider
// oben ausgeloest, und das Feld wird synchron gesetzt, bevor der
// Transport auf LinkState.connected wechselt (siehe UdpTransport.connect).
final connectedSsid = ref.read(wifiTransportProvider).connectedSsid;
final packetCount = ref.watch(wifiPacketCountProvider);
final connectedSsid = ref.watch(wifiConnectedSsidProvider).value;
// Controller einmalig aus den gespeicherten Einstellungen befuellen -
// nicht bei jedem Rebuild, sonst wird waehrend der Nutzereingabe
// ueberschrieben.
if (!_controllersSeeded && connectionSettings != null) {
_controllersSeeded = true;
_ssidPrefixController.text = connectionSettings.connectionWifiSsidPrefix;
_portController.text = connectionSettings.connectionWifiPort.toString();
}
// MSP-Telemetrie nur beobachten, wenn der Transport bereits verbunden
// ist - sonst wuerde allein das Oeffnen dieses Screens ueber
// telemetryProvider einen neuen Verbindungsversuch (samt Systemdialog)
// auslösen. Ist bereits eine echte Verbindung aktiv (z.B. weil der
// Fly-Modus sie aufgebaut hat), liefert dies denselben Provider/dieselbe
// MSP-Client-Instanz wie FlyScreen - keine zweite, konkurrierende
// Abfrage-Schleife.
final telemetry = linkState == LinkState.connected
? ref.watch(telemetryProvider).value
: null;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -171,7 +152,7 @@ class _WifiPanelState extends ConsumerState<_WifiPanel> {
Row(
children: [
SizedBox(
width: 130,
width: 260,
child: DropdownButtonFormField<ConnectionType>(
initialValue: ConnectionType.wifi,
decoration: const InputDecoration(isDense: true, border: OutlineInputBorder()),
@@ -190,7 +171,7 @@ class _WifiPanelState extends ConsumerState<_WifiPanel> {
onDisconnect: () => ref.read(wifiTransportProvider).disconnect(),
),
const Spacer(),
_StreamActivityPill(isReceiving: isReceiving),
_StreamActivityPill(isReceiving: isReceiving, packetCount: packetCount),
const SizedBox(width: 6),
_StatePill(state: linkState, connectedLabel: connectedSsid),
],
@@ -200,40 +181,6 @@ class _WifiPanelState extends ConsumerState<_WifiPanel> {
_WifiErrorHint(reason: errorReason),
],
const SizedBox(height: 12),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: TextField(
controller: _ssidPrefixController,
decoration: const InputDecoration(
labelText: 'SSID prefix',
isDense: true,
border: OutlineInputBorder(),
),
onSubmitted: (value) => _saveSsidPrefix(value),
onEditingComplete: () =>
_saveSsidPrefix(_ssidPrefixController.text),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _portController,
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
decoration: const InputDecoration(
labelText: 'Port',
isDense: true,
border: OutlineInputBorder(),
),
onSubmitted: (value) => _savePort(value),
onEditingComplete: () => _savePort(_portController.text),
),
),
],
),
SwitchListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Auto-connect when entering Fly mode'),
@@ -250,6 +197,10 @@ class _WifiPanelState extends ConsumerState<_WifiPanel> {
},
),
const SizedBox(height: 8),
Text('Telemetry', style: Theme.of(context).textTheme.titleSmall),
const SizedBox(height: 4),
_TelemetryFields(telemetry: telemetry),
const SizedBox(height: 16),
Text(
'Connection log ($packetCount packets received)',
style: Theme.of(context).textTheme.titleSmall,
@@ -278,22 +229,6 @@ class _WifiPanelState extends ConsumerState<_WifiPanel> {
);
}
Future<void> _saveSsidPrefix(String value) async {
final trimmed = value.trim();
if (trimmed.isEmpty) return;
await ref
.read(appSettingsRepositoryProvider)
.setConnectionWifiSsidPrefix(trimmed);
ref.invalidate(connectionSettingsProvider);
}
Future<void> _savePort(String value) async {
final port = int.tryParse(value);
if (port == null || port <= 0 || port > 65535) return;
await ref.read(appSettingsRepositoryProvider).setConnectionWifiPort(port);
ref.invalidate(connectionSettingsProvider);
}
Future<void> _connect(WidgetRef ref) async {
try {
await ref.read(wifiTransportProvider).connect();
@@ -307,6 +242,46 @@ class _WifiPanelState extends ConsumerState<_WifiPanel> {
'${t.hour.toString().padLeft(2, '0')}:${t.minute.toString().padLeft(2, '0')}:${t.second.toString().padLeft(2, '0')}';
}
/// Empfangene, ueber MSP dekodierte Telemetriefelder (Doku: "vor dem
/// Connection log die empfangenen Telemetriefelder anzeigen") - zum
/// schnellen Pruefen auf echter Hardware, ohne in den Fly-Modus wechseln zu
/// muessen.
class _TelemetryFields extends StatelessWidget {
const _TelemetryFields({required this.telemetry});
final TelemetryFrame? telemetry;
@override
Widget build(BuildContext context) {
final t = telemetry;
if (t == null) {
return const Text(
'No telemetry yet.',
style: TextStyle(fontSize: 12, color: Colors.grey),
);
}
return Wrap(
spacing: 16,
runSpacing: 4,
children: [
_field('Lat', t.lat.toStringAsFixed(6)),
_field('Lon', t.lon.toStringAsFixed(6)),
_field('Alt', '${t.altitudeM.toStringAsFixed(1)} m'),
_field('Speed', '${t.speedMs.toStringAsFixed(1)} m/s'),
_field('Heading', '${t.headingDeg.toStringAsFixed(0)}°'),
_field('Armed', t.armed ? 'Yes' : 'No'),
if (t.activeWaypointIndex != null)
_field('Active WP', '${t.activeWaypointIndex}'),
],
);
}
Widget _field(String label, String value) => Text(
'$label: $value',
style: const TextStyle(fontSize: 12, fontFamily: 'monospace'),
);
}
/// Runder Connect/Disconnect-Umschalter fuer die kompakte erste Zeile des
/// WLAN-Panels (Doku: "kompakter gestalten") - ein Knopf statt zwei, der je
/// nach [state] Beschriftung und Aktion wechselt.
@@ -325,9 +300,16 @@ class _ConnectToggleButton extends StatelessWidget {
Widget build(BuildContext context) {
final isActive =
state == LinkState.connected || state == LinkState.connecting;
return isActive
? OutlinedButton(onPressed: onDisconnect, child: const Text('Disconnect'))
: ElevatedButton(onPressed: onConnect, child: const Text('Connect'));
final color = isActive ? DmcColors.warnRed : DmcColors.liveGreen;
return OutlinedButton(
onPressed: isActive ? onDisconnect : onConnect,
style: OutlinedButton.styleFrom(
shape: const StadiumBorder(),
side: BorderSide(color: color),
foregroundColor: color,
),
child: Text(isActive ? 'Disconnect' : 'Connect'),
);
}
}
@@ -520,13 +502,19 @@ class _BluetoothPanel extends ConsumerWidget {
/// unabhaengig vom Verbindungszustand, der Socket kann offen sein, ohne
/// dass die Gegenstelle sendet (siehe wifiStreamActivityProvider).
class _StreamActivityPill extends StatelessWidget {
const _StreamActivityPill({required this.isReceiving});
const _StreamActivityPill({required this.isReceiving, required this.packetCount});
final bool isReceiving;
/// Gesamtzahl empfangener Pakete (Doku: "Receiving-Pille soll empfangene
/// Pakete anzeigen und automatisch aktualisieren") - reaktiv ueber
/// wifiPacketCountProvider, aktualisiert sich also mit jedem Paket.
final int packetCount;
@override
Widget build(BuildContext context) {
final color = isReceiving ? DmcColors.liveGreen : Colors.grey;
final label = isReceiving ? 'Receiving ($packetCount)' : 'Not receiving';
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
@@ -534,10 +522,7 @@ class _StreamActivityPill extends StatelessWidget {
borderRadius: BorderRadius.circular(12),
border: Border.all(color: color),
),
child: Text(
isReceiving ? 'Receiving' : 'Not receiving',
style: TextStyle(color: color, fontSize: 12),
),
child: Text(label, style: TextStyle(color: color, fontSize: 12)),
);
}
}
@@ -547,15 +532,18 @@ class _StatePill extends StatelessWidget {
final LinkState? state;
/// Ueberschreibt die Beschriftung im verbundenen Zustand - z.B. der
/// WLAN-Netzname statt des generischen "Connected" (Doku: "die connected
/// pill soll den WiFi-Namen anzeigen").
/// WLAN-Netzname, falls bekannt - erscheint im verbundenen Zustand als
/// "Connected to {name}" statt des generischen "Connected" (Doku: "die
/// connected pille soll den WiFi-Namen anzeigen").
final String? connectedLabel;
@override
Widget build(BuildContext context) {
final (label, color) = switch (state) {
LinkState.connected => (connectedLabel ?? 'Connected', DmcColors.liveGreen),
LinkState.connected => (
connectedLabel != null ? 'Connected to $connectedLabel' : 'Connected',
DmcColors.liveGreen,
),
LinkState.connecting => ('Connecting…', DmcColors.pafAmber),
LinkState.error => ('Error', DmcColors.warnRed),
LinkState.disconnected || null => ('Disconnected', Colors.grey),