Update app.py
Browse files
app.py
CHANGED
|
@@ -2,60 +2,75 @@ import streamlit as st
|
|
| 2 |
from PIL import Image
|
| 3 |
import numpy as np
|
| 4 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 5 |
def main():
|
| 6 |
st.title("Streamlit Whiteboard for Note-Taking")
|
| 7 |
|
| 8 |
# Text input for taking notes
|
| 9 |
note = st.text_area("Take Notes Here:", height=200)
|
| 10 |
|
| 11 |
-
# Create a canvas
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
# Create a container for the canvas
|
| 15 |
-
canvas_container = st.container()
|
| 16 |
-
|
| 17 |
-
# Display the canvas
|
| 18 |
-
canvas_placeholder = canvas_container.image(canvas, caption="Draw Here", use_column_width=True)
|
| 19 |
-
|
| 20 |
-
# Initialize drawing variables
|
| 21 |
-
drawing = False
|
| 22 |
-
previous_point = None
|
| 23 |
-
|
| 24 |
-
# Handle mouse events
|
| 25 |
-
def on_mouse_event(event):
|
| 26 |
-
nonlocal drawing, previous_point
|
| 27 |
-
|
| 28 |
-
if event.type == "mousedown":
|
| 29 |
-
drawing = True
|
| 30 |
-
previous_point = (event.x, event.y)
|
| 31 |
-
|
| 32 |
-
elif event.type == "mousemove" and drawing:
|
| 33 |
-
# Draw a line from the previous point to the current point
|
| 34 |
-
canvas = draw_line(canvas, previous_point, (event.x, event.y))
|
| 35 |
-
canvas_placeholder.image(canvas, caption="Draw Here", use_column_width=True)
|
| 36 |
-
previous_point = (event.x, event.y)
|
| 37 |
-
|
| 38 |
-
elif event.type == "mouseup":
|
| 39 |
-
drawing = False
|
| 40 |
-
|
| 41 |
-
canvas_container.add_event_handler("mouse", on_mouse_event)
|
| 42 |
|
| 43 |
# Buttons for interaction
|
| 44 |
if st.button("Clear Canvas"):
|
| 45 |
-
|
| 46 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 47 |
|
| 48 |
if st.button("Save Notes"):
|
| 49 |
save_notes(note)
|
| 50 |
|
| 51 |
-
def draw_line(canvas, start_point, end_point):
|
| 52 |
-
"""
|
| 53 |
-
Draw a line on the canvas between two points.
|
| 54 |
-
"""
|
| 55 |
-
draw = Image.fromarray(canvas)
|
| 56 |
-
draw.line([start_point, end_point], fill=(0, 0, 0), width=5)
|
| 57 |
-
return np.array(draw)
|
| 58 |
-
|
| 59 |
def save_notes(note):
|
| 60 |
with open("notes.txt", "w", encoding="utf-8") as file:
|
| 61 |
file.write(note)
|
|
|
|
| 2 |
from PIL import Image
|
| 3 |
import numpy as np
|
| 4 |
|
| 5 |
+
HTML_TEMPLATE = """
|
| 6 |
+
<html>
|
| 7 |
+
<head>
|
| 8 |
+
<title>Streamlit Whiteboard</title>
|
| 9 |
+
<style>
|
| 10 |
+
canvas {
|
| 11 |
+
border: 1px solid black;
|
| 12 |
+
}
|
| 13 |
+
</style>
|
| 14 |
+
</head>
|
| 15 |
+
<body>
|
| 16 |
+
<canvas id="canvas" width="800" height="400"></canvas>
|
| 17 |
+
<script>
|
| 18 |
+
var canvas = document.getElementById("canvas");
|
| 19 |
+
var ctx = canvas.getContext("2d");
|
| 20 |
+
ctx.fillStyle = "white";
|
| 21 |
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| 22 |
+
|
| 23 |
+
var isDrawing = false;
|
| 24 |
+
var lastX = 0;
|
| 25 |
+
var lastY = 0;
|
| 26 |
+
|
| 27 |
+
canvas.addEventListener("mousedown", function(event) {
|
| 28 |
+
isDrawing = true;
|
| 29 |
+
lastX = event.offsetX;
|
| 30 |
+
lastY = event.offsetY;
|
| 31 |
+
});
|
| 32 |
+
|
| 33 |
+
canvas.addEventListener("mousemove", function(event) {
|
| 34 |
+
if (!isDrawing) return;
|
| 35 |
+
ctx.beginPath();
|
| 36 |
+
ctx.moveTo(lastX, lastY);
|
| 37 |
+
ctx.lineTo(event.offsetX, event.offsetY);
|
| 38 |
+
ctx.stroke();
|
| 39 |
+
lastX = event.offsetX;
|
| 40 |
+
lastY = event.offsetY;
|
| 41 |
+
});
|
| 42 |
+
|
| 43 |
+
canvas.addEventListener("mouseup", function() {
|
| 44 |
+
isDrawing = false;
|
| 45 |
+
});
|
| 46 |
+
|
| 47 |
+
</script>
|
| 48 |
+
</body>
|
| 49 |
+
</html>
|
| 50 |
+
"""
|
| 51 |
+
|
| 52 |
def main():
|
| 53 |
st.title("Streamlit Whiteboard for Note-Taking")
|
| 54 |
|
| 55 |
# Text input for taking notes
|
| 56 |
note = st.text_area("Take Notes Here:", height=200)
|
| 57 |
|
| 58 |
+
# Create a canvas component
|
| 59 |
+
canvas_component = st.components.v1.html(HTML_TEMPLATE, width=800, height=400)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 60 |
|
| 61 |
# Buttons for interaction
|
| 62 |
if st.button("Clear Canvas"):
|
| 63 |
+
canvas_component.js_eval('''
|
| 64 |
+
var canvas = document.getElementById("canvas");
|
| 65 |
+
var ctx = canvas.getContext("2d");
|
| 66 |
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 67 |
+
ctx.fillStyle = "white";
|
| 68 |
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| 69 |
+
''')
|
| 70 |
|
| 71 |
if st.button("Save Notes"):
|
| 72 |
save_notes(note)
|
| 73 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
def save_notes(note):
|
| 75 |
with open("notes.txt", "w", encoding="utf-8") as file:
|
| 76 |
file.write(note)
|