ui-avatars icon indicating copy to clipboard operation
ui-avatars copied to clipboard

Feature: default avatar color based on hash of name

Open dbkaplun opened this issue 8 years ago • 8 comments

dbkaplun avatar Oct 07 '17 19:10 dbkaplun

Thanks for adding this! 👍 I’ll put some work into this

LasseRafn avatar Oct 07 '17 20:10 LasseRafn

Not sure if it's any help, but here is a piece of code what I'm currently using to create/calculate background and font colors based on the hash of name (so that they still stay constant throughout the application):

$backgrounColor = substr(md5($userId)), 0, 6);
$fontColor = 'fff';
          
$colors = [
    'red'   => base_convert(substr($backgrounColor, 0, 2), 16, 10),
    'green' => base_convert(substr($backgrounColor, 2, 2), 16, 10),
    'blue'  => base_convert(substr($backgrounColor, 4, 2), 16, 10)
];

// Custom - more light - calculation for fontcolor. 
// This was found somewhere from interwebz but cannot find the url. 
// So cannot give the thanks to right person. :(
if(($colors['red'] * 0.299 + $colors['green'] * 0.587 + $colors['blue'] * 0.114) > 186) {
    $fontColor = '000';
}

// Contrast calculation based on the W3C Recommendations - https://www.w3.org/TR/WCAG20/
// foreach ($colors as $colorCode => $colorValue) {
//    $c = $colorValue / 255;
//    if($c <= 0.03928) {
//       $colors[$colorCode] = $c / 12.92;
//    } else {
//       $colors[$colorCode] = (($c+0.055)/1.055) ^ 2.4;
//    }
// }
//            
// $luminance = 0.2126 * $colors['red'] + 
//              0.7152 * $colors['green'] + 
//              0.0722 * $colors['blue'];
//            
// if($luminance > 0.179) {
//     $fontColor = '000';
// }

HsRealDev avatar Oct 17 '17 09:10 HsRealDev

I am really interested in using this kind of approach and maybe also a randomness of sort, may I use/modify the present code giving credits where those are due? Thx.

Could the snippet make the use of more colors related to letters (say 23 or so on)? Didn't accurately read/tested it..

3D-I avatar Oct 21 '17 19:10 3D-I

Thanks you so much for this, @HsRealDev! I will test this and maybe make some adjustments (haven't tested it yet)

LasseRafn avatar Oct 21 '17 19:10 LasseRafn

@3D-I - yes, of course you can use it and modify as much as you want. I'm using that to call Lasse's awesome api in my proof of concept projects and I calculate the color always based on the user's ID (in my case MongoId). This way the the avatar's will look like "random" but still be always the same for the user throughout the app.

HsRealDev avatar Oct 22 '17 09:10 HsRealDev

@LasseRafn You are welcome! Good to hear I could be some help back since your API saved me some hours :-)

HsRealDev avatar Oct 22 '17 09:10 HsRealDev

Another interesting function related and very similar. That's JS though.

https://github.com/tcat-tamu/sda.site.web/blob/342fde2e3d840e317b9e0931594c36e165a7c3ba/apps/site/src/app/vwise/components/panel/panel.directive.js#L177

3D-I avatar Nov 04 '17 20:11 3D-I

Any news on this? I am bound to rewrite my phpBB extension from scratch and I will be more than happy to have this function working. Thanks.

3D-I avatar Jul 13 '19 03:07 3D-I