UI developments (#495)

* Added granularity parameter

* Trackerball UI update

* 'unsafe_html' was removed in Dart '3.7.0'
Remove the reference to 'unsafe_html'.

* Added min and max values to tank card

* Removed continuous dynamic sizing dependent on card width

* Formatting

Author: anna-st-40

extras/log_file_client/lib/components/graph_view.dart

@@ -100,6 +100,9 @@ class _GraphViewState extends State<GraphView> {
         format: 'series.name : point.y',
       ),
       activationMode: ActivationMode.singleTap,
+      lineColor: Colors.grey.shade600,
+      lineWidth: 1.5,
+      lineDashArray: [2, 2],
     );
 
     return Expanded(

extras/log_file_client/lib/components/page_header.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class PageHeader extends StatelessWidget {
+  const PageHeader({required this.text, super.key});
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Container(
+      margin: EdgeInsets.only(
+        top: 40,
+        left: 135,
+        right: 135,
+      ),
+      padding: EdgeInsets.only(bottom: 16),
+      width: screenWidth,
+      decoration: BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+            color: const Color(0xFFE6E6E6),
+            width: 1.5,
+          ),
+        ),
+      ),
+      child: Text(
+        text,
+        style: TextStyle(
+          fontSize: 60,
+          letterSpacing: -2,
+          color: const Color(0xFF0C2D48),
+        ),
+      ),
+    );
+  }
+}

extras/log_file_client/lib/components/tank_card.dart

@@ -4,6 +4,10 @@ import 'package:log_file_client/components/tank_thumbnail.dart';
 import 'package:log_file_client/utils/http_client.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 
