Alby96/Europa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animate the radar timeline with a double-buffered overlay

Browse Source 
Completes milestone 3: frames render over the map, play as a loop, and can be
scrubbed, with the legend drawn from the manifest rather than a constant that
could drift from what the worker actually rendered.

The overlay alternates two MapLibre image sources. Updating one source in place
flickers, because the layer briefly shows a half-written texture; adding every
frame as its own layer avoids that but pins them all in GPU memory, and twenty
512x512 RGBA frames is about 80 MB. Two buffers cost the same whether the
timeline holds six frames or sixty. Platform-channel work is serialised because
`show` is called faster than the round trip completes during playback, and
overlapping updates would swap visibility out of order and strobe.

Prefetching loads a window around the playhead, nearest first and forward
before backward, since playback moves forward and that frame is needed
soonest. `FrameCache` is byte-budgeted rather than entry-counted because frame
size tracks how much precipitation is on screen, and it evicts by distance from
the playhead: plain LRU would keep frames the prefetcher touched a moment ago
even after the playhead moved to the far end of the timeline.

Also adds DpcRadarSource, which reads published frames from our CDN and never
from the DPC API. Without it, the `dpc` adapter would have had to fall back to
mock, putting demo frames on screen under the label of live data — exactly the
confusion the adapter split exists to prevent. It now fails naming the missing
setting instead.

Running it on the emulator caught three things the tests had not:

- The notifier wrote to `state` from inside `build()`, which Riverpod rejects
  as an uninitialised provider. That broke startup, not just tests.
- Eight-month-old demo frames rendered as "Aggiornato 342535 minuti fa". The
  age formatter now steps up to hours and days.
- Demo mode sat permanently behind a stale-data warning and so never showed the
  working state it exists to demonstrate. MockRadarSource now shifts the
  bundled timestamps onto the present, leaving images, order and spacing
  untouched, so the timeline behaves exactly as it would on live data.

Corrects docs/stack-decisions.md, which described a disk cache that was not
built: mock frames already live in the asset bundle, so a disk layer belongs
with the network adapter where it would save a real request.

