Last active
May 17, 2024 03:38
-
-
Save rickkk856/6a2800cc84dd8fd456074e5a467edc47 to your computer and use it in GitHub Desktop.
Drawing Interface For Google Colaboratory - Paint
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#@title <font color='red'>Drawing APP</font> {vertical-output: true, run: "auto"} | |
import ipywidgets as widgets | |
from ipywidgets import Layout, Button, Box | |
from IPython.display import display, HTML, Image | |
from google.colab.output import eval_js | |
from base64 import b64decode | |
Square_Size = 256 #@param ["256", "512"] {type:"raw"} | |
Brush_Size = 30 #@param {type:"slider", min:0, max:100, step:5} | |
filename = "my_drawing"#@param [] {allow-input: true} | |
filename = filename + ".png" | |
js_code = ''' | |
<style> | |
.colors-buttons div { | |
width: 30px; | |
height: 30px; | |
margin: 2px;} | |
div { | |
display: flex; | |
} | |
canvas{border:1px solid black !important;} | |
</style> | |
<canvas id="myCanvas" width="%d" height="%d"></canvas> | |
<div class="colors-buttons"> | |
<div class="color" style="background-color: #000000;" id-color="#000000"></div> | |
<div class="color" style="background-color: #FFFFFF;" id-color="#FFFFFF"></div> | |
<div class="color" style="background-color: #FFFF00;" id-color="#FFFF00"></div> | |
<div class="color" style="background-color: #FF00FF;" id-color="#FF00FF"></div> | |
<div class="color" style="background-color: #00FFFF;" id-color="#00FFFF"></div> | |
<div class="color" style="background-color: #FF0000;" id-color="#FF0000"></div> | |
<div class="color" style="background-color: #0000FF;" id-color="#0000FF"></div> | |
<div class="color" style="background-color: #00FF00;" id-color="#00FF00"></div> | |
</div> | |
<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.fillRect(mouse.x-( Brush_Size/2), mouse.y-(Brush_Size/2), Brush_Size, Brush_Size) | |
ctx.stroke() | |
} | |
const colors = document.getElementsByClassName('color'); | |
Array.from(colors).forEach(color => { | |
color.addEventListener('click', (event) => { | |
const colorSelected = event.target.getAttribute('id-color'); | |
ctx.fillStyle = colorSelected; | |
}); | |
}); | |
// FINISH BUTTON | |
var data = new Promise(resolve=>{ | |
button.onclick = ()=>{ | |
resolve(canvas.toDataURL('image/jpg')) | |
} | |
}) | |
</script> | |
''' | |
## Function to Appear Image Canvas | |
def draw(filename=filename, w=Square_Size, h=Square_Size, Brush_Size=Brush_Size): | |
display(HTML(js_code % (w, h, Brush_Size))) | |
data = eval_js("data") | |
binary = b64decode(data.split(',')[1]) | |
if AttributeError: | |
pass | |
with open(filename, 'wb') as f: | |
f.write(binary) | |
return len(binary) | |
if button2.on_click(on_button_clicked2): | |
pass | |
## Action for Reset Button | |
def on_button_clicked(b): | |
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) | |
## Show Save Button & Save outputs | |
button = widgets.Button(description="Save") | |
button.on_click(on_button_clicked) | |
output = widgets.Output() | |
display(button, output) | |
## Show Canvas for the First Time | |
draw(filename=filename, w=Square_Size, h=Square_Size, Brush_Size=Brush_Size) | |
print("Image Saved at") |
Hello, may I please ask how to load an image to the canvas first and then draw on it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hello, did you solve that problem. out maybe found other way to draw on other images with colab