down the rabbit hole

public/scripts/power-user.js

@@ -1133,39 +1133,51 @@ function setAvgBG() {
         .replace(/^url\(['"]?/, '')
         .replace(/['"]?\)$/, '');
 
-    const charAvatar = new Image()
+    /*     const charAvatar = new Image()
-    charAvatar.src = $("#avatar_load_preview")
+        charAvatar.src = $("#avatar_load_preview")
-        .attr('src')
+            .attr('src')
-        .replace(/^url\(['"]?/, '')
+            .replace(/^url\(['"]?/, '')
-        .replace(/['"]?\)$/, '');
+            .replace(/['"]?\)$/, '');
-
+    
-    const userAvatar = new Image()
+        const userAvatar = new Image()
-    userAvatar.src = $("#user_avatar_block .avatar.selected img")
+        userAvatar.src = $("#user_avatar_block .avatar.selected img")
-        .attr('src')
+            .attr('src')
-        .replace(/^url\(['"]?/, '')
+            .replace(/^url\(['"]?/, '')
-        .replace(/['"]?\)$/, '');
+            .replace(/['"]?\)$/, ''); */
 
 
     bgimg.onload = function () {
         var rgb = getAverageRGB(bgimg);
-        console.log(`average color of the bg is:`)
+        //console.log(`average color of the bg is:`)
-        console.log(rgb);
+        //console.log(rgb);
         $("#blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
+
+        const backgroundColorString = $("#blur-tint-color-picker").attr('color')
+            .replace('rgba', '')
+            .replace('rgb', '')
+            .replace('(', '[')
+            .replace(')', ']');   //[50, 120, 200, 1]; // Example background color
+        const backgroundColorArray = JSON.parse(backgroundColorString) //[200, 200, 200, 1] 
+        console.log(backgroundColorArray)
+        $("#main-text-color-picker").attr('color', getReadableTextColor(backgroundColorArray));
+        console.log($("#main-text-color-picker").attr('color')); // Output: 'rgba(0, 47, 126, 1)'
     }
 
-    charAvatar.onload = function () {
+    /*     charAvatar.onload = function () {
-        var rgb = getAverageRGB(charAvatar);
+            var rgb = getAverageRGB(charAvatar);
-        console.log(`average color of the AI avatar is:`);
+            //console.log(`average color of the AI avatar is:`);
-        console.log(rgb);
+            //console.log(rgb);
-        $("#bot-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
+            $("#bot-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
-    }
+        }
+    
+        userAvatar.onload = function () {
+            var rgb = getAverageRGB(userAvatar);
+            //console.log(`average color of the user avatar is:`);
+            //console.log(rgb);
+            $("#user-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
+        } */
+
 
-    userAvatar.onload = function () {
-        var rgb = getAverageRGB(userAvatar);
-        console.log(`average color of the user avatar is:`);
-        console.log(rgb);
-        $("#user-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
-    }
 
 
 
@@ -1212,6 +1224,131 @@ function setAvgBG() {
         return rgb;
 
     }
+
+    function hslToRgb(h, s, l) {
+        const hueToRgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+
+        if (s === 0) {
+            return [l, l, l];
+        }
+
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        const r = hueToRgb(p, q, h + 1 / 3);
+        const g = hueToRgb(p, q, h);
+        const b = hueToRgb(p, q, h - 1 / 3);
+
+        return [r * 255, g * 255, b * 255];
+    }
+
+    function rgbToLuminance(r, g, b) {
+        console.log(r, g, b)
+        const gammaCorrect = (color) => {
+            return color <= 0.03928
+                ? color / 12.92
+                : Math.pow((color + 0.055) / 1.055, 2.4);
+        };
+
+        const rsRGB = r / 255;
+        const gsRGB = g / 255;
+        const bsRGB = b / 255;
+
+        const rLuminance = gammaCorrect(rsRGB).toFixed(2);
+        const gLuminance = gammaCorrect(gsRGB).toFixed(2);
+        const bLuminance = gammaCorrect(bsRGB).toFixed(2);
+
+        console.log(`rLum ${rLuminance}, gLum ${gLuminance}, bLum ${bLuminance}`)
+
+        return 0.2126 * rLuminance + 0.7152 * gLuminance + 0.0722 * bLuminance;
+    }
+
+    //this version keeps BG and main text in same hue
+    /* function getReadableTextColor(rgb) {
+         const [r, g, b] = rgb;
+ 
+         // Convert RGB to HSL
+         const rgbToHsl = (r, g, b) => {
+             const max = Math.max(r, g, b);
+             const min = Math.min(r, g, b);
+             const d = max - min;
+             const l = (max + min) / 2;
+ 
+             if (d === 0) return [0, 0, l];
+ 
+             const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+             const h = (() => {
+                 switch (max) {
+                     case r:
+                         return (g - b) / d + (g < b ? 6 : 0);
+                     case g:
+                         return (b - r) / d + 2;
+                     case b:
+                         return (r - g) / d + 4;
+                 }
+             })() / 6;
+ 
+             return [h, s, l];
+         };
+         const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
+ 
+         // Calculate appropriate text color based on background color
+         const targetLuminance = l > 0.5 ? 0.2 : 0.8;
+         const targetSaturation = s > 0.5 ? s - 0.2 : s + 0.2;
+         const [rNew, gNew, bNew] = hslToRgb(h, targetSaturation, targetLuminance);
+ 
+         // Return the text color in RGBA format
+         return `rgba(${rNew.toFixed(0)}, ${gNew.toFixed(0)}, ${bNew.toFixed(0)}, 1)`;
+     }*/
+
+    //this version makes main text complimentary color to BG color
+    function getReadableTextColor(rgb) {
+        const [r, g, b] = rgb;
+
+        // Convert RGB to HSL
+        const rgbToHsl = (r, g, b) => {
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            const d = max - min;
+            const l = (max + min) / 2;
+
+            if (d === 0) return [0, 0, l];
+
+            const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            const h = (() => {
+                switch (max) {
+                    case r:
+                        return (g - b) / d + (g < b ? 6 : 0);
+                    case g:
+                        return (b - r) / d + 2;
+                    case b:
+                        return (r - g) / d + 4;
+                }
+            })() / 6;
+
+            return [h, s, l];
+        };
+        const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
+
+        // Calculate complementary color based on background color
+        const complementaryHue = (h + 0.5) % 1;
+        const complementarySaturation = s > 0.5 ? s - 0.2 : s + 0.2;
+        const complementaryLuminance = l > 0.5 ? 0.2 : 0.8;
+
+        // Convert complementary color back to RGB
+        const [rNew, gNew, bNew] = hslToRgb(complementaryHue, complementarySaturation, complementaryLuminance);
+
+        // Return the text color in RGBA format
+        return `rgba(${rNew.toFixed(0)}, ${gNew.toFixed(0)}, ${bNew.toFixed(0)}, 1)`;
+    }
+
+
 }
 
 $(document).ready(() => {