dojox/color/Palette.js

  • Provides:

    • dojox.color.Palette

  • Requires:

    • dojox.color in common

  • ret.colors

    • summary
  • dojox.color.Palette
       
    • type
      Function
    • parameters: 
      • base: (typeof String|Array|dojox.color.Color|dojox.color.Palette)
    • source: [view] 
                    
      

                      this.colors = [];
        if(base instanceof dojox.color.Palette){
         this.colors = base.colors.slice(0);
        }
        else if(base instanceof dojox.color.Color){
         this.colors = [ null, null, base, null, null ];
        }
        else if(dojo.isArray(base)){
         this.colors = dojo.map(base.slice(0), function(item){
          if(dojo.isString(item)){ return new dojox.color.Color(item); }
          return item;
         });
        }
        else if (dojo.isString(base)){
         this.colors = [ null, null, new dojox.color.Color(base), null, null ];
        }
                    
      
                    
    • summary
      An object that represents a palette of colors.
    • description
      A Palette is a representation of a set of colors.  While the standard
number of colors contained in a palette is 5, it can really handle any
number of colors.

A palette is useful for the ability to transform all the colors in it
using a simple object-based approach.  In addition, you can generate
palettes using dojox.color.Palette.generate; these generated palettes
are based on the palette generators at http://kuler.adobe.com.
  • dojox.color.Palette.colors
       
    • type
      dojox.color.Color[
    • summary
      The actual color references in this palette.
  • dojox.color.Palette.__transformArgs
       
    • type
      Function
    • parameters: 
      • use: (typeof String)
        Specify the color model to use for the transformation.  Can be "rgb", "rgba", "hsv", "hsl", "cmy", "cmyk".
      • dr: (typeof Number)
        The delta to be applied to the red aspect of the RGB/RGBA color model.
      • dg: (typeof Number)
        The delta to be applied to the green aspect of the RGB/RGBA color model.
      • db: (typeof Number)
        The delta to be applied to the blue aspect of the RGB/RGBA color model.
      • da: (typeof Number)
        The delta to be applied to the alpha aspect of the RGBA color model.
      • dc: (typeof Number)
        The delta to be applied to the cyan aspect of the CMY/CMYK color model.
      • dm: (typeof Number)
        The delta to be applied to the magenta aspect of the CMY/CMYK color model.
      • dy: (typeof Number)
        The delta to be applied to the yellow aspect of the CMY/CMYK color model.
      • dk: (typeof Number)
        The delta to be applied to the black aspect of the CMYK color model.
      • dh: (typeof Number)
        The delta to be applied to the hue aspect of the HSL/HSV color model.
      • ds: (typeof Number)
        The delta to be applied to the saturation aspect of the HSL/HSV color model.
      • dv: (typeof Number)
        The delta to be applied to the value aspect of the HSV color model.
      • dl: (typeof Number)
        The delta to be applied to the luminosity aspect of the HSL color model.
    • source: [view] 
                    
      

                     this.use = use;
       this.dr = dr;
       this.dg = dg;
       this.db = db;
       this.da = da;
       this.dc = dc;
       this.dm = dm;
       this.dy = dy;
       this.dk = dk;
       this.dh = dh;
       this.ds = ds;
       this.dl = dl;
       this.dv = dv;
                    
      
                    
    • summary
      The keywords argument to be passed to the dojox.color.Palette.transform function.  Note that
while all arguments are optional, *some* arguments must be passed.  The basic concept is that
you pass a delta value for a specific aspect of a color model (or multiple aspects of the same
color model); for instance, if you wish to transform a palette based on the HSV color model,
you would pass one of "dh", "ds", or "dv" as a value.
  • dojox.color.Palette.__transformArgs.use
       
    • type
      String?
    • summary
      Specify the color model to use for the transformation.  Can be "rgb", "rgba", "hsv", "hsl", "cmy", "cmyk".
  • dojox.color.Palette.__transformArgs.dr
       
    • type
      Number?
    • summary
      The delta to be applied to the red aspect of the RGB/RGBA color model.
  • dojox.color.Palette.__transformArgs.dg
       
    • type
      Number?
    • summary
      The delta to be applied to the green aspect of the RGB/RGBA color model.
  • dojox.color.Palette.__transformArgs.db
       
    • type
      Number?
    • summary
      The delta to be applied to the blue aspect of the RGB/RGBA color model.
  • dojox.color.Palette.__transformArgs.da
       
    • type
      Number?
    • summary
      The delta to be applied to the alpha aspect of the RGBA color model.
  • dojox.color.Palette.__transformArgs.dc
       
    • type
      Number?
    • summary
      The delta to be applied to the cyan aspect of the CMY/CMYK color model.
  • dojox.color.Palette.__transformArgs.dm
       
    • type
      Number?
    • summary
      The delta to be applied to the magenta aspect of the CMY/CMYK color model.
  • dojox.color.Palette.__transformArgs.dy
       
    • type
      Number?
    • summary
      The delta to be applied to the yellow aspect of the CMY/CMYK color model.
  • dojox.color.Palette.__transformArgs.dk
       
    • type
      Number?
    • summary
      The delta to be applied to the black aspect of the CMYK color model.
  • dojox.color.Palette.__transformArgs.dh
       
    • type
      Number?
    • summary
      The delta to be applied to the hue aspect of the HSL/HSV color model.
  • dojox.color.Palette.__transformArgs.ds
       
    • type
      Number?
    • summary
      The delta to be applied to the saturation aspect of the HSL/HSV color model.
  • dojox.color.Palette.__transformArgs.dl
       
    • type
      Number?
    • summary
      The delta to be applied to the luminosity aspect of the HSL color model.
  • dojox.color.Palette.__transformArgs.dv
       
    • type
      Number?
    • summary
      The delta to be applied to the value aspect of the HSV color model.
  • dojox.color.Palette.__generatorArgs
       
    • type
      Function
    • parameters: 
      • base: (typeof dojo.Color)
        The base color to be used to generate the palette.
    • source: [view] 
                    
      

                     this.base = base;
                    
      
                    
    • summary
      The keyword arguments object used to create a palette based on a base color.
  • dojox.color.Palette.__generatorArgs.base
       
    • type
      dojo.Color
    • summary
      The base color to be used to generate the palette.
  • dojox.color.Palette.__analogousArgs
       
    • type
      Function
    • parameters: 
      • base: (typeof dojo.Color)
        The base color to be used to generate the palette.
      • high: (typeof Number)
        The difference between the hue of the base color and the highest hue.  In degrees, default is 60.
      • low: (typeof Number)
        The difference between the hue of the base color and the lowest hue.  In degrees, default is 18.
    • source: [view] 
                    
      

                     this.base = base;
       this.high = high;
       this.low = low;
                    
      
                    
    • summary
      The keyword arguments object that is used to create a 5 color palette based on the
analogous rules as implemented at http://kuler.adobe.com, using the HSV color model.
  • dojox.color.Palette.__analogousArgs.base
       
    • type
      dojo.Color
    • summary
      The base color to be used to generate the palette.
  • dojox.color.Palette.__analogousArgs.high
       
    • type
      Number?
    • summary
      The difference between the hue of the base color and the highest hue.  In degrees, default is 60.
  • dojox.color.Palette.__analogousArgs.low
       
    • type
      Number?
    • summary
      The difference between the hue of the base color and the lowest hue.  In degrees, default is 18.
  • dojox.color.Palette.__splitComplementaryArgs
       
    • type
      Function
    • parameters: 
      • base: (typeof dojo.Color)
        The base color to be used to generate the palette.
      • da: (typeof Number)
        The delta angle to be used to determine where the split for the complementary rules happen.
In degrees, the default is 30.
    • source: [view] 
                    
      

                     this.base = base;
       this.da = da;
                    
      
                    
    • summary
      The keyword arguments object used to create a palette based on the split complementary rules
as implemented at http://kuler.adobe.com.
  • dojox.color.Palette.__splitComplementaryArgs.base
       
    • type
      dojo.Color
    • summary
      The base color to be used to generate the palette.
  • dojox.color.Palette.__splitComplementaryArgs.da
       
    • type
      Number?
    • summary
      The delta angle to be used to determine where the split for the complementary rules happen.
In degrees, the default is 30.
  • dojox.color.Palette.transform
       
    • type
      Function
    • parameters: 
      • kwArgs: (typeof dojox.color.Palette.__transformArgs)
    • source: [view] 
                    
      

                       var fn=tRGBA; // the default transform function.
         if(kwArgs.use){
          // we are being specific about the algo we want to use.
          var use=kwArgs.use.toLowerCase();
          if(use.indexOf("hs")==0){
           if(use.charAt(2)=="l"){ fn=tHSL; }
           else { fn=tHSV; }
          }
          else if(use.indexOf("cmy")==0){
           if(use.charAt(3)=="k"){ fn=tCMYK; }
           else { fn=tCMY; }
          }
         }
         // try to guess the best choice.
         else if("dc" in kwArgs || "dm" in kwArgs || "dy" in kwArgs){
          if("dk" in kwArgs){ fn = tCMYK; }
          else { fn = tCMY; }
         }
         else if("dh" in kwArgs || "ds" in kwArgs){
          if("dv" in kwArgs){ fn = tHSV; }
          else { fn = tHSL; }
         }


         var palette = this;
         for(var p in kwArgs){
          // ignore use
          if(p=="use"){ continue; }
          palette = fn(palette, p, kwArgs[p]);
         }
         return palette;  // dojox.color.Palette
                    
      
                    
    • summary
      Transform the palette using a specific transformation function
and a set of transformation parameters.
    • description
      {palette}.transform is a simple way to uniformly transform
all of the colors in a palette using any of 5 formulae:
RGBA, HSL, HSV, CMYK or CMY.

Once the forumula to be used is determined, you can pass any
number of parameters based on the formula "d"[param]; for instance,
{ use: "rgba", dr: 20, dg: -50 } will take all of the colors in
palette, add 20 to the R value and subtract 50 from the G value.

Unlike other types of transformations, transform does *not* alter
the original palette but will instead return a new one.
    • returns
      dojox.color.Palette
  • dojox.color.Palette.clone
       
    • type
      Function
    • source: [view] 
                    
      

                       return new dxc.Palette(this); // dojox.color.Palette
                    
      
                    
    • summary
      Clones the current palette.
    • returns
      dojox.color.Palette
  • dojox.color.Palette.generators
       
    • type
      Object
    • summary
  • dojox.color.Palette.generators.analogous
       
    • summary
  • dojox.color.Palette.generators.monochromatic
       
    • type
      Function
    • parameters: 
      • args: (typeof dojox.color.Palette.__generatorArgs)
    • source: [view] 
                    
      

                        var base = dojo.isString(args.base)?new dojox.color.Color(args.base):args.base,
           hsv = base.toHsv();

          
          // figure out the saturation and value
          var s1 = (hsv.s-30>9)?hsv.s-30:hsv.s+30,
           s2 = hsv.s,
           v1 = rangeDiff(hsv.v, 20, 100),
           v2 = (hsv.v-20>20)?hsv.v-20:hsv.v+60,
           v3 = (hsv.v-50>20)?hsv.v-50:hsv.v+30;


          return new dxc.Palette([
           dojox.color.fromHsv(hsv.h, s1, v1),
           dojox.color.fromHsv(hsv.h, s2, v3),
           base,
           dojox.color.fromHsv(hsv.h, s1, v3),
           dojox.color.fromHsv(hsv.h, s2, v2)
          ]);  // dojox.color.Palette
                    
      
                    
    • summary
      Create a 5 color palette based on the monochromatic rules as implemented at
http://kuler.adobe.com.
  • dojox.color.Palette.generators.triadic
       
    • type
      Function
    • parameters: 
      • args: (typeof dojox.color.Palette.__generatorArgs)
    • source: [view] 
                    
      

                        var base = dojo.isString(args.base)?new dojox.color.Color(args.base):args.base,
           hsv = base.toHsv();


          var h1 = (hsv.h+57+360)%360,
           h2 = (hsv.h-157+360)%360,
           s1 = (hsv.s>20)?hsv.s-10:hsv.s+10,
           s2 = (hsv.s>90)?hsv.s-10:hsv.s+10,
           s3 = (hsv.s>95)?hsv.s-5:hsv.s+5,
           v1 = (hsv.v-20>20)?hsv.v-20:hsv.v+20,
           v2 = (hsv.v-30>20)?hsv.v-30:hsv.v+30,
           v3 = (hsv.v-30>70)?hsv.v-30:hsv.v+30;


          return new dxc.Palette([
           dojox.color.fromHsv(h1, s1, hsv.v),
           dojox.color.fromHsv(hsv.h, s2, v2),
           base,
           dojox.color.fromHsv(h2, s2, v1),
           dojox.color.fromHsv(h2, s3, v3)
          ]);  // dojox.color.Palette
                    
      
                    
    • summary
      Create a 5 color palette based on the triadic rules as implemented at
http://kuler.adobe.com.
  • dojox.color.Palette.generators.complementary
       
    • type
      Function
    • parameters: 
      • args: (typeof dojox.color.Palette.__generatorArgs)
    • source: [view] 
                    
      

                        var base = dojo.isString(args.base)?new dojox.color.Color(args.base):args.base,
           hsv = base.toHsv();


          var h1 = ((hsv.h*2)+137<360)?(hsv.h*2)+137:Math.floor(hsv.h/2)-137,
           s1 = Math.max(hsv.s-10, 0),
           s2 = rangeDiff(hsv.s, 10, 100),
           s3 = Math.min(100, hsv.s+20),
           v1 = Math.min(100, hsv.v+30),
           v2 = (hsv.v>20)?hsv.v-30:hsv.v+30;


          return new dxc.Palette([
           dojox.color.fromHsv(hsv.h, s1, v1),
           dojox.color.fromHsv(hsv.h, s2, v2),
           base,
           dojox.color.fromHsv(h1, s3, v2),
           dojox.color.fromHsv(h1, hsv.s, hsv.v)
          ]);  // dojox.color.Palette
                    
      
                    
    • summary
      Create a 5 color palette based on the complementary rules as implemented at
http://kuler.adobe.com.
  • dojox.color.Palette.generators.splitComplementary
       
    • type
      Function
    • parameters: 
      • args: (typeof dojox.color.Palette.__splitComplementaryArgs)
    • source: [view] 
                    
      

                        var base = dojo.isString(args.base)?new dojox.color.Color(args.base):args.base,
           dangle = args.da || 30,
           hsv = base.toHsv();


          var baseh = ((hsv.h*2)+137<360)?(hsv.h*2)+137:Math.floor(hsv.h/2)-137,
           h1 = (baseh-dangle+360)%360,
           h2 = (baseh+dangle)%360,
           s1 = Math.max(hsv.s-10, 0),
           s2 = rangeDiff(hsv.s, 10, 100),
           s3 = Math.min(100, hsv.s+20),
           v1 = Math.min(100, hsv.v+30),
           v2 = (hsv.v>20)?hsv.v-30:hsv.v+30;


          return new dxc.Palette([
           dojox.color.fromHsv(h1, s1, v1),
           dojox.color.fromHsv(h1, s2, v2),
           base,
           dojox.color.fromHsv(h2, s3, v2),
           dojox.color.fromHsv(h2, hsv.s, hsv.v)
          ]);  // dojox.color.Palette
                    
      
                    
    • summary
      Create a 5 color palette based on the split complementary rules as implemented at
http://kuler.adobe.com.
  • dojox.color.Palette.generators.compound
       
    • type
      Function
    • parameters: 
      • args: (typeof dojox.color.Palette.__generatorArgs)
    • source: [view] 
                    
      

                        var base = dojo.isString(args.base)?new dojox.color.Color(args.base):args.base,
           hsv = base.toHsv();


          var h1 = ((hsv.h*2)+18<360)?(hsv.h*2)+18:Math.floor(hsv.h/2)-18,
           h2 = ((hsv.h*2)+120<360)?(hsv.h*2)+120:Math.floor(hsv.h/2)-120,
           h3 = ((hsv.h*2)+99<360)?(hsv.h*2)+99:Math.floor(hsv.h/2)-99,
           s1 = (hsv.s-40>10)?hsv.s-40:hsv.s+40,
           s2 = (hsv.s-10>80)?hsv.s-10:hsv.s+10,
           s3 = (hsv.s-25>10)?hsv.s-25:hsv.s+25,
           v1 = (hsv.v-40>10)?hsv.v-40:hsv.v+40,
           v2 = (hsv.v-20>80)?hsv.v-20:hsv.v+20,
           v3 = Math.max(hsv.v, 20);


          return new dxc.Palette([
           dojox.color.fromHsv(h1, s1, v1),
           dojox.color.fromHsv(h1, s2, v2),
           base,
           dojox.color.fromHsv(h2, s3, v3),
           dojox.color.fromHsv(h3, s2, v2)
          ]);  // dojox.color.Palette
                    
      
                    
    • summary
      Create a 5 color palette based on the compound rules as implemented at
http://kuler.adobe.com.
  • dojox.color.Palette.generators.shades
       
    • type
      Function
    • parameters: 
      • args: (typeof dojox.color.Palette.__generatorArgs)
    • source: [view] 
                    
      

                        var base = dojo.isString(args.base)?new dojox.color.Color(args.base):args.base,
           hsv = base.toHsv();


          var s  = (hsv.s==100 && hsv.v==0)?0:hsv.s,
           v1 = (hsv.v-50>20)?hsv.v-50:hsv.v+30,
           v2 = (hsv.v-25>=20)?hsv.v-25:hsv.v+55,
           v3 = (hsv.v-75>=20)?hsv.v-75:hsv.v+5,
           v4 = Math.max(hsv.v-10, 20);


          return new dxc.Palette([
           new dojox.color.fromHsv(hsv.h, s, v1),
           new dojox.color.fromHsv(hsv.h, s, v2),
           base,
           new dojox.color.fromHsv(hsv.h, s, v3),
           new dojox.color.fromHsv(hsv.h, s, v4)
          ]);  // dojox.color.Palette
                    
      
                    
    • summary
      Create a 5 color palette based on the shades rules as implemented at
http://kuler.adobe.com.
  • dojox.color.Palette.generate
       
    • type
      Function
    • parameters: 
      • base: (typeof String|dojox.color.Color)
      • type: (typeof Function|String)
    • source: [view] 
                    
      

                       if(dojo.isFunction(type)){
          return type({ base: base }); // dojox.color.Palette
         }
         else if(dxc.Palette.generators[type]){
          return dxc.Palette.generators[type]({ base: base }); // dojox.color.Palette
         }
         throw new Error("dojox.color.Palette.generate: the specified generator ('" + type + "') does not exist.");
                    
      
                    
    • summary
      Generate a new Palette using any of the named functions in
dojox.color.Palette.generators or an optional function definition.  Current
generators include &quot;analogous&quot;, &quot;monochromatic&quot;, &quot;triadic&quot;, &quot;complementary&quot;,
&quot;splitComplementary&quot;, and &quot;shades&quot;.
    • returns
      dojox.color.Palette
  • dojox.color
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary