N-Dimensional Frames

N-Dimensional Scatter Plot

Network Explorer

Opacity Sliders

This is an example page for the jp_doodle package.

jp_doodle makes implementing special purpose interactive visualizations easy.

Quick references: Javascript API; Python API.

Miscellaneous Demos: Image detail viewer..

These example pages use stand alone Javascript, but the code used to implement them can be transliterated to Python and implemented using Jupyter widgets (modulo some subtleties).
Please see the Jupyter notebooks in the package for additional discussion and documentation.
Please use Binder to easily run the Jupyter notebooks of the package.

Edit polygon

A polygon editor which illustrates combining mouse event modalities with reference frames. Click to start the polygon. Type "." to drop a new vertex. Click again to close the polygon. Press the reset button to play again.

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);

// Add a light backdrop
var background = element.rect({name: "background", x:-15, y:-15, w:715, h:370, color:"#def"})

// Edit in cartesian area [-1:1] x [-1:1]
let frame = element.frame_region(20, 20, 300, 300, 
            -1, -1, 1, 1);
            
// Show axes for reference
frame.lower_left_axes({
            x_anchor: 0,
            y_anchor: 0,
            tick_line_config: {color: "green"},
            tick_text_config: {color: "blue"},
            add_end_points: false,
            max_tick_count: 6,
            })

// Helpful informative text.
var info_div = $("<div>Useful information should show up here eventually.</div>").appendTo(element);

// Store polygon points here.
var polygon_points = [];

// Convenience to add a point to the polygon
var push_location = function (location) {
    polygon_points.push([location.x, location.y]);
}
var poly = null;
var circ = null;

var start_polygon = function () {
    // wait for a mouse click to define the first point of the polygon.
    frame.forget_objects(["poly", "circ"]);   // forget graphical objects if they exist.
    element.reset_events();
    polygon_points = [];
    
    // The graphical polygon to edit
    poly = frame.polygon({
        name: "poly", points: polygon_points, color:"red", 
        close:false, fill:false, lineWidth:5, events:false});
    
    // A circle to track the mouse
    circ = frame.circle({name: "circ", x:0, y:0, r:5, color:"magenta", hide:true, events:false});
    
    var track_mouse = function(event) {
        var frame_location = frame.event_model_location(event);
        circ.change({x: frame_location.x, y: frame_location.y, hide: false});
    };
    background.on("mousemove", track_mouse);
    
    var start_click = function(event) {
        var frame_location = frame.event_model_location(event);
        // store the initial point and a mouse tracking point
        polygon_points = [];
        push_location(frame_location);  // first vertex
        push_location(frame_location);  // mouse tracking vertex
        // switch modes to continue polygon after a short delay in case of duplicate mouse clicks
        element.reset_events();
        setTimeout(continue_polygon, 100);
    };
    background.on("click", start_click);
    
    info_div.html("<div>Click to start polygon.</div>")
};

var continue_polygon = function () {
    // space bar drops a point, mouse click completes the polygon
    element.reset_events();
    
    var track_mouse = function(event) {
        // track the cursor
        var frame_location = frame.event_model_location(event);
        circ.change({x: frame_location.x, y: frame_location.y, hide: false});
        // change the last polygon point to track the cursor
        polygon_points.pop();
        push_location(frame_location);  // replace mouse tracking vertex
        poly.change({points: polygon_points});
        // set the focus to the canvas so the canvas can recieve keyboard events.
        element.focus_canvas();
    };
    background.on("mousemove", track_mouse);
    
    var dot_drops_point = function (event) {
        // When the user hits "." drop a new vertex on the polygon
        const dot_key_code = 190;
        if (event.keyCode == dot_key_code) {
            // 'keydown' events do not have locations.  Duplicate the tracking vertex.
            var vertex = polygon_points.pop();
            polygon_points.push(vertex);  // dropped location
            polygon_points.push(vertex);  // mouse tracking vertex
            poly.change({points: polygon_points});
        }
    }
    background.on("keydown", dot_drops_point);
    
    var stop_click = function(event) {  
        // When the user "clicks" in "continue" mode, complete the polygon.
        var frame_location = frame.event_model_location(event);
        // switch modes to continue polygon
        circ.change({hide: true});
        // change the last polygon point to track the cursor
        polygon_points.pop();  // remove previous mouse tracking vertex
        polygon_points.push([frame_location.x, frame_location.y]);
        poly.change({points: polygon_points, close: true});
        element.reset_events();
        info_div.html("<div>Polygon complete.</div>")
    };
    background.on("click", stop_click);
    
    info_div.html("<div>Type '.' to add a vertex. Click to complete polygon.</div>");
};

// NOTE: For some reason the fit() method disables keypress events.
//   I haven't been able to fix this, so for now if you need key events, don't fit().
//element.fit(null, 20)

start_polygon();

$("<button>Restart</button>")
.appendTo(element)
.click(start_polygon);

Discussion

This demonstration uses the reset_canvas method to switch between diffferent interaction modes: beginning the polygon, continuing the polygon, or finishing the polygon.

Note that the transition between "start" and "continue" is delayed to prevent the new mode from possibly responding to duplicated mouse clicks.