Update HVAC fan.

This also removes commented out code.

Original by Sabin Sajeevan <ssajeevan@ics.com>.

Bug-AGL: SPEC-4971

Change-Id: I31c3b3046f6e3bdd9cc641d403467eda11144f31
Signed-off-by: Lisandro Pérez Meyer <lpmeyer@ics.com>

2 files changed, 93 insertions, 119 deletions

diff --git a/lib/presentation/screens/hvac/widgets/fan_speed_controls.dart b/lib/presentation/screens/hvac/widgets/fan_speed_controls.dart
index c373bd8..ac813ca 100644
--- a/lib/presentation/screens/hvac/widgets/fan_speed_controls.dart
+++ b/lib/presentation/screens/hvac/widgets/fan_speed_controls.dart
@@ -25,6 +25,7 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
   double controlProgress = 0.0;
   int selectedFanSpeed = 0;
   late rive.RiveAnimationController _controller;
+  bool isButtonHighlighted = false;
 
   bool _isPlaying = false;
 
@@ -90,33 +91,32 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
         Center(
             child: Container(
           margin: const EdgeInsets.only(top: 3),
-          // decoration: BoxDecoration(
-          //   shape: BoxShape.circle,
-          //   gradient: LinearGradient(
-          //       colors: !isMainACSelected
-          //           ? [
-          //               AGLDemoColors.neonBlueColor,
-          //               AGLDemoColors.neonBlueColor.withOpacity(0.2)
-          //             ]
-          //           : [
-          //               const Color.fromARGB(255, 255, 193, 193)
-          //                   .withOpacity(0.2),
-          //               const Color.fromARGB(255, 255, 193, 193)
-          //             ]),
-          //   boxShadow: isMainACSelected
-          //       ? [
-          //           BoxShadow(
-          //               offset: Offset(
-          //                   isMainACSelected ? 1 : 1, isMainACSelected ? 2 : 2),
-          //               blurRadius: isMainACSelected ? 16 : 16,
-          //               spreadRadius: 0,
-          //               color: isMainACSelected
-          //                   ? Colors.black.withOpacity(0.5)
-          //                   : Colors.black)
-          //         ]
-          //       : [],
-          // ),
-          //border: Border.all(color: Colors.white12, width: 1)),
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            gradient: LinearGradient(
+                colors: !isButtonHighlighted
+                    ? [
+                        AGLDemoColors.neonBlueColor,
+                        AGLDemoColors.neonBlueColor.withOpacity(0.2)
+                      ]
+                    : [
+                        AGLDemoColors.resolutionBlueColor,
+                        const Color(0xff141F64)
+                      ]),
+            boxShadow: isButtonHighlighted
+                ? [
+                    BoxShadow(
+                        offset: Offset(isButtonHighlighted ? 1 : 1,
+                            isButtonHighlighted ? 2 : 2),
+                        blurRadius: isButtonHighlighted ? 16 : 16,
+                        spreadRadius: 0,
+                        color: isButtonHighlighted
+                            ? Colors.black.withOpacity(0.5)
+                            : Colors.black)
+                  ]
+                : [],
+          ),
+          // border: Border.all(color: Colors.white12, width: 1),
           //width: 90,
           //height: 90,
           child: Container(
@@ -126,18 +126,16 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
               image: const DecorationImage(
                 image: AssetImage("assets/PlusVector.png"),
               ),
-              gradient: Gradient.lerp(gradientEnable1, gradientEnable2, 0.5),
-              // border: Border.all(
-              //     color: isMainACSelected
-              //         ? AGLDemoColors.buttonFillEnabledColor
-              //         : Colors.white12,
-              //     width: isMainACSelected ? 3 : 1),
-              border: const GradientBoxBorder(
-                width: 2,
+              border: GradientBoxBorder(
+                width: 1,
                 gradient: LinearGradient(
                   colors: [
-                    Color(0x30C1D8FF),
-                    Color(0xFFC1D8FF),
+                    isButtonHighlighted
+                        ? AGLDemoColors.neonBlueColor
+                        : AGLDemoColors.periwinkleColor.withOpacity(0.20),
+                    isButtonHighlighted
+                        ? AGLDemoColors.neonBlueColor.withOpacity(0.20)
+                        : AGLDemoColors.periwinkleColor,
                   ],
                 ),
               ),
@@ -150,6 +148,11 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
                   hoverColor: Colors.transparent,
                   highlightColor: Colors.transparent,
                   customBorder: const CircleBorder(),
+                  onHighlightChanged: (value) {
+                    setState(() {
+                      isButtonHighlighted = value;
+                    });
+                  },
                   onTap: () {
                     setState(() {
                       if (controlProgress >= 0.80) {
@@ -158,9 +161,8 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
                         _isPlaying = false;
                         animationController.reverse();
                       } else {
-                        _isPlaying ? null : _controller.isActive = true;
-                        isMainACSelected = true;
                         _controller.isActive = true;
+                        isMainACSelected = true;
                         _isPlaying = true;
                         controlProgress += 0.30;
                         animationController.forward();
@@ -168,44 +170,11 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
                       ref
                           .read(vehicleProvider.notifier)
                           .updateFanSpeed(controlProgress ~/ 0.3);
-
-                      // isMainACSelected = !isMainACSelected;
-                      // if (controlProgress != 0.0) {
-                      //   previousProgress = controlProgress;
-                      // }
-                      // if (isMainACSelected) {
-                      //   controlProgress = previousProgress;
-                      //   animationController.forward();
-                      // } else {
-                      //   controlProgress = 0.0;
-                      //   animationController.reverse();
-                      // }
                     });
                   },
                   onTapDown: (details) {
-                    setState(() {
-                      gradientEnable1 = LinearGradient(colors: <Color>[
-                        const Color(0xFF2962FF).withOpacity(0.15),
-                        const Color(0x802962FF).withOpacity(0.15),
-                      ]);
-                      gradientEnable2 = const LinearGradient(colors: <Color>[
-                        Color(0xFF1A237E),
-                        Color(0xFF1C2D92),
-                      ]);
-                    });
-                    //change style
                   },
                   onTapUp: (details) {
-                    setState(() {
-                      gradientEnable1 = const LinearGradient(colors: <Color>[
-                        Color(0xFF2962FF),
-                        Color(0x802962FF),
-                      ]);
-                      gradientEnable2 = const LinearGradient(colors: <Color>[
-                        Color(0xFF1A237E),
-                        Color(0xFF141F64),
-                      ]);
-                    });
                   },
                   child: Container(
                       width: size,
@@ -217,12 +186,6 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
                               width: iconSize,
                               height: iconSize,
                             )
-                          // : !_isPlaying && controlProgress > 0.8
-                          //     ? SvgPicture.asset(
-                          //         "assets/ACMainButton.svg",
-                          //         width: iconSize,
-                          //         height: iconSize,
-                          //       )
                           : SizedBox(
                               width: iconSize,
                               height: iconSize,
@@ -232,16 +195,6 @@ class FanSpeedControlsState extends ConsumerState<FanSpeedControls>
                                   onInit: (_) => setState(() {
                                         _controller.isActive = true;
                                       }))))
-                  // Container(
-                  //   width: size,
-                  //   height: size,
-                  //   alignment: Alignment.center,
-                  //   child: SvgPicture.asset(
-                  //     "assets/ACMainButton.svg",
-                  //     width: iconSize,
-                  //     height: iconSize,
-                  //   ),
-                  // ),
                   ),
             ),
           ),
