Using zColor Library : Color « Development « JavaScript Tutorial






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
    <head>
        <title>zColor Example</title>
        <script type="text/javascript">
/*------------------------------------------------------------------------------
 * JavaScript zColor Library
 * Version 0.1
 * by Nicholas C. Zakas, http://www.nczonline.net/
 * Copyright (c) 2004-2005 Nicholas C. Zakas. All Rights Reserved.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307 USA
 *------------------------------------------------------------------------------
 */

 
/**
 * Represents an RGB color.
 * @class
 * @scope public
 * @constructor
 * @param iRed The red value for the color (0-255)
 * @param iGreen The green value for the color (0-255)
 * @param iBlue The blue value for the color (0-255)
 */
function zRGB(iRed, iGreen, iBlue) {

    /**
     * The red value for the color.
     * @scope public
     */
    this.r /*:int */ = parseInt(iRed,10);
    
    /**
     * The green value for the color.
     * @scope public
     */    
    this.g /*:int */ = parseInt(iGreen,10);
    
    /**
     * The blue value for the color.
     * @scope public
     */    
    this.b /*:int */= parseInt(iBlue,10);
}

/**
 * Creates an RGB color from a hex string.
 * @scope public
 * @param sHex The hex string.
 * @return The RGB object for the hex string.
 */
zRGB.fromHexString = function (sHex /*: String */) /*:zRGB */ {

    //eliminate the pound sign
    if (sHex.charAt(0) == "#") {
        sHex = sHex.substring(1);
    } //ENd: if (sHex.charAt(0) == "#")
    
    //extract and convert the red, green, and blue values
    var iRed = parseInt(sHex.substring(0,2),16);
    var iGreen = parseInt(sHex.substring(2,4),16);
    var iBlue = parseInt(sHex.substring(4,6),16);
    
    //return an array
    return new zRGB(iRed,iGreen,iBlue);
};

/**
 * Returns a hex representation of the color.
 * @scope public
 * @return A hex representation of the color.
 */
zRGB.prototype.toHexString = function () /*:String */ {

    //extract and convert the red, green, and blue values
    var sRed = this.r.toString(16).toUpperCase();
    var sGreen = this.g.toString(16).toUpperCase();
    var sBlue = this.b.toString(16).toUpperCase();
    
    //make sure there are two digits in each code
    if (sRed.length == 1) {
            sRed = "0" + sRed;
    } //End: if (sRed.length == 1)    
    if (sGreen.length == 1) {
            sGreen = "0" + sGreen;
    } //End: if (sGreen.length == 1)    
    if (sBlue.length == 1) {
            sBlue = "0" + sBlue;
    } //End: if (sBlue.length == 1)    
    
    //return the hex code
    return "#" + sRed + sGreen + sBlue;
};

/**
 * Returns an HSL representation of the color.
 * @scope public
 * @return An HSL representation of the color.
 */
zRGB.prototype.toHSL = function () /*:zHSL */ {
    
    var iMax = Math.max(this.r, this.g, this.b);
    var iMin = Math.min(this.r, this.g, this.b);
    var iDelta = iMax-iMin;

    var iLum = Math.round((iMax+iMin)/2);
    var iHue = 0;
    var iSat = 0;
    
    if (iDelta > 0) {
        iSat = Math.ceil(((iLum < (0.5*255)) ? iDelta/(iMax + iMin) : iDelta/((2*255)-iMax-iMin))*255);

        var iRedC = (iMax-this.r)/iDelta;
        var iGreenC = (iMax-this.g)/iDelta;
        var iBlueC = (iMax-this.b)/iDelta;
        
        if (this.r == iMax) {
            iHue = iBlueC - iGreenC;                
        } else if (this.g == iMax) {
            iHue = 2.0 + iRedC - iBlueC;
        } else {
            iHue = 4.0 + iGreenC - iRedC;
        }
        
        iHue /= 6.0;
        
        if (iHue < 0) {
            iHue += 1.0;
        }

        iHue = Math.round(iHue * 255);
    }
    
    return new zHSL(iHue,iSat,iLum);
};

/**
 * Returns the color in a string form.
 * @scope public
 * @return The color in a string form.
 */
zRGB.prototype.toString = function () /*:String */ {
    return "rgb(" + this.r + "," + this.g + "," + this.b + ")";
};

/**
 * Represents an HSL color.
 * @class
 * @scope public
 * @constructor
 * @param iHue The hue value for the color (0-255)
 * @param iSat The saturation value for the color (0-255)
 * @param iLum The luminosity value for the color (0-255)
 */
function zHSL(iHue, iSat, iLum) {

    /**
     * The hue value for the color.
     * @scope public
     */
    this.h /*:int */ = parseInt(iHue,10);
    
    /**
     * The saturation value for the color.
     * @scope public
     */    
    this.s /*:int */ = parseInt(iSat,10);
    
    /**
     * The luminosity value for the color.
     * @scope public
     */    
    this.l /*:int */= parseInt(iLum,10);
}

