Map Page Rework

lib/src/data/metrics/position.dart

@@ -34,12 +34,21 @@ class PositionMetrics extends Metrics<RoverPosition> {
     }
   }
 
+  /// Gets the human friendly name of the RTK fix mode
+  String getRTKString(RTKMode mode) => switch(mode) {
+    RTKMode.RTK_FIXED => "Fixed",
+    RTKMode.RTK_FLOAT => "Float",
+    RTKMode.RTK_NONE => "None",
+    _ => "None",
+  };
+
 	@override
 	List<MetricLine> get allMetrics => [  
     MetricLine("GPS: "),
-    MetricLine("  Latitude: ${data.gps.latitude.toStringAsFixed(6)}°",),
-		MetricLine("  Longitude: ${data.gps.longitude.toStringAsFixed(6)}°",),
+    MetricLine("  Latitude: ${data.gps.latitude.toStringAsFixed(10)}°",),
+		MetricLine("  Longitude: ${data.gps.longitude.toStringAsFixed(10)}°",),
 		MetricLine("  Altitude: ${data.gps.altitude.toStringAsFixed(2)} m"),
+    MetricLine("  RTK Mode: ${getRTKString(data.gps.rtkMode)}"),
 		MetricLine("Orientation:",),
 		MetricLine("  X: ${data.orientation.x.toStringAsFixed(2)}°", severity: getRotationSeverity(data.orientation.x)),
 		MetricLine("  Y: ${data.orientation.y.toStringAsFixed(2)}°", severity: getRotationSeverity(data.orientation.y)),

lib/src/models/data/views.dart

@@ -88,10 +88,13 @@ class ViewsModel extends Model with PresetsModel {
     // Wait for all views to reset so as not to cause overflow issues
     await nextFrame();
     setNumViews(preset.views.length);
+    notifyListeners();
     // Wait 3 frames for flutter_resizable container to load
     await nextFrame();
     await nextFrame();
     await nextFrame();
+    await nextFrame();
+    await nextFrame();
     if (preset.horizontal1.isNotEmpty) horizontalController1.setRatios(preset.horizontal1);
     if (preset.horizontal2.isNotEmpty) horizontalController2.setRatios(preset.horizontal2);
     if (preset.horizontal3.isNotEmpty) horizontalController3.setRatios(preset.horizontal3);

lib/src/models/rover/rover.dart

@@ -7,7 +7,7 @@ import "package:rover_dashboard/models.dart";
 import "settings.dart";
 
 /// The model to control the entire rover.
-/// 
+///
 /// Find more specific functionality in this class's fields.
 class Rover extends Model {
 	/// Monitors metrics coming from the rover.
@@ -41,13 +41,13 @@ class Rover extends Model {
   Iterable<Controller> get controllers => [controller1, controller2, controller3];
 
 	/// Whether the rover is connected.
-	bool get isConnected => models.sockets.data.isConnected;
+	bool get isConnected => models.sockets.sockets.any((socket) => socket.isConnected);
 
 	/// The current status of the rover.
 	ValueNotifier<RoverStatus> status = ValueNotifier(RoverStatus.DISCONNECTED);
 
 	@override
-	Future<void> init() async { 
+	Future<void> init() async {
     setDefaultControls();
     await metrics.init();
 		await controller1.init();

lib/src/models/view/bad_apple.dart

@@ -0,0 +1,133 @@
+import "dart:async";
+import "dart:ui";
+
+import "package:flutter/material.dart";
+import "package:flutter/services.dart";
+import "package:just_audio/just_audio.dart";
+import "package:rover_dashboard/data.dart";
+import "package:rover_dashboard/models.dart";
+
+/// The Bad Apple Easter Egg.
+///
+/// This Easter Egg renders the Bad Apple video in the map page by grabbing
+/// each frame and assigning an obstacle to each black pixel.
+mixin BadAppleViewModel on ChangeNotifier {
+  /// Whether the UI is currently playing Bad Apple
+  bool isPlayingBadApple = false;
+
+  /// Which frame in the Bad Apple video we are up to right now
+  int badAppleFrame = 0;
+
+  /// The zoom of the map before playing bad apple
+  late int _originalZoom = gridSize;
+
+  /// The audio player for the Bad Apple music
+  final badAppleAudioPlayer = AudioPlayer();
+
+  /// How many frames in a second are being shown
+  static const badAppleFps = 1;
+
+  /// The last frame of Bad Apple
+  static const badAppleLastFrame = 6570;
+
+  /// A stopwatch to track the current time in the bad apple video
+  final Stopwatch _badAppleStopwatch = Stopwatch();
+
+  /// Cleans up any resources used by Bad Apple.
+  void disposeBadApple() => badAppleAudioPlayer.dispose();
+
+	/// The amount of blocks in the width and height of the grid.
+	///
+	/// Keep this an odd number to keep the rover in the center.
+  int get gridSize;
+
+  /// Sets the zoom of the map.
+  void zoom(int newSize);
+
+  /// Sets the grid data of the map.
+  set data(AutonomyData value);
+
+  /// Starts playing Bad Apple.
+  Future<void> startBadApple() async {
+    isPlayingBadApple = true;
+    notifyListeners();
+    _originalZoom = gridSize;
+    zoom(50);
+    badAppleFrame = 0;
+    Timer.run(() async {
+      await badAppleAudioPlayer.setAsset("assets/bad_apple2.mp3", preload: false);
+      badAppleAudioPlayer.play().ignore();
+      _badAppleStopwatch.start();
+    });
+
+    while (isPlayingBadApple) {
+      await Future<void>.delayed(Duration.zero);
+      var sampleTime = _badAppleStopwatch.elapsed;
+      if (badAppleAudioPlayer.position != Duration.zero) {
+        sampleTime = badAppleAudioPlayer.position;
+      }
+      badAppleFrame = ((sampleTime.inMicroseconds.toDouble() / 1e6) * 30.0).round();
+      if (badAppleFrame >= badAppleLastFrame) {
+        stopBadApple();
+        break;
+      }
+      final obstacles = await _loadBadAppleFrame(badAppleFrame);
+      if (obstacles == null) {
+        continue;
+      }
+      if (!isPlayingBadApple) {
+        break;
+      }
+      data = AutonomyData(obstacles: obstacles);
+      notifyListeners();
+    }
+  }
+
+  Future<List<GpsCoordinates>?> _loadBadAppleFrame(int videoFrame) async {
+    // final filename = "assets/bad_apple/image_480.jpg";
+    final filename = "assets/bad_apple/image_$videoFrame.jpg";
+    final buffer = await rootBundle.loadBuffer(filename);
+    final codec = await instantiateImageCodecWithSize(buffer);
+    final frame = await codec.getNextFrame();
+    final image = frame.image;
+    if (image.height != 50 || image.width != 50) {
+      models.home.setMessage(severity: Severity.error, text: "Wrong Bad Apple frame size");
+      stopBadApple();
+      return null;
+    }
+    final imageData = await image.toByteData();
+    if (imageData == null) {
+      models.home.setMessage(severity: Severity.error, text: "Could not load Bad Apple frame");
+      stopBadApple();
+      return null;
+    }
+    var offset = 0;
+    final obstacles = <GpsCoordinates>[];
+    for (var row = 0; row < image.height; row++) {
+      for (var col = 0; col < image.width; col++) {
+        final pixel = imageData.getUint8(offset++);
+        imageData.getUint8(offset++);
+        imageData.getUint8(offset++);
+        imageData.getUint8(offset++);
+        final isBlack = pixel < 100;  // dealing with lossy compression, not 255 and 0
+        final coordinate = GpsCoordinates(latitude: (row - image.height).abs().toDouble(), longitude: (image.width - col - 1).abs().toDouble());
+        if (isBlack) obstacles.add(coordinate);
+      }
+    }
+    if (!isPlayingBadApple) {
+      return null;
+    }
+    return obstacles;
+  }
+
+  /// Stops playing Bad Apple and resets the UI.
+  void stopBadApple() {
+    isPlayingBadApple = false;
+    data = AutonomyData();
+    badAppleAudioPlayer.stop();
+    _badAppleStopwatch.stop();
+    _badAppleStopwatch.reset();
+    zoom(_originalZoom);
+    notifyListeners();
+  }
+}

lib/src/models/view/builders/autonomy_command.dart

@@ -58,7 +58,7 @@ class AutonomyCommandBuilder extends ValueBuilder<AutonomyCommand> {
 	}
 
 	/// Sends this command to the rover using [Sockets.autonomy].
-	Future<void> submit() async {
+	Future<void> submit(AutonomyCommand value) async {
 		_handshake = null;
 		isLoading = true;
 		notifyListeners();

lib/src/models/view/builders/gps.dart

@@ -57,8 +57,8 @@ class GpsBuilder extends ValueBuilder<GpsCoordinates> {
 	GpsCoordinates get value => switch (type) {
 		GpsType.decimal => GpsCoordinates(longitude: longDecimal.value, latitude: latDecimal.value),
 		GpsType.degrees => GpsCoordinates(
-			longitude: longDegrees.value + (longMinutes.value / 60) + (longSeconds.value / 3600),
-			latitude: latDegrees.value + (latMinutes.value / 60) + (latSeconds.value / 3600),
+			longitude: longDegrees.value + (longMinutes.value / 60.0) + (longSeconds.value / 3600.0),
+			latitude: latDegrees.value + (latMinutes.value / 60.0) + (latSeconds.value / 3600.0),
 		),
 	};