diff --git a/lib/presentation/screens/hvac/widgets/semi_circle_painter.dart b/lib/presentation/screens/hvac/widgets/semi_circle_painter.dart
index e2003c5..9756e7f 100644
--- a/lib/presentation/screens/hvac/widgets/semi_circle_painter.dart
+++ b/lib/presentation/screens/hvac/widgets/semi_circle_painter.dart
@@ -14,13 +14,17 @@ class AnimatedColorPainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     //  const strokeWidth = 25.0;
-    const borderWidth = 2.0;
 
     // Divide the arc into equal parts based on the number of colors
     const arcAngle = math.pi;
     const arcPart = arcAngle / 3;
     const gapAngle = arcAngle / 150;
 
+    // Define drop shadow properties
+    const shadowOffset = Offset(0, 0);
+    const shadowBlur = 12.0;
+    const shadowColor = AGLDemoColors.jordyBlueColor;
+
     // Calculate the current color index based on animation progress and progress value
     final double normalizedProgress = progress * 3;
     int currentColorIndex =
@@ -40,37 +44,50 @@ class AnimatedColorPainter extends CustomPainter {
         currentColor = backgroundColor;
       }
 
+      // Create paths for drop shadow and actual color
+      final shadowPath = Path()
+        ..addArc(
+          Rect.fromCircle(
+            center: Offset(size.width / 2, size.height / 2) + shadowOffset,
+            radius: size.width / 2,
+          ),
+          startAngle,
+          arcPart - 2 * gapAngle,
+          // Draw clockwise
+        );
+      final colorPath = Path()
+        ..addArc(
+          Rect.fromCircle(
+            center: Offset(size.width / 2, size.height / 2),
+            radius: size.width / 2,
+          ),
+          startAngle,
+          arcPart - 2 * gapAngle,
+          // Draw clockwise
+        );
+
+      // Draw drop shadow using offset and blur
+      final shadowPaint = Paint()
+        ..color = shadowColor
+        ..style = PaintingStyle.fill
+        ..maskFilter = const MaskFilter.blur(BlurStyle.normal, shadowBlur);
+      if (currentColor == progressColor) {
+        canvas.drawPath(shadowPath, shadowPaint);
+      }
+
       // Draw border
       final borderPaint = Paint()
