Merge pull request #8535 from nextcloud/new-color-generator
New color generator algorithm
This commit is contained in:
commit
04f47a7653
|
@ -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 {
|
|
||||||
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];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Init vars
|
function stepCalc(steps, ends) {
|
||||||
var result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
var step = new Array(3);
|
||||||
var rgb = [0, 0, 0];
|
step[0] = (ends[1].r - ends[0].r) / steps;
|
||||||
var sat = 70;
|
step[1] = (ends[1].g - ends[0].g) / steps;
|
||||||
var lum = 68;
|
step[2] = (ends[1].b - ends[0].b) / steps;
|
||||||
var modulo = 16;
|
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 palette;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 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
|
// Splitting evenly the string
|
||||||
for(var i in hash) {
|
for (var i in hash) {
|
||||||
result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString();
|
// 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;
|
||||||
|
|
|
@ -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;
|
/**
|
||||||
|
* 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;
|
||||||
}
|
}
|
||||||
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 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) {
|
||||||
|
|
Loading…
Reference in New Issue