Color chooser -- jp

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

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)

Discussion

The color chooser is built in to dual canvases via the color_chooser method. The chooser implementation illustrates the use of multiple references frames in combination with mouse events.