Optimized Heatmap Color

app.py

@@ -23,37 +23,6 @@ login_manager = LoginManager()
 login_manager.login_view = 'login'
 login_manager.init_app(app)
 
-
-def rgb_to_hex(rgb_string):
-    # Split the RGB string into individual components
-    rgb_list = rgb_string.split(',')
-
-    # Convert each component to an integer
-    r = int(rgb_list[0])
-    g = int(rgb_list[1])
-    b = int(rgb_list[2])
-
-    # Convert the integers to hexadecimal strings and concatenate them
-    hex_string = "#{:02x}{:02x}{:02x}".format(r, g, b)
-
-    return hex_string
-
-def hex_to_rgb(hex_string):
-    # Remove the '#' character if present
-    hex_string = hex_string.lstrip('#')
-
-    # Convert the hexadecimal string to integers
-    r = int(hex_string[0:2], 16)
-    g = int(hex_string[2:4], 16)
-    b = int(hex_string[4:6], 16)
-
-    # Create the RGB string
-    rgb_string = "{},{},{}".format(r, g, b)
-
-    return rgb_string
-
-
-
 @login_manager.user_loader
 def load_user(user_id):
     return User.get(user_id)
@@ -345,7 +314,7 @@ def profile():
         name=current_user.name,
         email=current_user.email,
         profile_image_url=current_user.profile_image,
-        color = rgb_to_hex(current_user.heatmap_color),
+        color = current_user.heatmap_color,
         title="Profil",
     )
 
@@ -367,7 +336,7 @@ def profile_change():
         name=current_user.name,
         email=current_user.email,
         profile_image_url=current_user.profile_image,
-        color=rgb_to_hex(current_user.heatmap_color),
+        color=current_user.heatmap_color,
     )
 
 
@@ -511,7 +480,7 @@ def password_change():
         name=current_user.name,
         email=current_user.email,
         profile_image_url=current_user.profile_image,
-        color=rgb_to_hex(current_user.heatmap_color),
+        color=current_user.heatmap_color,
     )
 
 
@@ -534,7 +503,11 @@ def save_profile_image(image_file):
 
     # Check if the image is an animated gif
     if file_extension == 'gif':
-        save_profile_animated(image_file, filename)
+        gif_path = os.path.join(app.config['UPLOAD_FOLDER'], filename.replace(".jpg", ".gif"))
+        image_file.save(gif_path)
+
+        current_user.profile_image = gif_path
+        current_user.update()
         return
 
     # Open the uploaded image
@@ -565,15 +538,6 @@ def save_profile_image(image_file):
     current_user.update()
 
 
-def save_profile_animated(image_file, filename):
-    # Save the GIF temporarily
-    gif_path = os.path.join(app.config['UPLOAD_FOLDER'], filename.replace(".jpg", ".gif"))
-    image_file.save(gif_path)
-
-    current_user.profile_image = gif_path
-    current_user.update()
-
-
 @app.route('/upload', methods=['POST'])
 def upload_profile_image():
     if 'file' not in request.files:
@@ -590,7 +554,7 @@ def upload_profile_image():
 def save_heatmap_color():
     # Get the color value from the form
     new_color = request.form['color']
-    current_user.heatmap_color = hex_to_rgb(new_color)
+    current_user.heatmap_color = new_color
     current_user.update()
 
     # Back to profile
@@ -599,7 +563,7 @@ def save_heatmap_color():
         name=current_user.name,
         email=current_user.email,
         profile_image_url=current_user.profile_image,
-        color=rgb_to_hex(current_user.heatmap_color),
+        color=current_user.heatmap_color,
     )
 
 
@@ -745,8 +709,6 @@ def delete_user_from_list():
     habit_list = HabitList.get(int(habit_list_id))
 
     habit_user_id = request.form.get('habit_user_id')
-    habit_user = User.get(int(habit_user_id))
-
     users = habit_list.get_users()
 
     # Remove the current user from the list

models/User.py

@@ -17,7 +17,7 @@ class User(UserMixin):
 
     @staticmethod
     def create(name: str, email: str, password: str):
-        heatmap_color = "0, 255, 0"
+        heatmap_color = "#00FF00"
         id, profile_image = create_user(name, email, password, heatmap_color)
         return User(id=id, name=name, email=email, profile_image=profile_image, heatmap_color=heatmap_color)
 

static/script/script-index.js

@@ -15,7 +15,6 @@ function createHeatmap(data, day) {
     // Aktuelles Datum des Montags in der neuen linken Spalte
     for (let i = 0; i < 4; i++) {
         for (let j = 0; j < 7; j++) {
-            // console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
             const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl
 
             const dayElement = document.createElement('div');
@@ -163,7 +162,6 @@ $(function () {
     $('[data-toggle="tooltip"]').tooltip()
 
 })
-console.log(activityData, day, color)
 // Erstelle die Heatmap mit den simulierten Daten
 createHeatmap(activityData, day, color);
 

templates/components/heatmap.html

@@ -7,9 +7,14 @@
 </div>
 
 <script>
+    function hexToRgb(hex) {
+    hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
+    const [, r, g, b] = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
+}
+
     // Generates activity based on the Values given by the Backend
     const activityData = {{ heatmap_values }};
     const day = {{ day }};
-    const color = "{{ color }}";
+    const color = hexToRgb("{{ color }}");
-    console.log(activityData, day, color)
 </script>