From fde2a91d2a84e0694050d737d50cb3ed52346885 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Wed, 5 Jul 2023 04:45:54 +0900 Subject: [PATCH] down the rabbit hole --- public/scripts/power-user.js | 187 ++++++++++++++++++++++++++++++----- 1 file changed, 162 insertions(+), 25 deletions(-) diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index ae8bd7feb..f24980e35 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -1133,39 +1133,51 @@ function setAvgBG() { .replace(/^url\(['"]?/, '') .replace(/['"]?\)$/, ''); - const charAvatar = new Image() - charAvatar.src = $("#avatar_load_preview") - .attr('src') - .replace(/^url\(['"]?/, '') - .replace(/['"]?\)$/, ''); - - const userAvatar = new Image() - userAvatar.src = $("#user_avatar_block .avatar.selected img") - .attr('src') - .replace(/^url\(['"]?/, '') - .replace(/['"]?\)$/, ''); + /* const charAvatar = new Image() + charAvatar.src = $("#avatar_load_preview") + .attr('src') + .replace(/^url\(['"]?/, '') + .replace(/['"]?\)$/, ''); + + const userAvatar = new Image() + userAvatar.src = $("#user_avatar_block .avatar.selected img") + .attr('src') + .replace(/^url\(['"]?/, '') + .replace(/['"]?\)$/, ''); */ bgimg.onload = function () { var rgb = getAverageRGB(bgimg); - console.log(`average color of the bg is:`) - console.log(rgb); + //console.log(`average color of the bg is:`) + //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 () { - var rgb = getAverageRGB(charAvatar); - console.log(`average color of the AI avatar is:`); - console.log(rgb); - $("#bot-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'); - } + /* charAvatar.onload = function () { + var rgb = getAverageRGB(charAvatar); + //console.log(`average color of the AI avatar is:`); + //console.log(rgb); + $("#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(() => {