In [17]:

    

import ipywidgets
from IPython.display import display, Javascript
from traitlets import Unicode # Used to declare attributes of our widget
import numpy as np


    

In [18]:

    

class GraphWidget(ipywidgets.DOMWidget):
    _view_name = Unicode('GraphView', sync=True)
    description = 'x'    
    value = Unicode(sync=True)
    js = """require(["widgets/js/widget", "widgets/js/manager"], function(widget, manager){
    // is based on the DatePickerView
    var GraphView = widget.DOMWidgetView.extend({
        render: function() {
            //@ attr id : this is the id we reach to in the dragended function in the DragPlugin
            this.$text = $('<input />')
                .attr('type', 'text')
                .attr('id', 'feedback_widget')                
                .appendTo(this.$el);
        },
        
        update: function() {
            this.$text.val(this.model.get('value'));
            return GraphView.__super__.update.apply(this);
        },
        
        events: {"change": "handle_change"},
        
        handle_change: function(event) {
            this.model.set('value', this.$text.val());
            this.touch();
        },
    });
    
    manager.WidgetManager.register_widget_view('GraphView', GraphView);
});"""
    def __init__(self, *args, **kwarg):
        if kwarg.get('widgen_name'):
            self._view_name = kwarg.get('widgen_name')
            self.js = self.js.replace('GraphView', kwarg.pop('widgen_name'))
            self.ref_name = self._view_name + "_id"
            self.js = self.js.replace('feedback_widget', self.ref_name)
        ipywidgets.DOMWidget.__init__(self, *args, **kwarg)


    

In [19]:

    

import julia
n = 1200
xs = np.linspace(-2, 1, n)
ys = np.linspace(-1, 1, n)
im = julia.mandel(-2, 1, -1, 1, n=n)


    

In [20]:

    

w = GraphWidget(widgen_name='GraphView01')
w.value = "(0,0)"

def j(x):
    x = eval(w.value)
    im = julia.julia(x[0] + 1j*x[1], 1200, 20)
    plot = figure(x_range=(-1, 1), y_range=(-1, 1),
              tools=[BoxSelectTool(callback=c)], plot_width=450,
              plot_height=450, toolbar_location=None)
    plot.image([im], [xs[0]], [ys[0]], [3], [2], palette="Spectral11")
    show(plot)


    

In [21]:

    

from bokeh.plotting import figure, output_notebook, show
from bokeh.models import ColumnDataSource, CustomJS, Plot, BoxSelectTool, TapTool
output_notebook()


    

    





    
        
        
        
    

        
        BokehJS successfully loaded.
    

In [31]:

    

print(w.ref_name)


    

    




GraphView01_id

In [32]:

    

c = CustomJS()
code="""
console.log(cb_data)
var x = ((cb_data['geometry']['x1']+cb_data['geometry']['x0'])/2);
var y = ((cb_data['geometry']['y1']+cb_data['geometry']['y0'])/2);
console.log("("+x+","+y+")");
console.log('GraphView01_id');
$('#GraphView01_id').val("("+x+","+y+")").trigger("change").hide();
""" 

c.code
# Generate a figure container
plot = figure(x_range=(-2, 1),
              y_range=(-1, 1),
              tools=[BoxSelectTool(callback=c)],
              plot_width=450,
              plot_height=300)

# Plot the line by the x,y values in the source property
plot.image([im], [xs[0]], [ys[0]], [3], [2], palette="Spectral11")
show(plot)


    

In [33]:

    

ipywidgets.interact(j, x=w)


    

    















    






None






    
Out[33]:





<function __main__.j>

In [ ]: