Features

Accept image data from Numpy arrays or URLs.
Support Python callback functions for front-end mouse events.
Support Canvas affine transform operations (work in progress)
Widget properties width and height allow for direct manipulation displayed image size, independent of source data size.

Development was done with Python 3.4 and IPython 3.2.2 and Chrome as my browser.

Installation

This widget uses jupyter-pip which allows me to make this package pip installable! jupyter-pip is specifically designed to solve the distribution problem for notebook extensions that have associated JavaScript. jupyter-pip takes care of placing files in all the right places. No extra action required by the casual user, just install like any other Python package:

pip install ipynb_widget_canvas

Dependencies

ipython
numpy
pillow
requests

The package pillow is primarily used to compress and encode image data in the Python back-end prior to sending it to the browser front-end. pillow is used secondarily to help with basic image file IO functionality. The requests package is used for fetching image data from remote URLs.

Load the data



In [1]:

    
import IPython
from widget_canvas import CanvasImage
from widget_canvas.image import read

data_image = read('images/Whippet.jpg')



In [ ]:

    
data_image.dtype



In [ ]:

    
data_image.shape

Dispay the image



In [ ]:

    
wid_canvas



In [ ]:

    
wid_canvas = CanvasImage(data_image)
wid_canvas.display()

wid_canvas.width *= 1.5
wid_canvas.height *= 1.5

wid_canvas.border_color = 'black'



In [ ]:

    
wid_canvas._mouse_active=True



In [ ]:

    
# Build an event handler function.
def simple_handler(wid, info):
    msg = 'Click: {:3d}, {:3d}'.format(info['canvasX'], info['canvasY'])
    print(msg)

# Attach the handler to widget's `on_click` events.
wid_canvas.on_mouse_click(simple_handler)

Try it out!

Click on the image above and see your mouse X,Y information displayed.



In [ ]:

    
print(514)

wid_canvas



In [ ]:

    
wid_canvas.width*=1.2



In [ ]:



In [ ]:



In [ ]:



In [ ]:



In [ ]:



In [ ]:



In [ ]: