From ed333229c1197d99c19cb4589464440c8c1cbf37 Mon Sep 17 00:00:00 2001 From: Constantin Leue <77660791+Consti3D@users.noreply.github.com> Date: Tue, 28 Jul 2026 13:45:15 +0200 Subject: [PATCH] Add per-waypoint wind markers on the map Vervollstaendigt den in der letzten Session zurueckgestellten Teil des Wind-Features (Doku 3.8): die Kopfleisten-Pille toggelt jetzt tatsaechlich sichtbare Wind-Marker an jedem Wegpunkt, statt nur ihren eigenen Zustand zu halten (HTML-Demonstrator: showPerWaypointWind steuerte im Original direkt die divIcon-Marker in redrawMapLayers()). WindMarkerPill (neuer Widget) zeigt Richtungspfeil + Geschwindigkeit in einer kleinen dunklen Pille. MissionMap bekommt dafuer einen eigenen windMarkers-Parameter (flutter_map MarkerLayer, gesondert von den bestehenden CircleMarker-Wegpunkten, da MarkerLayer echte Widgets statt nur CustomPaint-Kreise rendert). PlanScreen baut die Liste aus ref.watch(headerWindProvider).showPerWaypoint plus den bereits per "Fetch wind" geladenen Wegpunkt-Winddaten. Zwei Dinge beim Verifizieren gefunden und gefixt: - Marker-Groesse (width/height) war zu knapp bemessen und liess die Pille per RenderFlex-Overflow abschneiden - vergroessert und die Verankerung entsprechend angepasst. - Der neue Widget-Test placierte den Test-Wegpunkt zunaechst ausserhalb des sichtbaren Kartenausschnitts: anders als CircleLayer rendert flutter_map's MarkerLayer nur Marker innerhalb der aktuellen Viewport- Bounds. Wegpunkt jetzt am Kartenzentrum (MissionMap._initialCenter) platziert. Verifiziert: flutter analyze (0 issues), flutter test (45/45, ein neuer Test fuer Marker-Sichtbarkeit vor/nach Antippen der Pille), manuell auf Pixel_10a-Emulator - drei Wegpunkte mit geladenem Wind zeigen nach Antippen der Pille je eine Wind-Anzeige, verschwinden beim erneuten Antippen wieder. Co-Authored-By: Claude Sonnet 5 --- app/lib/ui/screens/plan/plan_screen.dart | 17 ++++++++++ app/lib/ui/widgets/mission_map.dart | 7 ++++ app/lib/ui/widgets/wind_marker_pill.dart | 40 ++++++++++++++++++++++ app/test/widget_test.dart | 42 ++++++++++++++++++++++++ 4 files changed, 106 insertions(+) create mode 100644 app/lib/ui/widgets/wind_marker_pill.dart diff --git a/app/lib/ui/screens/plan/plan_screen.dart b/app/lib/ui/screens/plan/plan_screen.dart index 09d1104..6ee9038 100644 --- a/app/lib/ui/screens/plan/plan_screen.dart +++ b/app/lib/ui/screens/plan/plan_screen.dart @@ -19,6 +19,7 @@ import '../../widgets/mission_map.dart'; import '../../widgets/reticle_button.dart'; import '../../widgets/value_wheel.dart'; import '../../widgets/waypoint_list_panel.dart'; +import '../../widgets/wind_marker_pill.dart'; /// Reticle-Zustand (HTML-Demonstrator: Variable `mode`). /// idle: kein Wegpunkt in der Naehe, Tap legt einen neuen an. @@ -323,6 +324,7 @@ class _PlanScreenState extends ConsumerState { @override Widget build(BuildContext context) { final waypoints = ref.watch(currentMissionProvider); + final showPerWaypointWind = ref.watch(headerWindProvider).showPerWaypoint; final routeGeometry = buildRouteGeometry( waypoints, @@ -376,6 +378,21 @@ class _PlanScreenState extends ConsumerState { routeGeometry.vertexBad[i], ), ], + windMarkers: [ + if (showPerWaypointWind) + for (final wp in waypoints) + if (wp.windSpeedMs != null && wp.windDirFromDeg != null) + Marker( + point: LatLng(wp.lat, wp.lon), + width: 100, + height: 26, + alignment: const Alignment(1.0, -1.4), + child: WindMarkerPill( + speedMs: wp.windSpeedMs!, + dirFromDeg: wp.windDirFromDeg!, + ), + ), + ], ), if (_mode == _ReticleMode.editing && targetWaypoint != null) Align( diff --git a/app/lib/ui/widgets/mission_map.dart b/app/lib/ui/widgets/mission_map.dart index 5886b16..851e526 100644 --- a/app/lib/ui/widgets/mission_map.dart +++ b/app/lib/ui/widgets/mission_map.dart @@ -12,6 +12,7 @@ class MissionMap extends StatelessWidget { super.key, this.mapController, this.waypointMarkers = const [], + this.windMarkers = const [], this.routeSegments = const [], this.rubberBandLine, this.onMapReady, @@ -22,6 +23,11 @@ class MissionMap extends StatelessWidget { /// Kreis-Marker fuer die Wegpunkte der aktuellen Mission (Doku 3.7). final List waypointMarkers; + /// Wind-Anzeigen je Wegpunkt (Doku 3.8), nur befuellt wenn die + /// Kopfleisten-Pille aktiv ist und fuer den jeweiligen Wegpunkt Wind + /// geladen wurde (HTML-Demonstrator: showPerWaypointWind). + final List windMarkers; + /// Geraden + Kreisbogen-Segmente des Flugpfads (Doku 3.7/4.6); rot /// markierte Segmente ueberschreiten Steig-/Sinkrate oder Kurvenradius. final List routeSegments; @@ -72,6 +78,7 @@ class MissionMap extends StatelessWidget { ], ), CircleLayer(circles: waypointMarkers), + MarkerLayer(markers: windMarkers), const _CompactAttribution(), ], ); diff --git a/app/lib/ui/widgets/wind_marker_pill.dart b/app/lib/ui/widgets/wind_marker_pill.dart new file mode 100644 index 0000000..e8c0acf --- /dev/null +++ b/app/lib/ui/widgets/wind_marker_pill.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; + +import 'wind_arrow_icon.dart'; + +/// Kleine Wind-Anzeige direkt an einem Wegpunkt auf der Karte (HTML- +/// Demonstrator: divIcon in redrawMapLayers(), sichtbar wenn +/// showPerWaypointWind aktiv ist und fuer den Wegpunkt Wind geladen wurde). +class WindMarkerPill extends StatelessWidget { + const WindMarkerPill({ + super.key, + required this.speedMs, + required this.dirFromDeg, + }); + + final double speedMs; + final double dirFromDeg; + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2), + decoration: BoxDecoration( + color: Colors.black.withValues(alpha: 0.82), + borderRadius: BorderRadius.circular(10), + border: Border.all(color: Colors.white.withValues(alpha: 0.4)), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + WindArrowIcon(dirFromDeg: dirFromDeg, size: 15), + const SizedBox(width: 4), + Text( + '${speedMs.round()} m/s', + style: const TextStyle(color: Colors.white, fontSize: 11), + ), + ], + ), + ); + } +} diff --git a/app/test/widget_test.dart b/app/test/widget_test.dart index d312d32..4eb5b4d 100644 --- a/app/test/widget_test.dart +++ b/app/test/widget_test.dart @@ -10,11 +10,13 @@ import 'package:dmc_app/ui/app_shell.dart'; import 'package:dmc_app/ui/providers/current_mission_provider.dart'; import 'package:dmc_app/ui/widgets/full_value_chart.dart'; import 'package:dmc_app/ui/widgets/halo_menu.dart'; +import 'package:dmc_app/ui/widgets/header_wind_pill.dart'; import 'package:dmc_app/ui/widgets/map_search_controls.dart'; import 'package:dmc_app/ui/providers/map_controller_provider.dart'; import 'package:dmc_app/ui/widgets/reticle_button.dart'; import 'package:dmc_app/ui/widgets/waypoint_chip.dart'; import 'package:dmc_app/ui/widgets/waypoint_list_panel.dart'; +import 'package:dmc_app/ui/widgets/wind_marker_pill.dart'; import 'package:latlong2/latlong.dart'; Widget _wrap(Widget child) => ProviderScope( @@ -470,4 +472,44 @@ void main() { final listView = tester.widget(find.byType(ListView)); expect(listView.controller!.offset, greaterThan(0)); }); + + testWidgets( + 'Wind-Marker an Wegpunkten erscheinen erst nach Antippen der Kopfleisten-Pille', + (tester) async { + final container = ProviderContainer(); + addTearDown(container.dispose); + + // Am Kartenzentrum platziert (siehe MissionMap._initialCenter), damit + // der Marker nicht ausserhalb des sichtbaren Kartenausschnitts liegt - + // flutter_map's MarkerLayer rendert (anders als CircleLayer) nur + // Marker innerhalb der aktuellen Viewport-Bounds. + container.read(currentMissionProvider.notifier).addWaypoint(const Waypoint( + lat: 52.3676, + lon: 4.9041, + altitudeM: 60, + speedMs: 15, + catchRadiusM: 60, + windSpeedMs: 5, + windDirFromDeg: 300, + windElevationM: 2, + )); + + await tester.pumpWidget( + UncontrolledProviderScope( + container: container, + child: BlocProvider( + create: (_) => AppModeCubit(), + child: const MaterialApp(home: AppShell()), + ), + ), + ); + await tester.pump(); + + expect(find.byType(WindMarkerPill), findsNothing); + + await tester.tap(find.byType(HeaderWindPill)); + await tester.pump(); + + expect(find.byType(WindMarkerPill), findsOneWidget); + }); }