Ateneu - Materials i recursos per a la formaci - Departament d'Ensenyament - nomenu

13/2/16 14:03

COMP - Materials sobre el Pensament Computacional

b10_ai_intro - 04_foto - b10_ai_intro - 04_foto

Fem una foto

En aquest apartat acabarem la nostra primera app tot programant com fer una
foto i fent que es vegi a la pantalla.

Ms concretament es pretn donar resposta a les preguntes segents:

Com podem programar la cmera del mbil?

Com podem veure una imatge a la nostra app?
Com podem modificar una imatge?

Per permetre que la nostra app pugui fer fotos hem d'incloure-hi un nou component no visible, el
component Camera que trobarem dins de la categoria Media.
Necessitarem, doncs, un bot per fer la foto i el component Image de la categoria User interface on la
collocarem. Aquest component t establertes per defecte les mides vertical i horitzontal automtiques per
tal d'ajustar-se a la mida de la imatge, per les podem canviar si necessitem una mida concreta.

http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b10_ai_intro/04_foto

Pgina 1 de 6

Ateneu - Materials i recursos per a la formaci - Departament d'Ensenyament - nomenu

13/2/16 14:03

Per programar com fer la foto noms cal que quan fem premem el bot corresponent hi hagi una crida a la
instrucci TakePicture de la cmera:

A continuaci, per collocar la foto que hem fet dins del component Image que hem hi ha a la nostra app,
hem de posar les segents instruccions:

La combinaci dels termes set i get permet assignar el valor obtingut amb el get al element que fa
referncia el set.

http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b10_ai_intro/04_foto

Pgina 2 de 6

Ateneu - Materials i recursos per a la formaci - Departament d'Ensenyament - nomenu

13/2/16 14:03

Hi ha instruccions que incorporen parmetres que podem utilitzar en la

programaci de l'app. En aquest cas s image, que ens permet fer
referncia a la imatge obtinguda en fer la foto.

Finalment, la foto a la nostra app es veu aix:

Modifiquem la imatge
Aquesta foto, tal i com l'hem fet, no es pot modificar. Ara b, en lloc d'utilitzar el component Image,
podem utilitzar un llen sobre el que puguem pintar a sobre; aquest component s el Canvas que podem
trobar a la categoria Drawing and animation.
Aix doncs, canviem el component on posem la imatge:

http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b10_ai_intro/04_foto

Pgina 3 de 6

Ateneu - Materials i recursos per a la formaci - Departament d'Ensenyament - nomenu

13/2/16 14:03

Entre les possibles instruccions que hi ha al Canvas n'hi ha que permeten dibuixar punts o lnies. Anem a
fer que quan toquem sobre la imatge hi aparegui un punt de color rosa i quan arrosseguem el dit per sobre
la imatge hi aparegui una lnia de color blau:

Si juguem una estona amb la foto que hem fet podem obtenir un resultat d'aquest tipus a la nostra app:

http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b10_ai_intro/04_foto

Pgina 4 de 6

Ateneu - Materials i recursos per a la formaci - Departament d'Ensenyament - nomenu

13/2/16 14:03

Per dibuixar un punt hem utilitzat la instrucci DrawPoint, per tamb

podrem utilitzar la instrucci DrawCircle.
Per dibuixar la lnia hem utilitzat els parmetres prevX i prevY, per no els
startX ni startY. Per qu?

Finalment tamb podem decidir que aquesta versi modificada de la foto que hem fet ens agrada molt i no
la volem perdre. Anem, doncs, a desar-la. Per fer-ho podem utilitzar una d'aquestes dues instruccions del
Canvas:

Aquestes dues instruccions desen la imatge al directori arrel del nostre dispositiu i retornen com a text el
cam sencer d'on l'estan desant. L'nica diferncia entre elles s si decidim nosaltres el nom de la imatge o
si el decideix el nostre dispositiu mbil.
Aix doncs, necessitem primer definir una variable on assignar aquest text i a continuaci fem un bot que,
en prmer-lo, desa la imatge que tenim al canvas:

http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b10_ai_intro/04_foto

Pgina 5 de 6

Ateneu - Materials i recursos per a la formaci - Departament d'Ensenyament - nomenu

13/2/16 14:03

L's de variables encara no s'ha explicat, per aquesta opci s prou

interessant com per incloure'n una.

http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b10_ai_intro/04_foto

Pgina 6 de 6