Aplicatia PaintPic

In acest laborator, vom invata sa consruim o aplicatie de desenat care ne permite sa desenam pe ecranul telefonului cu ajutorul degetului, cu diverse culori. Aplicatia permite de asemenea preluarea unei imagini prin camera foto care sa devina spatiu de desen.

In a doua parte a laboratorului introducem punctele de desenat de diverse dimensiuni prin apasarea pe ecran.

Ce construim? O aplicatie in care utilizatorul:

  • isi afunde degetul intr-o calimara virtuala de culoare pentru a desena cu acea culoare
  • isi plimbe degetul de-a lungul ecranului pentru a desena o linie
  • apese ecranul pentru a lasa puncte
  • foloseasca butonul de dedesubt pentru a sterge tot desenul
  • includa o imagine ca si fundal pentru spatiul de desenat

Ce vom invata?

  • sa folosim elemente de Canvas pentru desen
  • sa controlam aspectul ecranului cu Screen Arrangement
  • sa dam argumente unui Event Handler
  • sa folosim variabile globale pentru a retine informatii in timp ce aplicatia ruleaza
  • sa accesam camera foto in aplicatie

Sa-i dam drumul!

Faza I - Designer:

  • setarea unui titlu de ecran

in App Inventor exista 3 tipuri de nume, sa nu le confundam!!!

  1. numele ales pentru proiectul in lucru, in acest caz PaintPic - acesta va fi si numele aplicatiei daca o impachetam pe telefon
  2. numele Screen1 care este numele componentei Screen. Putem sa-l vedem listat in panoul Components din Designer. In App Inventor nu poate fi schimbat dar putem schimba Title Property
  3. proprietatea Title a ecranului, pe care o vom vedea in bara telefonului. La inceput e tot Screen1, dar se poate modifica, selectand Screen1 din Components, si apoi din dreapta in panoul Properties
  • adaugam 3 butoane dupa cum am invatat. Le redenumim ButtonRed, ButtonGreen si ButtonBlue, si le coloram fundalul in culorile specificate in nume. Le plasam vertical unul sub altul.
  • sub butoane adaugam o componenta HorizontalArrangement pe care o redenumim in „Three Buttons“. Ii setam latimea, astfel incat sa ocupe tot ecranul
  • mutam butoanele in acest container Three Buttons si le plasam unul langa altul. Ele debin subcomponente ale containerului.
  • adaugam un Canvas, pe care il redenumim in Drawing Canvas, setam latimea la Fill Parent si inaltimea la 300 pixeli.
  • adaugam si o componenta de tipa camera foto. Unde s-a asezat ea in mod automat?
  • sub container mai punem un buton pe care setam textul: „Fa o poza!“ si il redenumim in CameraButton
  • sub acest buton adaugam un altul, il denumim ButtonWipe si ii punem ca text: „Sterge tot“
  • sub primul container „ThreeButtons“ mai punem unul, de acelasi tip. In el mutam cele 2 butoane nou create

Arata asa pana acum?

Faza II - Blocks Editor

  • adaugam butonului rosu o actiune. Cand acesta este apasat, culoarea de desenat trebuie sa devina rosie. Folosind DrawingCanvas.PaintColor, setam culoarea rosu pentru calimara virtuala.
  • procedam la fel pentru butoanele verde si albastru. Cand sunt apasate, culoarea de desen devine verde, respectiv albastra.
  • programam butonul de stergere. Cand acesta este apasat, ecranul se goleste. Folosim DrawingCanvas.Clear
  • programam aparitia unui punct cand spatiul de desen a fost atins. Desenam practice un cerc foarte mic, care pare punct.

Schema este reprezentata in continuare, explicatiile vor fi oferite de indrumator:

(pentru radius, luam blocul de tip numar din Math drawer, setam valoarea 5 in loc de 123 si il adaugam la radius ca parametru)

  • programam desenarea unei linii cand degetul este frecat de spatiul de desenat. Schema este reprezentata in continuare, explicatiile vor fi oferite de indrumator:

  • programam butonul de camera foto. La apasarea lui, se face poza care devine imagine de fundal. Folosind when Camera1.TakePicture, when Camera1.AfterPicture si SetDrawingCanvas.BackgroundImage implementati acest lucru.
  • testam aplicatia

Faza III - puncte mari si mici, aplicatie la variabilele globale

  • radius determina cat de mare e cercul, respective punctele. utilizam radius 2 pentru puncte mici si radius 8 pentru puncte mari.
  • din Block Editor tragem un bloc def variable din drawer-ul Definitions. Schimbam textul din „variable“, in „small“. Observam ca apare un semn de avertizare galben, care ne instiinteaza ca lipseste parametrul. Dam click pe el, din lista de propuneri alegem 2 dupa cum am stability, sau pur si simplu punem in deschizatura un bloc de tip numar cu valoarea 2.
  • tocmai am definit o variabila globala numita small cu valoarea 2.
  • facem acelasi lucru si pentru big, cu valoarea 8, pentru a ne ocupa si de punctele mari.
  • mai definim o variabila globala numita dotsize si ii dam o valoarea initiala 2. De ce nu am pus valoarea lui dotsize=small si am pus dotsize=2?
  • acum ne intoarcem la event handler-ul din fazele anterioare (when MyCanvas.Touched) si schimbam blocul de apel DrawCircle pentru a-l face acum sa utilizeze valoarea lui dotsize si nu valoare 5 mereu.
  • in coloana MyBlocks, in drawer-ul MyDefinitions vom avea 6 noua blocuri, 2 pentru fiecare din cele 3 variabile pe care le-am definit: un global, bloc care produce valoarea unei variabile si un set global, bloc care seteaza o noua valoare variabilei. Variabilele globale sunt accesibile de oriunde in tot programul.
  • sa schimbam acum variabilele. In Designer, tragem sub Canvas o component de tip HorizontalArrangement, pe care o numim BottomButtons. Punem Butonul ButtonWipe in acest spatiu si langa mai tragem 2 butoane noi. Le denumim ButtonBig si Button Small si le setam textul in Big dots si Small dots.
  • din Blocks Editor, de sub MyBlocks, creem un event handler when … Clicked pentru ButtonSmall care ii schimba valoarea lui dotsize si ii atribuie pe cea a lui small. Facem la fel pentru ButtonBig.

Exercitiu: Schimbati Canvas.DrawLine, astfel incat sa putem desena cu linii groase sau subtiri.
indiciu: uitati-va lablocurile de tip setter din drawer-ul Canvas.

Bonus: Realizati un joc de X si O

android_incepatori/laborator/laborator3.txt · Ultima modificare: 2013/08/06 16:09 de către daiana.negulici
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0