Paintpot 2

PaintPot (Part 2)

En aquest projecte s’estén la Part 1 del tutorial per crear punts grans i petits, per demostrar com s’utilitzen les variables globals.

Començant

Assegura’t d’haver completat el procés de configuració i de tenir el teu projecte PaintPot Part 1 complet i carregat.

Comença des d’on ho vas deixar al final de la part 1, amb el projecte obert a in App Inventor. Fes servir el botó Save As per fer una còpia de PaintPot i poder treballar amb la nova versió sense afectar l’original. Anomena la còpia com PaintPotV2 (sense espais). Després de guardar la còpia, has de veure PaintPotV2 al Dissenyador.

Creant les variables

La mida dels punts dibuixats en el llenç està determinat pel controlador d’esdeveniment when DrawingCanvas.Touched on call Drawing.DrawCircle és anomenat amb r, el radi del cercle, igual a 5. Per canviar el gruix, tot el que necessitem fer és utilitzar diferents valors per ar. Utilitza r = 2 for punts petits i r = 8 per als punts grans.

Comença per crear noms per a aquests valors:

1. Obre l’Editor de blocs, si no està ja obert, i connecta el telèfon. El telèfon es mostrin els botons i el llenç que vas crear anteriorment.
2. En l’Editor de blocs, a la columna Built-In, obre el calaix Definitions. Arrossega un bloc def variable. Canvia el text que diu variable a small (petit). Un signe d’exclamació groc d’advertència apareixerà al bloc. Si passes el ratolí sobre el veuràs un missatge d’advertència explicant que el bloc té un connector buit.
3. Necessites omplir en el connector amb un bloc de nombre que especifiqui el valor per small – usa 2 com a valor. Per crear el bloc de nombre, escriu el número 2.Apareixerà un menú, que mostra tots els blocs possibles, que inclouen “2” en el seu nom. Fes clic en el primer, que és el número 2 en si, i un bloc de nombre amb el valor 2 hauria d’aparèixer. Col · loca en el bloc def variable. La marca groga d’advertència desapareixerà, perquè l’espai buit s’ha omplert. (El segon valor apareix al menú és el bloc de matemàtiques atan2, que no vas a utilitzar aquí.)

Aquests són els passos de la seqüència:

Ja has definit una variable global anomenada small el valor és el número 2.

De la mateixa manera que per small, defineix una variable global big, el valor sigui 8.

Finalment, defineix una variable global dotsize i dóna-li un valor inicial de 2.

Podries preguntar si no seria millor l’estil de programació per fer que el valor inicial de dotsize ser el valor de small en lloc de 2. Això seria cert, excepte per una subtil qüestió de programació: Fer això suposaria que small ja té un valor quan a dotsize s’assigna el seu valor. En App Inventor no pots fer suposicions sobre l’ordre en què es processaran els blocs def. En general, és clar, desitjaràs especificar l’ordre en què són assignades les variables. Pots fer això assignant tots els valors quan s’iniciï l’aplicació, utilitzant l’esdeveniment Inici de pantalla. El tutorial Quiz Em dóna un exemple de la inicialització.

L’ús de variables

Ara canvia la crida a DrawCircle al controlador d’esdeveniments contacte perquè utilitzi el valor de dotsize en lloc d’utilitzar sempre 5.

En l’Editor de blocs, canviar a la columna My Blocks, i obre el calaix My Definitions Has de veure sis nous blocs, per a cada una de les tres variables definides:

• Un bloc global … que produeix el valor de la variable
• Un bloc setembre global … que estableix la variable a un nou valor.

Aquests blocs s’han creat de forma automàtica, de manera semblant a la manera com els blocs de x i i es creen quan es defineix el controlador d’esdeveniment when DrawingCanvas.Touched a la part 1 d’aquest tutorial. “Global” significa “variable global”, en contrast amb els arguments de controladors d’esdeveniments, els blocs estan etiquetats com “valor”. La diferència és que els arguments valor només són accessibles dins del cos del controlador d’esdeveniments, mentre que les variables globals són accessibles en tot el programa.

• Vés al controlador d’esdeveniments when MyCanvas.Touched i reemplaça el bloc de nombre 5 en call DrawCircle pel bloc global dotsize del calaixMyDefinitions.

Canvi dels valors de les variables

Ara crea una forma per canviar dotsize de petit (2) a gran (8). Fes això amb els botons.

1. Al Dissenyador, arrossega un component HorizontalArrangement al panell de visualització sota del component DrawingCanvas Nomena el component comBottomButtons
2. Arrossega el botó Wipe existent a BottomButtons.
3. Arrossega dos components botó més de la Paleta dins BottomButtons, col · locant al costat del botó Wipe.
4. Anomena els botons com ButtonBig i ButtonSmall, i canvia la seva Text (text) a “Big dots” i “Small dots”, respectivament.
5. En l’Editor de blocs sota My Blocks, crea un controlador d’esdeveniment when … Clicked des ButtonSmall que canviï dotsize al valor de small. Per canviar dotsize fa servir el bloc setembre global dotsize to des del calaix MyDefinitions i col · loca-en el bloc global small.
6. Crea un controlador d’esdeveniment similar per ButtonBig.

Els dos controladors d’esdeveniment Click haurien de tenir aquest aspecte:

Ja està! Pots dibuixar en PaintPot i utilitzar els nous botons per dibuixar punts, ja siguin grans o petits. Tingues en compte que en arrossegar el dit encara dibuixes una prima línia. Això és perquè els canvis que acabes de realitzar no afecten la manera com es diu a DrawLine.

Aquí hi ha el programa complet en el Dissenyador

i en la finestra de blocs.

Un error en el qual pots treballar: El programa que acabes de construir, té amb un petit error. Si comences a dibuixar abans de prémer qualsevol dels botons de color per a la pintura, el color de la pintura serà negre, però després de triar un color, no hi ha manera de tornar a negre. Pensa en com es pot arreglar això.

Revisió

Has creat variables globals usant blocs def des del calaix Definitions.

Per a cada variable global que es defineix, App Inventor proporciona automàticament un bloc global que dóna el valor de la variable, i un bloc setembre global … ment per canviar el valor de la variable. Aquests blocs es poden trobar al calaix My Definitions.