/**
 * Converts the color into RGB form.
 * @scope public
 * @return An RGB version of the color.
 */
zHSL.prototype.toRGB = function () /*:zRGB */ {

    iHue = this.h/255;
    iSat = this.s/255;
    iLum = this.l/255;

    var iRed, iGreen, iBlue;
    
    if (iSat == 0) {
        iRed = iGreen = iBlue = iLum;        
    } else {

        var m1, m2;
        
        if (iLum <= 0.5) {
            m2 = iLum * (1+iSat);
        } else {
            m2 = iLum + iSat - (iLum * iSat);
        }
            
        m1 = 2.0 * iLum - m2;
        
        hf2 = iHue + 1/3;
        if (hf2 < 0) hf2 = hf2 + 1;
        if (hf2 > 1) hf2 = hf2 - 1;
        if (6 * hf2 < 1) {
            iRed = (m1+(m2-m1)*hf2*6);
        } else {
            if (2 * hf2 < 1) {
                iRed = m2;
            } else {
                if (3.0*hf2 < 2.0) {
                    iRed = (m1+(m2-m1)*((2.0/3.0)-hf2)*6.0);
                } else {
                    iRed = m1;
                }
            }
        }

        //Calculate Green                    
        if (iHue < 0) {iHue = iHue + 1.0;}
        if (iHue > 1) {iHue = iHue - 1.0;}
        if (6.0 * iHue < 1){
            iGreen = (m1+(m2-m1)*iHue*6.0);}
        else {
            if (2.0 * iHue < 1){
                iGreen = m2;
            } else {
                if (3.0*iHue < 2.0) {
                    iGreen = (m1+(m2-m1)*((2.0/3.0)-iHue)*6.0);
                } else {
                    iGreen = m1;
                }
            } 
        }
        
        //Calculate Blue
        hf2=iHue-1.0/3.0;                    
        if (hf2 < 0) {hf2 = hf2 + 1.0;}
        if (hf2 > 1) {hf2 = hf2 - 1.0;}
        if (6.0 * hf2 < 1) {
             iBlue = (m1+(m2-m1)*hf2*6.0);
        } else {
             if (2.0 * hf2 < 1){
                 iBlue = m2;
             } else {
                 if (3.0*hf2 < 2.0) {
                     iBlue = (m1+(m2-m1)*((2.0/3.0)-hf2)*6.0);
                 } else {
                     iBlue = m1;
                 }
             } 
        }
    
    }    
    return new zRGB(Math.round(iRed*255),Math.round(iGreen*255),Math.round(iBlue*255));
};

/**
 * Returns the color in a string form.
 * @scope public
 * @return The color in a string form.
 */
zHSL.prototype.toString = function () /*:String */ {
    return "hsl(" + this.h + "," + this.s + "," + this.l + ")";
};

        </script>
        <script type="text/javascript">
        
            function convertToHSL() {
                var iRed = parseInt(document.getElementById("txtRed").value);
                var iBlue = parseInt(document.getElementById("txtBlue").value);
                var iGreen = parseInt(document.getElementById("txtGreen").value);
                
                var oRGB = new zRGB(iRed, iGreen, iBlue);
                var oHSL = oRGB.toHSL();

                document.getElementById("txtHue").value = oHSL.h;
                document.getElementById("txtSat").value = oHSL.s;
                document.getElementById("txtLum").value = oHSL.l;
                
            }
            
            function convertToRGB() {
                var iHue = parseInt(document.getElementById("txtHue").value);
                var iSat = parseInt(document.getElementById("txtSat").value);
                var iLum = parseInt(document.getElementById("txtLum").value);
                
                var oHSL = new zHSL(iHue, iSat, iLum);
                var oRGB = oHSL.toRGB();
                
                document.getElementById("txtRed").value = oRGB.r;
                document.getElementById("txtGreen").value = oRGB.g;
                document.getElementById("txtBlue").value = oRGB.b;
                
            }
                     
        </script>
    </head>
    <body>
        <form>
            <table border="0">
            <tr>
                <td>
                    R: <input type="text" id="txtRed" /><br />
                    G: <input type="text" id="txtGreen" /><br />
                    B: <input type="text" id="txtBlue" /><br />
                    <input type="button" value="to HSL -&gt;" onclick="convertToHSL()"/>
                </td>
                <td>
                    H: <input type="text" id="txtHue" /><br />
                    S: <input type="text" id="txtSat" /><br />
                    L: <input type="text" id="txtLum" /><br />
                    <input type="button" value="&lt;- to RGB" onclick="convertToRGB()"/>
                </td>
            </tr>
            </table>
        </form>

    </body>
</html>








4.3.Color
4.3.1.Using zColor Library