11 files changed, 577 insertions, 0 deletions
diff --git a/lib/screen/widgets/guages/guage_props.dart b/lib/screen/widgets/guages/guage_props.dart
new file mode 100644
index 0000000..bb56a31
--- /dev/null
+++ b/lib/screen/widgets/guages/guage_props.dart
@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+class GuageProps {
+  static GuageColors normalModeColor = GuageColors(
+    inPrimary: const Color.fromARGB(255, 67, 67, 67),
+    outPrimary: const Color.fromARGB(255, 120, 120, 120),
+    secondary: const Color.fromARGB(156, 226, 226, 200),
+  );
+  static GuageColors sportModeColor = GuageColors(
+      inPrimary: Colors.deepPurple,
+      outPrimary: Colors.blue,
+      secondary: const Color.fromARGB(214, 202, 202, 202));
+  static GuageColors ecoModeColor = GuageColors(
+      inPrimary: const Color.fromARGB(255, 85, 165, 87),
+      outPrimary: const Color.fromARGB(255, 40, 92, 42),
+      secondary: const Color.fromARGB(202, 194, 238, 195));
+  static double majorAngle = 260;
+  static double majorAngleRad = 260 * (pi / 180);
+  static double minorAngle = 360 - majorAngle;
+  static Color bgColor = const Color.fromARGB(255, 0, 0, 0);
+  static const leftLowColor = Color(0x000000ff);
+  static const leftHighColor = Color(0x00ff0000);
+
+  static double degToRad(double deg) => deg * (pi / 180.0);
+  static TextStyle gearIconStyle(screenHeight) {
+    return TextStyle(
+        color: const Color.fromARGB(255, 84, 83, 83),
+        fontSize: (20 * screenHeight) / 480,
+        fontWeight: FontWeight.bold);
+  }
+
+  static TextStyle activeGearIconStyle(screenHeight) {
+    return TextStyle(
+        color: Colors.white,
+        fontSize: (20 * screenHeight) / 480,
+        fontWeight: FontWeight.bold);
+  }
+}
+
+class GuageColors {
+  Color? inPrimary;
+  Color? outPrimary;
+  Color? secondary;
+  GuageColors({this.inPrimary, this.outPrimary, this.secondary});
+}
diff --git a/lib/screen/widgets/guages/guage_widget.dart b/lib/screen/widgets/guages/guage_widget.dart
new file mode 100644
index 0000000..fa43958
--- /dev/null
+++ b/lib/screen/widgets/guages/guage_widget.dart
@@ -0,0 +1,109 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:flutter_cluster_dashboard/screen/paints/guage_paint.dart';
+import 'package:flutter_cluster_dashboard/screen/widgets/guages/guage_props.dart';
+
+class CustomGuage extends StatelessWidget {
+  const CustomGuage({
+    Key? key,
+    required this.mainValue,
+    required this.low,
+    required this.high,
+    required this.label,
+    this.zeroTickLabel,
+    this.maxTickLabel,
+    this.distanceBWTicks,
+    this.size,
+    this.distLabelTop,
+    this.distMainTop,
+    this.distTicksBottom,
+    this.inPrimaryColor,
+    this.outPrimaryColor,
+    this.secondaryColor,
+  }) : super(key: key);
+
+  final double mainValue;
+  final double low;
+  final double high;
+  final String label;
+  final String? zeroTickLabel;
+  final String? maxTickLabel;
+  final double? distanceBWTicks;
+  final double? distTicksBottom;
+  final double? distMainTop;
+  final double? distLabelTop;
+  final double? size;
+  final Color? outPrimaryColor;
+  final Color? inPrimaryColor;
+  final Color? secondaryColor;
+
+  @override
+  Widget build(BuildContext context) {
+    TextStyle tickStyle = TextStyle(
+        color: Colors.white,
+        fontSize: ((26 / 400) * (size ?? 400)),
+        fontWeight: FontWeight.bold); //20
+    TextStyle mainValueTextStyle = TextStyle(
+        color: Colors.white,
+        fontSize: ((85 / 400) * (size ?? 400)),
+        fontWeight: FontWeight.bold); //65
+    TextStyle labelTextStyle = TextStyle(
+        color: Colors.white,
+        fontSize: ((26 / 400) * (size ?? 400)),
+        fontWeight: FontWeight.normal); //20
+    return SizedBox(
+      width: size ?? 400,
+      height: size ?? 400,
+      child: Stack(
+        alignment: Alignment.topCenter,
+        children: [
+          // Guage painter
+          Positioned(
+            top: 0,
+            child: Transform.rotate(
+              angle: (pi / 2) + (GuageProps.minorAngle * (pi / 360.0)),
+              child: CustomPaint(
+                size: Size(size ?? 400, size ?? 400),
+                painter: GuagePainter(
+                  low: low,
+                  high: high,
+                  currentSpeed: mainValue,
+                  inPrimaryColor: inPrimaryColor,
+                  outPrimaryColor: outPrimaryColor,
+                  secondaryColor: secondaryColor,
+                ),
+              ),
+            ),
+          ),
+          // Guage Label
+          Positioned(
+            top: distLabelTop ?? ((100 / 400) * (size ?? 400)),
+            child: Text(label, style: labelTextStyle),
+          ),
+          // Guage Main Value
+          Positioned(
+            top: distMainTop ?? ((150 / 400) * (size ?? 400)),
+            child: Text("${mainValue.toInt()}", style: mainValueTextStyle),
+          ),
+          // Guage Ticks value
+          Positioned(
+            bottom: distTicksBottom ?? ((80 / 400) * (size ?? 400)),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(zeroTickLabel ?? "", style: tickStyle),
+                SizedBox(
+                    width: (size != null)
+                        ? ((180 * size!) / 400)
+                        : (distanceBWTicks ?? 180)),
+                Text(maxTickLabel ?? "", style: tickStyle)
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screen/widgets/guages/rpm_guage_animation_wrapper.dart b/lib/screen/widgets/guages/rpm_guage_animation_wrapper.dart
new file mode 100644
index 0000000..95403dd
--- /dev/null
+++ b/lib/screen/widgets/guages/rpm_guage_animation_wrapper.dart
@@ -0,0 +1,51 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:flutter_cluster_dashboard/screen/widgets/guages/guage_props.dart';
+import 'package:flutter_cluster_dashboard/screen/widgets/guages/guage_widget.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_model.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_provider.dart';
+
+class RPMGauge extends HookConsumerWidget {
+  final double screenHeight;
+  final GuageColors? guageColor;
+  const RPMGauge({Key? key, required this.screenHeight, this.guageColor})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final VehicleSignal vehicle = ref.watch(vehicleSignalProvider);
+
+    const double minRPM = 0;
+    const double maxRPM = 8000;
+    const Duration sweepDuration = Duration(milliseconds: 200);
+
+    final animationController = useAnimationController(
+      lowerBound: minRPM,
+      upperBound: maxRPM,
+    )..animateTo(vehicle.rpm,
+        duration: sweepDuration, curve: Curves.linearToEaseOut);
+    return AnimatedBuilder(
+        animation: animationController,
+        builder: (context, child) {
+          return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: CustomGuage(
+              size: (248 * screenHeight) / 480,
+              low: minRPM,
+              high: maxRPM,
+              mainValue: animationController.value,
+              label: "rpm",
+              zeroTickLabel: minRPM.toInt().toString(),
+              maxTickLabel: maxRPM.toInt().toString(),
+              inPrimaryColor: guageColor?.inPrimary,
+              outPrimaryColor: guageColor?.outPrimary,
+              secondaryColor: guageColor?.secondary,
+            ),
+          );
+        });
+  }
+}
diff --git a/lib/screen/widgets/guages/speed_guage_animation_wrapper.dart b/lib/screen/widgets/guages/speed_guage_animation_wrapper.dart
new file mode 100644
index 0000000..8704fcd
--- /dev/null
+++ b/lib/screen/widgets/guages/speed_guage_animation_wrapper.dart
@@ -0,0 +1,66 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:flutter_cluster_dashboard/screen/widgets/guages/guage_props.dart';
+import 'package:flutter_cluster_dashboard/screen/widgets/guages/guage_widget.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_model.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_provider.dart';
+
+class SpeedGauge extends HookConsumerWidget {
+  final double screenHeight;
+  final GuageColors? guageColor;
+  const SpeedGauge({Key? key, required this.screenHeight, this.guageColor})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final VehicleSignal vehicle = ref.watch(vehicleSignalProvider);
+
+    const double minSpeed = 0;
+    const double maxSpeed = 240;
+    const Duration sweepDuration = Duration(milliseconds: 200);
+    double speedScaling =
+        (vehicle.vehicleDistanceUnit == "mi") ? 0.621504 : 1.0;
+
+    final animationController = useAnimationController(
+      lowerBound: minSpeed,
+      upperBound: maxSpeed,
+    )..animateTo(speedScaling * (vehicle.speed),
+        duration: sweepDuration, curve: Curves.linearToEaseOut);
+
+    return AnimatedBuilder(
+        animation: animationController,
+        builder: (context, child) {
+          return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: CustomGuage(
+              size: (248 * screenHeight) / 480,
+              low: minSpeed,
+              high: maxSpeed,
+              mainValue: animationController.value,
+              label: (vehicle.vehicleDistanceUnit == "mi") ? "mph" : "Km/h",
+              zeroTickLabel: minSpeed.toInt().toString(),
+              maxTickLabel: maxSpeed.toInt().toString(),
+              inPrimaryColor: guageColor?.inPrimary,
+              outPrimaryColor: guageColor?.outPrimary,
+              secondaryColor: guageColor?.secondary,
+            ),
+          );
+        });
+  }
+}
+
+final guageColorProvider = Provider.family<GuageColors, String>((ref, mode) {
+  switch (mode) {
+    case "normal":
+      return GuageColors(inPrimary: Colors.red);
+    case "sports":
+      return GuageColors(inPrimary: Colors.blue);
+    case "eco":
+      return GuageColors(inPrimary: Colors.green);
+    default:
+      return GuageColors();
+  }
+});
diff --git a/lib/screen/widgets/left_bar.dart b/lib/screen/widgets/left_bar.dart
new file mode 100644
index 0000000..3192c28
--- /dev/null
+++ b/lib/screen/widgets/left_bar.dart
@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:flutter_cluster_dashboard/screen/paints/arc_painter.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_model.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_provider.dart';
+
+class LeftArc extends HookConsumerWidget {
+  final double screenHeight;
+  const LeftArc({Key? key, required this.screenHeight}) : super(key: key);
+  // final Color color;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final VehicleSignal vehicle = ref.watch(vehicleSignalProvider);
+    final animationController = useAnimationController(
+      lowerBound: 0,
+      upperBound: 100,
+    )..animateTo(vehicle.coolantTemp,
+        duration: const Duration(milliseconds: 1000));
+
+    return AnimatedBuilder(
+        animation: animationController,
+        builder: (context, child) {
+          return CustomPaint(
+            size: Size(0, (220 * screenHeight) / 480),
+            painter: LeftPainter(
+              radi: (170 * screenHeight) / 480,
+              currentValue: animationController.value,
+              bottomPadding: 15,
+              color: Color.lerp(Colors.yellow, Colors.red,
+                      (animationController.value / 100)) ??
+                  Colors.orange,
+            ),
+          );
+        });
+  }
+}
diff --git a/lib/screen/widgets/left_signal.dart b/lib/screen/widgets/left_signal.dart
new file mode 100644
index 0000000..693c762
--- /dev/null
+++ b/lib/screen/widgets/left_signal.dart
@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class LeftSignal extends HookConsumerWidget {
+  final double screenHeight;
+  const LeftSignal({Key? key, required this.screenHeight}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final animationController = useAnimationController(
+      lowerBound: 0.9,
+      upperBound: 1.1,
+      duration: const Duration(milliseconds: 1000),
+    )..repeat();
+    return AnimatedBuilder(
+        animation: animationController,
+        builder: (context, child) {
+          return Image.asset(
+            "images/left.png",
+            color: Color.lerp(
+                Colors.black,
+                const Color.fromARGB(255, 99, 251, 104),
+                animationController.value.floorToDouble()),
+            width: 0.125 * screenHeight,
+          );
+        });
+  }
+}
diff --git a/lib/screen/widgets/performance_mode.dart b/lib/screen/widgets/performance_mode.dart
new file mode 100644
index 0000000..256365b
--- /dev/null
+++ b/lib/screen/widgets/performance_mode.dart
@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+
+class PerformanceMode extends StatelessWidget {
+  const PerformanceMode({Key? key, this.size, required this.mode})
+      : super(key: key);
+  final Size? size;
+  final String mode;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size?.width ?? 20,
+      height: size?.height ?? 40,
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(10),
+          color: (mode == "sport")
+              ? Colors.deepPurple
+              : (mode == "economy")
+                  ? Colors.green
+                  : Colors.transparent),
+      child: Center(
+        child: Text(
+          mode.toUpperCase(),
+          style: const TextStyle(
+              color: Colors.black, fontWeight: FontWeight.bold, fontSize: 12),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screen/widgets/right_bar.dart b/lib/screen/widgets/right_bar.dart
new file mode 100644
index 0000000..e5ed44d
--- /dev/null
+++ b/lib/screen/widgets/right_bar.dart
@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:flutter_cluster_dashboard/screen/paints/arc_painter.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_model.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_provider.dart';
+
+class RightArc extends HookConsumerWidget {
+  final double screenHeight;
+  const RightArc({Key? key, required this.screenHeight}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final VehicleSignal vehicle = ref.watch(vehicleSignalProvider);
+    final animationController = useAnimationController(
+      lowerBound: 0,
+      upperBound: 100,
+    )..animateTo(vehicle.fuelLevel,
+        duration: const Duration(milliseconds: 500));
+
+    return AnimatedBuilder(
+      animation: animationController,
+      builder: (context, child) {
+        return CustomPaint(
+          size: Size(0, (220 * screenHeight) / 480),
+          painter: RightPainter(
+              radi: (170 * screenHeight) / 480,
+              currentValue: animationController.value,
+              bottomPadding: 17,
+              color: Color.lerp(Colors.red, Colors.green,
+                      (animationController.value / 100)) ??
+                  Colors.blue),
+        );
+      },
+    );
+  }
+}
diff --git a/lib/screen/widgets/right_signal.dart b/lib/screen/widgets/right_signal.dart
new file mode 100644
index 0000000..5c3aa5b
--- /dev/null
+++ b/lib/screen/widgets/right_signal.dart
@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class RightSignal extends HookConsumerWidget {
+  final double screenHeight;
+  const RightSignal({Key? key, required this.screenHeight}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final animationController = useAnimationController(
+      lowerBound: 0.9,
+      upperBound: 1.1,
+      duration: const Duration(milliseconds: 1000),
+    )..repeat();
+    return AnimatedBuilder(
+        animation: animationController,
+        builder: (context, child) {
+          return Image.asset(
+            "images/right.png",
+            color: Color.lerp(
+                Colors.black,
+                const Color.fromARGB(255, 99, 251, 104),
+                animationController.value.floorToDouble()),
+            width: 0.125 * screenHeight,
+          );
+        });
+  }
+}
diff --git a/lib/screen/widgets/signals.dart b/lib/screen/widgets/signals.dart
new file mode 100644
index 0000000..788d379
--- /dev/null
+++ b/lib/screen/widgets/signals.dart
@@ -0,0 +1,66 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_cluster_dashboard/vehicle_signal/vehicle_signal_model.dart';
+
+class Signals extends StatelessWidget {
+  final VehicleSignal vehicle;
+  final double screenHeight;
+  static Color idleColor = const Color.fromARGB(194, 55, 53, 53);
+  const Signals({
+    Key? key,
+    required this.screenHeight,
+    required this.vehicle,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 14,
+      runAlignment: WrapAlignment.spaceBetween,
+      alignment: WrapAlignment.spaceEvenly,
+      children: [
+        (vehicle.isLowBeam)
+            ? Image.asset("images/low-beam.png",
+                color: Colors.green, width: (20 * screenHeight) / 480)
+            : (vehicle.isHighBeam)
+                ? Image.asset("images/high-beam.png",
+                    color: Colors.green, width: (20 * screenHeight) / 480)
+                : Image.asset("images/high-beam.png",
+                    color: idleColor, width: (20 * screenHeight) / 480),
+        Image.asset("images/hazard.png",
+            color: (vehicle.isHazardLightOn) ? Colors.red : idleColor,
+            width: (20 * screenHeight) / 480),
+        Image.asset("images/parking.png",
+            color: (vehicle.isParkingOn) ? Colors.green : idleColor,
+            width: (20 * screenHeight) / 480),
+        Image.asset("images/battery.png",
+            color: (vehicle.isBatteryCharging) ? Colors.green : Colors.red,
+            width: (20 * screenHeight) / 480),
+        Image.asset("images/malfunction.png",
+            color: (vehicle.isMILon) ? Colors.red : idleColor,
+            width: (20 * screenHeight) / 480),
+        //
+        Image.asset("images/openDoor.png",
+            color: (vehicle.isMILon) ? Colors.white : idleColor,
+            width: (20 * screenHeight) / 480),
+
+        Image.asset("images/seatBelt.png",
+            color: (vehicle.isMILon) ? Colors.white : idleColor,
+            width: (20 * screenHeight) / 480),
+
+        //
+        Image.asset("images/lane.png",
+            color: (vehicle.isSteeringLaneWarning) ? Colors.white : idleColor,
+            width: (25 * screenHeight) / 480),
+        Image.asset("images/cruise.png",
+            color: (vehicle.isSteeringCruiseEnable)
+                ? (vehicle.isSteeringCruiseSet)
+                    ? Colors.green
+                    : Colors.orange
+                : idleColor,
+            width: (20 * screenHeight) / 480),
+      ],
+    );
+  }
+}
diff --git a/lib/screen/widgets/turn_signal.dart b/lib/screen/widgets/turn_signal.dart
new file mode 100644
index 0000000..a447cbe
--- /dev/null
+++ b/lib/screen/widgets/turn_signal.dart
@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class TurnSignal extends HookConsumerWidget {
+  final double screenHeight;
+  final bool isLefton;
+  final bool isRighton;
+  const TurnSignal({
+    Key? key,
+    required this.screenHeight,
+    required this.isLefton,
+    required this.isRighton,
+  }) : super(key: key);
+  double calcPadding(double value, double height) {
+    // values wrt to values at 720 height
+    return (value * height) / 720;
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final animationController = useAnimationController(
+      lowerBound: 0.9,
+      upperBound: 1.1,
+      duration: const Duration(milliseconds: 1000),
+    )..repeat();
+    return AnimatedBuilder(
+        animation: animationController,
+        builder: (context, child) {
+          return Padding(
+            padding: EdgeInsets.fromLTRB(calcPadding(150, screenHeight), 0,
+                calcPadding(150, screenHeight), 0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Image.asset(
+                  "images/left.png",
+                  color: (isLefton)
+                      ? Color.lerp(
+                          Colors.black,
+                          const Color.fromARGB(255, 99, 251, 104),
+                          animationController.value.floorToDouble())
+                      : const Color.fromARGB(255, 49, 48, 48),
+                  width: 0.125 * screenHeight,
+                ),
+                Image.asset(
+                  "images/right.png",
+                  color: (isRighton)
+                      ? Color.lerp(
+                          Colors.black,
+                          const Color.fromARGB(255, 99, 251, 104),
+                          animationController.value.floorToDouble())
+                      : const Color.fromARGB(255, 49, 48, 48),
+                  width: 0.125 * screenHeight,
+                ),
+              ],
+            ),
+          );
+        });
+  }
+}