Bindings -- 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 click on text areas 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);

bigger = element.text({
    name: true, text: "Click to enlarge", 
    font: "20px Arial", x: 20, y:20, degrees: 5, color:"magenta"
});
var enlarge = function(event) {
    element.change("bigger", {font: "40px Arial"});
    bigger.change({font: "40px Arial"});
    // change it back 5 seconds later
    setTimeout(function () { bigger.change({font: "20px Arial"}); }, 5000)
};
bigger.on("click", enlarge);

redden_text = element.text({
    name: true, text: "Click to redden", 
    font: "20px Arial", x: 20, y:50, degrees: 5, color:"green"
});
var redder = function(event) {
    redden_text.transition({color: "red"});
    // change it back 5 seconds later
    setTimeout(function () { redden_text.change({color: "green"}); }, 5000)
};
redden_text.on("click", redder);

rotate_text = element.text({
    name: true, text: "Click to rotate", 
    font: "20px Arial", x: 20, y:120, degrees: 5, color:"magenta"
});
var rotate = function(event) {
    rotate_text.change({degrees: -15});
    // change it back 5 seconds later
    setTimeout(function () { rotate_text.transition({degrees: 5}); }, 5000)
};
rotate_text.on("click", rotate);

var event_status = element.text({name: "event status", text: "unknown status", x: 170, y:120, color:"red", font: "20px Arial"});
var keypress = element.text({name: "key press", text: "no keyboard key press", x: 170, y:70, color:"red", font: "20px Arial"});

var key_down_handler = function (event) {
    var code = event.keyCode;
    keypress.change({color: "blue", text: "key press: " + code});
};

var turn_events_on = function () {
    // events bound to text areas
    bigger.on("click", enlarge);
    redden_text.on("click", redder);
    font_text.on("click", change_font);
    rotate_text.on("click", rotate);
    vanish_text.on("click", disappear);
    // keyboard event bound to the whole canvas.
    element.on_canvas_event("keydown", key_down_handler);
    // put the focus on the canvas so the canvas can handle keyboard events
    element.on_canvas_event("mousemove", element.focus_canvas);
    event_status.change({text: "events enabled", color:"green"});
};

var turn_events_off = function () {
    bigger.off("click");
    redden_text.off("click");
    font_text.off("click");
    rotate_text.off("click");
    vanish_text.off("click");
    element.off_canvas_event("keydown");
    element.off_canvas_event("mousemove");
    event_status.change({text: "events disabled", color:"red"});
};

$("<button>Turn events OFF</button>")
.appendTo(element)
.click(turn_events_off);

$("<button>Turn events ON</button>")
.appendTo(element)
.click(turn_events_on);

turn_events_on();

Discussion

Event handlers may be attached globally to the whole canvas or locally to an object. The example above associates a local event handler to a named object for a given event type using

element.on_canvas_event(event_type, handler_function, object_name);

The name for a named object occurring under an event is bound to the event as event.canvas_name and the properties of the object are bound to the event as event.object_info even if the event is handled by a global event handler. Only the top object under an event is bound to the event -- obscured objects below do not respond to the event.

Objects with no assigned unique name cannot bind events individually and the object information for unnamed artifacts under an event are not bound to the event.