Advanced Virtual Whiteboard

Whiteboard Loading..

Keyboard Shortcuts

Pen Tool P

Eraser Tool E

Undo Ctrl + Z

Redo Ctrl + Y

Clear Canvas Ctrl + C

Save as PNG Ctrl + S

Toggle Grid G

Toggle Theme T

Color Picker

#000000

History

Actions

PyScript Stats

Total Strokes: 0

Undo Stack: 0

Redo Stack: 0

Session ID: ---

Instructions

Draw by clicking and dragging on the canvas. Use keyboard shortcuts for faster workflow. All drawing data is stored and managed by PyScript in your browser.

Action completed successfully!

import asyncio import json import random import string from datetime import datetime from js import window, localStorage, console, document # ==================== DRAWING DATA MANAGEMENT ==================== class DrawingSession: """Manages drawing data, history, and persistence""" def __init__(self): self.strokes = [] # List of all completed strokes self.current_stroke = None # Current stroke being drawn self.undo_stack = [] # Stack for undo operations self.redo_stack = [] # Stack for redo operations self.session_id = self._generate_session_id() self.storage_key = "whiteboard_session_data" # Load saved data if available self.load_from_storage() # Update UI with initial stats self.update_ui_stats() console.log(f"PyScript: DrawingSession initialized with ID: {self.session_id}") def _generate_session_id(self): """Generate a unique session ID""" timestamp = datetime.now().strftime("%Y%m%d%H%M%S") random_str = ''.join(random.choices(string.ascii_lowercase + string.digits, k=6)) return f"{timestamp}-{random_str}" def start_stroke(self, x, y, color, size, tool): """Start recording a new stroke""" self.current_stroke = { "points": [{"x": x, "y": y}], "color": color, "size": size, "tool": tool, "timestamp": datetime.now().isoformat() } # Clear redo stack when starting a new stroke if self.redo_stack: self.redo_stack.clear() self.update_ui_stats() console.log(f"PyScript: Started {tool} stroke at ({x}, {y})") def add_point(self, x, y): """Add a point to the current stroke""" if self.current_stroke: self.current_stroke["points"].append({"x": x, "y": y}) def end_stroke(self): """End the current stroke and save it""" if self.current_stroke and len(self.current_stroke["points"]) > 1: self.strokes.append(self.current_stroke) self.current_stroke = None # Save to storage self.save_to_storage() # Update UI self.update_ui_stats() console.log("PyScript: Stroke completed and saved") return True return False def undo(self): """Undo the last stroke""" if self.strokes: # Remove last stroke and add to undo stack last_stroke = self.strokes.pop() self.undo_stack.append(last_stroke) # Save to storage self.save_to_storage() # Update UI and redraw self.update_ui_stats() self.redraw_all() console.log("PyScript: Undo performed") return True console.log("PyScript: Nothing to undo") return False def redo(self): """Redo the last undone stroke""" if self.undo_stack: # Restore last undone stroke last_undone = self.undo_stack.pop() self.strokes.append(last_undone) # Save to storage self.save_to_storage() # Update UI and redraw self.update_ui_stats() self.redraw_all() console.log("PyScript: Redo performed") return True console.log("PyScript: Nothing to redo") return False def clear_all(self): """Clear all strokes""" if self.strokes: # Move all strokes to undo stack self.undo_stack.extend(self.strokes) self.strokes.clear() self.current_stroke = None # Save to storage self.save_to_storage() # Update UI self.update_ui_stats() console.log("PyScript: All strokes cleared") return True return False def save_to_storage(self): """Save session data to localStorage""" try: data = { "session_id": self.session_id, "strokes": self.strokes, "undo_stack": self.undo_stack, "timestamp": datetime.now().isoformat() } localStorage.setItem(self.storage_key, json.dumps(data)) except Exception as e: console.error(f"PyScript: Error saving to storage: {e}") def load_from_storage(self): """Load session data from localStorage""" try: data_str = localStorage.getItem(self.storage_key) if data_str: data = json.loads(data_str) # Only load if session is recent (less than 24 hours old) if "timestamp" in data: stored_time = datetime.fromisoformat(data["timestamp"]) age = datetime.now() - stored_time if age.total_seconds() < 86400: # 24 hours self.strokes = data.get("strokes", []) self.undo_stack = data.get("undo_stack", []) console.log(f"PyScript: Loaded {len(self.strokes)} strokes from storage") else: console.log("PyScript: Stored data is too old, starting fresh") else: console.log("PyScript: No stored data found") except Exception as e: console.error(f"PyScript: Error loading from storage: {e}") self.strokes = [] self.undo_stack = [] def redraw_all(self): """Trigger redrawing of all strokes on the canvas""" if window.redrawCanvas: window.redrawCanvas(self.strokes) def update_ui_stats(self): """Update the UI with current statistics""" if window.updatePythonStats: window.updatePythonStats( len(self.strokes), len(self.undo_stack), len(self.redo_stack), self.session_id[:12] + "..." # Truncate for display ) def get_strokes(self): """Return all strokes""" return self.strokes # ==================== GLOBAL SESSION INSTANCE ==================== session = DrawingSession() # ==================== FUNCTIONS CALLED FROM JAVASCRIPT ==================== def record_stroke_start(x, y, color, size, tool): """Called from JavaScript when a stroke starts""" session.start_stroke(x, y, color, size, tool) def record_stroke_point(x, y): """Called from JavaScript for each point in a stroke""" session.add_point(x, y) def record_stroke_end(): """Called from JavaScript when a stroke ends""" return session.end_stroke() def undo(): """Undo the last stroke""" return session.undo() def redo(): """Redo the last undone stroke""" return session.redo() def clear_canvas(): """Clear all strokes""" return session.clear_all() def redraw_from_python(): """Redraw canvas from Python data""" session.redraw_all() def get_stroke_count(): """Get total stroke count""" return len(session.strokes) # ==================== EXPOSE FUNCTIONS TO JAVASCRIPT ==================== window.pyRecordStrokeStart = record_stroke_start window.pyRecordStrokePoint = record_stroke_point window.pyRecordStrokeEnd = record_stroke_end window.pyUndo = undo window.pyRedo = redo window.pyClearCanvas = clear_canvas window.redrawFromPython = redraw_from_python window.getStrokeCount = get_stroke_count # Initial redraw after a short delay to ensure canvas is ready async def initialize(): await asyncio.sleep(0.5) session.redraw_all() console.log("PyScript: Initialization complete") # Run initialization asyncio.ensure_future(initialize())