From ab8a0a3e6e1af9c8e6e425e9db80041b668fb7a5 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Thu, 5 May 2011 17:55:57 -0400 Subject: [PATCH] New color luminosity algorithm. Used to detect whether a light or dark text color should be used in the River of News feed title floater bar. --- media/js/jquery.newsblur.js | 27 +++++++++++++++++++++++++++ media/js/newsblur/reader.js | 12 +++++------- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/media/js/jquery.newsblur.js b/media/js/jquery.newsblur.js index 96295d84c..38cbde456 100644 --- a/media/js/jquery.newsblur.js +++ b/media/js/jquery.newsblur.js @@ -130,6 +130,33 @@ NEWSBLUR.log = function(msg) { $.extend({ + // Color format: {r: 1, g: .5, b: 0} + textColor: function(background_color) { + var contrast = function (color1, color2) { + var lum1 = luminosity(color1); + var lum2 = luminosity(color2); + if(lum1 > lum2) + return (lum1 + 0.05) / (lum2 + 0.05); + return (lum2 + 0.05) / (lum1 + 0.05); + }; + + var luminosity = function (color) { + var r = color.r, g = color.g, b = color.b; + var red = (r <= 0.03928) ? r/12.92 : Math.pow(((r + 0.055)/1.055), 2.4); + var green = (g <= 0.03928) ? g/12.92 : Math.pow(((g + 0.055)/1.055), 2.4); + var blue = (b <= 0.03928) ? b/12.92 : Math.pow(((b + 0.055)/1.055), 2.4); + + return 0.2126 * red + 0.7152 * green + 0.0722 * blue; + }; + + if (contrast(background_color, {r: 1, g: 1, b: 1}) > + contrast(background_color, {r: .5, g: .5, b: .5})) { + return 'white'; + } else { + return 'black'; + } + }, + favicon: function(feed_favicon, empty_on_missing) { if (feed_favicon && feed_favicon.indexOf('data:image/png;base64,') != -1) return feed_favicon; diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index 1a8cade84..66c249d45 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -2552,13 +2552,11 @@ var color = feed.favicon_color; if (!color) return false; - var r = parseInt(color.substr(0, 2), 16); - var g = parseInt(color.substr(2, 2), 16); - var b = parseInt(color.substr(4, 2), 16); - var avg = (r + g + b) / 3; - - // 200/256 = #C6C6C6 - return avg > 200; + var r = parseInt(color.substr(0, 2), 16) / 255.0; + var g = parseInt(color.substr(2, 2), 16) / 255.0; + var b = parseInt(color.substr(4, 2), 16) / 255.0; + console.log(['is_feed_floater_gradient_light', r, g, b, $.textColor({r: r, g: g, b: b})]); + return $.textColor({r: r, g: g, b: b}) != 'white'; }, generate_gradient: function(feed, type) {