Support for Universal Light Primary & Secondary colors with visible icons

rogerwhite commented 11 years ago

Problem:

If color settings are like the following : "colors": { "primary": "#fff", "secondary": "#efefef", "text": "#000" }, ....

The icons are washed out as the base color on the icons are white.

Solution:

Create core tab icons in #000 to go along with the default #fff . #000 icons go to a separate folder "icons/dark" or along these lines.

data.json

"colors": { "primary": "#fff", "secondary": "#efefef", "text": "#000" }, "lighttheme": true

The lighttheme is optional. Default/Omission is always false making it backward compatible with previous version data.json files.

core.js

build: function(_rebuild) {
    APP.log("debug", "APP.build");

           //checks for light/dark color values from data.json
           if(APP.Settings.lighttheme) {
        var iconlocation = "/icons/dark";
    } else {
        var iconlocation = "/icons/";
    }

    var tabs = [];

    for(var i = 0, x = APP.Nodes.length; i < x; i++) {
        tabs.push({
            id: i,
            title: APP.Nodes[i].title,
            //image: "/icons/" + APP.Nodes[i].image + ".png",
            image: iconlocation + APP.Nodes[i].image + ".png", //changed line 
            controller: APP.Nodes[i].type.toLowerCase()
        });
    }

Thoughts?

mcongrove commented 11 years ago

What if, instead of requiring that user input, we do a calculation really quick on the primary color and see if it's a lighter or darker shade?

http://stackoverflow.com/a/6179495

If it's a lighter shade, we use black; or it's darker, use white. This would also be helpful elsewhere throughout the application, I think.

rogerwhite commented 11 years ago

Interesting. Let me look at the StackOverflow link ...

mcongrove commented 11 years ago

http://content.screencast.com/users/mcongrove/folders/Jing/media/7310bb5f-9bbd-48d5-bf6e-553a89315092/00000152.png

I edited it a bit and got it working pretty reliably. I'm going to clean up the code and then I'll post it for review/comment.

mcongrove commented 11 years ago

Here we go:

http://www.mattcongrove.com/files/colorDetection.html

rogerwhite commented 11 years ago

@mcongrove That was quick and awesome. I did not even get to look at the link yet!

rogerwhite commented 11 years ago

What happens if a user adds "white" instead of "#fff"? That will need to be accounted for.

mcongrove commented 11 years ago

The user should be entering in hex values. If they disobey that suggestion, we'll fall back to white as default. Let me test this code and make sure it will work if it's a non-hex value.

mcongrove commented 11 years ago

Alright, I added fallback support as described in my last comment. Commit is here: https://github.com/mcongrove/ChariTi/commit/7836629a4506da594d2eaf6fd27f4639b0e340e8

mcongrove commented 11 years ago

For future reference for anyone looking, you can access these values as follows:

APP.Settings.colors.primary = "#FFF";
APP.Settings.colors.secondary = "#000";

APP.Settings.colors.hsb.primary = {
    h: 0,
    s: 0,
    b: 100
};

APP.Settings.colors.hsb.secondary = {
    h: 0,
    s: 0,
    b: 0
};

Any color with a brightness (b) over 60 should have black overlays, anything below should be white.

rogerwhite commented 11 years ago

Sweet!

Here is an alternate code I found ( just for personal reference ) and hooked into that sample link ( http://www.mattcongrove.com/files/colorDetection.html ) that uses Luminance from 0-255

http://f5me.com/color/

.

mcongrove commented 11 years ago

You can now also get a quick look at the theme by accessing APP.Settings.colors.theme. Values are dark or light.

rogerwhite commented 11 years ago

dark/light "more icon" not showing up.

com.chariti.tabs/controllers/widget.js Line ~ 106