feat : Change the graph for a better visualization #22 (#25)

Added database to the graph

Backend/SQLFILE.sql

@@ -0,0 +1,35 @@
+CREATE DATABASE SPROCTOR;
+
+USE SPROCTOR;
+
+CREATE TABLE HeadMovements (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    student_id VARCHAR(50) NOT NULL,
+    session_id VARCHAR(50) NOT NULL,
+    look_up FLOAT DEFAULT 0,
+    look_down FLOAT DEFAULT 0,
+    look_left FLOAT DEFAULT 0,
+    look_right FLOAT DEFAULT 0,
+    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+-- Continue inserting the rest of the sample records
+INSERT INTO HeadMovements (student_id, session_id, look_up, look_down, look_left, look_right) 
+VALUES 
+('STU092', 'SESSION010', 2.0, 3.0, 1.5, 2.5),
+('STU093', 'SESSION010', 1.0, 2.5, 3.0, 1.5),
+('STU094', 'SESSION010', 3.0, 1.0, 2.5, 2.0),
+('STU095', 'SESSION010', 2.5, 2.0, 1.0, 3.5),
+('STU096', 'SESSION010', 3.0, 1.5, 3.5, 2.0),
+('STU097', 'SESSION010', 1.5, 2.5, 2.0, 1.5),
+('STU098', 'SESSION010', 2.0, 3.0, 1.5, 3.0),
+('STU099', 'SESSION010', 3.5, 2.5, 1.0, 2.0),
+('STU100', 'SESSION010', 1.0, 1.5, 2.5, 3.5);
+('STU102', 'SESSION010', 3.0, 1.5, 2.5, 1.0),
+('STU103', 'SESSION010', 1.0, 3.5, 2.0, 2.5),
+('STU104', 'SESSION010', 2.0, 1.0, 3.0, 2.5),
+('STU105', 'SESSION010', 3.5, 2.0, 1.5, 1.0),
+('STU106', 'SESSION010', 1.5, 3.0, 2.5, 3.0),
+('STU107', 'SESSION010', 2.0, 2.5, 3.5, 1.0),
+('STU108', 'SESSION010', 3.0, 1.0, 1.0, 2.5),
+('STU109', 'SESSION010', 1.0, 2.0, 2.0, 3.5),
+('STU110', 'SESSION010', 2.5, 3.5, 1.5, 1.5);

Backend/graph.py

@@ -1,37 +1,98 @@
 import matplotlib.pyplot as plt
 import numpy as np
+import mysql.connector
 import time
 
-# Initialize the figure
-plt.figure()
+# Connect to the database
+db = mysql.connector.connect(
+    host="localhost",  # Your database host
+    user="root",  # Your database username
+    password="ananyavastare2345",  # Your database password
+    database="SPROCTOR",  # Your database name
+)
+
+cursor = db.cursor()
+
+# Query to retrieve look_up, look_down, look_left, and look_right values from HeadMovements
+cursor.execute("SELECT look_up, look_down, look_left, look_right FROM HeadMovements")
+head_movement_values = cursor.fetchall()  # Retrieve all values
+
+# Close the cursor and database connection
+cursor.close()
+db.close()
 
-# Set up the axes
-plt.axis("off")  # Turn off the axis for a cleaner look
+# Prepare heatmap data
+heatmap_data = np.zeros((10, 10, 4))  # Create a 10x10 grid for RGBA channels
 
-# Create an empty grid for the heatmap
-heatmap_data = np.zeros((10, 10))  # 10x10 grid
+# Populate heatmap data based on head movement values
+for index, (look_up, look_down, look_left, look_right) in enumerate(
+    head_movement_values
+):
+    row = index // 10  # Determine row index
+    col = index % 10  # Determine column index
+    if row < 10 and col < 10:  # Check bounds
+        # Assign values to different channels
+        heatmap_data[row, col] = [look_up, look_down, look_left, look_right]
 
-# Show the plot window
+# Normalize the heatmap data to the range [0, 1]
+heatmap_data_normalized = heatmap_data / np.max(heatmap_data)
+
+# Create the combined heatmap by averaging the channels
+combined_heatmap = np.mean(
+    heatmap_data_normalized, axis=2
+)  # Average across the channels
+
+# Initialize the figure
 plt.ion()  # Turn on interactive mode
-plt.show()
+fig, ax = plt.subplots()  # Create a subplot
+
+# Create the heatmap
+heatmap = ax.imshow(
+    combined_heatmap,
+    cmap="YlOrRd",  # Choose a color map
+    interpolation="nearest",
+    vmin=0,
+    vmax=1,  # Set the range for color normalization
+)
+plt.colorbar(heatmap)  # Add a colorbar to indicate scale
+plt.title("Combined Heatmap of Look Directions")
+
+# Add labels for each direction without overlap
+for i, direction in enumerate(["Look Up", "Look Down", "Look Left", "Look Right"]):
+    ax.text(
+        0.5,
+        -0.15 - (i * 0.05),  # Adjust this value to position the labels appropriately
+        direction,
+        transform=ax.transAxes,
+        ha="center",
+        va="top",
+        fontsize=10,
+        color="black",
+        fontweight="bold",
+    )
+
+# Loop to update heatmap every second
+for _ in range(10):  # Run the loop 10 times
+    # Lightly modify the heatmap data for demonstration (this simulates transition)
+    heatmap_data_normalized += np.random.uniform(0, 0.1, heatmap_data_normalized.shape)
+    heatmap_data_normalized = np.clip(
+        heatmap_data_normalized, 0, 1
+    )  # Keep values within [0, 1]
+
+    # Create a new combined heatmap by averaging the updated data
+    combined_heatmap = np.mean(
+        heatmap_data_normalized, axis=2
+    )  # Average across the channels
+
+    # Update the heatmap
+    heatmap.set_array(combined_heatmap)  # Update heatmap data
+    plt.draw()  # Redraw the heatmap
+    plt.pause(1)  # Pause for 1 second
 
-# Loop to simulate data for the heatmap
-for i in range(100):
-    # Randomly generate data (for example purposes)
-    data = np.random.rand(10, 10)  # Random values between 0 and 1 for a 10x10 grid
-    heatmap_data += data  # Accumulate data for the heatmap
-
-    # Clear the axes and plot the heatmap
-    plt.clf()  # Clear the current figure
-    heatmap = plt.imshow(
-        heatmap_data, cmap="hot", interpolation="nearest", vmin=0, vmax=100
-    )  # Create heatmap
-    plt.colorbar(heatmap)  # Add a colorbar to indicate scale
-    plt.title("Dynamic Heatmap of Random Values")
-
-    # Update the plot
-    plt.draw()
-    plt.pause(0.5)  # Pause to see the update
+# Save the figure
+plt.savefig(
+    f"heatmap_combined_{time.strftime('%Y%m%d_%H%M%S')}.png"
+)  # Save with timestamp
 
 # Keep the plot window open at the end
 plt.ioff()  # Turn off interactive mode