Skip to content
Snippets Groups Projects
Commit ca407ff6 authored by MagicalSpyto's avatar MagicalSpyto
Browse files

Hud und coloränderung fast fertig

parent d4f29893
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
lib/main.dart
+ 13
− 5
View file @ ca407ff6
import 'dart:io';
import 'package:ambient/searchpage.dart'; import 'package:ambient/searchpage.dart';
import 'package:ambient/widgets/MusicPlayerState.dart'; import 'package:ambient/widgets/MusicPlayerState.dart';
import 'package:ambient/widgets/navbars.dart'; import 'package:ambient/widgets/navbars.dart';
...@@ -33,11 +34,18 @@ class MyApp extends StatelessWidget { ...@@ -33,11 +34,18 @@ class MyApp extends StatelessWidget {
); );
} }
} }
//colorpalete
Color primaryColor = Color(0xFFFFa74a);
Color onPrimary = Color(0xFFFFFFFF);
Color primaryContainer = Color(0xFFFFDFBD);
Color onPrimaryContainer = Color(0xFF312B25);
Color backGroundColor = Color(0x05FFDFBD);
//variablen für den MoodpageGebrauch
late File currentMoodsImage;
bool usesPicture = false;
late Color selectedMood = Moods.sad.color;
bool musicCangable = true;
const Color primaryColor = Color(0xFFFFa74a);
const Color onPrimary = Color(0xFFFFFFFF);
const Color primaryContainer = Color(0xFFFFDFBD);
const Color onPrimaryContainer = Color(0xFF312B25);
class HUD extends StatefulWidget { class HUD extends StatefulWidget {
const HUD({super.key}); const HUD({super.key});
...@@ -83,7 +91,7 @@ class _HUDState extends State<HUD> { ...@@ -83,7 +91,7 @@ class _HUDState extends State<HUD> {
_currentIndex != 0 ? MusicBar() : const Center(child: Text('Moin')), _currentIndex != 0 ? MusicBar() : const Center(child: Text('Moin')),
BottomNavigationBar( BottomNavigationBar(
currentIndex: _currentIndex, currentIndex: _currentIndex,
backgroundColor: ligten(primaryContainer), backgroundColor: primaryContainer,
selectedItemColor: primaryColor, selectedItemColor: primaryColor,
unselectedItemColor: Colors.black, unselectedItemColor: Colors.black,
items: const [ items: const [
......
lib/moodpage.dart
+ 326
− 68
View file @ ca407ff6
import 'dart:ffi';
import 'dart:io'; import 'dart:io';
import 'main.dart';
import 'package:vector_math/vector_math.dart'; import 'package:vector_math/vector_math.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:palette_generator/palette_generator.dart'; import 'package:palette_generator/palette_generator.dart';
import 'package:flutter_color_models/flutter_color_models.dart';
class StateMoodPage extends StatefulWidget { class StateMoodPage extends StatefulWidget {
const StateMoodPage({super.key}); const StateMoodPage({super.key});
...@@ -11,7 +14,7 @@ class StateMoodPage extends StatefulWidget { ...@@ -11,7 +14,7 @@ class StateMoodPage extends StatefulWidget {
State<StateMoodPage> createState() => MoodPage(); State<StateMoodPage> createState() => MoodPage();
} }
enum Moods { none, happy, sad } enum Moods { none, happy, sad ,angry, noble, clean, courageous, fresh, compassionn, simple, dramatic}
extension MoodsExtention on Moods { extension MoodsExtention on Moods {
Color get color { Color get color {
...@@ -19,15 +22,30 @@ extension MoodsExtention on Moods { ...@@ -19,15 +22,30 @@ extension MoodsExtention on Moods {
case Moods.none: case Moods.none:
return Color.fromARGB(255, 75, 75, 75); return Color.fromARGB(255, 75, 75, 75);
case Moods.happy: case Moods.happy:
return Color.fromARGB(255, 237, 219, 18); return Color.fromARGB(255, 255, 255, 0);
case Moods.sad: case Moods.sad:
return Color.fromARGB(255, 64, 71, 167); return Color.fromARGB(255, 0, 0, 255);
case Moods.angry:
return Color.fromARGB(255, 255, 0, 0);
case Moods.noble:
return Color.fromARGB(255, 127, 69, 216);
case Moods.clean:
return Color.fromARGB(255, 255, 255, 255);
case Moods.courageous:
return Color.fromARGB(255, 255, 165, 0);
case Moods.fresh:
return Color.fromARGB(255, 0, 255, 0);
case Moods.compassionn:
return Color.fromARGB(255, 255, 70, 253);
case Moods.simple:
return Color.fromARGB(255, 103, 64, 45);
case Moods.dramatic:
return Color.fromARGB(255, 0, 0, 0);
} }
} }
} }
class MoodPage extends State<StateMoodPage> { class MoodPage extends State<StateMoodPage> {
late File _image;
final ImagePicker _picker = ImagePicker(); final ImagePicker _picker = ImagePicker();
late PaletteGenerator paletteGenerator; late PaletteGenerator paletteGenerator;
Moods? currentMood = Moods.happy; Moods? currentMood = Moods.happy;
...@@ -39,9 +57,11 @@ class MoodPage extends State<StateMoodPage> { ...@@ -39,9 +57,11 @@ class MoodPage extends State<StateMoodPage> {
source: ImageSource.gallery, source: ImageSource.gallery,
); );
if (pickedFile != null) { if (pickedFile != null) {
musicCangable = true;
imagePath = pickedFile.path; imagePath = pickedFile.path;
setState(() { setState(() {
_image = File(imagePath); usesPicture = true;
currentMoodsImage = File(imagePath);
}); });
} }
} catch (e) { } catch (e) {
...@@ -50,47 +70,272 @@ class MoodPage extends State<StateMoodPage> { ...@@ -50,47 +70,272 @@ class MoodPage extends State<StateMoodPage> {
} }
} }
_changeMusic(){
//code zum musik ändern
}
_getColorDistance(Color c1, Color c2) { _getColorDistance(Color c1, Color c2) {
LabColor labC1 = LabColor.fromColor(c1);
LabColor labC2 = LabColor.fromColor(c2);
double distance = 0; double distance = 0;
Vector3 v1 =
Vector3(c1.red.toDouble(), c1.green.toDouble(), c1.blue.toDouble()); print("Lightness bild: " + labC1.lightness.toDouble().toString());
Vector3 v2 = print("Lightness referenz: " + labC2.lightness.toDouble().toString());
Vector3(c2.red.toDouble(), c2.green.toDouble(), c2.blue.toDouble());
distance = v1.distanceTo(v2).toInt().toDouble(); Vector3 v1 = Vector3(labC1.lightness.toDouble(), labC1.a.toDouble(), labC1.b.toDouble());
Vector3 v2 = Vector3(labC2.lightness.toDouble(), labC2.a.toDouble(), labC2.b.toDouble());
distance = v1.distanceTo(v2).toDouble();
return distance; return distance;
} }
_determineMoodToMatch(Color col) { _determineMoodToMatch(Color col) {
double distance = 1000.0; double distance = 1000000.0;
Moods newMood = Moods.none; Moods newMood = Moods.none;
if(musicCangable){
for (var value in Moods.values) {
double colorDistance = _getColorDistance(col, value.color);
if (colorDistance < distance &&
value != Moods.none) {
distance = colorDistance;
newMood = value;
}
}
_updateColorPalete(col);
selectedMood = newMood.color;
_changeMusic();
musicCangable = false;
return newMood;
}else{
for (var value in Moods.values) { for (var value in Moods.values) {
if (_getColorDistance(col, value.color) < distance && double colorDistance = _getColorDistance(selectedMood, value.color);
if (colorDistance < distance &&
value != Moods.none) { value != Moods.none) {
distance = _getColorDistance(col, value.color); distance = colorDistance;
newMood = value; newMood = value;
} }
} }
musicCangable = false;
return newMood; return newMood;
} }
}
_updateColorPalete(Color col){
if(!usesPicture){
col = Color.fromARGB(col.alpha - 100, col.red, col.green, col.blue);
//col = darken(col, 0.05);
primaryColor = col;
backGroundColor = Color.fromARGB(col.alpha - 140, col.red, col.green, col.blue);
}else{
backGroundColor = Color.fromARGB(col.alpha - 240, col.red, col.green, col.blue);
}
primaryColor = col;
onPrimary = darken(col, 0.2);
Color shiftedColor = Color.fromARGB(col.alpha - 100, col.red, col.green, col.blue);
primaryContainer = shiftedColor;
onPrimaryContainer = darken(shiftedColor, 0.2);
}
_getMoodList(){ _getMoodList(){
return Column(children: <Widget>[ return Column(children: <Widget>[
RadioListTile<Moods>(
title: const Text(
"Sad",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.sad,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.sad.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>( RadioListTile<Moods>(
title: const Text('Happy'), title: const Text(
"Angry",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.angry,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.angry.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Noble",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.noble,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.noble.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Clean",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.clean,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.clean.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Happy",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.happy, value: Moods.happy,
groupValue: currentMood, groupValue: currentMood,
onChanged: (Moods? value) { onChanged: (Moods? value) {
setState(() { setState(() {
usesPicture = false;
primaryColor = Moods.happy.color;
_updateColorPalete(primaryColor);
currentMood = value; currentMood = value;
}); });
}, },
), ),
RadioListTile<Moods>( RadioListTile<Moods>(
title: const Text('Sad'), title: const Text(
value: Moods.sad, "Courageous",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.courageous,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.courageous.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Fresh",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.fresh,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.fresh.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Compassionn",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.compassionn,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.compassionn.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Simple",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.simple,
groupValue: currentMood,
onChanged: (Moods? value) {
setState(() {
usesPicture = false;
primaryColor = Moods.simple.color;
_updateColorPalete(primaryColor);
currentMood = value;
});
},
),
RadioListTile<Moods>(
title: const Text(
"Dramatic",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
),
),
tileColor: backGroundColor,
activeColor: primaryColor,
value: Moods.dramatic,
groupValue: currentMood, groupValue: currentMood,
onChanged: (Moods? value) { onChanged: (Moods? value) {
setState(() { setState(() {
usesPicture = false;
primaryColor = Moods.dramatic.color;
_updateColorPalete(primaryColor);
currentMood = value; currentMood = value;
}); });
}, },
...@@ -102,7 +347,7 @@ class MoodPage extends State<StateMoodPage> { ...@@ -102,7 +347,7 @@ class MoodPage extends State<StateMoodPage> {
BoxDecoration deco = new BoxDecoration(); BoxDecoration deco = new BoxDecoration();
var image; var image;
image = _getImageTodisplay(); image = _getImageTodisplay();
if (image != null) { if (usesPicture) {
deco = BoxDecoration( deco = BoxDecoration(
image: DecorationImage( image: DecorationImage(
fit: BoxFit.fitWidth, fit: BoxFit.fitWidth,
...@@ -110,21 +355,26 @@ class MoodPage extends State<StateMoodPage> { ...@@ -110,21 +355,26 @@ class MoodPage extends State<StateMoodPage> {
), ),
); );
} else { } else {
deco = const BoxDecoration( deco = BoxDecoration(
color: Color.fromARGB(255, 64, 71, 167), color: primaryColor,
); );
} }
return Container( return GestureDetector(
onDoubleTap: (){
_getFromGallery();
},
child: Container(
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * (9.0 / 16.0), height: MediaQuery.of(context).size.width * (9.0 / 16.0),
decoration: deco, decoration: deco,
),
); );
} }
_getImageTodisplay() { _getImageTodisplay() {
var imageToShow; var imageToShow;
try { try {
imageToShow = FileImage(_image); imageToShow = FileImage(currentMoodsImage);
return imageToShow; return imageToShow;
} catch (e) { } catch (e) {
return null; return null;
...@@ -149,18 +399,33 @@ class MoodPage extends State<StateMoodPage> { ...@@ -149,18 +399,33 @@ class MoodPage extends State<StateMoodPage> {
case ConnectionState.waiting: case ConnectionState.waiting:
return const Center(child: CircularProgressIndicator()); return const Center(child: CircularProgressIndicator());
default: default:
if (snapshot.hasError) { if (snapshot.hasError && usesPicture) {
return const PaletteSquare( currentMood = _determineMoodToMatch(primaryColor);
color: Color.fromARGB(255, 173, 188, 236)); return Column(
children: <Widget>[
PaletteSquare( color: primaryColor),
_getMoodList(),
]);
} else if(snapshot.hasError) {
return Column(
children: <Widget>[
PaletteSquare( color: primaryColor),
_getMoodList(),
]);
} else if (usesPicture){
Color? colorToUse = snapshot.data!.vibrantColor?.color;
colorToUse ??= snapshot.data!.dominantColor?.color;
currentMood = _determineMoodToMatch(colorToUse!);
return Column(
children: <Widget>[
PaletteSquare(color: colorToUse),
_getMoodList(),
]);
}else{ }else{
currentMood = return Column(
_determineMoodToMatch(snapshot.data!.dominantColor!.color); children: <Widget>[
return Row(children: <Widget>[ PaletteSquare(color: primaryColor),
PaletteSquare(color: snapshot.data!.mutedColor!.color), _getMoodList(),
PaletteSquare(color: snapshot.data!.vibrantColor!.color),
PaletteSquare(color: snapshot.data!.dominantColor!.color),
PaletteSquare(color: snapshot.data!.darkMutedColor!.color),
PaletteSquare(color: snapshot.data!.darkVibrantColor!.color),
]); ]);
} }
} }
...@@ -171,24 +436,16 @@ class MoodPage extends State<StateMoodPage> { ...@@ -171,24 +436,16 @@ class MoodPage extends State<StateMoodPage> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: Center( body: Center(
child: SingleChildScrollView(
child: Column( child: Column(
children: <Widget>[ children: <Widget>[
_getContainerTodisplay(), _getContainerTodisplay(),
_getCollorIndicator(), _getCollorIndicator(),
_getMoodList(), //_getMoodList(),
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(
Theme.of(context).primaryColorLight),
backgroundColor: MaterialStateProperty.all(
Theme.of(context).backgroundColor),
),
onPressed: _getFromGallery,
child: const Text('AddImage'),
),
], ],
), ),
), ),
),
); );
} }
} }
...@@ -207,9 +464,10 @@ class PaletteSquare extends StatelessWidget { ...@@ -207,9 +464,10 @@ class PaletteSquare extends StatelessWidget {
Widget square = Container( Widget square = Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: color, border: Border.all(width: 1.0, color: color)), color: color, border: Border.all(width: 1.0, color: color)),
width: MediaQuery.of(context).size.width / 5, width: MediaQuery.of(context).size.width,
height: 40, height: 40,
); );
return square; return square;
} }
} }
lib/widgets/navbars.dart
+ 1
− 1
View file @ ca407ff6
...@@ -10,7 +10,7 @@ class SettingsDrawer extends StatelessWidget { ...@@ -10,7 +10,7 @@ class SettingsDrawer extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const Drawer( return Drawer(
backgroundColor: onPrimary, backgroundColor: onPrimary,
width: 200, width: 200,
child: Center( child: Center(
......
pubspec.lock
+ 28
− 0
View file @ ca407ff6
...@@ -71,6 +71,13 @@ packages: ...@@ -71,6 +71,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.16.0" version: "1.16.0"
color_models:
dependency: transitive
description:
name: color_models
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.3"
cross_file: cross_file:
dependency: transitive dependency: transitive
description: description:
...@@ -181,6 +188,13 @@ packages: ...@@ -181,6 +188,13 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.0" version: "0.0.0"
flutter_color_models:
dependency: "direct main"
description:
name: flutter_color_models
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.3+2"
flutter_custom_clippers: flutter_custom_clippers:
dependency: "direct main" dependency: "direct main"
description: description:
...@@ -352,6 +366,13 @@ packages: ...@@ -352,6 +366,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.8.0" version: "1.8.0"
num_utilities:
dependency: transitive
description:
name: num_utilities
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
page_transition: page_transition:
dependency: "direct main" dependency: "direct main"
description: description:
...@@ -436,6 +457,13 @@ packages: ...@@ -436,6 +457,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.1.3" version: "2.1.3"
powers:
dependency: transitive
description:
name: powers
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.0+2"
process: process:
dependency: transitive dependency: transitive
description: description:
......
pubspec.yaml
+ 1
− 0
View file @ ca407ff6
...@@ -50,6 +50,7 @@ dependencies: ...@@ -50,6 +50,7 @@ dependencies:
spotify_sdk: ^2.3.0 spotify_sdk: ^2.3.0
flutter_dotenv: ^5.0.2 flutter_dotenv: ^5.0.2
drop_shadow_image: ^0.9.1 drop_shadow_image: ^0.9.1
flutter_color_models: ^1.3.3+2
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment