Assemblies -- jp_doodle demo

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

var element = $('#target_div');
// Attach an information div to the element to display event feedback.
var info_area = $("<div>Please mouse-down and drag objects below.</div>").appendTo(element);

// Attach a dual canvas associated with the element as a child of the element
// configured with width 400 and height 200.
var config = {
            width: 400,
            height: 200,
        };
element.dual_canvas_helper(config);

// Define an assembly which draws a teddy bear shape.
// Assembly definitions are tightly integrated into the
// redraw logic and cannot be defined using callbacks
// to Jupyter Python kernels (they must be defined in the
// browser Javascript context).

// draw some assemblies on the canvas:

// A teddy bear named "Ted"
element.teddy_bear({x:50, y:150, scale:5, belly:"yellow", name:"ted"})

// A teddy bear named "Fred"
element.teddy_bear({x:150, y:50, scale:3, 
    eyes: "#99f", fur:"brown", lips: "white", name:"Fred"})

// A circle/arrow named "Marge"
element.circle_arrow({x:0, y:20, r:40, color: "red", lineWidth:6, name:true, 
    head_angle:20, head_length:20, name:"Marge"});

// A filled yellow star (disk) named "Mick"
element.star({x:300, y: 150, radius:56, points:14, 
    color:"rgba(100,100,255,0.5)", 
    text_color:"#129", background:"yellow", font: "bold 20px Arial",
    text:"Mick", name:"Mick"})

// an arrow named "William".
element.arrow({x1:200, y1:200, x2:20, y2:300, 
        color:"green", symmetric: true, lineWidth:7,
        head_angle:25, head_offset:35, head_length: 30,
        name:"William"});

// a double arrow named "Mary".
element.double_arrow({x1:200, y1:100, x2:120, y2:300, 
        color:"purple", lineWidth:7, line_offset:5,
        head_angle:25, head_offset:35, head_length: 30,
        name:"Mary"});

element.fit(null, 10);

// The remaining code defines mouse event logic
// which allows the user to move the assemblies.

// Define a variable for the picked-up object
var picked_up_object = null;

// Attach a mousedown event which picks up any named object under the mouse.
var on_mouse_down = function(event) {
    if (event.canvas_name) {
        info_area.html("<div>Picking up the object named " + event.canvas_name + "</div>");
        picked_up_object = event.canvas_name;
    } else {
        info_area.html("<div>No object to pick up.</div>");
    }
};
element.on_canvas_event("mousedown", on_mouse_down);

// Attach a mousemove event which moves any picked up object.
var on_mouse_move = function(event) {
    if (picked_up_object) {
        var loc = element.event_model_location(event);
        info_area.html("<div>"+picked_up_object+":"+loc.x+","+loc.y+"</div>");
        if ((picked_up_object == "William") || (picked_up_object == "Mary")) {
            element.change(picked_up_object, {"x1":loc.x, "y1":loc.y});
        } else {
            element.change(picked_up_object, {"x":loc.x, "y":loc.y});
        }
    } else if (event.canvas_name) {
        info_area.html("<div>Click to drag the object named " + event.canvas_name + "</div>");
    } else {
        info_area.html("<div>You are not over anybody.</div>");
    }
};
element.on_canvas_event("mousemove", on_mouse_move);

// Attach a mouseup event which "drops" the current picked up object and re-fits the canvas.
var on_mouse_up = function(event) {
    info_area.html("<div>Dropping " + picked_up_object + ".</div>");
    picked_up_object = null;
    // refit the canvas to the new object configuration.
    element.fit(null, 10)
};
element.on_canvas_event("mouseup", on_mouse_up);

$("<div>Please mouse down and drag over the colorful objects to move them.</div>")
.appendTo(element);

Discussion

As mention in the code comments, assembly definitions are tightly integrated into the redraw logic and cannot be defined using callbacks to Jupyter Python kernels (they must be defined in the browser Javascript context).

Assembly definitions which use other assembly definitions must refer to the other assembly indirectly using assembler.assembly, for example

assembler.assembly({ assembly: "arrow", x1: 0, y1:0, x2:100, y2:0, ... });

See the draw_double_arrow definition in the source code for an example.

The arrow, double arrow, star, and circle arrow assemblies are automatically built in for all dual canvases.