Frames -- jp_doodle demo

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

var element = $('#target_div');
var canvas_config = {
    width: 800,
    height: 600,
    //translate_scale: {x: x, y:y, w:w, h:h},
};
element.dual_canvas_helper(canvas_config);

var points = [[50,0], [40,-20], [40,-40], [30,-60],
              [30,-50], [10,-40], [20,-30], [20,-20], [30,-10], [0,0]];

// Draw elements outside of any frame
adorn(element, "no frame");

// Make a slanted frame and draw elements in it.
var x_vector={"x":1, "y":-0.3};
var y_vector={"x":1, "y":1};
var xy_offset={"x":300, "y":-10};

// Make the frame.
var frame = element.vector_frame(x_vector, y_vector, xy_offset);

// Draw on it.
adorn(frame, "A frame");

// Add some interactive controls for adjusting the frame

var x_dragger = element.text({
    name: "x_dragger",
    text: "X=" + xy_offset.x,
    x: xy_offset.x,
    y: -150,
    color: "cyan",
    background: "blue",
    align: "center",
    valign: "center",
});

var y_dragger = element.text({
    name: "y_dragger",
    text: "Y=" + xy_offset.y,
    y: xy_offset.y,
    x: 130,
    color: "cyan",
    background: "blue",
    align: "center",
    valign: "center",
});

// special frame for offset vectors
var vector_frame = element.frame_region(
    //-90, -220, -10, -140,
    -100, -340, 100, -140,
    -2, -2, +2, +2);

vector_frame.frame_rect({x:-2, y:-2, w:4, h:4, color:"#ddd", name:"vector_region"});

var vformat = function(prefix, vector) {
    return prefix+"="+(vector.x.toFixed(1)+","+(vector.y.toFixed(1)));
};

var dx_line = vector_frame.line({
    name: "dx_line",
    x1: 0, y1:0,
    x2: x_vector.x, y2: x_vector.y,
    color: "#396", lineWidth:3,
});

var dx_dragger = vector_frame.text({
    name: "dx_dragger",
    text: vformat("dx", x_vector),
    x: x_vector.x,
    y: x_vector.y,
    color: "cyan",
    background: "blue",
    align: "center",
    valign: "center",
});

var dy_line = vector_frame.line({
    name: "dy_line",
    x1: 0, y1:0,
    x2: y_vector.x, y2: y_vector.y,
    color: "#936", lineWidth:3,
});

var dy_dragger = vector_frame.text({
    name: "dy_dragger",
    text: vformat("dy", y_vector),
    x: y_vector.x,
    y: y_vector.y,
    color: "cyan",
    background: "blue",
    align: "center",
    valign: "center",
});

// mouse events for dragging
var dragging = null;

element.on_canvas_event("mousedown",
    function(event) {
        dragging = event.canvas_name;
    });

element.on_canvas_event("mouseup",
    function(event) {
        dragging = null;
    });

element.on_canvas_event("mousemove", function(event) {
    var location = element.event_model_location(event);
    var vlocation = vector_frame.event_model_location(event);
    // update locations
    if (dragging == "x_dragger") {
        xy_offset.x = Math.round(location.x);
    }
    if (dragging == "y_dragger") {
        xy_offset.y = Math.round(location.y);
    }
    if (dragging == "dy_dragger") {
        y_vector = vlocation;
    }
    if (dragging == "dx_dragger") {
        x_vector = vlocation;
    }
    frame.change({x_vector: x_vector, y_vector: y_vector, xy_offset: xy_offset});
    x_dragger.change({text: "X=" + xy_offset.x, x: xy_offset.x,})
    y_dragger.change({text: "Y=" + xy_offset.y, y: xy_offset.y,})
    dy_dragger.change({x: y_vector.x, y: y_vector.y, text: vformat("dy", y_vector)});
    dy_line.change({x2: y_vector.x, y2: y_vector.y,});
    dx_dragger.change({x: x_vector.x, y: x_vector.y, text: vformat("dx", x_vector)});
    dx_line.change({x2: x_vector.x, y2: x_vector.y,});
});

element.text({
    x:350, y:-250, color:"#863", background:"#def", align:"center",
    text:"Drag the blue controls to adjust the frame."
});

var reset_button = $("<button>Transition to original settings</button>").appendTo(element);
reset_button.click(reset_transition);

element.fit(null, 20);

Discussion

Frame geometry effects the (x,y) positioning of reference points for objects in the frame but do not effect styling for objects.