Package: ipydraw
ipydrawSimple canvas for ipywidgetsInstallationYou can install usingpip:# Using pippipinstallipydraw# Using poetrypoetryaddipydrawIf you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
the nbextension:jupyternbextensionenable--py[--sys-prefix|--user|--system]ipydrawUsageCanvasCanvases can be used to draw an image using a pointing device (like a mouse) on
the frontend.You can display the canvas in Jupyter frontends by creating aCanvaswidget:importipydrawcanvas=ipydraw.Canvas()canvasYou can access the image data (as a data url) by examining the data attribute:print(canvas.data)# data:image/png;base64,...Arguments# Default values shown belowipydraw.Canvas(# The width of the strokes drawn on the Canvasline_width=10,# If true, enable drawing in multiple colors.# The user can pick the color before drawing each stroke.color=False,# The size (in pixels) of the canvas.size=(100,100),)LimitationsIt is not currently possible to set an initial image for the canvas.The canvas only supports syncing from the frontend (browser) to the kernel (Python).It is not possible to update any attributes (e.g.,sizeorline_width) after the widget has been created.Usage with PillowTo load the canvas image into a Python PillowImage, we need to parse the data URL
(which is essentially a base64-encoded PNG image).Make sure to install Pillow before continuing.pip3installPillowimportbase64,iofromPillowimportImagedata_url=canvas.data# Strip the data: url prefix to get just the base64 encoded PNG datadata_encoded=data_url[len('data:image/png;base64,'):]# Get the raw PNG datadata_bin=base64.b64decode(data_encoded)# Read the image into a Pillow Image.# We use a BytesIO since Image.open expects a file-like object.image_from_canvas=Image.open(io.BytesIO(data_bin))Point PickerThe point picker can be used to select points on an image.fromPILimportImageimportipydraw# Create a PointPicker with a given background imagebg=Image.open("some_image.jpeg")pp=ipydraw.PointPicker.for_image(bg,n_points=2)ppTo get the points after they've been selected:points=pp.get_points()# example: [[308, 400.734375], [427, 349.734375]]Arguments# Default values shown belowipydraw.PointPicker(# The src of the image to use as the background. This is set automatically if you# use the PointPicker.for_image(...) API. Otherwise, this must be set manually.image_src="...",# The number of points that should be selected on the image. If set to None, there# is no limit on the number of points.n_points=False,)Development InstallationCreate a dev environment:condacreate-nipydraw-dev-cconda-forgenodejsyarnpythonjupyterlab
condaactivateipydraw-devInstall the python. This will also build the TS package.pipinstall-e".[test, examples]"When developing your extensions, you need to manually enable your extensions with the
notebook / lab frontend. For lab, this is done by the command:jupyter labextension develop --overwrite .
yarn run buildFor classic notebook, you need to run:jupyter nbextension install --sys-prefix --symlink --overwrite --py ipydraw
jupyter nbextension enable --sys-prefix --py ipydrawNote that the--symlinkflag doesn't work on Windows, so you will here have to run
theinstallcommand every time that you rebuild your extension. For certain installations
you might also need another flag instead of--sys-prefix, but we won't cover the meaning
of those flags here.How to see your changesTypescript:If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
terminals to watch for changes in the extension's source and automatically rebuild the widget.# Watch the source directory in one terminal, automatically rebuilding when neededyarnrunwatch# Run JupyterLab in another terminaljupyterlabAfter a change wait for the build to finish and then refresh your browser and the changes should take effect.Python:If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.PublishingTags are automatically published by CI.
The version must be updated manually in the Python and JavaScript packages.
Assuming you're publishing version1.2.3(or1.2.3-alpha.4):Updateipydraw/_version.pyFor pre-releases, setversion_suffixtoa4(or empty for a non-pre-release).Updatepackage.jsonFor pre-releases, use the1.2.3-alpha.4syntax.To push the tag:VERSION="v1.2.3-alpha.4"
git commit -m "$VERSION"
git tag "$VERSION"
git push
git push --tags