Verified: analyze clean, 129 tests passing, and on the emulator the loop
advances, wraps, and reports "Aggiornato ora".

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Alby96
2026-09-10 12:57:16 +02:00
co-authored by Claude Opus 5
parent 8ff8a903b8
commit 91f9ac0fbf
18 changed files with 1856 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Nuvolari/app/lib/features/map/attribution_bar.dart
+8
View File
@@ -15,6 +15,7 @@ class AttributionBar extends StatelessWidget {
const AttributionBar({
required this.region,
required this.activeSourceIds,
this.additionalCredits = const <String>[],
this.showBaseMapNotice = false,
super.key,
});
@@ -25,6 +26,12 @@ class AttributionBar extends StatelessWidget {
/// the data currently rendered.
final Set<String> activeSourceIds;
/// Credits that travel with the data rather than with the region, such as the
/// attribution line inside a radar manifest. Whoever published those frames
/// states there who to credit for them, which is more current than anything
/// baked into the app.
final List<String> additionalCredits;
/// Whether to say that no base map is configured. True when the offline
/// fallback style is in use, so the placeholder is never mistaken for a map.
final bool showBaseMapNotice;
@@ -42,6 +49,7 @@ class AttributionBar extends StatelessWidget {
final parts = <String>[
if (showBaseMapNotice) l10n.baseMapNotConfigured,
...credits,
...additionalCredits.where((credit) => credit.isNotEmpty),
];
return Material(
Nuvolari/app/lib/features/map/radar_map_screen.dart
+175 -18
View File
@@ -1,3 +1,5 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
@@ -5,15 +7,17 @@ import 'package:maplibre_gl/maplibre_gl.dart';
import '../../core/config/env.dart';
import '../../core/region/region_config.dart';
import '../../core/region/region_repository.dart';
import '../../data/radar/radar_manifest.dart';
import '../../data/radar/radar_source.dart';
import '../../l10n/app_localizations.dart';
import '../timeline/data_age_banner.dart';
import '../timeline/radar_timeline.dart';
import '../timeline/timeline_bar.dart';
import 'attribution_bar.dart';
import 'map_style.dart';
import 'radar_overlay.dart';
/// The radar map.
///
/// Milestone 2 renders the base map, frames it on the region and keeps the
/// attribution visible. The radar image layers and the timeline arrive in
/// milestone 3.
/// The radar map: base map, animated precipitation overlay, timeline.
class RadarMapScreen extends ConsumerWidget {
const RadarMapScreen({super.key});
@@ -38,15 +42,18 @@ class RadarMapScreen extends ConsumerWidget {
}
}
class _MapWithAttribution extends StatelessWidget {
class _MapWithAttribution extends ConsumerWidget {
const _MapWithAttribution({required this.region});
final RegionConfig region;
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final l10n = AppLocalizations.of(context);
final style = MapStyle.forRegion(region);
final manifest = ref.watch(
radarTimelineProvider.select((state) => state.manifest),
);
return Column(
children: [
@@ -56,8 +63,22 @@ class _MapWithAttribution extends StatelessWidget {
actions: const [SizedBox.shrink()],
),
Expanded(
child: _RegionMap(region: region, style: style),
child: Stack(
children: [
Positioned.fill(
child: _RegionMap(region: region, style: style),
),
if (manifest != null)
Positioned(
left: 12,
bottom: 12,
child: _RadarLegend(legend: manifest.legend),
),
],
),
),
const DataAgeBanner(),
const TimelineBar(),
// Outside the map rather than floating over it, so the credit can never
// be occluded by a map control. SafeArea keeps it clear of the system
// gesture bar as well — a credit sitting behind the navigation pill is
@@ -68,6 +89,12 @@ class _MapWithAttribution extends StatelessWidget {
region: region,
activeSourceIds: style.attributionIds,
showBaseMapNotice: style.kind == BaseMapKind.offlineFallback,
// The manifest carries the credit for the frames it indexes, which
// is the whole point of it travelling with the data: whoever
// published these frames says here who to credit for them.
additionalCredits: <String>[
if (manifest != null) manifest.attribution,
],
),
),
],
@@ -75,21 +102,54 @@ class _MapWithAttribution extends StatelessWidget {
}
}
class _RegionMap extends StatelessWidget {
class _RegionMap extends ConsumerStatefulWidget {
const _RegionMap({required this.region, required this.style});
final RegionConfig region;
final MapStyle style;
@override
ConsumerState<_RegionMap> createState() => _RegionMapState();
}
class _RegionMapState extends ConsumerState<_RegionMap> {
MapLibreMapController? _controller;
RadarOverlay? _overlay;
AppLifecycleListener? _lifecycle;
/// Guards against a frame that finished loading after the playhead moved on,
/// which would briefly show the wrong image.
int _requestId = 0;
@override
void initState() {
super.initState();
// Playback runs a timer and pushes a texture several times a second.
// Behind another app there is no one watching, so it is pure battery.
_lifecycle = AppLifecycleListener(
onPause: () =>
ref.read(radarTimelineProvider.notifier).onAppBackgrounded(),
);
}
@override
void dispose() {
_lifecycle?.dispose();
unawaited(_overlay?.detach());
super.dispose();
}
/// Frames the whole region once the map is ready.
///
/// The configured initial zoom is only a starting point: a single zoom number
/// cannot fit the region on both a small phone and a tablet, and on a 411dp
/// screen zoom 7.2 puts the viewport entirely inside the region, so the user
/// sees a flat expanse with no coastline, border or outline to orient by.
/// Fitting the bounds works on every screen size.
Future<void> _frameRegion(MapLibreMapController controller) async {
final bounds = region.bounds;
/// sees a flat expanse with no border or outline to orient by. Fitting the
/// bounds works on every screen size.
Future<void> _onMapCreated(MapLibreMapController controller) async {
_controller = controller;
final bounds = widget.region.bounds;
await controller.moveCamera(
CameraUpdate.newLatLngBounds(
LatLngBounds(
@@ -104,15 +164,52 @@ class _RegionMap extends StatelessWidget {
);
}
/// Layers can only be added once the style exists, and the style is reloaded
/// whenever it changes, so the overlay is rebuilt here rather than in
/// [_onMapCreated].
Future<void> _onStyleLoaded() async {
final controller = _controller;
if (controller == null) return;
_overlay = RadarOverlay(map: controller, bounds: widget.region.bounds);
await _showFrame(ref.read(radarTimelineProvider).currentFrame);
}
Future<void> _showFrame(RadarFrame? frame) async {
final overlay = _overlay;
if (overlay == null || frame == null) return;
if (overlay.visiblePath == frame.path) return;
final request = ++_requestId;
try {
final bytes = await ref
.read(radarTimelineProvider.notifier)
.bytesFor(frame);
// Someone scrubbed while this was loading; that newer frame wins.
if (!mounted || request != _requestId) return;
await overlay.show(frame.path, bytes);
} on RadarUnavailableException {
// Hold the previous frame. A gap mid-timeline is normal while the worker
// publishes, and blanking the map would be a worse answer than showing
// the neighbouring minute.
}
}
@override
Widget build(BuildContext context) {
final center = region.map.center;
final zoom = region.map.zoom;
final bounds = region.bounds;
ref.listen(
radarTimelineProvider.select((state) => state.currentFrame),
(_, frame) => unawaited(_showFrame(frame)),
);
final center = widget.region.map.center;
final zoom = widget.region.map.zoom;
final bounds = widget.region.bounds;
return MapLibreMap(
styleString: style.styleString,
onMapCreated: _frameRegion,
styleString: widget.style.styleString,
onMapCreated: _onMapCreated,
onStyleLoadedCallback: () => unawaited(_onStyleLoaded()),
initialCameraPosition: CameraPosition(
target: LatLng(center.latitude, center.longitude),
zoom: zoom.initial,
@@ -138,3 +235,63 @@ class _RegionMap extends StatelessWidget {
);
}
}
/// The colour ramp for the frames currently on screen.
///
/// Built from the manifest rather than from a constant: the worker chose these
/// colours when it rendered the PNGs, so anything hardcoded here could drift
/// and mislabel the intensities the reader is looking at.
class _RadarLegend extends StatelessWidget {
const _RadarLegend({required this.legend});
final RadarLegend legend;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
return DecoratedBox(
decoration: BoxDecoration(
color: theme.colorScheme.surface.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(8),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
l10n.radarLegendUnit(legend.unit),
style: theme.textTheme.labelSmall,
),
const SizedBox(height: 6),
Row(
mainAxisSize: MainAxisSize.min,
children: [
for (final stop in legend.stops)
Container(width: 14, height: 12, color: stop.color),
],
),
const SizedBox(height: 2),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'${legend.stops.first.value.toInt()}',
style: theme.textTheme.labelSmall,
),
SizedBox(width: 14.0 * legend.stops.length - 28),
Text(
'${legend.stops.last.value.toInt()}',
style: theme.textTheme.labelSmall,
),
],
),
],
),
),
);
}
}
Nuvolari/app/lib/features/map/radar_overlay.dart
+125
View File
@@ -0,0 +1,125 @@
import 'dart:async';
import 'dart:typed_data';
import 'package:maplibre_gl/maplibre_gl.dart';
import '../../core/region/geo.dart';
/// Draws radar frames over the map, double buffered.
///
/// Two image sources alternate: while one is on screen the next frame is
/// uploaded into the other, then visibility swaps. Updating a single source in
/// place flickers, because the layer is briefly showing a half-written texture;
/// adding every frame as its own layer avoids that too but pins all of them in
/// GPU memory at once, and twenty 512×512 RGBA frames is about 80 MB. Two
/// buffers cost the same whether the timeline holds six frames or sixty.
class RadarOverlay {
RadarOverlay({required this.map, required GeoBounds bounds})
: _quad = LatLngQuad(
topLeft: LatLng(bounds.north, bounds.west),
topRight: LatLng(bounds.north, bounds.east),
bottomRight: LatLng(bounds.south, bounds.east),
bottomLeft: LatLng(bounds.south, bounds.west),
);
static const String _sourceA = 'nuvolari-radar-a';
static const String _sourceB = 'nuvolari-radar-b';
static const String _layerA = 'nuvolari-radar-layer-a';
static const String _layerB = 'nuvolari-radar-layer-b';
final MapLibreMapController map;
/// Corners of the published frames. The worker renders in EPSG:3857 cropped
/// to exactly this box, so the quad is exact and nothing is warped client
/// side.
final LatLngQuad _quad;
bool _attached = false;
bool _showingA = true;
String? _visiblePath;
/// Serialises platform-channel work. `show` can be called faster than the
/// round trip completes — during playback, or while scrubbing — and
/// overlapping updates would swap visibility out of order and strobe.
Future<void> _pending = Future<void>.value();
bool get isAttached => _attached;
/// The frame currently on screen, or null before the first one.
String? get visiblePath => _visiblePath;
/// Creates the sources and layers, showing [bytes] immediately.
///
/// Safe to call again after the style reloads: the previous layers are torn
/// down first.
Future<void> attach(String path, Uint8List bytes) => _serialise(() async {
if (_attached) await _detachUnsafe();
await map.addImageSource(_sourceA, bytes, _quad);
await map.addImageSource(_sourceB, bytes, _quad);
await map.addImageLayer(_layerA, _sourceA);
await map.addImageLayer(_layerB, _sourceB);
await map.setLayerVisibility(_layerB, false);
_attached = true;
_showingA = true;
_visiblePath = path;
});
/// Swaps [bytes] onto the map.
///
/// A no-op when [path] is already visible, so a rebuild that does not change
/// the playhead costs nothing.
Future<void> show(String path, Uint8List bytes) {
if (!_attached) return attach(path, bytes);
if (path == _visiblePath) return Future<void>.value();
return _serialise(() async {
final hiddenSource = _showingA ? _sourceB : _sourceA;
final hiddenLayer = _showingA ? _layerB : _layerA;
final visibleLayer = _showingA ? _layerA : _layerB;
// Upload first, reveal second: the new texture is complete before it is
// ever shown, which is what removes the flicker.
await map.updateImageSource(hiddenSource, bytes, null);
await map.setLayerVisibility(hiddenLayer, true);
await map.setLayerVisibility(visibleLayer, false);
_showingA = !_showingA;
_visiblePath = path;
});
}
/// Removes the layers and sources.
Future<void> detach() => _serialise(_detachUnsafe);
Future<void> _detachUnsafe() async {
// Layers reference sources, so they have to go first. Each removal is
// tolerated failing: the style may already have dropped them, and the goal
// here is to end up with nothing rather than to prove what was there.
for (final layer in <String>[_layerA, _layerB]) {
try {
await map.removeLayer(layer);
} on Object {
continue;
}
}
for (final source in <String>[_sourceA, _sourceB]) {
try {
await map.removeSource(source);
} on Object {
continue;
}
}
_attached = false;
_visiblePath = null;
}
Future<void> _serialise(Future<void> Function() action) {
final next = _pending.then((_) => action());
// Swallow the failure for the chain's sake only: a platform-channel error
// on one frame must not deadlock every later frame behind it.
_pending = next.catchError((Object _) {});
return next;
}
}