Skip to content

Instantly share code, notes, and snippets.

@clok

clok/color-picker.js

Created April 29, 2012 14:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save clok/2550858 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save clok/2550858 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. clok revised this gist May 3, 2012. 1 changed file with 14 additions and 4 deletions.
    18 changes: 14 additions & 4 deletions color-picker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -54,7 +54,7 @@ ig.module(
    and populate a return array.
    */
    ColorPicker.prototype.genHexArray = function( hc1, hc2, steps ){
    var colorArray = [];
    var colorArray = new Array;

    // Place source color in as first element
    colorArray[0] = hc1.toString(16);
    @@ -104,7 +104,7 @@ ig.module(
    each source color. Total of 23 color codes.
    */
    ColorPicker.prototype.genMultiHexArray = function ( input, steps ){
    var multiColor = [];
    var multiColor = new Array;

    // Find each sequential pair to compare
    for(var i = 0; i < input.length - 1; i++){
    @@ -148,21 +148,31 @@ ig.module(
    return multiColor;
    }

    // function will return an array with [r,g,b,a] set to
    // appropriate values.
    ColorPicker.prototype.hexToRGBA = function ( hex ) {
    // Break hc1 into RGB components
    var d = [];
    var d = new Array;
    // R
    d[0] = parseInt(hex.substring(0,2),16);
    // G
    d[1] = parseInt(hex.substring(2,4),16);
    // B
    d[2] = parseInt(hex.substring(4,6),16);;
    d[2] = parseInt(hex.substring(4,6),16);
    // Alpha
    d[3] = 255;

    return d;
    }

    // Function will return a 'rgb( r,g,b )' string set to the
    // appropriate values.
    ColorPicker.prototype.hexToRGBstr = function ( hex ) {
    // Break hc1 into RGB components
    return "rgb( "+parseInt(hex.substring(0,2),16)+", "+parseInt(hex.substring(2,4),16)+", "+parseInt(hex.substring(4,6),16)+" )";
    }

    // Useful for checking front padding of a hex color code
    ColorPicker.prototype.frontPad = function ( hex ) {
    while (hex.length < 6) {
    hex = '0' + hex;
  2. clok revised this gist May 2, 2012. 1 changed file with 21 additions and 7 deletions.
    28 changes: 21 additions & 7 deletions color-picker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,10 +15,9 @@ ig.module(
    this.colors = this.genHexArray( 0xFFFFFF, 0xFF0000, 10 );

    // Generate default triColors Array with Green to Yellow to Red
    this.triColors = this.genMultiHexArray([0x00FF00, 0xFFFF00, 0xFF0000], 10);


    return(this);
    this.triColors = this.genMultiHexArray( [0x00FF00, 0xFFFF00, 0xFF0000], 50 );

    return;
    }

    /*
    @@ -47,7 +46,7 @@ ig.module(
    rethCol = '0' + rethCol;
    }

    return(rethCol);
    return rethCol;
    }

    /*
    @@ -92,7 +91,7 @@ ig.module(
    }
    }

    return(colorArray);
    return colorArray;
    }

    /*
    @@ -136,7 +135,7 @@ ig.module(
    }

    // Add the last color to the end of the array.
    multiColor.push( input[input.length - 1] );
    multiColor.push( input[input.length - 1].toString(16) );

    // Test that all hex color codes are properly front loaded
    for (var k = 0; k < multiColor.length; k++){
    @@ -149,6 +148,21 @@ ig.module(
    return multiColor;
    }

    ColorPicker.prototype.hexToRGBA = function ( hex ) {
    // Break hc1 into RGB components
    var d = [];
    // R
    d[0] = parseInt(hex.substring(0,2),16);
    // G
    d[1] = parseInt(hex.substring(2,4),16);
    // B
    d[2] = parseInt(hex.substring(4,6),16);;
    // Alpha
    d[3] = 255;

    return d;
    }

    ColorPicker.prototype.frontPad = function ( hex ) {
    while (hex.length < 6) {
    hex = '0' + hex;
  3. clok revised this gist May 1, 2012. 1 changed file with 116 additions and 33 deletions.
    149 changes: 116 additions & 33 deletions color-picker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,30 +5,42 @@ ig.module(

    )
    .defines(function(){

    // Initialize object with a default 10 color array fading from
    // Green to Red
    /*
    Initialize object with a default 10 color array fading from
    White to Red and with a Tri-Color array from Green to Yellow
    to Red gradient with 10 steps between each source color.
    */
    ColorPicker = function(){
    // Generate default Colors Array with Red to Green in 10 steps
    this.colors = this.genHexArray( 0x00FF00, 0xFF0000, 10 );
    // Generate default Colors Array with White to Red in 10 steps
    this.colors = this.genHexArray( 0xFFFFFF, 0xFF0000, 10 );

    // Generate default triColors Array with Green to Yellow to Red
    this.triColors = this.genMultiHexArray([0x00FF00, 0xFFFF00, 0xFF0000], 10);


    return(this);
    }

    // Select a color between color 1 (hc1) and color 2 (hc2)
    // based on an input ratio that denotes the point in the
    // gradient color should be selected from
    /*
    Select a color between color 1 (hc1) and color 2 (hc2)
    based on an input ratio that denotes the point in the
    gradient color should be selected from.
    */
    ColorPicker.prototype.pickHex = function( hc1, hc2, ratio ){
    if (ratio > 1) ratio = 1;
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;
    var r2 = hc2 >> 16;
    var g2 = hc2 >> 8 & 0xFF;
    var b2 = hc2 & 0xFF;
    r += (r2 - r) * ratio;
    g += (g2 - g) * ratio;
    b += (b2 - b) * ratio;
    var rethCol = (r<<16 | g<<8 | b).toString(16);

    // Break hc1 into RGB components
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;

    // RGB Delta between hc1 and hc2
    var rd = (hc2 >> 16) - r;
    var gd = (hc2 >> 8 & 0xFF) - g;
    var bd = (hc2 & 0xFF) - b;

    // Calculate new color and add it to the array
    var rethCol = ((r+rd*ratio)<<16 | (g+gd*ratio)<<8 | (b+bd*ratio)).toString(16);

    // Check that the converted hex string is properly "0" front loaded
    while (rethCol.length < 6) {
    @@ -38,37 +50,108 @@ ig.module(
    return(rethCol);
    }

    // Select n=steps colors between color 1 (hc1) and color 2 (hc2)
    // and populate a return array
    /*
    Select n=steps colors between color 1 (hc1) and color 2 (hc2)
    and populate a return array.
    */
    ColorPicker.prototype.genHexArray = function( hc1, hc2, steps ){
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;
    var r2 = hc2 >> 16;
    var g2 = hc2 >> 8 & 0xFF;
    var b2 = hc2 & 0xFF;
    var colorArray = [];

    // Place source color in as first element
    colorArray[0] = hc1.toString(16);

    // Break hc1 into RGB components
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;

    // RGB Delta between hc1 and hc2
    var rd = (hc2 >> 16) - r;
    var gd = (hc2 >> 8 & 0xFF) - g;
    var bd = (hc2 & 0xFF) - b;

    // smoother gradient
    steps++;

    // Determine new colors
    for (var i = 1; i < steps; i++){
    r += (r2 - r) * i/(steps-1);
    g += (g2 - g) * i/(steps-1);
    b += (b2 - b) * i/(steps-1);
    colorArray[i] = (r<<16 | g<<8 | b).toString(16);
    // Where are we on the gradient?
    var ratio = i/steps;

    // Calculate new color and add it to the array
    colorArray[i] = ((r+rd*ratio)<<16 | (g+gd*ratio)<<8 | (b+bd*ratio)).toString(16);
    }

    // Check that the converted hex strings are properly "0" front loaded
    // Tack on the last color to complete the gradient
    colorArray.push( hc2.toString(16) );

    // Test that all hex color codes are properly front loaded
    for (var j = 0; j < colorArray.length; j++){
    while (colorArray[j].length < 6) {
    colorArray[j] = '0' + colorArray[j];
    }
    }

    return(colorArray);
    }

    /*
    genMultiHexArray will take an input array of any number of hex colors
    and the number of steps to create a smooth gradient fade between the
    colors in sequence.
    Example: input = [0x00FF00, 0xFFFF00, 0xFF0000] with steps = 10
    will produce a Green to Yellow to Red gradient with 10 steps between
    each source color. Total of 23 color codes.
    */
    ColorPicker.prototype.genMultiHexArray = function ( input, steps ){
    var multiColor = [];

    // Find each sequential pair to compare
    for(var i = 0; i < input.length - 1; i++){
    // Set hex colors
    var hc1 = input[i];
    var hc2 = input[i+1];

    // Save first color
    multiColor.push( hc1.toString(16) );

    // Break hc1 into RGB components
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;

    // Determine RGB differences between hc1 and hc2
    var rd = (hc2 >> 16)-r;
    var gd = (hc2 >> 8 & 0xFF)-g;
    var bd = (hc2 & 0xFF)-b;

    // Determine new colors
    for (var j = 1; j < steps; j++){
    // Where are we on the gradient?
    var ratio = j/steps;
    // Calculate new color and add it to the array
    multiColor.push( ((r+rd*ratio)<<16 | (g+gd*ratio)<<8 | (b+bd*ratio)).toString(16) );
    }
    }

    // Add the last color to the end of the array.
    multiColor.push( input[input.length - 1] );

    // Test that all hex color codes are properly front loaded
    for (var k = 0; k < multiColor.length; k++){
    while (multiColor[k].length < 6) {
    multiColor[k] = '0' + multiColor[k];
    }
    }

    // Return the new array of colors.
    return multiColor;
    }

    ColorPicker.prototype.frontPad = function ( hex ) {
    while (hex.length < 6) {
    hex = '0' + hex;
    hex = '0' + hex;
    }
    return hex;
    }
  4. clok revised this gist Apr 29, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions color-picker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,8 +31,8 @@ ig.module(
    var rethCol = (r<<16 | g<<8 | b).toString(16);

    // Check that the converted hex string is properly "0" front loaded
    while (retCol.length < 6) {
    retCol = '0' + retCol;
    while (rethCol.length < 6) {
    rethCol = '0' + rethCol;
    }

    return(rethCol);
  5. clok revised this gist Apr 29, 2012. 1 changed file with 21 additions and 0 deletions.
    21 changes: 21 additions & 0 deletions color-picker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -29,6 +29,12 @@ ig.module(
    g += (g2 - g) * ratio;
    b += (b2 - b) * ratio;
    var rethCol = (r<<16 | g<<8 | b).toString(16);

    // Check that the converted hex string is properly "0" front loaded
    while (retCol.length < 6) {
    retCol = '0' + retCol;
    }

    return(rethCol);
    }

    @@ -49,6 +55,21 @@ ig.module(
    b += (b2 - b) * i/(steps-1);
    colorArray[i] = (r<<16 | g<<8 | b).toString(16);
    }

    // Check that the converted hex strings are properly "0" front loaded
    for (var j = 0; j < colorArray.length; j++){
    while (colorArray[j].length < 6) {
    colorArray[j] = '0' + colorArray[j];
    }
    }

    return(colorArray);
    }

    ColorPicker.prototype.frontPad = function ( hex ) {
    while (hex.length < 6) {
    hex = '0' + hex;
    }
    return hex;
    }
    });
  6. clok created this gist Apr 29, 2012.
    54 changes: 54 additions & 0 deletions color-picker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    ig.module(
    'plugins.color-picker'
    )
    .requires(

    )
    .defines(function(){

    // Initialize object with a default 10 color array fading from
    // Green to Red
    ColorPicker = function(){
    // Generate default Colors Array with Red to Green in 10 steps
    this.colors = this.genHexArray( 0x00FF00, 0xFF0000, 10 );
    return(this);
    }

    // Select a color between color 1 (hc1) and color 2 (hc2)
    // based on an input ratio that denotes the point in the
    // gradient color should be selected from
    ColorPicker.prototype.pickHex = function( hc1, hc2, ratio ){
    if (ratio > 1) ratio = 1;
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;
    var r2 = hc2 >> 16;
    var g2 = hc2 >> 8 & 0xFF;
    var b2 = hc2 & 0xFF;
    r += (r2 - r) * ratio;
    g += (g2 - g) * ratio;
    b += (b2 - b) * ratio;
    var rethCol = (r<<16 | g<<8 | b).toString(16);
    return(rethCol);
    }

    // Select n=steps colors between color 1 (hc1) and color 2 (hc2)
    // and populate a return array
    ColorPicker.prototype.genHexArray = function( hc1, hc2, steps ){
    var r = hc1 >> 16;
    var g = hc1 >> 8 & 0xFF;
    var b = hc1 & 0xFF;
    var r2 = hc2 >> 16;
    var g2 = hc2 >> 8 & 0xFF;
    var b2 = hc2 & 0xFF;
    var colorArray = [];
    colorArray[0] = hc1.toString(16);
    for (var i = 1; i < steps; i++){
    r += (r2 - r) * i/(steps-1);
    g += (g2 - g) * i/(steps-1);
    b += (b2 - b) * i/(steps-1);
    colorArray[i] = (r<<16 | g<<8 | b).toString(16);
    }
    return(colorArray);
    }
    });