PaintPot

Aquest tutorial introdueix el component Canvas (llenç) per crear gràfics simples de dues dimensions. Construiràs una aplicació que et permet dibuixar a la pantalla del telèfon amb diferents colors.

Nota històrica: PaintPot va ser un dels primers programes desenvolupats per demostrar el potencial de les computadores personals, tan enrere com en els anys 70.

Que estàs construint

Amb l’aplicació PaintPot pots:

• Mullar el dit al pot de pintura virtual per dibuixar amb el color seleccionat.
• Arrossegar el dit per la pantalla per dibuixar una línia.
• Prémer la pantalla per fer punts.
• Utilitza un botó per netejar la pantalla.
• Incloure una imatge com a fons del dibuix.

Aquest tutorial suposa que ja has completat el Tutorial HelloPurr amb l’emulador o el Tutorial HelloPurr amb el teu telèfon Android . El qual introdueix els següents conceptes de App Inventor:

• El component Canvas (Llenç) per dibuixar.
• Control de l’aparença de la pantalla amb components Arrangement (disposició).
• Control d’esdeveniments que prenen arguments.
• Variables

Abans de començar

Assegura’t que el teu ordinador i el teu telèfon estan preparats per utilitzar App Inventor, i navega fins al lloc web de App Inventor en beta.appinventor.mit.edu . Comença un nou projecte a la finestra del Dissenyador, i escriu com a títol PaintPot. Obre l’Editor de blocs, fes clic a Connect to Phone (connectar al telèfon), i assegura’t que el telèfon ha iniciat l’aplicació App Inventor.

Títol de la pantalla

Per començar cita en el panell Properties (Propietats) a la dreta del Designer (dissenyador) i canvia Title (títol) de la pantalla a PaintPot. Hauries veure aquest canvi al telèfon, amb el nou títol mostrat a la barra de títol.

Hi ha tres noms en App Inventor, i és fàcil confondre’ls:

1. El nom que tries per al teu projecte mentre treballes al. Aquest serà també el nom de l’aplicació si la empaquetas per al telèfon.
2. El nom de “Screen1” (pantalla1), que veuràs en en panell que enumera els components de l’aplicació. No pots canviar aquest nom en la versió actual de App Inventor.
3. El títol (title) de la pantalla, el qual és el que veuràs a la barra de títol del telèfon. Aquest comença sent “Screen1”, que és el que vas usar en HelloPurr. Però pots canviar, com estàs fent per Paintpot.

Prepara els components

Usaràs aquests components per crear PaintPot:

• Tres botons per seleccionar pintura vermella, blava o verda i un altre botó per netejar el dibuix.
• Un Llenç (canvas), la superfície de dibuix. Aquest llenç té una imatge de fons, la qual és el gatet del tutorial HelloPurr. També pots dibuixar en un llenç en blanc. Aquest és només un llenç sense imatge de fons.
• També hi ha un component que no veus: utilitza un component HorizontalArrangement (disposició horitzontal) per alinear els tres botons de color.

Això fa cinc components en total. Tomemoslos i construïm l’aplicació.

Botons de color

• Arrossega un component Botó al visor i canvia l’atribut Text del botó a “Xarxa” (vermell) i el seu color de fons (BackgroundColor) a vermell.
• Fes clic a Button1 en la llista de components del visor per ressaltar (ja hauria d’estar ressaltat) i utilitza el botó Rename … per canviar el seu nom de Button1 aButtonRed.
• De la mateixa manera, crea dos botons per al blau i el verd, truca’ls ButtonBlue i ButtonGreen, col·locant verticalment sota el botó vermell.

Així és com això hauria d’aparèixer en el dissenyador, amb els tres noms dels botons en la llista de components del projecte. En aquest projecte estàs canviant els noms dels components millor que deixant els seus noms per defecte, com vas fer en HelloPurr. Utilitza noms significatius en els teus projectes els fa més fàcils de llegir per a tu mateix i per altres.

També hauries de veure els tres botons a la pantalla del telèfon.

Aparença amb Disposició de pantalla (Screen Arrangemen)

Ara has de tenir tres botons, un sobre l’altre. El següent pas és alinear horitzontalment. Faràs això usant un component HorizontalArrangement (disposició horitzontal).

1. Des de la categoria Screen Arrangement de la paleta, arrossega un component HorizontalArrangement i col·loca sota els botons. Canvia el nom d’aquest component de HorizontalArrangement1 a ThreeButtons
2. Al tauler Properties (Propietats), canvia Width (ample) de ThreeButtons a Fill Parent … pel que omplirà per complet l’ample de la pantalla.
3. Mou els tres botons dins del component HorizontalArrangement. Nota: Veuràs una línia vertical que mostra on anirà la peça que aquestes arrossegant.

