Opacity Sliders -- jp

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

var element = $('#target_div');
var config = {
            width: 400,
            height: 300,
        };
element.dual_canvas_helper(config);

var categories = [
    {category: 1, r: 200, g:0, b:0, opacity:1.0},
    {category: 2, r: 200, g:200, b:0, opacity:0},
    {category: 3, r: 200, g:0, b:200, opacity:1.0},
    {category: 4, r: 200, g:200, b:200, opacity:0},
    {category: 5, r: 100, g:0, b:0, opacity:0},
    {category: 6, r: 100, g:200, b:0, opacity:0},
    {category: 7, r: 100, g:0, b:200, opacity:0},
    {category: 8, r: 100, g:200, b:200, opacity:1.0},
    {category: 9, r: 50, g:200, b:200, opacity:1.0},
    {category: 10, r: 50, g:200, b:0, opacity:1.0},
    {category: 11, r: 50, g:0, b:200, opacity:1.0},
    {category: 12, r: 0, g:200, b:0, opacity:0},
    {category: 13, r: 0, g:0, b:200, opacity:1.0},
    {category: 14, r: 0, g:200, b:200, opacity:0},
];

var update_colors = function(new_mappings) {
    for (var c in new_mappings) {
        var new_map = new_mappings[c];
        var old_map = category_index[c];
        old_map.r = new_map.r;
        old_map.g = new_map.g;
        old_map.b = new_map.b;
        old_map.opacity = new_map.opacity;
    }
    colorize();
};

var attach_opacity_selector = function(target, color_mappings, on_change) {
    var element = $("<div/>").appendTo(target);
    var config = {
                width: 500,
                height: 300,
            };
    element.dual_canvas_helper(config);

element.color_chooser({
            x: 320, y: 20, side:200, font: "normal 7px Arial",
            callback: function(color_array, color_string) { chosen_color = color_array; }
        });
        
        var reset = element.text({
            text: "RESET", name:true, color:"white", background:"red", x:320, y:240
        });
        reset.on("click", function() { draw_selector(); });
        
        // mouse tracker circle (initially hidden)
        var tracker = opacity_frame.circle({
            name:"mouse_track", r:5,
            events: false,  // This object is invisible to events.
            x:0, y:0, color:"black", hide:true});
        
        // invisible event rectangle
        var event_rectangle = opacity_frame.frame_rect({
            name: true, x:0, y:0, w:1, h: ncategories, color: "rgba(0,0,0,0.1)"
        });
        
        //var tracking_index = null;
        //var tracking_opacity = null;
        
        var update_opacity = function () {
            if ((tracking_index !== null) && (tracking_opacity !==null)) {
                var mapping = mapping_sequence[tracking_index];
                var opaque_color = "rgba(" + [mapping.r, mapping.g, mapping.b, tracking_opacity].join(",") + ")";
                mapping.slider_interior.change({color: opaque_color, x:tracking_opacity});
                mapping.slider_outline.change({x:tracking_opacity});
                mapping.triangle.change({color: opaque_color});
                mapping.opacity = tracking_opacity;
                report_change();
            }
        };
        
        update_opacity();
        
        var on_mouse_move = function(event) {
            debugger;
            var name = event.canvas_name;
            var location = event['model_location'];
            var index = Math.floor(location.y);
            tracking_opacity = Math.max(Math.min(location.x, 1), 0);
            
            if ((index<0) || (index>ncategories)) {
                console.warn("bad location " + index);
                return;
            }
            var mapping = mapping_sequence[index];
            if ((chosen_color)) {
                var color = "rgb(" + chosen_color.join(",") + ")";
                tracker.change(
                    {hide:false, x:location.x, y:index+0.5, color:color});
                // on click change the color of the named object
                if (event.type == "mouseup") {
                    mapping.r = chosen_color[0];
                    mapping.g = chosen_color[1];
                    mapping.b = chosen_color[2];
                    return draw_selector();
                }
            } else {
                tracker.change({hide: true});
                if (event.type == "mousedown") {
                    var old_tracking_index = tracking_index;
                    tracking_index = index;
                    if (old_tracking_index !== null) {
                        return draw_selector();
                    }
                }
                update_opacity();
                if ((event.type == "mouseup") && (tracking_index !== null)) {
                    var mapping = mapping_sequence[tracking_index];
                    mapping.opacity = tracking_opacity;
                    tracking_index = null;
                    return draw_selector();
                }
            }
        };
        event_rectangle.on("mousemove", on_mouse_move);
        event_rectangle.on("mouseup", on_mouse_move);
        event_rectangle.on("mousedown", on_mouse_move);
        // call back the initial state
        report_change();
    };
    
    draw_selector();
    element.fit();
    element.dialog({height:'auto', width:'auto'});
    return element;
}

var colorizer = attach_opacity_selector(element, categories, update_colors);

Discussion

This example shows how to use a canvas floating in a JQuery dialog to modify another canvas.