-        ..strokeWidth = strokeWidth + borderWidth
+        ..strokeWidth = strokeWidth + 2.0 // Add border width
         ..style = PaintingStyle.stroke
         ..color = Colors.white12;
-      canvas.drawArc(
-        Rect.fromCircle(
-          center: Offset(size.width / 2, size.height / 2),
-          radius: size.width / 2,
-        ),
-        startAngle,
-        arcPart - 2 * gapAngle,
-        false, // Draw clockwise
-        borderPaint,
-      );
+      canvas.drawPath(colorPath, borderPaint);
 
       // Draw inner color
       final colorPaint = Paint()
         ..strokeWidth = strokeWidth
         ..style = PaintingStyle.stroke
-        ..shader = _createColorShader(currentColor, size);
-      canvas.drawArc(
-        Rect.fromCircle(
-          center: Offset(size.width / 2, size.height / 2),
-          radius: size.width / 2,
-        ),
-        startAngle,
-        arcPart - 2 * gapAngle,
-        false, // Draw clockwise
-        colorPaint,
-      );
+        ..shader = _createColorShader(currentColor, size, i);
+      canvas.drawPath(colorPath, colorPaint);
 
       startAngle += arcPart + gapAngle;
     }
@@ -79,15 +96,19 @@ class AnimatedColorPainter extends CustomPainter {
   @override
   bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
 
-  Shader _createColorShader(Color color, Size size) {
+  Shader _createColorShader(Color color, Size size, int index) {
+    Alignment alignment = index == 0
+        ? const Alignment(-0.78, -0.38)
+        : index == 1
+            ? const Alignment(0, -1)
+            : const Alignment(0.78, -0.38);
     if (color == progressColor) {
-      return const RadialGradient(
-        center: Alignment.center,
-        radius: 2,
-        tileMode: TileMode.repeated,
-        focal: Alignment.center,
-        focalRadius: 8,
-        colors: [
+      return RadialGradient(
+        center: alignment,
+        radius: 0.35,
+        focal: alignment,
+        focalRadius: 0.02,
+        colors: const [
           AGLDemoColors.blueGlowFillColor,
           AGLDemoColors.jordyBlueColor,
           AGLDemoColors.neonBlueColor