App_Canvas_Disegnare_e_salvare_immagini

Per scrivere un’app che permetta disegnare sul Canvas e salvare le immagini occorre allestire i dispositivi che consentano di farlo.
In pratica si tratta di programmare dei Button e Label in modo da rendere agevole il cambio dei colori ed il salvataggio delle immagini.
Il disegno vero e proprio è possibile farlo avvalendosi delle istruzioni native del componente Canvas.
Componenti e proprietà da assegnare:

Componente

Gruppo

Nome

Proprietà

Text

Width

Height

BackgroundImage

Canvas

Basic

Canvas1

300

320

Cane.png

Horizz.

ScreenArrang.

HA1

Automatic

Button

Basic

Brosso

Rosso

Automatic

Button

Basic

Bverde

Verde

Automatic

Button

Basic

Bbleu

Bleu

Automatic

Label

Basic

Lcolcor

Colore

Automatic

Button

Basic

Bcane

Cane

Automatic

Button

Basic

BGatto

Gatto

Automatic

Button

Basic

Bsave

SAVE

Automatic

300

320

Gatto.png

Come dovrebbero presentarsi la pagina Design e l’Emulatore:

Aprire Blocks Editor

  • Button: Brosso (Rosso), Bverde (Verde) e Bbleu (Bleu) saranno programmati per essere i recipienti dei colori.
  • Label: Lcolore (Colore) mostrerà il colore di fondo in funzione del colore corrente.
  • Button: Bcancella (Cancella), avrà il compito di ripulire l’immagine sottostante (il cane o il gatto) dal disegno che è stato fatto sopra.
  • Canvas1: è il contenitore dell’immagine, in questo esempio viene caricata l’immagine del cane, ma potrebbe e può essere cambiata durante l’esecuzione del programma.
  • Button: Bcane (Cane) e Bgatto (Gatto), scambiano l’immagine in Canvas1
  • Button: Bsave (SAVE), permette di salvare l’immagine modificata sullo smartphone.

Per prima cosa vengono costruiti i “recipienti” dei 3 colori. (3 pulsanti)
PaintColor (vernice di colore) definisce il colore corrente attivato al click su di uno dei 3 pulsanti.

Per prima cosa vengono costruiti i “recipienti” dei 3 colori. (3 pulsanti)
PaintColor (vernice di colore) definisce il colore corrente attivato al click su di uno dei 3 pulsanti.

Per settare il colore corrente è usata una procedura che verrà chiamata al click su ciascuno dei 3 pulsanti.
Ogni procedura ha un proprio nome, in questo caso le è stato assegnato SettaColore.
Una procedura è un blocco contenete istruzioni (altri blocchi) che compiono una determinata operazione, sui dati del programma.
Le procedure possono essere richiamate da altri punti del programma evitando il dover scrivere più volte lo stesso codice.

Adesso viene costruita la procedura che assegna il colore corrente dai Button (Brosso, Bverde, Bbleu)
Fare click su Built-In, poi su Definition e trascinare il blocco procedure sull’area di lavoro.

