SOURCE CODE: Color Cube With Color Pickers
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Color Cube With Color Pickers | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="color drag-and-drop touch ipad Uize.Widget.ColorCube.Draggable"/>
  <meta name="description" content="See an example of a color grid, with RGB color pickers for editing corner colors, and the ability to click-and-drag in the grid to &quot;smear&quot; its colors."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .swatch {
      width:35px;
      height:35px;
      margin-left:1px;
      margin-top:1px;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Color Cube With Color Pickers
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/color-cube-with-pickers.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.ColorCube.Draggable.html"><code>Uize.Widget.ColorCube.Draggable</code></a> provides a draggable color cube widget that shows the interpolated colors between four corner colors. Click-and-drag inside the cube to "smudge" the color space in different directions. Instances of <a href="../reference/Uize.Widgets.RgbSliders.Widget.html"><code>Uize.Widgets.RgbSliders.Widget</code></a> are wired up at each corner for changing the colors using sliders. The sliders control the cube, but dragging inside the cube also controls the sliders. Event handlers wire the widgets bidirectionally so their values stay in sync. Click the "AGITATE" button to randomize the corner colors.</p>
  </div>

  <!-- "wireframe" for the UI -->

  <table border="0" cellspacing="0" cellpadding="3" style="margin:auto;">
    <tr>
      <td id="page_colorTopLeft-shell" valign="top"></td>
      <td id="page_colorCube" rowspan="2"></td>
      <td id="page_colorTopRight-shell" valign="top"></td>
    </tr>
    <tr>
      <td id="page_colorBottomLeft-shell" valign="bottom"></td>
      <td id="page_colorBottomRight-shell" valign="bottom"></td>
    </tr>
    <tr>
      <td></td>
      <td id="page_agitateButton-shell" align="center"></td>
      <td></td>
    </tr>
  </table>
</div>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Color',
    'Uize.Color.xUtil',
    'Uize.Widgets.RgbSliders.Widget',
    'Uize.Widget.ColorCube.Draggable',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** create the Uize.Widget.ColorCube object ***/
      page.addChild ('colorCube',Uize.Widget.ColorCube.Draggable,{built:false});

      /*** agitation ***/
        function agitate () {
          page.children.colorCube.set ({
            colorTopLeft:Uize.Color.random (),
            colorTopRight:Uize.Color.random (),
            colorBottomLeft:Uize.Color.random (),
            colorBottomRight:Uize.Color.random ()
          });
        }

      agitate ();

    /*** wire up handling for the corner colors ***/
      function setupColorCorner (colorName) {
        var
          colorCube = page.children.colorCube,
          colorPicker = page.addChild (
            colorName,
            Uize.Widgets.RgbSliders.Widget,
            {
              size:'tiny',
              sliderHeight:120,
              built:false
            }
          )
        ;
        /*** sync color picker to cube ***/
          function syncColorPickerToCube () {colorPicker.set ({value:colorCube.get (colorName)})}
          colorCube.wire ('Changed.' + colorName,syncColorPickerToCube);
          syncColorPickerToCube ();

        /*** sync cube to color picker ***/
          colorPicker.wire ('Changed.value',function () {colorCube.set (colorName,colorPicker + '')});
      }
      setupColorCorner ('colorTopLeft');
      setupColorCorner ('colorTopRight');
      setupColorCorner ('colorBottomLeft');
      setupColorCorner ('colorBottomRight');

    /*** add agitate button ***/
      page.addChild (
        'agitateButton',
        Uize.Widgets.Button.Widget,
        {
          built:false,
          text:'AGITATE',
          size:'small',
          action:agitate
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>