Si mires la llista de components del projecte, veuràs els tres botons inclosos sota ThreeButtons per indicar que són ara els seus subcomponents. Fixa’t que tots els components estan inclosos sota Screen1.

També has de veure els teus tres botons alineats en una fila a la pantalla del telèfon, encara que algunes coses no apareguin exactament com en el Dissenyador. Per exemple, la vora de la disposició (Arrangement) es mostra en el Dissenyador però no en el telèfon.

Generalment, usaràs la disposició de pantalla per crear simples dissenys verticals o horitzontals. Pots crear dissenys més complexos niant components de disposició de pantalla. Existeix a més un component Disposició de Taula TableArrangement.

Llenç i botó de neteja

Els dos components finals són el llenç (canvas) i el botó de neteja.

1. Des de la categoria Basic de la Paleta arrossega un component Llenç (Canvas) al Visor. Canvia el seu nom a DrawingCanvas. Estableix l’atribut Width (ample) a Fill Parent Estableix l’atribut Height (alt) a 300 píxels.
2. Afegeix un imatge de fons (Background Image) al llenç. Feu clic al camp conté None … al costat de BackgroundImage al panell de Propietats de la tela Pots utilitzar el mateix arxiu kitty.png, si encara el tens a l’escriptori d’un tutorial anterior. O pots usar una altra imatge.
   

   Pots usar qualsevol imatge que vulguis, però obtindràs millors resultats si la mida de la imatge (en píxels) s’aproxima a la mida que mostressis al telèfon. A més, imatges grans poden trigar més temps a carregar-se, i poden excedir la quantitat de memòria que el telèfon assigna per les aplicacions.

3. Des de la Paleta, arrossega el botó final a la pantalla, col · locant-sota el llenç. Canvia el seu aneu a ButtonWipe Canvia el seu atribut Text a Wipe.

Ara hauràs completat els passos per configurar l’aparença de la teva aplicació. Així és com hauria d’aparèixer en el Dissenyador. A continuació, definiràs com es comporten els components.

Afegeix comportaments als components

L’Editor de blocs deu ser ja obert. Primer configura els botons que canvien el color de la pintura.

Afegeix controladors d’esdeveniments de botó

En l’Editor de blocs:

1. Canvia a la columna My Blocks.
2. Obre el calaix de ButtonRed i arrossega fora el bloc when ButtonRed.Click.
3. Obre el calaix DrawingCanvas. Arrossega fora el bloc set DrawingCanvas.PaintColor to (hauràs de desplaçar la llista de blocs del calaix per trobar-lo) i col · loca-en la secció do (fer) de when ButtonRed.Click.
4. Canvia a la columna Built-In. Obre el calaix Colors, arrossega el bloc per al color vermell i col·loca-ho en set DrawingCanvas.PaintColor to.
5. Repeteix els passos del 2 al 4 per als botons blau i verd.
6. L’últim botó de configurar és el de neteja Wipe. Canvia de nou a la columna My Blocks. Crea un controlador d’esdeveniment clic per ButtonWipe arrossegant when ButtonWipe.Click des del calaix ButtonWipe. Des del calaix DrawingCanvas, arrossega call DrawingCanvas.Clear i col · loca-a l’àrea do del bloc when ButtonWipe.Click.

Els blocs per als botons han ser així:

Afegeix controlador d’esdeveniment tocar

Ara per al següent pas: dibuixar en el llenç. Organitzaràs les coses perquè quan toquis el llenç, aconsegueix algun punt en el lloc on tocs. I si arrossegues el dit lentament pel llenç, es dibuixi ua línia.

• En l’Editor de blocs, obre el calaix de la tela (canvas) i arrossega el bloc when DrawingCanvas.Touched a l’espai de treball.

Així que deixis anar fora el bloc, els tres buits de la dreta s’ompliran automàticament amb blocs de noms anomenats x, i, i touchedSprite.

Ja hem vist esdeveniments de botó clic. Els clics són simples, perquè no hi ha res de saber sobre el clic que no sigui que ha succeït. Altres controladors d’esdeveniments, com ara when ... Touched, necessiten informació sobre l’esdeveniment. En App Inventor, aquesta informació s’expressa com el valor delsarguments relacionats amb el controlador d’esdeveniments. Per l’esdeveniment when ... Touched els dos primers arguments representen les coordenades x i i d’on va succeir el toc.

