Merge pull request #8535 from nextcloud/new-color-generator
New color generator algorithm
This commit is contained in:
Jan-Christoph Borchardt
GitHub
commit
04f47a7653
|
|
@ -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;
|
||||
function Color(r,g,b) {
|
||||
this.r = r;
|
||||
this.g = g;
|
||||
this.b = b;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 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;
|
||||
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;
|
||||
|
||||
// Splitting evenly the string
|
||||
for(var i in hash) {
|
||||
result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString();
|
||||
var palette1 = mixPalette(steps, red, yellow);
|
||||
var palette2 = mixPalette(steps, yellow, blue);
|
||||
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
|
||||
// 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];
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
||||
$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];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue