style sheets

App/pages/facial_expression_page.py

@@ -31,6 +31,8 @@ def __init__(self):
         self.timer.timeout.connect(self.update_frame)
         self.timer.start(30)
 
+        self.load_stylesheet()
+
     def setup_ui(self):
         self.setWindowTitle("Facial Expression Recognition")
         self.setGeometry(100, 100, 800, 600)
@@ -40,16 +42,17 @@ def setup_ui(self):
         # Left panel for the video feed
         left_layout = QVBoxLayout()
         self.video_feed = QLabel()
-        self.video_feed.setFixedSize(400, 400)
+        self.video_feed.setObjectName("video_feed")
         self.video_feed.setScaledContents(True)
         left_layout.addWidget(self.video_feed)
         left_layout.addStretch()
 
         # Right panel for emoji display
         right_layout = QVBoxLayout()
         self.emoji_label = QLabel("Expression:")
+        self.emoji_label.setObjectName("emoji_label")
         self.face_emoji = QLabel()
-        self.face_emoji.setFixedSize(200, 200)
+        self.face_emoji.setObjectName("emoji_img")
         self.face_emoji.setScaledContents(True)
         self.face_emoji.setAlignment(Qt.AlignCenter)
         right_layout.addWidget(self.emoji_label)
@@ -60,6 +63,12 @@ def setup_ui(self):
         main_layout.addLayout(right_layout)
         self.setLayout(main_layout)
 
+    def load_stylesheet(self):
+        """Load the stylesheet for the page."""
+        with open("App/styles/facial_expression.qss", "r") as file:
+            stylesheet = file.read()
+            self.setStyleSheet(stylesheet)
+
     def update_frame(self):
         result = self.expression_recognizer.process_frame()
         if result:

App/pages/general_page.py

@@ -25,28 +25,22 @@ def __init__(self, title: str, description: str, algorithm: str):
         # Main layout (horizontal layout for video right panel)
         main_layout = QHBoxLayout(self)
 
-        # Video Stream Section (Left) - Change QFrame to QLabel
+        # Video Stream Section (Left)
         self.video_label = QLabel()
-        self.video_label.setStyleSheet("background-color: black;")
-        self.video_label.setMinimumSize(400, 300)  # Minimum size for the video area
+        self.video_label.setObjectName("video_label")
         main_layout.addWidget(self.video_label, stretch=3)
 
         # Right Panel (Output and Description)
         right_panel = QVBoxLayout()
 
         # Output Section (Top of Right Panel)
         self.output_label = QLabel("Output Here")
-        self.output_label.setStyleSheet(
-            "background-color: lightgray; font-size: 16px; padding: 10px;"
-        )
-        self.output_label.setAlignment(Qt.AlignCenter)
-        self.output_label.setFixedHeight(150)  # Optional: Adjust height as needed
+        self.output_label.setObjectName("output_label")
         right_panel.addWidget(self.output_label, stretch=1)
 
         # Description Section (Bottom of Right Panel)
         self.description_label = QLabel(description)
-        self.description_label.setStyleSheet("font-size: 18px; color: gray;")
-        self.description_label.setAlignment(Qt.AlignLeft | Qt.AlignTop)
+        self.description_label.setObjectName("description_label")
         self.description_label.setWordWrap(True)
         right_panel.addWidget(self.description_label, stretch=2)
 
@@ -56,6 +50,8 @@ def __init__(self, title: str, description: str, algorithm: str):
         # Set the main layout
         self.setLayout(main_layout)
 
+        self.load_stylesheet()
+
         # Start video capture
         self.cap = cv2.VideoCapture(0)
         if not self.cap.isOpened():
@@ -65,6 +61,12 @@ def __init__(self, title: str, description: str, algorithm: str):
         self.failed_frames = 0  # Counter for consecutive failed frames
         self.timer = self.startTimer(20)
 
+    def load_stylesheet(self):
+        """load stylesheet"""
+        with open("App\styles\general.qss","r") as file:
+            stylesheet=file.read()
+            self.setStyleSheet(stylesheet)
+
     def timerEvent(self, event):
         ret, frame = self.cap.read()
         if not ret:

App/pages/hand_gesture_page.py

@@ -31,6 +31,8 @@ def __init__(self):
         self.timer.timeout.connect(self.update_frame)
         self.timer.start(30)
 
+        self.load_stylesheet()
+
     def setup_ui(self):
         self.setWindowTitle("Hand Gesture Recognition")
         self.setGeometry(100, 100, 1200, 600)
@@ -40,8 +42,9 @@ def setup_ui(self):
         # Left panel
         left_layout = QVBoxLayout()
         self.left_label = QLabel("Left Hand:")
