Updating (save?) FreehandDraw Figure after Drawing on Output

Hello everyone. I am the Laboratory Technician for Undergraduate Physics at UConn. We are looking into converting our lab notebooks from Mathematica to Python and this drawing feature helps us move away from the drawing tools in Mathematica. We are asking students to draw predictions of position, velocity, and acceleration plots of a cart accelerating down a ramp. We want to use this freehand draw tool inside of our Goolge Colab notebook. We are able to get the code to generate the drawing environment however, it is a bit difficult for our introductory students to call and upload the saved png from their Drive folders (we don’t want to ask the students to mount the Google Drive everytime). What we want to do is have the students be able to save the drawings they made to the output file so that when their TA opens the file after not having run the cells, can still view the students answer.

Is there a way to save the drawing created on the output of the FreehandDrawingTool directly inside the output html file so that it can be seen when the file is reopened by someone else? I do not want to use the export png feature, since it gets too complicated for students to mount the Google Drive and load the file.

The current code looks like this:

from bokeh.io import output_notebook
from bokeh.plotting import figure, output_file, show, save
from bokeh.models import FreehandDrawTool


p = figure(x_range=(0, 1), y_range=(0, 1), width=400, height=400,
           title='x(t) vs t')
p.xaxis.axis_label = "t"
p.yaxis.axis_label = "x(t)"

renderer = p.multi_line([[0, 0]], [[0, 0]], line_width=5, alpha=1, color='red')

draw_tool = FreehandDrawTool(renderers=[renderer], num_objects=1)
p.toolbar.active_drag = draw_tool


It’s unclear what you actually need to save. Do you need an image or would saving the data from the tool (i.e. the coordinates of the drawn components) be sufficient?

I guess it would be saving the coordinates so that when the block is run again, the TA can see what the student sketched in the box.

We basically want to be able to call the students’ drawing back once the notebook has been saved and even if it’s been closed.

Generally speaking, it’s not possible for a web page to save data directly to local files, due to intrinsic browser security mechanisms. Your options are basically these:

  • Embed a bokeh server app in the notebook. Bokeh server callbacks run real Python code, so they could actually save something to a file, e.g.

  • A CustomJS callback could send the coordinates to some other web server REST API to be saved off (you could create a Flask app for this, say)

  • A CustomJS callback could just display the coordinates in a Div or alert dialogue, for the students to copy and past themselves.

  • Since this is in the notebook, there is also a possibility for a CustomJS callbacks to use the notebook’s own `kernel.execute JS API to run python code that saves the coordianates to a file