Color chooser

var element = $('#target_div');

// Attach a dual canvas associated with the element as a child of the element

// configured with width 400 and height 200.

var config = {

            width: 700,

            height: 350,

        };

element.dual_canvas_helper(config);

​

// Draw some named elements on the canvas.

// A filled yellow circle (disk) named "Colonel Mustard

element.circle({name: "Colonel Mustard", x:100, y:150, r:90, color:"yellow"});

​

// A filled red rectangle named "Miss Scarlett"

element.rect({name: "Miss Scarlett", x:100, y:130, w:100, h:20, color: "red"});

​

// An unfilled white circle named "Mrs. White"

element.circle({

    name: "Mrs. White", x:100, y:150, r:58, fill:false, 

    color:"white", lineWidth: 14});

// An unfilled blue rectangle named Mrs. Peacock

element.rect({

    name: "Mrs. Peacock", x:40, y:110, w:100, h:20,

    color: "blue", lineWidth: 10, degrees:70, fill:false});

​

// A line segment named "Professor Plum".

element.line({

    name: "Professor Plum", x1:190, y1:100, x2:10, y2:200,

    color:"purple", lineWidth: 20})

// A brown filled polygon (triangle) named Micky

element.polygon({

    name: "Micky",

    points: [[210, 10], [210, 110], [290, 60]],

    color: "brown",

})

​

// A green polyline named Mr. Green

element.polygon({

    name: "Mr. Green", fill:false, close:false, color: "green",

    lineWidth: 14, points: [[210, 10], [210, 110], [290, 60]]

})

​

// A magenta text string display named Pluto

element.text({

    name: "Pluto", text: "The Republic", font: "20px Arial",

    x: 20, y:20, degrees: 5, color:"magenta"

})

​

// Position a color chooser on the canvas.

var chosen_color = null;

​

element.color_chooser({

    x: 310, y: 50, side:200, font: "normal 7px Arial",

    callback: function(color_array, color_string) { chosen_color = color_string; }

});

​

// mouse tracker circle (initially hidden)

var tracker = element.circle({

    name:"mouse_track", r:5,

    events: false,  // This object is invisible to events.

    x:0, y:0, color:"black", hide:true});

element.text({

    x:10, y:-10, name: "explanation",

    text: "Choose a color then click an object to change its color",

})

​

// Center and scale the figure to fit in the available area.

element.fit(null, 20)

​

var on_mouse_move = function(event) {

    var name = event.canvas_name;

    var location = element.event_model_location(event);

    if ((chosen_color) && (name) && (location.x < 310)) {

        tracker.change(

            {hide:false, x:location.x, y:location.y, color:chosen_color});

        // on click change the color of the named object

        if (event.type == "click") {

            element.transition(name, {color: chosen_color});

        }

    } else {

        tracker.change({hide: true});

    }

};

element.on_canvas_event("mousemove", on_mouse_move);

element.on_canvas_event("click", on_mouse_move);