+        self.left_label.setObjectName("label")
         self.left_emoji = QLabel()
-        self.left_emoji.setFixedSize(200, 200)
+        self.left_emoji.setObjectName("emoji")
         self.left_emoji.setScaledContents(True)
         self.left_emoji.setAlignment(Qt.AlignCenter)
         left_layout.addWidget(self.left_label)
@@ -50,14 +53,15 @@ def setup_ui(self):
 
         # Center video feed
         self.video_feed = QLabel()
-        self.video_feed.setFixedSize(640, 480)
+        self.video_feed.setObjectName("video_feed")
         self.video_feed.setScaledContents(True)
 
         # Right panel
         right_layout = QVBoxLayout()
         self.right_label = QLabel("Right Hand:")
+        self.right_label.setObjectName("label")
         self.right_emoji = QLabel()
-        self.right_emoji.setFixedSize(200, 200)
+        self.right_emoji.setObjectName("emoji")
         self.right_emoji.setScaledContents(True)
         self.right_emoji.setAlignment(Qt.AlignCenter)
         right_layout.addWidget(self.right_label)
@@ -69,6 +73,12 @@ def setup_ui(self):
         main_layout.addLayout(right_layout)
         self.setLayout(main_layout)
 
+    def load_stylesheet(self):
+        """Load the stylesheet for the page."""
+        with open("App/styles/hand_gesture.qss", "r") as file:
+            stylesheet = file.read()
+            self.setStyleSheet(stylesheet)
+
     def update_frame(self):
         result = self.gesture_recognizer.process_frame()
         if result:

App/pages/home_page.py

@@ -32,6 +32,14 @@ def __init__(self):
         self.connection_timer.timeout.connect(self.update_connection_status)
         self.connection_timer.start(2000)  # Check every 2 seconds
 
+        self.load_stylesheet()
+
+    def load_stylesheet(self):
+        """Load the stylesheet for the page."""
+        with open("App/styles/base.qss", "r") as file:
+            stylesheet = file.read()
+            self.setStyleSheet(stylesheet)
+
     def draw_circle(self, color, size=20):
         """Draw a circle with the specified color and size."""
         pixmap = QPixmap(size, size)

App/styles/base.qss

@@ -1,22 +1,23 @@
-#title {
-    margin-top:10px;
-    margin-bottom:5px;
-    font-size: 24px;
-    font-weight: bold;
-    color: #333333;
-    spacing:0px;
+QWidget {
+    background-color: #f5f5f5;
+    font-family: Arial, sans-serif;
 }
-#intro_label {
-    margin-left: 20px;
-    spacing:0px;
+
+QPushButton {
+    font-size: 18px;
+    padding: 10px;
+    margin:5px;
+    background-color: grey;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    min-width: 150px;
 }
 
-#intro_container {
-    margin-top: 0px;
-    spacing:0px;
+QPushButton:hover {
+    background-color: #64625f;
 }
 
-#button {
-    font-size:16px;
-    color: gray;
+QPushButton:pressed {
+    background-color: #6e6e6e;
 }

App/styles/facial_expression.qss

@@ -0,0 +1,28 @@
+QWidget {
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+#video_feed {
+    border: 2px solid black;
+    border-radius: 10px;
+    background-color: black;
+    width: 400px;
+    height: 400px;
+}
+
+#emoji_label {
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    color:black;
+}
+
+#emoji_img {
+    border: 2px solid black;
+    border-radius: 10px;
+    background-color: white;
+    width: 200px;
+    height: 200px;
+    margin: 10px;
+}

App/styles/general.qss

@@ -0,0 +1,24 @@
+QWidget {
+    background-color: #f0f0f0;
+}
+
+#video_label {
+    background-color: black;
+    min-width: 400px;
+    min-height: 300px;
+}
+
+#output_label {
+    background-color: lightgray;
+    font-size: 16px;
+    padding: 10px;
+    text-align: center;
+    height: 150px;
+}
+
+#description_label {
+    font-size: 18px;
+    color:gray;
+    text-align: left;
+    padding: 10px;
+}

App/styles/hand_gesture.qss

@@ -0,0 +1,28 @@
+QWidget {
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+#label {
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    color:black;
+}
+
+#emoji {
+    border: 2px solid black;
+    border-radius: 10px;
+    background-color: white;
+    width: 200px;
+    height: 200px;
+    margin: 10px
+}
+
+#video_feed {
+    border: 2px solid black;
+    border-radius: 10px;
+    background-color: black;
+    width: 640px;
+    height: 480px;
+}