Interactive Black Box Drawing App for Google Colab

DrawBoundary.py

#@title Draw Boundary { run: "auto" }
import ipywidgets as widgets
from IPython.display import display, HTML, Image
from google.colab.output import eval_js
from base64 import b64decode
import PIL
from datetime import datetime

Square_Size = 256 #@param ["256", "512"] {type:"raw"}
Brush_Size = 40 #@param {type:"slider", min:0, max:100, step:5}
filename = "your_name_here.jpg"

print("Draw the floor plan boundary")

canvas_html = """
<canvas id="myCanvas" width=%d height=%d> style="border:1px solid #000000;"</canvas>

<script>
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')

ctx.fillStyle = 'white';
ctx.fillRect( 0, 0, canvas.width, canvas.height)
var Brush_Size = %d

var button = document.querySelector('button')
var mouse = {x: 0, y: 0}

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft
  mouse.y = e.pageY - this.offsetTop
})
canvas.onmousedown = ()=>{
  ctx.beginPath()
  ctx.moveTo(mouse.x, mouse.y)
  
  canvas.addEventListener('mousemove', onPaint)
}
canvas.onmouseup = ()=>{
  canvas.removeEventListener('mousemove', onPaint)
}
var onPaint = ()=>{
  ctx.fillStyle = 'black';
  ctx.fillRect(mouse.x, mouse.y, Brush_Size, Brush_Size)
  ctx.stroke()
}

  // FINISH BUTTON
var data = new Promise(resolve=>{
  button.onclick = ()=>{
    resolve(canvas.toDataURL('image/jpg'))
  }
})

  

</script>
"""

def draw(filename=filename,  w=Square_Size, h=Square_Size, Brush_Size=Brush_Size):
  display(HTML(canvas_html % (w, h, Brush_Size)))
  data = eval_js("data")
  binary = b64decode(data.split(',')[1])
  with open(filename, 'wb') as f:
    f.write(binary)
  return len(binary)

def on_button_clicked(b):
  # Display the message within the output widget.
  with output:
    #display(HTML(canvas_html % ( w=$Square_Size, h=$Square_Size, Brush_Size=$Brush_Size)))
    data = eval_js("data")
    binary = b64decode(data.split(',')[1])
    with open(filename, 'wb') as f:
      f.write(binary)
  return len(binary)
  


def on_button_clicked2(c):
  # Display the message within the output widget.
  draw(filename=filename,  w=Square_Size, h=Square_Size, Brush_Size=Brush_Size)
  with output:
    now = datetime.now()
    current_time = now.strftime("%H:%M:%S")
    print("Image Saved Again at:", current_time)
  

button = widgets.Button(description="Save Image")
button.on_click(on_button_clicked)
output = widgets.Output()


button2 = widgets.Button(description="Reset")
output = widgets.Output()
button2.on_click(on_button_clicked2)
display(button, button2, output)

draw(filename = filename, w=Square_Size, h=Square_Size, Brush_Size=Brush_Size)
print("Image Saved - Reset to draw again")