SOURCE CODE: Basic Color Grid

  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Basic Color Grid
    

      
SOURCE
    
  

  

  

    
In this example, an instance of the Uize.Widget.ColorGrid class is wired up to provide a color grid that shows a color matrix (or color grid) of all the interpolated colors between four adjustable corner colors. Enter hex RGB values for any colors at any of the four corners and the grid will automatically update while you type. This grid is 10x10 and represents 100 colors, but the widget can be configured for different numbers of divisions on both the X and Y axes by setting the divisionsX and divisionsY state properties, respectively. With additional code, a subclass or other widget could use the color grid widget as a color selection palette, allowing the user to explore color ranges in 2D.