layout.xhtml

<div xmlns="http://www.w3.org/1999/xhtml">
  <!-- $Date: 2009-08-14 12:06:05 +0300 $ -->
  <h1 class="paintweb_appTitle">PaintWeb</h1>

  <!-- All elements with data-pwTabPanel become interactive tabbed panels which 
  will also have a class name like .paintweb_tabPanel_id and a generic class 
  name .paintweb_tabPanel. In this case the class names will be 
  .paintweb_tabPanel_main and .paintweb_tabPanel.  -->
  <div data-pwTabPanel="main" data-pwTabDefault="main">

    <!-- All elements with data-pwTab will have a class name like 
    .paintweb_tabPanelId_tabID and a generic class name .paintweb_tab. In this 
    case the class names will be .paintweb_main_main and .paintweb_tab. -->
    <div data-pwTab="main">

      <!-- All elements with some #id will also have a class name like 
      .paintweb_id. In this case the class name will be .paintweb_tools. -->
      <ul id="tools">

        <!-- All elements with data-pwCommand will have a class name like 
        .paintweb_cmd_commandID and a generic class name .paintweb_command. In 
        this case the class names will be .paintweb_cmd_historyUndo and 
        .paintweb_command.  -->
        <li data-pwCommand="historyUndo">Undo</li>
        <li data-pwCommand="historyRedo">Redo</li>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li data-pwCommand="imageClear">Clear image</li>
        <li data-pwCommand="imageSave">Save image</li>

        <!-- All elements with data-pwTool will have a class name like 
        .paintweb_tool_toolID and a generic class name .paintweb_tool. In this 
        case the class names will be .paintweb_tool_insertimg and 
        .paintweb_tool.  -->
        <li data-pwTool="insertimg">Insert image</li>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li data-pwCommand="selectionCut">Cut selection</li>
        <li data-pwCommand="selectionCopy">Copy selection</li>
        <li data-pwCommand="clipboardPaste">Clipboard paste</li>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li data-pwTool="cpicker">Color picker</li>

        <li class="paintweb_toolsWrap">&#160;</li>

        <li data-pwTool="selection">Selection</li>
        <li data-pwTool="hand">Hand</li>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li data-pwTool="rectangle">Rectangle</li>
        <li data-pwTool="ellipse">Ellipse</li>
        <li data-pwTool="polygon">Polygon</li>
        <li data-pwTool="line">Line</li>
        <li data-pwTool="bcurve">Bézier curve</li>
        <li data-pwTool="text">Text</li>
        <li data-pwTool="pencil">Pencil</li>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li data-pwTool="eraser">Eraser</li>
      </ul>

      <div class="paintweb_strokeFillStyles">
        <p class="paintweb_opt_fillStyle">Fill <span 
          data-pwColorInput="fillStyle">&#160;</span>
        </p>
        <p class="paintweb_opt_strokeStyle">Stroke <span 
          data-pwColorInput="strokeStyle">&#160;</span>
        </p>
      </div>
    </div>

    <!-- Note that all tool/command elements will have an anchor elements as the 
    only child. The locale string will be added as child of the anchor.  Having 
    the anchors allows users to tab through the tools and commands - keyboard 
    accessibility. -->

    <!-- .paintweb_main_line -->
    <div data-pwTab="line" data-pwTabHide="true">

      <!-- Elements with data-pwConfig will have class names like 
      paintweb_cfg_configVariable. In this case the class name will be 
      .paintweb_cfg_line_lineWidth. -->
      <p class="paintweb_opt_lineWidth"><label>Line width <input 
        data-pwConfig="line.lineWidth" type="number" min="1" value="1" 
        /></label></p>

      <!-- .paintweb_cfg_line_miterLimit (dot becomes underscore) -->
      <p class="paintweb_opt_miterLimit"><label>Miter limit <input  
        data-pwConfig="line.miterLimit" type="number" min="1" value="10" 
        /></label></p>

      <!-- .paintweb_cfg_line_lineCap -->
      <div data-pwConfig="line.lineCap">
        <p>Line cap</p>

        <!-- Elements with data-pwConfigValue will have the class name based on  
        the configuration property name and value. In this case the class name 
        will be .paintweb_lineCap_butt -->
        <div data-pwConfigValue="butt">Butt</div>

        <!-- .paintweb_lineCap_square -->
        <div data-pwConfigValue="square">Square</div>
        <!-- .paintweb_lineCap_round -->
        <div data-pwConfigValue="round">Round</div>
      </div>

      <!-- .paintweb_cfg_line_lineJoin -->
      <div data-pwConfig="line.lineJoin">
        <p>Line join</p>

        <!-- .paintweb_lineJoin_miter -->
        <div data-pwConfigValue="miter">Miter</div>
        <!-- .paintweb_lineJoin_round -->
        <div data-pwConfigValue="round">Round</div>
        <!-- .paintweb_lineJoin_bevel -->
        <div data-pwConfigValue="bevel">Bevel</div>
      </div>

      <!-- .paintweb_cfg_shapeType -->
      <div data-pwConfig="shapeType">
        <p>Shape type</p>

        <!-- .paintweb_shapeType_both -->
        <div data-pwConfigValue="both">Both</div>
        <!-- .paintweb_shapeType_fill -->
        <div data-pwConfigValue="fill">Fill</div>
        <!-- .paintweb_shapeType_stroke -->
        <div data-pwConfigValue="stroke">Stroke</div>
      </div>

      <!-- erm *cough* elements with data-pwConfigValue will be considered icons 
      (class name .paintweb_icon is added). They will also have an anchor 
      element appended.  -->
    </div>

    <!-- .paintweb_main_selection -->
    <div data-pwTab="selection" data-pwTabHide="true">
      <p data-pwId="selTab_selectionCut">Cut selection</p>
      <p data-pwId="selTab_selectionCopy">Copy selection</p>
      <p data-pwId="selTab_clipboardPaste">Clipboard paste</p>

      <p data-pwCommand="selectionCrop">Crop selection</p>
      <p data-pwCommand="selectionDelete">Delete selection</p>
      <p data-pwCommand="selectionFill">Fill selection</p>

      <p class="paintweb_opt_selectionTransparent">
        <label><input data-pwConfig="selection.transparent" type="checkbox" 
          value="1" checked="checked" /> Transparent background</label>
      </p>
      <p class="paintweb_opt_selectionTransform">
        <label><input data-pwConfig="selection.transform" type="checkbox" 
          value="1" /> Transformation mode</label>
      </p>
    </div>

    <!-- .paintweb_main_text -->
    <div data-pwTab="text" data-pwTabHide="true">
      <p class="paintweb_opt_fontFamily">
        <label for="fontFamily">Font family:</label>
        <select id="fontFamily" data-pwConfig="text.fontFamily"></select>
      </p>

      <p class="paintweb_opt_fontSize">
        <label for="fontSize">Font size:</label>
        <input id="fontSize" data-pwConfig="text.fontSize" type="number" min="6" 
        value="12" />
      </p>

      <div data-pwConfigToggle="text.bold">Bold</div>
      <div data-pwConfigToggle="text.italic">Italic</div>

      <div data-pwConfig="text.textAlign">
        <p>Text alignment</p>

        <div data-pwConfigValue="left">Left</div>
        <div data-pwConfigValue="center">Center</div>
        <div data-pwConfigValue="right">Right</div>
      </div>

      <p class="paintweb_opt_textString">
        <label>String <textarea id="textString" rows="2" cols="4">Hello 
            world!</textarea></label>
      </p>
    </div>

    <!-- .paintweb_main_shadow -->
    <div data-pwTab="shadow">
      <p class="paintweb_opt_shadowEnable"><label><input 
        data-pwConfig="shadow.enable" type="checkbox" value="1" /> Draw 
        shadows</label></p>

      <p class="paintweb_opt_shadowColor">Color <span 
        data-pwColorInput="shadow.shadowColor">&#160;</span>
      </p>

      <p class="paintweb_opt_shadowOffsetX">
        <label>Offset X
          <input data-pwConfig="shadow.shadowOffsetX" type="number" value="5" />
        </label>
      </p>

      <p class="paintweb_opt_shadowOffsetY">
        <label>Offset Y
          <input data-pwConfig="shadow.shadowOffsetY" type="number" value="5" />
        </label>
      </p>

      <p class="paintweb_opt_shadowBlur">
        <label>Blur
          <input data-pwConfig="shadow.shadowBlur" type="number" value="5" 
          min="0" />
        </label>
      </p>
    </div>

    <p data-pwCommand="about">About</p>

  </div> <!-- .paintweb_tabPanel_main -->

  <div id="viewport">
    <div id="canvasContainer">
    </div>
    <div id="canvasResizer">Resize the image Canvas.</div>
  </div> <!-- .paintweb_viewport -->

  <div class="paintweb_statusbar">
    <p id="imageSize">WxH</p>

    <p id="statusZoom" title="Zoom image">
      <label>Zoom: <input id="imageZoom" type="number" min="20" max="400" 
        value="100" step="10" /></label>
    </p>

    <p id="statusMessage">Status</p>
    <p id="viewportResizer">Resize the image viewport.</p>
  </div> <!-- .paintweb_statusbar -->

  <!-- Elements with data-pwFloatingPanel become interactive GUI components.  
  These will also have two class names: .paintweb_floatingPanel and 
  .paintweb_floatingPanel_id. In this case, the id is "colormixer". If you want 
  to automatically hide the panel, simply use data-pwPanelHide="true".  
  Additionally, you can make the panel resizable if you add 
  data-pwPanelResizable="true". -->
  <div data-pwFloatingPanel="colormixer" data-pwPanelHide="true">
    <!-- Make sure you have the panel title in the h1 element. This will have 
    the .paintweb_floatingPanel_title class name. -->
    <h1>Color mixer</h1>

    <!-- Wrap your content in a single div. This element will have the 
    .paintweb_floatingPanel_content class name. -->
    <div>
      <ol class="paintweb_colormixer_preview">
        <li id="colormixer_colorActive"><span>&#160;</span> Active</li>
        <li id="colormixer_colorOld"><span>&#160;</span> Old</li>
      </ol>

      <ol class="paintweb_colormixer_actions">
        <li id="colormixer_btn_accept">Close</li>
        <li id="colormixer_btn_cancel">Cancel</li>
        <li id="colormixer_btn_saveColor">Save color</li>
        <li id="colormixer_btn_pickColor">Pick color</li>
      </ol>

      <div data-pwTabPanel="colormixer_selector" data-pwTabDefault="mixer">
        <div data-pwTab="mixer">
          <canvas id="colormixer_canvas" width="200" height="195">Your browser 
          does not support Canvas.</canvas>
          <div id="colormixer_controls">
            <span id="colormixer_chartDot"></span>
            <span id="colormixer_slider"></span>
          </div>
        </div>

        <div data-pwTab="cpalettes">
          <select id="colormixer_cpaletteInput"></select>
          <div id="colormixer_cpaletteOutput"></div>
        </div>
      </div>

      <ol class="paintweb_colormixer_hexalpha">
        <li><label>HEX
          <input id="ckey_hex" value="#RRGGBB" type="text" maxlength="7" 
          pattern="#[a-f0-9]{6}" /></label>
        </li>
        <li><label>Alpha
          <input id="ckey_alpha" value="100" type="number" min="0" max="100" 
          step="1" /></label>
        </li>
      </ol>

      <form data-pwTabPanel="colormixer_inputs" data-pwTabDefault="rgb">
        <ol data-pwTab="rgb">
          <li>
            <input name="ckey" value="red" type="radio" />
            <label>Red
            <input name="ckey_red" value="0" type="number" min="0" max="255" 
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="green" type="radio" />
            <label>Green
            <input name="ckey_green" value="0" type="number" min="0" max="255" 
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="blue" type="radio" />
            <label>Blue
            <input name="ckey_blue" value="0" type="number" min="0" max="255" 
            step="1" /></label>
          </li>
        </ol>

        <ol data-pwTab="hsv">
          <li>
            <input name="ckey" value="hue" type="radio" />
            <label>Hue
            <input name="ckey_hue" value="0" type="number" min="0" max="360" 
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="sat" type="radio" />
            <label>Saturation
            <input name="ckey_sat" value="0" type="number" min="0" max="255" 
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="val" type="radio" />
            <label>Value
            <input name="ckey_val" value="0" type="number" min="0" max="255" 
            step="1" /></label>
          </li>
        </ol>

        <ol data-pwTab="lab">
          <li>
            <input name="ckey" value="cie_l" type="radio" />
            <label>Lightness
            <input name="ckey_cie_l" value="0" type="number" min="0"    
            max="100" step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="cie_a" type="radio" />
            <label>a*
            <input name="ckey_cie_a" value="0" type="number" min="-85"  
            max="94" step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="cie_b" type="radio" />
            <label>b*
            <input name="ckey_cie_b" value="0" type="number" min="-109" 
            max="95" step="1" /></label>
          </li>
        </ol>

        <ol data-pwTab="cmyk">
          <li>
            <label>Cyan
            <input name="ckey_cyan" value="0" type="number" min="0" max="100" 
            step="1" /></label>
          </li>
          <li>
            <label>Magenta
            <input name="ckey_magenta" value="0" type="number" min="0" 
            max="100" step="1" /></label>
          </li>
          <li>
            <label>Yellow
            <input name="ckey_yellow" value="0" type="number" min="0" max="100" 
            step="1" /></label>
          </li>
          <li>
            <label>Key (Black)
            <input name="ckey_black" value="0" type="number" min="0" max="100" 
            step="1" /></label>
          </li>
        </ol>
      </form> <!-- .paintweb_colormixer_inputs -->
    </div> <!-- content wrap -->
  </div> <!-- the colormixer floating panel -->

  <div data-pwFloatingPanel="about" data-pwPanelHide="true">
    <h1>About</h1>

    <div>
      <ul>
        <li id="version"><strong>Version:</strong> </li>
        <li><strong>Authors:</strong> <a href="http://www.robodesign.ro">Marius 
          and Mihai Şucan (ROBO Design)</a></li>

        <li><strong>Project site:</strong> <a 
          href="http://code.google.com/p/paintweb">code.google.com/p/paintweb</a></li>

        <li><strong>Code license:</strong> <a 
          href="http://www.gnu.org/licenses/gpl-3.0.html" title="GNU General 
          Public License, version 3">GPLv3</a></li>
      </ul>

      <p>For user and developer documentation please check out the <a 
        href="http://code.google.com/p/paintweb">project site</a>.</p>
    </div>
  </div>

  <!-- vim:set spell spl=en fo=tcroqwanl1 tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix: -->
</div>