+enum TankInfoType { pH, temp }
+
+enum TankInfoMode { current, range }
+
 class TankCard extends StatelessWidget {
   const TankCard({
     required this.log,
@@ -29,25 +33,26 @@ class TankCard extends StatelessWidget {
         onTap: onTap,
         child: LayoutBuilder(
           builder: (BuildContext context, BoxConstraints constraints) {
-            // Decide sizes of internal components based on card width
             final double cardWidth = constraints.maxWidth * 0.93;
-            final double titleFontSize = cardWidth * 0.05;
-            final double descriptionFontSize = cardWidth * 0.04;
+            final double titleFontSize = 20;
+            final double tankInfoFontSize = 16;
+            final double tankInfoHeaderFontSize = 14;
 
             // ignore: discarded_futures
             final Future<TankSnapshot> tankSnapshot = getTankSnapshot();
 
             return Container(
-              margin: EdgeInsets.all(cardWidth * 0.075),
+              margin: EdgeInsets.all(30),
               decoration: _cardBackground(),
               child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
                   _graphThumbnailBuilder(tankSnapshot, cardWidth),
                   _tankName(titleFontSize),
                   _tankInfoBuilder(
                     tankSnapshot,
-                    cardWidth,
-                    descriptionFontSize,
+                    tankInfoFontSize,
+                    tankInfoHeaderFontSize,
                   ),
                 ],
               ),
@@ -91,21 +96,12 @@ class TankCard extends StatelessWidget {
     );
   }
 
-  Container _graphThumbnail(
+  Widget _graphThumbnail(
     double cardWidth,
     AsyncSnapshot<TankSnapshot>? snapshot,
   ) {
-    return Container(
-      width: cardWidth,
+    return SizedBox(
       height: cardWidth * 0.6,
-      margin: EdgeInsets.only(
-        bottom: cardWidth * 0.05,
-      ),
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.vertical(
-          top: Radius.circular(20),
-        ),
-      ),
       child: ClipRRect(
         borderRadius: BorderRadius.vertical(
           top: Radius.circular(20),
@@ -139,26 +135,33 @@ class TankCard extends StatelessWidget {
 
   Widget _tankInfoBuilder(
     Future<TankSnapshot> tankSnapshot,
-    double cardWidth,
-    double descriptionFontSize,
+    double tankInfoFontSize,
+    double tankInfoHeaderFontSize,
   ) {
     return FutureBuilder(
       future: tankSnapshot,
       builder: (context, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return _skeletonLoaderInfo(cardWidth, descriptionFontSize);
+          return _skeletonLoaderInfo(
+            tankInfoFontSize,
+            tankInfoHeaderFontSize,
+          );
         } else if (snapshot.hasError) {
           return Center(child: Text('Error: ${snapshot.error}'));
         } else {
-          return _tankInfo(cardWidth, descriptionFontSize, snapshot);
+          return _tankInfo(
+            tankInfoFontSize,
+            tankInfoHeaderFontSize,
+            snapshot,
+          );
         }
       },
     );
   }
 
   Skeletonizer _skeletonLoaderInfo(
-    double cardWidth,
-    double descriptionFontSize,
+    double tankInfoFontSize,
+    double tankInfoHeaderFontSize,
   ) {
     return Skeletonizer(
       textBoneBorderRadius: TextBoneBorderRadius(BorderRadius.circular(4)),
@@ -167,47 +170,107 @@ class TankCard extends StatelessWidget {
         highlightColor: Colors.grey[100]!,
         duration: Duration(seconds: 2),
       ),
-      child: _tankInfo(cardWidth, descriptionFontSize, null),
+      child: _tankInfo(tankInfoFontSize, tankInfoHeaderFontSize, null),
     );
   }
 
   Widget _tankInfo(
-    double cardWidth,
-    double descriptionFontSize,
+    double tankInfoFontSize,
+    double tankInfoHeaderFontSize,
     AsyncSnapshot<TankSnapshot>? snapshot,
   ) {
     return Padding(
-      padding: EdgeInsets.only(top: cardWidth * 0.06),
+      padding: const EdgeInsets.only(bottom: 15),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
-          _tankInfoLine('ph', descriptionFontSize, snapshot),
-          _tankInfoLine('temp', descriptionFontSize, snapshot),
+          _tankInfoBlock(
+            TankInfoMode.current,
+            tankInfoFontSize,
+            tankInfoHeaderFontSize,
+            snapshot,
+          ),
+          _tankInfoBlock(
+            TankInfoMode.range,
+            tankInfoFontSize,
+            tankInfoHeaderFontSize,
+            snapshot,
+          ),
         ],
       ),
     );
   }
 
-  Row _tankInfoLine(
-    String type,
-    double descriptionFontSize,
+  Widget _tankInfoBlock(
+    TankInfoMode mode,
+    double tankInfoFontSize,
+    double tankInfoHeaderFontSize,
     AsyncSnapshot<TankSnapshot>? snapshot,
   ) {
+    return Column(
+      children: [
+        _tankInfoHeader(mode, tankInfoHeaderFontSize),
+        _tankInfoLine(TankInfoType.pH, mode, tankInfoFontSize, snapshot),
+        _tankInfoLine(TankInfoType.temp, mode, tankInfoFontSize, snapshot),
+      ],
+    );
+  }
+
+  Widget _tankInfoHeader(TankInfoMode mode, double tankInfoHeaderFontSize) {
+    return Text(
+      mode == TankInfoMode.current ? 'Current' : '12hr Range',
+      style: TextStyle(
+        fontSize: tankInfoHeaderFontSize,
+        fontWeight: FontWeight.normal,
+        color: Colors.grey.shade500,
+      ),
+    );
+  }
+
+  Widget _tankInfoLine(
+    TankInfoType type,
+    TankInfoMode mode,
+    double tankInfoFontSize,
+    AsyncSnapshot<TankSnapshot>? snapshot,
+  ) {
+    final IconData iconType =
+        type == TankInfoType.pH ? Icons.water_drop : Icons.thermostat;
+    final Color iconColor =
+        type == TankInfoType.pH ? Colors.green : Colors.blue;
+
+    String textData = 'mock';
+    if (mode == TankInfoMode.current) {
+      if (type == TankInfoType.pH) {
+        textData = 'pH ${snapshot?.data!.pH ?? 'mock'}';
+      } else {
+        textData = '${snapshot?.data!.temperature ?? 'mock'}°C';
+      }
+    } else if (mode == TankInfoMode.range) {
+      if (type == TankInfoType.pH) {
+        final min = snapshot?.data!.minPH ?? 'm.k';
+        final max = snapshot?.data!.maxPH ?? 'm.k';
+        textData = 'pH $min - $max';
+      } else {
+        final min = snapshot?.data!.minTemp ?? 'mk';
+        final max = snapshot?.data!.maxTemp ?? 'mk';
+        textData = '$min - $max°C';
+      }
+    }
+
     return Row(
       children: [
         Skeleton.keep(
           child: Icon(
-            type == 'ph' ? Icons.water_drop : Icons.thermostat,
-            color: type == 'ph' ? Colors.green : Colors.blue,
-            size: descriptionFontSize,
+            iconType,
+            color: iconColor,
+            size: tankInfoFontSize,
           ),
         ),
+        SizedBox(width: 5),
         Text(
-          type == 'ph'
-              ? 'pH ${snapshot?.data!.pH ?? 'mock'}'
-              : '${snapshot?.data!.temperature ?? 'mock'}°C',
+          textData,
           style: TextStyle(
-            fontSize: descriptionFontSize,
+            fontSize: tankInfoFontSize,
             color: const Color(0xFF6D6D6D),
           ),
         ),

extras/log_file_client/lib/components/tank_thumbnail.dart

@@ -25,6 +25,7 @@ class TankThumbnail extends StatelessWidget {
         primaryXAxis: DateTimeAxis(
           intervalType: DateTimeIntervalType.hours,
           interval: 6,
+          labelStyle: TextStyle(color: Colors.grey.shade700),
           // isVisible: !(axis == 'pHAxis'),
         ),
         primaryYAxis: NumericAxis(
@@ -39,6 +40,7 @@ class TankThumbnail extends StatelessWidget {
               ? snapshot.pHSetpoint! + 0.5
               : snapshot.temperatureSetpoint! + 0.5,
           anchorRangeToVisiblePoints: false,
+          labelStyle: TextStyle(color: Colors.grey.shade700),
         ),
         series: series,
       ),

extras/log_file_client/lib/pages/home_page.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:log_file_client/components/page_header.dart';
 import 'package:log_file_client/components/project_card.dart';
 import 'package:log_file_client/pages/project_page.dart';
 import 'package:log_file_client/utils/http_client.dart';
@@ -71,8 +72,8 @@ class _HomePageState extends State<HomePage> {
       body: Center(
         child: Column(
           children: [
-            _pageHeader(screenWidth),
-            _projectCards(gridCrossAxis, screenWidth),
+            PageHeader(text: 'Projects'),
+            _projectCards(gridCrossAxis),
           ],
         ),
       ),
@@ -102,37 +103,9 @@ class _HomePageState extends State<HomePage> {
   //   );
   // }
 
-  Container _pageHeader(double screenWidth) {
-    return Container(
-      margin: EdgeInsets.only(
-        top: screenWidth * 0.025,
-        left: screenWidth * 0.0875,
-        right: screenWidth * 0.0875,
-      ),
-      padding: EdgeInsets.only(bottom: screenWidth * 0.01),
-      width: screenWidth,
-      decoration: BoxDecoration(
-        border: Border(
-          bottom: BorderSide(
-            color: const Color(0xFFE6E6E6),
-            width: 1.5,
-          ),
-        ),
-      ),
-      child: Text(
-        'Projects',
-        style: TextStyle(
-          fontSize: screenWidth * 0.04,
-          letterSpacing: -2,
-          color: const Color(0xFF0C2D48),
-        ),
-      ),
-    );
-  }
-
-  Widget _projectCards(int gridCrossAxis, double screenWidth) {
+  Widget _projectCards(int gridCrossAxis) {
     return _isLoading
-        ? _skeletonLoader(gridCrossAxis, screenWidth)
+        ? _skeletonLoader(gridCrossAxis)
         : Expanded(
             child: GridView.builder(
               gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
@@ -146,15 +119,15 @@ class _HomePageState extends State<HomePage> {
                 );
               },
               padding: EdgeInsets.only(
-                left: screenWidth * 0.067,
-                right: screenWidth * 0.067,
-                top: screenWidth * 0.011,
+                left: 100,
+                right: 100,
+                top: 16,
               ),
             ),
           );
   }
 
-  Widget _skeletonLoader(int gridCrossAxis, double screenWidth) {
+  Widget _skeletonLoader(int gridCrossAxis) {
     return Expanded(
       child: Skeletonizer(
         effect: ShimmerEffect(
@@ -174,9 +147,9 @@ class _HomePageState extends State<HomePage> {
             );
           },
           padding: EdgeInsets.only(
-            left: screenWidth * 0.067,
-            right: screenWidth * 0.067,
-            top: screenWidth * 0.011,
+            left: 100,
+            right: 100,
+            top: 16,
           ),
         ),
       ),