Getting Started with the Whiteboard
The whiteboard widget gives you a canvas to draw on. Creating one is super simple:
from story import create
story = create()
board = story.whiteboard(width=500, height=300)
await story.run()
You can customize the size to fit your needs - just adjust the width and height parameters.
Drawing Basics: Shapes and Colors
Rectangles: Your Building Blocks
Want to draw a rectangle? Here’s how:
board = story.whiteboard(width=500, height=300)
# Draw a red rectangle at (x=10, y=10) with width=100 and height=50
board.draw(10, 10, 100, 50, color="red")
Let’s break down what each parameter means:
- First two numbers (10, 10): The starting position (x, y)
- Next two numbers (100, 50): The width and height
- color: Any CSS color name or hex code
Adding Text to Your Canvas
Text is crucial for labels and explanations:
board = story.whiteboard(width=500, height=300)
board.text(20, 30, "Hello, Whiteboard!",
color="black",
font="20px Arial")
The text parameters are:
- x, y: Position of the text
- text: What you want to write
- color: Text color
- font: CSS font specification
Creating Dynamic Visualizations
Let’s combine shapes and text to create something interesting:
from story import create
story = create()
board = story.whiteboard(width=400, height=200)
# Draw a bar chart
values = [60, 120, 80, 180]
colors = ["red", "blue", "green", "purple"]
for i, value in enumerate(values):
# Draw bar
x = i * 100 + 20
board.draw(x, 200-value, 80, value, color=colors[i])
# Add label
board.text(x+30, 180, str(value),
color="black",
font="15px Arial")
# Add title
board.text(150, 30, "Simple Bar Chart",
color="black",
font="bold 20px Arial")
await story.run()
Advanced Techniques
Clearing the Canvas
Need a fresh start? Use the clean method:
board.clean() # Wipes the canvas clean
Creating Animations
You can create simple animations by combining drawings with sleep:
from story import create
story = create()
board = story.whiteboard(width=300, height=300)
# Draw a moving square
positions = [(10,10), (100,10), (100,100), (10,100)]
for x, y in positions:
board.clean()
board.draw(x, y, 50, 50, color="blue")
story.sleep(1) # Wait 1 second before next frame
await story.run()
Practical Example: Interactive Visualization
Here’s a complete example that creates a simple data visualization:
from story import create
story = create()
board = story.whiteboard(width=550, height=300)
# Data to visualize
data = [
("Python", 80),
("JavaScript", 65),
("Java", 45),
("C++", 35)
]
# Draw bars
for i, (language, value) in enumerate(data):
# Calculate positions
x = i * 120 + 40
height = value * 2 # Scale the height
y = 250 - height # Start from bottom
# Draw bar
board.draw(x, y, 80, height,
color=f"rgb(0, {value * 2}, 255)")
# Add labels
board.text(x, 270, language,
color="black",
font="14px Arial")
board.text(x+30, y-20, str(value)+"%",
color="black",
font="bold 16px Arial")
# Add title
board.text(150, 30, "Programming Languages Usage",
color="black",
font="bold 20px Arial")
await story.run()
Tips for Success
- Plan Your Canvas: Think about dimensions and layout before drawing
- Use Variables: Make your code more maintainable by storing positions and sizes in variables
- Color Wisely: Choose colors that work well together and enhance readability
- Test Interactively: Try different values to fine-tune your visualization
Quick Reference
Here’s a handy reference for the whiteboard methods:
| Method | Purpose | Basic Syntax |
|---|---|---|
| draw() | Create shapes | draw(x, y, width, height, color) |
| text() | Add text | text(x, y, "text", color, font) |
| clean() | Clear canvas | clean() |
What’s Next?
The whiteboard widget opens up endless possibilities for creating visualizations in Python Playground. From simple charts to complex animations, you can bring your data and ideas to life.
What will you create with the whiteboard widget? Share your visualizations or questions in the comments below. And if you found this guide helpful, don’t forget to share it with other Python developers!
