Tuesday, 31 July 2018

Showing cropped image in bokeh

I am showing a picture in a figure in bokeh and am using the BoxSelectTool in order to draw a rectangle.

box_select = BoxSelectTool(callback=callback)

p2 = figure(x_range=(0,700), y_range=(0,500),plot_width=1100,plot_height=1100,tools=[box_select])
p2.image_url( url='url',
         x=1, y=1, w=700, h=500, anchor="bottom_left",source=im_src)

rect_source = ColumnDataSource(data=dict(x=[], y=[], width=[], height=[]))
callback = CustomJS(args=dict(rect_source=rect_source), code="""
    // get data source from Callback args
    var data = rect_source.data;

    /// get BoxSelectTool dimensions from cb_data parameter of Callback
    var geometry = cb_data['geometry'];

    /// calculate Rect attributes
    var width = geometry['x1'] - geometry['x0'];
    var height = geometry['y1'] - geometry['y0'];
    var x = geometry['x0'] + width/2;
    var y = geometry['y0'] + height/2;

    /// update data source with new Rect attributes
    data['x'].push(x);
    data['y'].push(y);
    data['width'].push(width);
    data['height'].push(height);

    rect_source.data = data;
    rect_source.change.emit();
'''

Now i want to show that image region as cropped in a new smaller figure, after the rectangle is drawn, without clicking a button or anything:

d2 = figure(x_range=(0,200), y_range=(0,100),plot_width=200,plot_height=100)
d2.image( image='image',
         x=1, y=1, dw=100, dh=100, source=img, palette="Viridis256")

img = ColumnDataSource( data=dict(image=[]))

So i need something like this in JS:

tmp_im = cv2.imread('static/0' + str(pos1.loc[ind, "picture"].values[0]) + '.jpg')
tmp_im = tmp_im[geometry['y0']:geometry['y1'],geometry['x0']:geometry['x1']]
tmp_im = cv2.cvtColor(tmp_im, cv2.COLOR_BGR2GRAY)
img.data = dict(image=[tmp_im])

How can I do that in JS + bokeh?



from Showing cropped image in bokeh

No comments:

Post a Comment