From 7ecac02a8a23dc6211031b6ac7e80ebcbb8cdadd Mon Sep 17 00:00:00 2001 From: Mohammad Salameh Date: Mon, 4 Mar 2024 14:38:48 +0300 Subject: [PATCH] light interface --- lib/features/devices/bloc/devices_cubit.dart | 30 ++++++++ .../devices/bloc/lights/lights_cubit.dart | 25 ++++++ .../devices/bloc/lights/lights_state.dart | 12 +++ lib/features/devices/model/light_model.dart | 5 ++ .../view/widgets/lights/light_interface.dart | 69 +---------------- .../lights/light_interface_contols.dart | 32 ++++++++ .../widgets/lights/light_interface_modes.dart | 72 +++++++++++++++++ .../lights/light_interface_recent_color.dart | 77 +++++++++++++++++++ .../lights/light_interface_slider.dart | 74 ++++++++++++++++++ lib/generated/assets.dart | 2 + lib/utils/resource_manager/color_manager.dart | 4 + .../resource_manager/strings_manager.dart | 6 ++ 12 files changed, 341 insertions(+), 67 deletions(-) create mode 100644 lib/features/devices/view/widgets/lights/light_interface_contols.dart create mode 100644 lib/features/devices/view/widgets/lights/light_interface_modes.dart create mode 100644 lib/features/devices/view/widgets/lights/light_interface_recent_color.dart create mode 100644 lib/features/devices/view/widgets/lights/light_interface_slider.dart diff --git a/lib/features/devices/bloc/devices_cubit.dart b/lib/features/devices/bloc/devices_cubit.dart index 6878b12..d878872 100644 --- a/lib/features/devices/bloc/devices_cubit.dart +++ b/lib/features/devices/bloc/devices_cubit.dart @@ -94,6 +94,12 @@ class DevicesCubit extends Cubit { type: '', location: '', image: '', + recentColors: [ + 0xFF83D9FF, + 0xFFFC3E81, + 0xFFC0FF66, + 0xFFFDC242, + ], ), LightModel( name: "Master Bedroom Light", @@ -106,6 +112,12 @@ class DevicesCubit extends Cubit { type: '', location: '', image: '', + recentColors: [ + 0xFF83D9FF, + 0xFFFC3E81, + 0xFFC0FF66, + 0xFFFDC242, + ], ), LightModel( name: "Kitchen Light", @@ -118,6 +130,12 @@ class DevicesCubit extends Cubit { type: '', location: '', image: '', + recentColors: [ + 0xFF83D9FF, + 0xFFFC3E81, + 0xFFC0FF66, + 0xFFFDC242, + ], ), LightModel( name: "Bathroom Light", @@ -130,6 +148,12 @@ class DevicesCubit extends Cubit { type: '', location: '', image: '', + recentColors: [ + 0xFF83D9FF, + 0xFFFC3E81, + 0xFFC0FF66, + 0xFFFDC242, + ], ), LightModel( name: "Balcony Light", @@ -142,6 +166,12 @@ class DevicesCubit extends Cubit { type: '', location: '', image: '', + recentColors: [ + 0xFF83D9FF, + 0xFFFC3E81, + 0xFFC0FF66, + 0xFFFDC242, + ], ), ], icon: Assets.iconsLight, diff --git a/lib/features/devices/bloc/lights/lights_cubit.dart b/lib/features/devices/bloc/lights/lights_cubit.dart index 697e28c..0ff1f73 100644 --- a/lib/features/devices/bloc/lights/lights_cubit.dart +++ b/lib/features/devices/bloc/lights/lights_cubit.dart @@ -8,11 +8,29 @@ class LightsCubit extends Cubit { static LightsCubit get(context) => BlocProvider.of(context); + Map lightModes = { + 0: LightMode.Doze, + 1: LightMode.Relax, + 2: LightMode.Reading, + 3: LightMode.Energizing, + }; + + setLightingMode(LightModel light, LightMode mode) { + light.lightingMode = + lightModes.entries.firstWhere((element) => element.value == mode).key; + emit(LightModeChanged(mode)); + } + toggleLight(LightModel light) { light.status != null ? light.status = !light.status! : light.status = true; emit(LightToggled(light)); } + setColor(LightModel light, int color) { + light.color = color; + emit(LightColorChanged(color)); + } + int getBrightness(LightModel light) { return light.brightness.toInt(); } @@ -35,3 +53,10 @@ class LightsCubit extends Cubit { setBrightness(light, newBrightness); } } + +enum LightMode { + Doze, + Relax, + Reading, + Energizing, +} diff --git a/lib/features/devices/bloc/lights/lights_state.dart b/lib/features/devices/bloc/lights/lights_state.dart index 6bf9c0f..0623b0c 100644 --- a/lib/features/devices/bloc/lights/lights_state.dart +++ b/lib/features/devices/bloc/lights/lights_state.dart @@ -25,3 +25,15 @@ class LightToggled extends LightsState { LightToggled(this.light); } + +class LightColorChanged extends LightsState { + final int color; + + LightColorChanged(this.color); +} + +class LightModeChanged extends LightsState { + final LightMode mode; + + LightModeChanged(this.mode); +} diff --git a/lib/features/devices/model/light_model.dart b/lib/features/devices/model/light_model.dart index ef7f59f..d267deb 100644 --- a/lib/features/devices/model/light_model.dart +++ b/lib/features/devices/model/light_model.dart @@ -6,10 +6,13 @@ class LightModel extends DeviceModel { late int lightingMode; + late List recentColors; + LightModel({ required this.brightness, required this.color, required this.lightingMode, + required this.recentColors, required super.id, required super.name, required super.type, @@ -25,6 +28,7 @@ class LightModel extends DeviceModel { 'color': color, 'lightingMode': lightingMode, 'timer': timer, + 'recentColors': recentColors, 'id': id, 'name': name, 'status': status, @@ -46,6 +50,7 @@ class LightModel extends DeviceModel { type: json['type'], location: json['location'], image: json['image'], + recentColors: json['recentColors'], ); } } diff --git a/lib/features/devices/view/widgets/lights/light_interface.dart b/lib/features/devices/view/widgets/lights/light_interface.dart index f80d3ca..65e7101 100644 --- a/lib/features/devices/view/widgets/lights/light_interface.dart +++ b/lib/features/devices/view/widgets/lights/light_interface.dart @@ -2,15 +2,9 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart'; import 'package:syncrow_app/features/devices/model/light_model.dart'; +import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_contols.dart'; import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_switch.dart'; import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_timer.dart'; -import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart'; -import 'package:syncrow_app/features/shared_widgets/united_text.dart'; -import 'package:syncrow_app/utils/context_extension.dart'; -import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; -import 'package:syncrow_app/utils/resource_manager/strings_manager.dart'; - -import '../../../../shared_widgets/default_container.dart'; class LightInterface extends StatelessWidget { const LightInterface({super.key, required this.light}); @@ -28,66 +22,7 @@ class LightInterface extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.stretch, children: [ LightInterfaceSwitch(light: light), - DefaultContainer( - boxConstraints: const BoxConstraints( - maxHeight: 310, - ), - padding: const EdgeInsets.all(25), - margin: const EdgeInsets.symmetric(vertical: 10), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - BodyMedium( - text: StringsManager.dimmerAndColor, - style: context.bodyMedium.copyWith(color: Colors.grey), - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: UnitedText( - value: light.brightness.toString(), - unit: "%", - valueStyle: context.bodyMedium.copyWith( - color: Colors.grey, - fontSize: 26, - ), - unitStyle: context.bodyMedium.copyWith( - color: Colors.grey, - fontSize: 16, - ), - ), - ), - Expanded( - flex: 2, - child: SliderTheme( - data: SliderTheme.of(context).copyWith( - thumbColor: ColorsManager.primaryColor, - rangeThumbShape: - const RoundRangeSliderThumbShape( - enabledThumbRadius: 9, - ), - thumbShape: const RoundSliderThumbShape( - enabledThumbRadius: 9, - ), - activeTrackColor: Colors.grey.withOpacity(.8), - inactiveTrackColor: Colors.grey.withOpacity(.8), - trackHeight: 5, - ), - child: Slider( - value: light.brightness, - onChanged: (value) => LightsCubit.get(context) - .setBrightness(light, value), - min: 0, - max: 100, - ), - ), - ), - ], - ) - ], - ), - ), + LightInterfaceContols(light: light), const LightInterfaceTimer(), ], ), diff --git a/lib/features/devices/view/widgets/lights/light_interface_contols.dart b/lib/features/devices/view/widgets/lights/light_interface_contols.dart new file mode 100644 index 0000000..5495da1 --- /dev/null +++ b/lib/features/devices/view/widgets/lights/light_interface_contols.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_app/features/devices/model/light_model.dart'; +import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_modes.dart'; +import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_recent_color.dart'; +import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_slider.dart'; +import 'package:syncrow_app/features/shared_widgets/default_container.dart'; + +class LightInterfaceContols extends StatelessWidget { + const LightInterfaceContols({ + super.key, + required this.light, + }); + + final LightModel light; + + @override + Widget build(BuildContext context) { + return DefaultContainer( + boxConstraints: const BoxConstraints(maxHeight: 320), + padding: const EdgeInsets.all(25), + margin: const EdgeInsets.symmetric(vertical: 10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + LightInterfaceSlider(light: light), + LightInterfaceRecentColor(light: light), + LightInterfaceModes(light: light) + ], + ), + ); + } +} diff --git a/lib/features/devices/view/widgets/lights/light_interface_modes.dart b/lib/features/devices/view/widgets/lights/light_interface_modes.dart new file mode 100644 index 0000000..93df1b9 --- /dev/null +++ b/lib/features/devices/view/widgets/lights/light_interface_modes.dart @@ -0,0 +1,72 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart'; +import 'package:syncrow_app/features/devices/model/light_model.dart'; +import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart'; +import 'package:syncrow_app/utils/context_extension.dart'; +import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; +import 'package:syncrow_app/utils/resource_manager/strings_manager.dart'; + +class LightInterfaceModes extends StatelessWidget { + const LightInterfaceModes({ + super.key, + required this.light, + }); + + final LightModel light; + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + BodyMedium( + text: StringsManager.lightingModes, + style: context.bodyMedium.copyWith(color: Colors.grey), + ), + const SizedBox(height: 10), + Wrap( + spacing: 25, + children: List.generate( + LightsCubit.get(context).lightModes.length, + (index) => InkWell( + onTap: () => LightsCubit.get(context).setLightingMode( + light, LightsCubit.get(context).lightModes[index]!), + child: Column( + children: [ + Container( + width: 40, + height: 40, + decoration: ShapeDecoration( + shape: const CircleBorder(), + color: switch (index) { + 0 => ColorsManager.dozeColor, + 1 => ColorsManager.relaxColor, + 2 => ColorsManager.readingColor, + 3 => ColorsManager.energizingColor, + _ => ColorsManager.primaryColor, + }, + ), + ), + BodyMedium( + text: switch (index) { + 0 => StringsManager.doze, + 1 => StringsManager.relax, + 2 => StringsManager.reading, + 3 => StringsManager.energizing, + _ => "", + }, + style: context.bodyMedium.copyWith( + color: Colors.grey, + fontSize: 10, + ), + ) + ], + ), + ), + ), + ), + const SizedBox(height: 10) + ], + ); + } +} diff --git a/lib/features/devices/view/widgets/lights/light_interface_recent_color.dart b/lib/features/devices/view/widgets/lights/light_interface_recent_color.dart new file mode 100644 index 0000000..a27eeda --- /dev/null +++ b/lib/features/devices/view/widgets/lights/light_interface_recent_color.dart @@ -0,0 +1,77 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart'; +import 'package:syncrow_app/features/devices/model/light_model.dart'; +import 'package:syncrow_app/utils/context_extension.dart'; +import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; + +import '../../../../../generated/assets.dart'; +import '../../../../../utils/resource_manager/strings_manager.dart'; +import '../../../../shared_widgets/text_widgets/body_medium.dart'; + +class LightInterfaceRecentColor extends StatelessWidget { + const LightInterfaceRecentColor({ + super.key, + required this.light, + }); + + final LightModel light; + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + BodyMedium( + text: StringsManager.recentlyUsed, + style: context.bodyMedium.copyWith(color: Colors.grey), + ), + const SizedBox(height: 10), + FittedBox( + child: Row( + children: [ + ...List.generate( + light.recentColors.length > 4 ? 4 : light.recentColors.length, + (index) => InkWell( + onTap: () { + LightsCubit.get(context) + .setColor(light, light.recentColors[index]); + }, + child: Container( + margin: const EdgeInsets.only(right: 10), + width: 40, + height: 40, + decoration: ShapeDecoration( + shape: const CircleBorder(), + color: Color(light.recentColors[index]), + ), + ), + ), + ), + Container( + margin: const EdgeInsets.only(right: 10), + width: 1, + height: 30, + color: ColorsManager.greyColor, + ), + SvgPicture.asset( + Assets.iconsKalvin, + height: 40, + width: 40, + ), + const SizedBox( + width: 10, + ), + SvgPicture.asset( + Assets.iconsColorWheel, + height: 40, + width: 40, + ), + ], + ), + ), + const SizedBox(height: 10), + ], + ); + } +} diff --git a/lib/features/devices/view/widgets/lights/light_interface_slider.dart b/lib/features/devices/view/widgets/lights/light_interface_slider.dart new file mode 100644 index 0000000..afb75b6 --- /dev/null +++ b/lib/features/devices/view/widgets/lights/light_interface_slider.dart @@ -0,0 +1,74 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart'; +import 'package:syncrow_app/features/devices/model/light_model.dart'; +import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart'; +import 'package:syncrow_app/features/shared_widgets/united_text.dart'; +import 'package:syncrow_app/utils/context_extension.dart'; +import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; +import 'package:syncrow_app/utils/resource_manager/strings_manager.dart'; + +class LightInterfaceSlider extends StatelessWidget { + const LightInterfaceSlider({ + super.key, + required this.light, + }); + + final LightModel light; + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + BodyMedium( + text: StringsManager.dimmerAndColor, + style: context.bodyMedium.copyWith(color: Colors.grey), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: UnitedText( + value: light.brightness.toString(), + unit: "%", + valueStyle: context.bodyMedium.copyWith( + color: Colors.grey, + fontSize: 26, + ), + unitStyle: context.bodyMedium.copyWith( + color: Colors.grey, + fontSize: 16, + ), + ), + ), + Expanded( + flex: 2, + child: SliderTheme( + data: SliderTheme.of(context).copyWith( + thumbColor: ColorsManager.primaryColor, + rangeThumbShape: const RoundRangeSliderThumbShape( + enabledThumbRadius: 9, + ), + thumbShape: const RoundSliderThumbShape( + enabledThumbRadius: 9, + ), + activeTrackColor: ColorsManager.greyColor, + inactiveTrackColor: ColorsManager.greyColor, + trackHeight: 5, + ), + child: Slider( + value: light.brightness, + onChanged: (value) => + LightsCubit.get(context).setBrightness(light, value), + min: 0, + max: 100, + ), + ), + ), + ], + ), + const SizedBox(height: 10), + ], + ); + } +} diff --git a/lib/generated/assets.dart b/lib/generated/assets.dart index fa1a4b2..ef13fa5 100644 --- a/lib/generated/assets.dart +++ b/lib/generated/assets.dart @@ -8,6 +8,7 @@ class Assets { static const String iconsAutomatedClock = 'assets/icons/automated_clock.svg'; static const String iconsCO2 = 'assets/icons/CO2.svg'; static const String iconsColdMode = 'assets/icons/coldMode.svg'; + static const String iconsColorWheel = 'assets/icons/color_wheel.svg'; static const String iconsCurtain = 'assets/icons/Curtain.svg'; static const String iconsDashboard = 'assets/icons/dashboard.svg'; static const String iconsDashboardFill = 'assets/icons/dashboard-fill.svg'; @@ -22,6 +23,7 @@ class Assets { static const String iconsGateway = 'assets/icons/Gateway.svg'; static const String iconsHome = 'assets/icons/home.svg'; static const String iconsHot1 = 'assets/icons/hot1.jpg'; + static const String iconsKalvin = 'assets/icons/kalvin.svg'; static const String iconsLayout = 'assets/icons/Layout.svg'; static const String iconsLayoutFill = 'assets/icons/Layout-fill.svg'; static const String iconsLight = 'assets/icons/Light.svg'; diff --git a/lib/utils/resource_manager/color_manager.dart b/lib/utils/resource_manager/color_manager.dart index 3ef6e70..68e9f00 100644 --- a/lib/utils/resource_manager/color_manager.dart +++ b/lib/utils/resource_manager/color_manager.dart @@ -11,4 +11,8 @@ abstract class ColorsManager { static const Color greyColor = Color(0xFFd5d5d5); static const Color backgroundColor = Color(0xFFececec); + static const Color dozeColor = Color(0xFFFEC258); + static const Color relaxColor = Color(0xFFFBD288); + static const Color readingColor = Color(0xFFF7D69C); + static const Color energizingColor = Color(0xFFEDEDED); } diff --git a/lib/utils/resource_manager/strings_manager.dart b/lib/utils/resource_manager/strings_manager.dart index 1f8e160..af6af69 100644 --- a/lib/utils/resource_manager/strings_manager.dart +++ b/lib/utils/resource_manager/strings_manager.dart @@ -26,4 +26,10 @@ class StringsManager { static const off = 'OFF'; static const timer = 'Timer'; static const dimmerAndColor = "Dimmer & color"; + static const recentlyUsed = "Recently used colors"; + static const lightingModes = "Lighting modes"; + static const doze = "Doze"; + static const relax = "Relax"; + static const reading = "Reading"; + static const energizing = "Energizing"; }