PaintPot (1)

Què farem?

Crear una aplicació que ens permeti:

• Ficar el dit en un pot de pintura virtual per a poder pintar
• Arrossegar el dit per la pantalla del mòbil per dibuixar una línia
• Fer copets a la pantalla per dibuixar punts
• Esborrar les línies i punts dibuixades prement un botó d’ESBORRAR
• Afegir una imatge com a dibuix de fons (background)

Per començar

Obre un projecte now (Start new project) i anomena’lPaintpot_NomCognom

A la secció Components selecciona Screen1. Llavors, a la secció de propietats (Properties), canvia el Title perPaintpot_NomCognom.

Seleccionar els components

Els components a utilitzar seran:

• 3 Buttons per a seleccionar pintura RED, BLUE oGREEN + un altre Button per ESBORRAR.
• Un llenç (Canvas) o superfície de dibuix. Aquest Canvas ha de tenir una imatge de fons (BackgroundImage), disponible en aquest enllaç.
• Un HorizontalArrangement per a alinear els 3 botons.

Col·locar els botons a la pantalla de l’app

1. Des de la categoria Layout de la secció Palette, arrossega el HorizontalArrangement a la secció Viewer.
2. Situa els botons dins de l’ HorizontalArrangement, com es mostra a la figura següent. 
3. A la secció Components canvia el nom dels components als mostrats a la figura següent.

Col·locar el Canvas i el botó ESBORRA a la pantalla de l’app

1. Des de la secció Drawings and animation de la Palette, arrossega un Canvas al Viewer.
2. Canvia el nom del Canvas per DrawingCanvas. Ajusta el seu ample (Width > Fill Parent) i l’alçada (Height a300 pixels).
3. Afegeix una imatge de fons (Background Image) alCanvas: Fes click al camp Image que conté el textNone...  Adjunta una imatge d’un gat diferent de la del fitxer kitty.png.
4. Des de la Palette, secció User Interface, arrossega l’últim botó a sota de la imatge. Es dirà el botó ESBORRAR (ButtonWipe).

Afegir comportaments als components

Primer establirem que els botons canviïn el color de la pintura. Després afegirem blocs que permetin pintar quan algú toca o arrossega el dit per la pantalla del mòbil.

A l’editor de blocs:

1. Selecciona el calaix del botó vermell (ButtonRed) i arrossega el bloc when ButtonRed.Click.
2. Selecciona el calaix del Canvas (DrawingCanvas). Arrossega el bloc set DrawingCanvas.PaintColor to i situa’l al bloc when ButtonRed.Click.
3. Del calaix de colors, selecciona el color vermell i connecta’l al bloc set DrawingCanvas.PaintColor to.
4. Repeteix aquests passos per a la resta de botons de colors.
5. Selecciona el calaix del botó ESBORRA (ButtonWipe) i arrossega el bloc when ButtonWipe.Click a la pantalla del editor. Del calaix del botó DrawingCanvas,arrossega el bloc call DrawingCanvas.Clear a dins del bloc when ButtonWipe.Click

Ens ha de quedar un programa com el següent:

Ara afegirem blocs que permetin pintar punts quan algú toca la pantalla del mòbil.

Ara heu de muntar, al mateix àrea de blocs, el programa següent, que ens dibuixarà un cercle de radi 5 cada cop que fem un toc sobre el Canvas a les coordenades del punt on s’ha tocat:

Ara afegirem blocs que permetin pintar línies quan algú arrossega el dit per la pantalla del mòbil.

Ara munteu el programa següent, que serveix per pintar línies cada cop que arrosseguem el dit per la pantalla. El programa va prenent coordenades X i Y dels punts pels quals passa el nostre dit, i va dibuixant una línia amb els punts obtinguts.