mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #8535 from nextcloud/new-color-generator 

New color generator algorithm
This commit is contained in:
Jan-Christoph Borchardt 2018-04-12 14:37:53 +02:00 committed by GitHub
parent fb34ef1093 275b9868b2
commit 04f47a7653
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 141 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
core/js/placeholder.js
View File

@ -2,7 +2,7 @@
* ownCloud * ownCloud
* *
* @author John Molakvoæ * @author John Molakvoæ
* @copyright 2016-2017 John Molakvoæ <skjnldsv@protonmail.com> * @copyright 2016-2018 John Molakvoæ <skjnldsv@protonmail.com>
* @author Morris Jobke * @author Morris Jobke
* @copyright 2013 Morris Jobke <morris.jobke@gmail.com> * @copyright 2013 Morris Jobke <morris.jobke@gmail.com>
* *
@ -36,7 +36,7 @@
* *
* Which will result in: * 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: * You may also call it like this, to have a different background, than the seed:
* *
@ -44,25 +44,24 @@
* *
* Resulting in: * 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 ($) { (function ($) {
String.prototype.toHsl = function() { String.prototype.toRgb = function() {
var hash = this.toLowerCase().replace(/[^0-9a-f]+/g, ''); var hash = this.toLowerCase().replace(/[^0-9a-f]+/g, '');
// Already a md5 hash? // Already a md5 hash?
@ -70,65 +69,74 @@
hash = md5(hash); hash = md5(hash);
} }
function rgbToHsl(r, g, b) { function Color(r,g,b) {
r /= 255; g /= 255; b /= 255; this.r = r;
var max = Math.max(r, g, b), min = Math.min(r, g, b); this.g = g;
var h, s, l = (max + min) / 2; this.b = b;
if(max === min) { }
h = s = 0; // achromatic
} else { function stepCalc(steps, ends) {
var d = max - min; var step = new Array(3);
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); step[0] = (ends[1].r - ends[0].r) / steps;
switch(max) { step[1] = (ends[1].g - ends[0].g) / steps;
case r: h = (g - b) / d + (g < b ? 6 : 0); break; step[2] = (ends[1].b - ends[0].b) / steps;
case g: h = (b - r) / d + 2; break; return step;
case b: h = (r - g) / d + 4; break; }
}
h /= 6; 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 [h, s, l]; return palette;
} }
// Init vars var red = new Color(182, 70, 157);
var result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; var yellow = new Color(221, 203, 85);
var rgb = [0, 0, 0]; var blue = new Color(0, 130, 201); // Nextcloud blue
var sat = 70; // Number of steps to go from a color to another
var lum = 68; // 3 colors * 6 will result in 18 generated colors
var modulo = 16; var steps = 6;
// Splitting evenly the string var palette1 = mixPalette(steps, red, yellow);
for(var i in hash) { var palette2 = mixPalette(steps, yellow, blue);
result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString(); var palette3 = mixPalette(steps, blue, red);
var finalPalette = palette1.concat(palette2).concat(palette3);
// 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);
} }
// Converting our data into a usable rgb format return finalPalette[hashToInt(hash, steps * 3 )];
// 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]);
}
// Reduce values bigger than rgb requirements
rgb[0] = rgb[0]%255;
rgb[1] = rgb[1]%255;
rgb[2] = rgb[2]%255;
var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
// 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;
}
return [parseInt(hsl[0] * 360), sat, lum];
}; };
$.fn.imageplaceholder = function(seed, text, size) { $.fn.imageplaceholder = function(seed, text, size) {
text = text || seed; text = text || seed;
// Compute the hash // Compute the hash
var hsl = seed.toHsl(); var rgb = seed.toRgb();
this.css('background-color', 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)'); this.css('background-color', 'rgb('+rgb.r+', '+rgb.g+', '+rgb.b+')');
// Placeholders are square // Placeholders are square
var height = this.height() || size || 32; var height = this.height() || size || 32;

189
lib/private/Avatar.php
View File

@ -1,6 +1,7 @@
<?php <?php
/** /**
* @copyright Copyright (c) 2016, ownCloud, Inc. * @copyright Copyright (c) 2016, ownCloud, Inc.
* @copyright 2018 John Molakvoæ <skjnldsv@protonmail.com>
* *
* @author Arthur Schiwon <blizzz@arthur-schiwon.de> * @author Arthur Schiwon <blizzz@arthur-schiwon.de>
* @author Christopher Schäpers <kondou@ts.unde.re> * @author Christopher Schäpers <kondou@ts.unde.re>
@ -41,6 +42,15 @@ use OCP\IL10N;
use OC_Image; use OC_Image;
use OCP\ILogger; 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. * This class gets and sets users avatars.
*/ */
@ -267,7 +277,7 @@ class Avatar implements IAvatar {
$backgroundColor = $this->avatarBackgroundColor($userDisplayName); $backgroundColor = $this->avatarBackgroundColor($userDisplayName);
$im = imagecreatetruecolor($size, $size); $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); $white = imagecolorallocate($im, 255, 255, 255);
imagefilledrectangle($im, 0, 0, $size, $size, $background); imagefilledrectangle($im, 0, 0, $size, $size, $background);
@ -291,131 +301,86 @@ class Avatar implements IAvatar {
} }
/** /**
* @param int $r * Calculate steps between two Colors
* @param int $g * @param object Color $steps start color
* @param int $b * @param object Color $ends end color
* @return double[] Array containing h s l in [0, 1] range * @return array [r,g,b] steps for each color to go from $steps to $ends
*/ */
private function rgbToHsl($r, $g, $b) { private function stepCalc($steps, $ends) {
$r /= 255.0; $step = array();
$g /= 255.0; $step[0] = ($ends[1]->r - $ends[0]->r) / $steps;
$b /= 255.0; $step[1] = ($ends[1]->g - $ends[0]->g) / $steps;
$step[2] = ($ends[1]->b - $ends[0]->b) / $steps;
$max = max($r, $g, $b); return $step;
$min = min($r, $g, $b);
$h = ($max + $min) / 2.0;
$l = ($max + $min) / 2.0;
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;
}
return [$h, $s, $l];
} }
/**
* 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;
}
/**
* 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();
// 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;
}
// 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 * @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 = preg_replace('/[^0-9a-f]+/', '', $text);
$hash = md5($hash); $hash = md5($hash);
$hashChars = str_split($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 $palette1 = $this->mixPalette($steps, $red, $yellow);
$result = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0']; $palette2 = $this->mixPalette($steps, $yellow, $blue);
$rgb = [0, 0, 0]; $palette3 = $this->mixPalette($steps, $blue, $red);
$sat = 0.70;
$lum = 0.68;
$modulo = 16;
$finalPalette = array_merge($palette1, $palette2, $palette3);
// Splitting evenly the string return $finalPalette[$this->hashToInt($hash, $steps * 3 )];
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));
} }
public function userChanged($feature, $oldValue, $newValue) { public function userChanged($feature, $oldValue, $newValue) {