Add setting for progress animation style

mlcommons · Feb 22, 2024 · c14cc63 · c14cc63
1 parent ef1c427
commit c14cc63
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 13 deletions.
diff --git a/flutter/lib/store.dart b/flutter/lib/store.dart
@@ -29,6 +29,14 @@ class Store extends ChangeNotifier {
     return value ?? '';
   }
 
+  int get progressAnimationMode =>
+      _getInt(StoreConstants.progressAnimationMode, 0);
+
+  set progressAnimationMode(int value) {
+    _storeFromDisk.setInt(StoreConstants.progressAnimationMode, value);
+    notifyListeners();
+  }
+
   BenchmarkRunModeEnum get selectedBenchmarkRunMode {
     String name = _getString(StoreConstants.selectedBenchmarkRunMode);
     if (name == '') name = BenchmarkRunModeEnum.performanceOnly.name;
@@ -142,6 +150,7 @@ class Store extends ChangeNotifier {
 }
 
 class StoreConstants {
+  static const progressAnimationMode = 'progressAnimationMode';
   static const selectedBenchmarkRunMode = 'selectedBenchmarkRunMode';
   static const artificialCPULoadEnabled = 'artificial cpu load enabled';
   static const offlineMode = 'offline mode';

diff --git a/flutter/lib/ui/home/benchmark_running_screen.dart b/flutter/lib/ui/home/benchmark_running_screen.dart
@@ -4,16 +4,18 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 
 import 'package:collection/collection.dart';
-import 'package:mlperfbench/ui/home/dotted_progress_circle.dart';
 import 'package:provider/provider.dart';
 
 import 'package:mlperfbench/benchmark/info.dart';
 import 'package:mlperfbench/benchmark/run_mode.dart';
 import 'package:mlperfbench/benchmark/state.dart';
 import 'package:mlperfbench/localizations/app_localizations.dart';
 import 'package:mlperfbench/state/task_runner.dart';
+import 'package:mlperfbench/store.dart';
 import 'package:mlperfbench/ui/app_styles.dart';
 import 'package:mlperfbench/ui/formatter.dart';
+import 'package:mlperfbench/ui/home/dotted_progress_circle.dart';
+import 'package:mlperfbench/ui/home/infinite_progress_circle.dart';
 import 'package:mlperfbench/ui/icons.dart';
 
 class BenchmarkRunningScreen extends StatefulWidget {
@@ -30,11 +32,13 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
   late BenchmarkState state;
   late AppLocalizations l10n;
   late ProgressInfo progress;
+  late Store store;
 
   @override
   Widget build(BuildContext context) {
     state = context.watch<BenchmarkState>();
     l10n = AppLocalizations.of(context);
+    store = context.watch<Store>();
     progress = state.taskRunner.progressInfo;
 
     final backgroundGradient = BoxDecoration(
@@ -90,6 +94,20 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
     var containerWidth = 0.50 * MediaQuery.of(context).size.width;
     containerWidth = max(containerWidth, 160);
     containerWidth = min(containerWidth, 240);
+    Widget animation;
+    if (store.progressAnimationMode == 1) {
+      animation = DottedProgressCircle(
+        circleSize: containerWidth + 40,
+        dotSize: 10,
+      );
+    } else if (store.progressAnimationMode == 2) {
+      animation = GradientProgressCircle(
+        size: containerWidth + 20,
+        strokeWidth: 6.0,
+      );
+    } else {
+      animation = const SizedBox(height: 0);
+    }
     return Stack(
       alignment: AlignmentDirectional.center,
       children: <Widget>[
@@ -114,10 +132,7 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
             ),
           ),
         ),
-        DottedProgressCircle(
-          circleSize: containerWidth + 20,
-          dotSize: 10,
-        ),
+        animation,
       ],
     );
   }
@@ -201,10 +216,19 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
     const trailingWidth = 24.0;
     Widget? doneIcon;
     if (progress.currentBenchmark?.taskName == benchmarkInfo.taskName) {
-      doneIcon = const DottedProgressCircle(
-        circleSize: trailingWidth + 20,
-        dotSize: 2,
-      );
+      if (store.progressAnimationMode == 1) {
+        doneIcon = const DottedProgressCircle(
+          circleSize: trailingWidth,
+          dotSize: 2.0,
+        );
+      } else if (store.progressAnimationMode == 2) {
+        doneIcon = const GradientProgressCircle(
+          size: trailingWidth,
+          strokeWidth: 2.0,
+        );
+      } else {
+        doneIcon = const SizedBox(height: 0);
+      }
     } else if (progress.completedBenchmarks.contains(benchmarkInfo)) {
       doneIcon = const Icon(
         Icons.check_circle,

diff --git a/flutter/lib/ui/home/progress_circles.dart → ...lib/ui/home/infinite_progress_circle.dart b/flutter/lib/ui/home/progress_circles.dart → ...lib/ui/home/infinite_progress_circle.dart
@@ -2,19 +2,19 @@ import 'package:flutter/material.dart';
 
 import 'package:mlperfbench/ui/home/gradient_circular_progress_indicator.dart';
 
-class InfiniteProgressCircle extends StatefulWidget {
+class GradientProgressCircle extends StatefulWidget {
   final double size;
   final double strokeWidth;
 
-  const InfiniteProgressCircle(
+  const GradientProgressCircle(
       {Key? key, required this.size, required this.strokeWidth})
       : super(key: key);
 
   @override
-  State<InfiniteProgressCircle> createState() => _InfiniteProgressCircleState();
+  State<GradientProgressCircle> createState() => _GradientProgressCircleState();
 }
 
-class _InfiniteProgressCircleState extends State<InfiniteProgressCircle>
+class _GradientProgressCircleState extends State<GradientProgressCircle>
     with SingleTickerProviderStateMixin {
   late AnimationController _controller;
 

diff --git a/flutter/lib/ui/settings/settings_screen.dart b/flutter/lib/ui/settings/settings_screen.dart
@@ -34,6 +34,7 @@ class _SettingsScreen extends State<SettingsScreen> {
     state = context.watch<BenchmarkState>();
     l10n = AppLocalizations.of(context);
 
+    Widget progressAnimationDropdown = _progressAnimationDropdown();
     Widget artificialLoadSwitch = _artificialLoadSwitch();
     Widget crashlyticsSwitch = _crashlyticsSwitch();
     Widget runModeDropdown = _runModeDropdown();
@@ -51,6 +52,7 @@ class _SettingsScreen extends State<SettingsScreen> {
             child: ListView(
           padding: const EdgeInsets.only(top: 20),
           children: [
+            progressAnimationDropdown,
             runModeDropdown,
             offlineModeSwitch,
             keepLogSwitch,
@@ -180,6 +182,27 @@ class _SettingsScreen extends State<SettingsScreen> {
     );
   }
 
+  Widget _progressAnimationDropdown() {
+    return ListTile(
+      title: const Padding(
+        padding: EdgeInsets.only(bottom: 5),
+        child: Text('Progress Animation'),
+      ),
+      subtitle: const Text('Progress animation during a benchmark run'),
+      trailing: DropdownButton<int>(
+          borderRadius: BorderRadius.circular(WidgetSizes.borderRadius),
+          value: store.progressAnimationMode,
+          items: const [
+            DropdownMenuItem<int>(value: 0, child: Text('No animation')),
+            DropdownMenuItem<int>(value: 1, child: Text('Dotted Circle')),
+            DropdownMenuItem<int>(value: 2, child: Text('Gradient Circle')),
+          ],
+          onChanged: (value) => setState(() {
+                store.progressAnimationMode = value!;
+              })),
+    );
+  }
+
   Widget _runModeDropdown() {
     return ListTile(
       title: Padding(