10

Simple question but I'm not able to find something out there...

Is there a simple and user friendly tool that can be used within a jupyter-notebook to let the user draw something in black on a white space (let say of size (x,y) pixels) after running a cell?

The drawing has to be returned (or even temporarily saved) as an array/image which can then be used by numpy for example.

1
  • Maybe holoviews lib can be twisted to do that.
    – edinho
    Commented Apr 8, 2019 at 14:36

3 Answers 3

7

you can do that using PIL and tkinter libraries, like:

from PIL import ImageTk, Image, ImageDraw
import PIL
from tkinter import *

width = 200  # canvas width
height = 200 # canvas height
center = height//2
white = (255, 255, 255) # canvas back

def save():
    # save image to hard drive
    filename = "user_input.jpg"
    output_image.save(filename)

def paint(event):
    x1, y1 = (event.x - 1), (event.y - 1)
    x2, y2 = (event.x + 1), (event.y + 1)
    canvas.create_oval(x1, y1, x2, y2, fill="black",width=5)
    draw.line([x1, y1, x2, y2],fill="black",width=5)

master = Tk()

# create a tkinter canvas to draw on
canvas = Canvas(master, width=width, height=height, bg='white')
canvas.pack()

# create an empty PIL image and draw object to draw on
output_image = PIL.Image.new("RGB", (width, height), white)
draw = ImageDraw.Draw(output_image)
canvas.pack(expand=YES, fill=BOTH)
canvas.bind("<B1-Motion>", paint)

# add a button to save the image
button=Button(text="save",command=save)
button.pack()

master.mainloop()

You can modify the save function to read the image using PIL and numpy to have it as an numpy array. hope this helps!

3
  • Nice, it helped, yes. But if drawn too fast, a line appears dotted, which I do not want. I also fixed some little bugs and export the image using black and white mode as I don't need the 3 channels (I added the PIL.image.new() documentation URL in the code for all available modes). Commented Apr 9, 2019 at 7:32
  • yes, i've noticed the same issue when writing the code, I couldn't figure a way to change that, the only solution I could figure so far was moving the mouse slowly when drawing, please keep me informed if you find any @s.k Commented Apr 11, 2019 at 14:14
  • Should this work in notebook running in the cloud? I get TclError: no display name and no $DISPLAY environment variable Commented Aug 23, 2021 at 20:57
2

Try ipycanvas with interactive drawing mode. It actually has a demo notebook with interactive drawing that could be easily modified to do exactly what you want. It also has numpy support.

0

There is a discussion on jupyterlab's github page on this issue: https://github.com/jupyterlab/jupyterlab/issues/9194. Apparently, it is planned to add Excalidraw at some point and until then, https://github.com/nicknytko/notebook-drawing was recommended.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.