Primi Passi con il Whiteboard

Il widget whiteboard ti offre una tela su cui disegnare. Crearne uno è semplicissimo:

from story import create

story = create()
board = story.whiteboard(width=500, height=300)

await story.run()
Esegui

Puoi personalizzare le dimensioni in base alle tue esigenze - basta modificare i parametri width e height.

Le Basi del Disegno: Forme e Colori

Rettangoli: I Mattoni Base

Vuoi disegnare un rettangolo? Ecco come fare:

board = story.whiteboard(width=500, height=300)
# Disegna un rettangolo rosso a (x=10, y=10) con larghezza=100 e altezza=50
board.draw(10, 10, 100, 50, color="red")

Analizziamo i parametri:

  • Primi due numeri (10, 10): La posizione iniziale (x, y)
  • Successivi due numeri (100, 50): Larghezza e altezza
  • color: Qualsiasi nome di colore CSS o codice hex

Aggiungere Testo alla Tela

Il testo è fondamentale per etichette e spiegazioni:

board = story.whiteboard(width=500, height=300)
board.text(20, 30, "Ciao, Whiteboard!", 
          color="black", 
          font="20px Arial")

I parametri del testo sono:

  • x, y: Posizione del testo
  • text: Il testo da scrivere
  • color: Colore del testo
  • font: Specifica del font in CSS

Creare Visualizzazioni Dinamiche

Combiniamo forme e testo per creare qualcosa di interessante:

from story import create

story = create()
board = story.whiteboard(width=400, height=200)

# Disegna un grafico a barre
valori = [60, 120, 80, 180]
colori = ["red", "blue", "green", "purple"]

for i, valore in enumerate(valori):
    # Disegna la barra
    x = i * 100 + 20
    board.draw(x, 200-valore, 80, valore, color=colori[i])
    
    # Aggiungi etichetta
    board.text(x+30, 180, str(valore), 
              color="black", 
              font="15px Arial")

# Aggiungi titolo
board.text(150, 30, "Grafico a Barre", 
          color="black", 
          font="bold 20px Arial")

await story.run()
Esegui

Tecniche Avanzate

Pulire la Tela

Hai bisogno di ricominciare da capo? Usa il metodo clean:

board.clean()  # Pulisce completamente la tela

Creare Animazioni

Puoi creare semplici animazioni combinando disegni e pause:

from story import create

story = create()
board = story.whiteboard(width=300, height=300)

# Disegna un quadrato in movimento
posizioni = [(10,10), (100,10), (100,100), (10,100)]

for x, y in posizioni:
    board.clean()
    board.draw(x, y, 50, 50, color="blue")
    story.sleep(1)  # Attendi 1 secondo prima del prossimo frame

await story.run()
Esegui

Esempio Pratico: Visualizzazione Interattiva

Ecco un esempio completo che crea una visualizzazione di dati:

from story import create

story = create()
board = story.whiteboard(width=550, height=300)

# Dati da visualizzare
dati = [
    ("Python", 80),
    ("JavaScript", 65),
    ("Java", 45),
    ("C++", 35)
]

# Disegna le barre
for i, (linguaggio, valore) in enumerate(dati):
    # Calcola le posizioni
    x = i * 120 + 40
    altezza = valore * 2  # Scala l'altezza
    y = 250 - altezza  # Parti dal basso
    
    # Disegna la barra
    board.draw(x, y, 80, altezza, 
              color=f"rgb(0, {valore * 2}, 255)")
    
    # Aggiungi etichette
    board.text(x, 270, linguaggio, 
              color="black", 
              font="14px Arial")
    board.text(x+30, y-20, str(valore)+"%", 
              color="black", 
              font="bold 16px Arial")

# Aggiungi titolo
board.text(150, 30, "Utilizzo Linguaggi di Programmazione", 
          color="black", 
          font="bold 20px Arial")

await story.run()
Esegui

Consigli per il Successo

  1. Pianifica la Tua Tela: Pensa alle dimensioni e al layout prima di iniziare a disegnare
  2. Usa le Variabili: Rendi il tuo codice più gestibile memorizzando posizioni e dimensioni in variabili
  3. Scegli i Colori con Cura: Seleziona colori che si abbinano bene e migliorano la leggibilità
  4. Testa Interattivamente: Prova diversi valori per ottimizzare la tua visualizzazione

Riferimento Rapido

Ecco una pratica guida ai metodi del whiteboard:

MetodoScopoSintassi Base
draw()Crea formedraw(x, y, larghezza, altezza, colore)
text()Aggiungi testotext(x, y, "testo", colore, font)
clean()Pulisci la telaclean()

E Ora?

Il widget whiteboard apre infinite possibilità per creare visualizzazioni in Python Playground. Dai semplici grafici alle animazioni complesse, puoi dare vita ai tuoi dati e alle tue idee.

Cosa creerai con il widget whiteboard? Condividi le tue visualizzazioni o le tue domande nei commenti qui sotto. E se questa guida ti è stata utile, condividila con altri sviluppatori Python!