I have read article “How to create a color picker with HTML5 Canvas” published on DZone. The article is tutorial that discovers how to pick up image color code using HTML5 Canvas. The tutorial have got great response from developers side. Many people find it is useful (me too). Let’s see how Zebra can be used in context of implementation practically the same task. Here is three different color pickers that are developed with Zebra. Find live Zebra applications and appropriate source code below:

1 Show color in textfield

Move mouse cursor in and click. Text field will be filled with selected color RGB code

zebra.ready(function() {
  // import classes and methods in local scope
  eval(zebra.Import("ui", "layout"));

  // create Canvas and fill it with content
  new zebra.ui.zCanvas("test").root.properties({
    padding:6,
    border: borders.plain,
    layout: new BorderLayout(6,6),
    kids  : {
      BOTTOM: new TextField(),
      // create anonymous class that implements
      // mouse pressed event handler
      CENTER: new ImagePan("image.jpg", [
        function mousePressed(e) {
          var ctx = this.getCanvas().$context, // get 2d context
              i = ctx.getImageData(e.absX, e.absY, 1, 1).data,
              c = "rgb("+ i[0] + "," + i[1] + "," + i[2] +")";
           // find text field component and fill it with RGB code
           this.parent.find("//zebra.ui.TextField").setText(c);
        }
      ])
    }
  });
});

2 Show color in tooltip

Move mouse cursor in. Tooltip should be shown. Tooltip renders color and prints the color RGB code. Zebra allows developers to use any existing or implemented UI component as a tooltip.

zebra.ready(function() {
 eval(zebra.Import("ui", "layout")); // import in local scope
 zebra.ui.tooltip.stopByPress = false; // some trick
 new zebra.ui.zCanvas("x").root.properties({
   layout: new BorderLayout(),
   kids : {
     // anonymous class that implements TooltipInfo interface
     // and define method to create tooltip
     CENTER: new ImagePan("image.jpg", [
       function getTooltip(target, x, y) {
         var d = this.getCanvas().$context.getImageData(x,y,1,1).data,
             color = "rgb("+ d[0] + "," + d[1] + "," + d[2] +")",
             label = new Panel({
               layout: new FlowLayout(8),
               background: "white",
               padding : 4,
               border : new Border("black", 1, 6),
               kids : [ new Panel({ preferredSize: [ 20, 16 ],
                                    background : color }),
                        new Label(color)]
         });
         return label;
      }])}
   });
});

3 Pick colors palette

Every time you click on the image a selected color is collected into palette. Press button to clear collected palette.

zebra.ready(function() {
  eval(zebra.Import("ui", "layout"));
  var p = null, counter = 0, max = 16, c = new Constraints();
  root = new zebra.ui.zCanvas(400, 400).root.properties({
    layout: new BorderLayout(6, 6), padding:6,
    kids  : {
      TOP:new Button("Clear Palette",[
        function fire() { // override Button class method
          this.$super();  // to catch button event, call super
          for(var i=0; i<max; i++) p.kids[i].setBackground(null);
          counter=0;
      }]),
      BOTTOM: new Panel({
        layout : new GridLayout(2, 8, HORIZONTAL),
        id     : "palette" // define id to find it easier
      }),
      CENTER: new ImagePan("image.jpg", [
        function mousePressed(e) {
          var ctx = this.getCanvas(this).$context // get 2d context
              i   = ctx.getImageData(e.absX,e.absY,1,1).data,
              c   = "rgb("+ i[0] +","+ i[1] +","+ i[2] +")";
          p.kids[counter++%max].setBackground(c);
        }])
    }
  });
  p = root.find("//zebra.ui.Panel[@id='palette']"); //find panel by id
  c.setPadding(2);
  for(var i=0; i<max; i++) {
    p.add(c, new Panel({ preferredSize:[16,16],
                         border: new Border() }));
  }
});