Dallo stesso menù trascinare il blocco name sul blocco pr-cedente incastrandolo dopo la parola arg
Fare click su procedure, che diventa editabile.
Sostituire il testo con SettaColore.
Questo è il nome della procedura.
Nell’altro blocco sostituire name con ColoreCorrente.
All’evento click su uno dei 3 Button viene inviato alla procedura il nuovo colore corrente.
La procedura lo riceve nel blocco ColoreCorrente e lo elabora.
Ora vengono assemblati i blocchi interni della procedura.
Fare click sui My Blocks, poi su Canvas1.
Trascinare il blocco PaintColor sulla procedura SettaColore incastrandolo.
Fare click su Lcolor e trascinare il blocco BackgrandColor sulla procedura SettaColore incastrandolo.
Fare click su My Definitions e trascinare 2 volte il blocco ColoreCorrente sui ciascuo dei blocchi precedenti incastrandoli dopo le rispettive parole to.
La scittura della procedura è terminata.
Quando la procedura è chiamata viene passato il nuovo colore nella variabile ColoreCorrente.
Il colore è usato per disegnare su Canvas1.
Viene anche colorato il fondo di Lcolor per mostrarlo sul display.
Vengono ora assemblati i Button dei tre colori che chiameranno la procedura SettaColore
In My Blocs fare click su Brosso e trascinare il blocco Click sull’area di lavoro.
Fare click su My definition e trascinare il blocco SettaColore sul blocco precedente incastrandolo dentro.
Questo è il blocco che chiama la procedura SettaColore, adesso gli va assegnato il colore da passare.
Fare click su Built-In, poi su Color. Trascinare il blocco Red sul blocco precedente incastrandolo dopo la parola to
Si è formata la frase (in inglese):
quando (when) viene fatto click fare (do) > chiama (call) SettaColore (la procedura) e passa il colore rosso.
Fare lo stesso per i pulsanti Bverde e Bbleu settando i colori Verde e Blu come sotto.
Adesso il codice è funzionante, e già visibile nell’emulatore. Facendo click su ciascun pulsante la Label Lcolor cambia il colore di fondo in ragione pulsante premuto.
Occorre ora far sapere allo smartphone che quando il display viene toccato deve disegnare. Saranno disegnati punti e linee.
Disegnare con Pennelli puntiformi :
In My Blocks fare click su Canvas1 e trascinare il blocco Touched nell’area di lavoro.
Appena trascinato vengono aggiunti, in modo automatico, tre blocchi (x,y,touchedSprite).
Le lettere x,y stanno a significare le coordinate del display per il punto che verrà toccato.
Lasciarli così.
Trascinare il blocco DrowCircle sul blocco precedente incastrandolo dentro dopo la parola do.
Per disegnare un punto verrà utilizzato il comando
DrawCircle (cerchio).
In raltà disegna un cerchio, il raggio sarà però molto breve da non rendere apprezzabile l’area interna.
Fare click su My Definitions e trascinare i blocchi value x e value y su Canvas1.DrowCircle incastrandoli rispettivamente dopo le lettere x ed y.
I blocchi x,y incastrati su Canvas1.DrawCircle, si riferiscono agli x,y del blocco Canvas1.Touched.
Al tocco sul display i valori in x,y verranno passati da Canvas1.Touched a Canvas1.DrawCircle e quel punto verrà colorato con il colore corrente.
Viene ora stabilita la lunghezza del cerchio :
In Built-In fare click su Math, trascinare il blocco number 123 su Canvas1.DrowCircle incastrandolo dopo la lettera r che sta per raggio.
Fare click su 123 del blocco number 123, diventa editabile, scrivere 5. Questo è il raggio del cerchio (in pixel), alla vista apparirà puntiforme. Con identico metodo è possibile disegnare cerchi di qualsivoglia raggio.
Questi sono i blocchi assemblati.
In My Blocks fare click su Canvas1 e trascinare Dragged nell’area di lavoro.
Vengono assegnati, di default, i parametri delle posizioni x ed y di partenza adatti anche a scrivere linee.
Sul blocco (in inglese) si legge: quando (when) trascinato su Canvas1 (Canvas1.Dragged) fai (do)
Occorre quindi esaudire il do (fare)
Trascinare il blocco DrawLine sul blocco precedente incastrandolo dopo il do (fare)
Questo è il blocco che concretamente scrive le linee con i parametri che vengono inseriti di seguito.
Fare click su My Definitions e trascinare i blocchi a sinistra sul blocco precedente incastrandoli nell’ordine:
currentX dopo x1 e curenteY dopo y1
prevX dopo x2 e prevY dopo y2
Questo è il codice completo per disegnare linee e l’emulatore durante i test.
Adesso sul display è possibile disegnare punti, cerchi e linee dei colori Rosso, Verde e Bleu.
Però all’avvio dell’applicazione il colore non è uno dei 3, ma è il Nero.
Occorre settare il colore da utilizzare all’avvio.
Assegnare un colore di default :
Per questa operazione verrà utilizzata la procedura SettaColore scritta in precedenza.
In My Bolocks fare click su Screen1.
Trascinare il blocco Initialize nell’area di lavoro.
Il codice contenuto in questo blocco verrà sempre eseguito per primo all’avvio dell’applicazione.
Fare click su My definition e trascinare il blocco SettaColore sul blocco precedente incastrandolo dentro.
Fare click su Built-In, poi su Color. Trascinare il blocco Red sul blocco precedente incastrandolo dopo la parola to
Questo è il codice completo che all’avvio setta il colore rosso.
Cancellare ciò che è stato disegnato sulla Canvas :
L’azione viene lanciata intercettando il click sul Button Bcancella
In My Blocks fare click su Bcancella e trascinare il pulsante Click sull’area di lavoro.
Fare click su Canvas1 e trascinare il blocco Clear sul blocco precedente incastrandolo dentro.
Questo è il codice completo che, al click sul pulsante, cancella ciò che è stato disegnato sul Canvas1.
La cancellazione agisce su ciò che è stato disegnato dopo l’ultimo salvataggio.
Salvare le immagini modificate :
Esistono due blocchi codice per salvare le immagini, Save e SaveAs.
Nello standar informatico, con Save, l’immagine viene salvata modificata, mentre con SaveAs viene salvata una copia con un nuovo nome e l'immagine originale rimane intatta.
In realtà, da prove fatte con questa app, anche con Save le immagini di default, Cane.png e Gatto.png, non venegono modificate.
Viene invece salvata la copia modificata con nome assegnato dal sistema.
Per esempio app_inventor_123545875214.png, dove le cifree cambiano ogni volta.
In My Blocks fare click su Bsave e trascinare il blocco Click nell’area di lavoro.
In Built-In fare click su Definition. trascinare il blocco I incastrandolo nel blocco precedente.
In My Blocks fare click su Canvas1 e trascinare il blocco Save su I incastrandolo dentro.
Questo è il codice completo per salvare le immagini.
Su smartphone o tablet, verificare il percorso dei file quando le immagini vengono salvate.
Il percorso dovrebbe essere: /mnt/sdcard/My Documents/Pictures