Friday, 11 January 2019

Paint Pot (2)

I ara què fem?

A partir de l'aplicació PaintPot ja creada, farem una evolució que ens permeti, a més a més, pintar punts de diferents tamanys.
L'objectiu és aprendre a utilitzar les variables globals.
Als llocs web següents disposes dels tutorials del PaintPot1 i PaintPot2 en anglès:

http://appinventor.mit.edu/explore/ai2/paintpot-part1.html 

http://appinventor.mit.edu/explore/ai2/paintpot-part2.html


Pantalla de l'App

Hem de crear una pantalla per a la nostra app com la que es veu a continuació.

La pantalla ha d'afegir, als controls que teníem abans, un botó per afegir punts petits i un altre botó per afegir punts grans. Vegeu l'exemple:




Pantalla de Blocks

A continuació tenim el programa que hem de realitzar a la secció de Blocks:

Estudi del programa: Funcionament dels botons

  • Quan cliquem el botó VERMELL (RedButton), s'agafa el color vermell com a color de pintura (PaintColor) per al Canvas.
  • Quan cliquem el botó BLAU (BlueButton), s'agafa el color blau com a color de pintura (PaintColor) per al Canvas.
  • Quan cliquem el botó VERD (GreenButton), s'agafa el color verd com a color de pintura (PaintColor) per al Canvas.
  • Quan cliquem el botó Wipe (ButtonWipe), es crida l'ordre d'esborrat de qualsevol traç que hi hagi al Canvas.

Estudi del programa: Variables i botons de variables

En primer lloc, el programa inicialitza les variables smallbig idotsize, i les inicialitza als valors 2, 8 i 2 respectivament.

A continuació, el boto ButtonBig es programa per a que, en ser clicat, prengui el valor de la variable global big i l'adjudiqui a la variable global dotsize.

De la mateixa manera, el botó ButtonSmall es programa per a que, en ser clicat, prengui el valor de la variable global small i l'adjudiqui a la variable global dotsize.


Estudi del programa: Pintar punts i línies

Vegeu que la part del programa que dibuixa els punts és igual que la realitzada per al programa PaintPot (1), amb la diferència que el radi no s'obté directament d'un bloc numèric, sino que s'obté de la variable global dotsize.

D'altra banda, la part del programa que dibuixa les línies és idèntica a la realitzada al programa PaintPot (1).


Com introduir al programa les variables globals

Per inicialitzar (crear-les i donar-les un valor inicial) les variables globals procedirem com s'indica als dibuixos següents:

No comments:

Post a Comment