diff options
| -rw-r--r-- | core/js/placeholder.js | 114 | ||||
| -rw-r--r-- | lib/private/Avatar.php | 181 |
2 files changed, 134 insertions, 161 deletions
diff --git a/core/js/placeholder.js b/core/js/placeholder.js index 29f91b6698d..a73881344e3 100644 --- a/core/js/placeholder.js +++ b/core/js/placeholder.js @@ -2,7 +2,7 @@ * ownCloud * * @author John Molakvoæ - * @copyright 2016-2017 John Molakvoæ <skjnldsv@protonmail.com> + * @copyright 2016-2018 John Molakvoæ <skjnldsv@protonmail.com> * @author Morris Jobke * @copyright 2013 Morris Jobke <morris.jobke@gmail.com> * @@ -36,7 +36,7 @@ * * Which will result in: * - * <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">T</div> + * <div id="albumart" style="background-color: rgb(121, 90, 171); ... ">T</div> * * You may also call it like this, to have a different background, than the seed: * @@ -44,25 +44,24 @@ * * Resulting in: * - * <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">A</div> + * <div id="albumart" style="background-color: rgb(121, 90, 171); ... ">A</div> * */ /* - * Alternatively, you can use the prototype function to convert your string to hsl colors: + * Alternatively, you can use the prototype function to convert your string to rgb colors: * - * "a6741a86aded5611a8e46ce16f2ad646".toHsl() + * "a6741a86aded5611a8e46ce16f2ad646".toRgb() * - * Will return the hsl parameters within an array: + * Will return the rgb parameters within the following object: * - * [290, 60, 68] + * Color {r: 208, g: 158, b: 109} * */ (function ($) { - String.prototype.toHsl = function() { - + String.prototype.toRgb = function() { var hash = this.toLowerCase().replace(/[^0-9a-f]+/g, ''); // Already a md5 hash? @@ -70,65 +69,74 @@ hash = md5(hash); } - function rgbToHsl(r, g, b) { - r /= 255; g /= 255; b /= 255; - var max = Math.max(r, g, b), min = Math.min(r, g, b); - var h, s, l = (max + min) / 2; - if(max === min) { - h = s = 0; // achromatic - } else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - h /= 6; - } - return [h, s, l]; + function Color(r,g,b) { + this.r = r; + this.g = g; + this.b = b; } - // Init vars - var result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; - var rgb = [0, 0, 0]; - var sat = 70; - var lum = 68; - var modulo = 16; - - // Splitting evenly the string - for(var i in hash) { - result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString(); + function stepCalc(steps, ends) { + var step = new Array(3); + step[0] = (ends[1].r - ends[0].r) / steps; + step[1] = (ends[1].g - ends[0].g) / steps; + step[2] = (ends[1].b - ends[0].b) / steps; + return step; } - // Converting our data into a usable rgb format - // Start at 1 because 16%3=1 but 15%3=0 and makes the repartition even - for(var count=1;count<modulo;count++) { - rgb[count%3] += parseInt(result[count]); + function mixPalette(steps, color1, color2) { + var count = steps + 1; + var palette = new Array(); + palette.push(color1); + var step = stepCalc(steps, [color1, color2]) + for (i = 1; i < steps; i++) { + var r = parseInt(color1.r + (step[0] * i)); + var g = parseInt(color1.g + (step[1] * i)); + var b = parseInt(color1.b + (step[2] * i)); + palette.push(new Color(r,g,b)); + } + return palette; } - // Reduce values bigger than rgb requirements - rgb[0] = rgb[0]%255; - rgb[1] = rgb[1]%255; - rgb[2] = rgb[2]%255; + var red = new Color(182, 70, 157); + var yellow = new Color(221, 203, 85); + var blue = new Color(0, 130, 201); // Nextcloud blue + // Number of steps to go from a color to another + // 3 colors * 6 will result in 18 generated colors + var steps = 6; + + var palette1 = mixPalette(steps, red, yellow); + var palette2 = mixPalette(steps, yellow, blue); + var palette3 = mixPalette(steps, blue, red); - var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]); + var finalPalette = palette1.concat(palette2).concat(palette3); - // Classic formulla to check the brigtness for our eye - // If too bright, lower the sat - var bright = Math.sqrt( 0.299 * Math.pow(rgb[0], 2) + 0.587 * Math.pow(rgb[1], 2) + 0.114 * Math.pow(rgb[2], 2) ); - if (bright >= 200) { - sat = 60; + // Convert a string to an integer evenly + function hashToInt(hash, maximum) { + var final = 0; + var result = Array(); + + // Splitting evenly the string + for (var i in hash) { + // chars in md5 goes up to f, hex:16 + result.push(parseInt(hash.charAt(i), 16) % 16); + } + // Adds up all results + for (var i in result) { + final += result[i]; + } + // chars in md5 goes up to f, hex:16 + return parseInt(final % maximum); } - return [parseInt(hsl[0] * 360), sat, lum]; + + return finalPalette[hashToInt(hash, steps * 3 )]; }; $.fn.imageplaceholder = function(seed, text, size) { text = text || seed; // Compute the hash - var hsl = seed.toHsl(); - this.css('background-color', 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)'); + var rgb = seed.toRgb(); + this.css('background-color', 'rgb('+rgb.r+', '+rgb.g+', '+rgb.b+')'); // Placeholders are square var height = this.height() || size || 32; diff --git a/lib/private/Avatar.php b/lib/private/Avatar.php index 14632075ca1..9a1b9020207 100644 --- a/lib/private/Avatar.php +++ b/lib/private/Avatar.php @@ -1,6 +1,7 @@ <?php /** * @copyright Copyright (c) 2016, ownCloud, Inc. + * @copyright 2018 John Molakvoæ <skjnldsv@protonmail.com> * * @author Arthur Schiwon <blizzz@arthur-schiwon.de> * @author Christopher Schäpers <kondou@ts.unde.re> @@ -41,6 +42,15 @@ use OCP\IL10N; use OC_Image; use OCP\ILogger; +class Color { + public $r, $g, $b; + public function __construct($r, $g, $b) { + $this->r = $r; + $this->g = $g; + $this->b = $b; + } +} + /** * This class gets and sets users avatars. */ @@ -267,7 +277,7 @@ class Avatar implements IAvatar { $backgroundColor = $this->avatarBackgroundColor($userDisplayName); $im = imagecreatetruecolor($size, $size); - $background = imagecolorallocate($im, $backgroundColor[0], $backgroundColor[1], $backgroundColor[2]); + $background = imagecolorallocate($im, $backgroundColor->r, $backgroundColor->g, $backgroundColor->b); $white = imagecolorallocate($im, 255, 255, 255); imagefilledrectangle($im, 0, 0, $size, $size, $background); @@ -291,131 +301,86 @@ class Avatar implements IAvatar { } /** - * @param int $r - * @param int $g - * @param int $b - * @return double[] Array containing h s l in [0, 1] range + * Calculate steps between two Colors + * @param object Color $steps start color + * @param object Color $ends end color + * @return array [r,g,b] steps for each color to go from $steps to $ends */ - private function rgbToHsl($r, $g, $b) { - $r /= 255.0; - $g /= 255.0; - $b /= 255.0; - - $max = max($r, $g, $b); - $min = min($r, $g, $b); + private function stepCalc($steps, $ends) { + $step = array(); + $step[0] = ($ends[1]->r - $ends[0]->r) / $steps; + $step[1] = ($ends[1]->g - $ends[0]->g) / $steps; + $step[2] = ($ends[1]->b - $ends[0]->b) / $steps; + return $step; + } + /** + * Convert a string to an integer evenly + * @param string $hash the text to parse + * @param int $maximum the maximum range + * @return int between 0 and $maximum + */ + private function mixPalette($steps, $color1, $color2) { + $count = $steps + 1; + $palette = array($color1); + $step = $this->stepCalc($steps, [$color1, $color2]); + for ($i = 1; $i < $steps; $i++) { + $r = intval($color1->r + ($step[0] * $i)); + $g = intval($color1->g + ($step[1] * $i)); + $b = intval($color1->b + ($step[2] * $i)); + $palette[] = new Color($r, $g, $b); + } + return $palette; + } - $h = ($max + $min) / 2.0; - $l = ($max + $min) / 2.0; + /** + * Convert a string to an integer evenly + * @param string $hash the text to parse + * @param int $maximum the maximum range + * @return int between 0 and $maximum + */ + private function hashToInt($hash, $maximum) { + $final = 0; + $result = array(); - if($max === $min) { - $h = $s = 0; // Achromatic - } else { - $d = $max - $min; - $s = $l > 0.5 ? $d / (2 - $max - $min) : $d / ($max + $min); - switch($max) { - case $r: - $h = ($g - $b) / $d + ($g < $b ? 6 : 0); - break; - case $g: - $h = ($b - $r) / $d + 2.0; - break; - case $b: - $h = ($r - $g) / $d + 4.0; - break; - } - $h /= 6.0; + // Splitting evenly the string + for ($i=0; $i< strlen($hash); $i++) { + // chars in md5 goes up to f, hex:16 + $result[] = intval(substr($hash, $i, 1), 16) % 16; } - return [$h, $s, $l]; - + // Adds up all results + foreach ($result as $value) { + $final += $value; + } + // chars in md5 goes up to f, hex:16 + return intval($final % $maximum); } + /** * @param string $text - * @return int[] Array containting r g b in the range [0, 255] + * @return Color Object containting r g b int in the range [0, 255] */ - private function avatarBackgroundColor($text) { + function avatarBackgroundColor($text) { $hash = preg_replace('/[^0-9a-f]+/', '', $text); $hash = md5($hash); $hashChars = str_split($hash); + $red = new Color(182, 70, 157); + $yellow = new Color(221, 203, 85); + $blue = new Color(0, 130, 201); // Nextcloud blue + // Number of steps to go from a color to another + // 3 colors * 6 will result in 18 generated colors + $steps = 6; - // Init vars - $result = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0']; - $rgb = [0, 0, 0]; - $sat = 0.70; - $lum = 0.68; - $modulo = 16; + $palette1 = $this->mixPalette($steps, $red, $yellow); + $palette2 = $this->mixPalette($steps, $yellow, $blue); + $palette3 = $this->mixPalette($steps, $blue, $red); + $finalPalette = array_merge($palette1, $palette2, $palette3); - // Splitting evenly the string - foreach($hashChars as $i => $char) { - $result[$i % $modulo] .= intval($char, 16); - } - - // Converting our data into a usable rgb format - // Start at 1 because 16%3=1 but 15%3=0 and makes the repartition even - for($count = 1; $count < $modulo; $count++) { - $rgb[$count%3] += (int)$result[$count]; - } - - // Reduce values bigger than rgb requirements - $rgb[0] %= 255; - $rgb[1] %= 255; - $rgb[2] %= 255; - - $hsl = $this->rgbToHsl($rgb[0], $rgb[1], $rgb[2]); - - // Classic formula to check the brightness for our eye - // If too bright, lower the sat - $bright = sqrt(0.299 * ($rgb[0] ** 2) + 0.587 * ($rgb[1] ** 2) + 0.114 * ($rgb[2] ** 2)); - if ($bright >= 200) { - $sat = 0.60; - } - - return $this->hslToRgb($hsl[0], $sat, $lum); - } - - /** - * @param double $h Hue in range [0, 1] - * @param double $s Saturation in range [0, 1] - * @param double $l Lightness in range [0, 1] - * @return int[] Array containing r g b in the range [0, 255] - */ - private function hslToRgb($h, $s, $l){ - $hue2rgb = function ($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){ - $r = $l; - $g = $l; - $b = $l; // achromatic - }else{ - $q = $l < 0.5 ? $l * (1 + $s) : $l + $s - $l * $s; - $p = 2 * $l - $q; - $r = $hue2rgb($p, $q, $h + 1/3); - $g = $hue2rgb($p, $q, $h); - $b = $hue2rgb($p, $q, $h - 1/3); - } - - return array(round($r * 255), round($g * 255), round($b * 255)); + return $finalPalette[$this->hashToInt($hash, $steps * 3 )]; } public function userChanged($feature, $oldValue, $newValue) { |