Per aquest esdeveniment tocar, fes al llenç dibuixar un petit cercle al punt amb les coordenades x, i.

• Arrossega fora una ordre call DrawingCanvas.DrawCircle des del calaix canvas i col·loca-en la secció do de when DrawingCanvas.Touched.

A la part dreta de when DrawingCanvas.DrawCircle hi ha tres connexions on has d’especificar els valors per x i i on s’ha de dibuixar el cercle i r, el qual és el radi del cercle.

Per x i i, utilitzarà els valors dels arguments proporcionats pel controlador Touched:

1. Obre el calaix My Definitions a la part superior de la columna. Busca els blocs per value x i value y. Els blocs es crearàn automàticament quan s’arrossegui el bloc del controlador d’esdeveniment tocar.
2. Arrossega value x i value y conéctalos en els seus llocs corresponents al bloc when DrawingCanvas.Touched. Assegura’t d’arrossegar els blocs de value no els que corresponen a name, són molt similars.

També necessitaràs especificar el radi del cercle de dibuixar. Cinc (píxels) és un bon valor per a aquesta aplicació:

• Fes clic en una àrea buida del la pantalla perquè aparegui el menú activable i selecciona matemàtiques math (verd). Selecciona 123 de la llista desplegable, per crear un bloc número. Canvia el 123 a 5 i conéctalo al buit per al radi.
  

  També pots sol escriure 5 seguit de Intro, per crear un bloc amb el valor 5. Això és un exemple de typeblocking: si comences a escriure, l’Editor de blocs mostra uns llista de blocs els noms coincideixen amb el que aquestes escrivint, si prems un nombre crearà un bloc número.

Així és com s’hauria de veure el controlador d’esdeveniment tocar:

Prova el que has fet fins ara al telèfon. Toca un botó de color. Ara toca el llenç, i el dit de deixar un punt a cada lloc que tocs. Prement el botó Wipe has netejar el teu dibuix.

Afegeix Esdeveniments d’arrossegament

Finalment, afegeix el controlador d’esdeveniment d’arrossegament. Aquesta és la diferència entre tocar i arrossegar:

• Un toc és quan poses el dit en el llenç i el lleves sense moure’l.
• Un arrossegament és quan és quan poses el dit en el llenç i mous el dit mentre el mantens en contacte.

Quan arrossegues el dit per la pantalla, sembla dibuixar una gran línia corba per on mous el dit. El que realment fas és dibuixar centenars de petites línies rectes: cada vegada que mous el dit, fins i tot molt poc, estens la línia des de l’última posició del teu dit a la nova posició.

Un esdeveniment d’arrossegament té 6 arguments. Aquests són tres parells de coordenades x i i que mostren:

• La posició anterior del teu dit on va començar l’arrossegament.
• La posició actual del teu dit.
• La posició immediatament anterior del teu dit.

També hi ha un sprite, el qual ignorarem en aquest tutorial.

Ara fes que arrossegar dibuixi una línia entre la posició prèvia i l’actual creant un controlador d’arrossegament:

1. Des del calaix DrawingCanvas, arrossega el bloc when DrawingCanvas.Dragged a l’espai de treball.
2. També des del calaix DrawingCanvas, arrossega el bloc call DrawingCanvas.DrawLine al buit do (fer) del bloc when DrawingCanvas.Dragged.
3. Feu clic al calaix My Definitions. Has de veure els blocs per als arguments que necessites. Arrossega els blocs de value (valor) corresponents als buits apropiats en when DrawingCanvas.Dragged: x1 i y1 han de ser prevX i prevY; x2 i y2 han de ser currentX i currentY

Aquí està el resultat:

Prova el teu treball al telèfon: arrossega el dit per la pantalla per dibuixar línies i corbes. Toca la pantalla per crear punts. Fes servir el botó Wipe per netejar la pantalla.

Revisió

Aquí hi ha algunes de les idees vistes en aquest tutorial:

• Pots utilitzar components de Disposició de pantalla (Screen Arrangement) per especificar l’aspecte en lloc de col · locar els components un sobre l’altre.
• El component Canvas et permet dibuixar al. Aquest a més sent els tocs i arrossegaments.
• Alguns controladors d’esdeveniments són anomenats amb informació sobre l’esdeveniment, com les coordenades d’on s’ha tocat la pantalla. Aquesta informació està representada per arguments. Quan selecciones un controlador d’esdeveniment que té arguments, App Inventor crea blocs de value per aquests i els col·loca al calaix My Definitions.

A la Part 2 , veuràs com utilitzar variables globals per crear punts de diferent grandària.

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.