Processing_practica_explicacio_codi

2,290 views

Published on

Explicació del codi de la pràctica de Processing de l'assignatura Integració Digital de Continguts, Grau Multimèdia, UOC. Pràctica completa en Racó Vermell de Paquita Ribas http://bit.ly/1cTxuIU

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,290
On SlideShare
0
From Embeds
0
Number of Embeds
1,575
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Processing_practica_explicacio_codi

  1. 1. 1
  2. 2. ÍNDEX INTRODUCCIÓ 3 ESTRUCTURA BÀSICA 4 ENCENDRE EL GPS 6 BOTÓ MENÚ 9 CARREGAR MAPES 11 CARREGAR TRACKS 14 BOTÓ POSICIÓ 18 DESPLAÇAR-SE PEL MAPA 19 COMENÇAR L’EXCURSIÓ 21 BOTÓ ZOOM 25 FUNCIÓ DE RADAR METEOROLÒGIC 28 BOTÓ DE CONTRAST 32 BOTÓ DE MODE NIT 35 2
  3. 3. INTRODUCCIÓ La finalitat d’aquesta pràctica és la de dissenyar amb Processing un simulador de GPS amb una sèrie de funcionalitats: - - - Encendre / apagar el GPS. Cal poder simular l’arrencada del dispositiu amb el logotip de l’empresa. Botó “menú” que donarà accés a un menú en pantalla per a seleccionar les diferents opcions que tindrem disponibles. Al carregar un mapa ens senyalarà la posició. Càrrega de mapes (dos mapes) o Una vegada carregat qualsevol dels mapes, podrem activar el menú “Radar” que indicarà amb icones meteorològiques el temps sobre el nostre mapa. o La tempesta es mou sobre el mapa. o Si la posició s’apropa a la icona, sonarà un soroll de tempesta. Càrrega de tracks (dos tracks) o Al carregar el track i iniciar una excursió, l’indicador de la nostra posició inicial es trobarà situat en el principi del camí. Si ens allunyem del camí correcte sonarà una alarma. Botons de control que permetran moure’s pels menús, desplaçar el mapa, etc. Botó que modifica el contrast del mapa. Botó que activa / desactiva el mode nit. 3
  4. 4. ESTRUCTURA BÀSICA  Les primeres línies de codi s’utilitzen per a importar les llibreries La llibreria dels botons: // Definim la variable que contindrà la interfície del GPS Les llibreries del so: Les llibreries de so  A continuació se declararan les variables globals. Una vegada declarades s’executarà el 4 És una de les funcions principals del Processing que s’executa al principi i una sola vegada. Dintre d’aquesta funció hi escriurem la mida de la finestra on apareixerà el nostre GPS, el color de fons i de traç d’aquesta, les coordenades necessàries per a col·locar les imatges dintre de la finestra, com s’inicien els comptadors i el de les variables; així com carregarem totes les imatges i els sons que necessitarà el gps per a funcionar. També designarem les ubicacions destinades als diferents botons utilitzant la llibreria de botons:  A continuació s’executarà el Que és on s’ubiquen totes les funcions que s’executaran repetidament.
  5. 5. El funcionament bàsic del GPS és el d’una màquina d’estats. Utilitzarem una variable ens indicarà l’estat actual, amb una estructura de control condicional . que // OFF – Ens indica que el GPS està apagat // POWERING ON – Ens indica que el GPS s'està engegant (està fent el procés) // ON – Ens indica que el GPS està totalment engegat // MENÚ - Ens obre el menú d'opcions per a carregar mapes o tracks // CARREGAR MAPES – Permet carregar el menú mapes // CARREGAR TRACKS – Permet carregar el menú tracks 5 // CARREGAR TRACK 1 – Permet carregar el track 1 // CARREGAR TRACK 2 – Permet carregar el track 2 // POWERING OFF - Apaga el dispositiu
  6. 6. ENCENDRE EL GPS El GPS s’engega i s’apaga amb el següent botó, que quan s’està engegant s’il·lumina: El GPS es pot apagar en qualsevol dels estats del programa. Des d’un primer moment // El gps es troba apagat // I s’inicia amb l'estat 0 Com el GPS es troba apagat, només es mostra la imatge de l’aparell 6
  7. 7.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. // Defineix la posició del botó // Defineix la mida del botó // Una vegada pitjat el botó, passarà a l’estat 1  El botó del power només s’activarà en qualsevol dels estats que es troben dintre del función . de la // Si l'estat és 0 passarem a l'estat 1 7 // En qualsevol altra estat, l'aparell es podrà apagar, és a dir, passar a l'estat 0  Quan s’engega el GPS es posen en marxa diferents funcions que permetran més tard realitzar diferents tasques sobre l’aparell. // Apareix la paraula "GPS" durant 1,5 segons // Apareix el logo "Racó Vermell" durant 7 segons // Carreguem el logo GPS // Permet que la imatge es vagi carregant des de transparent
  8. 8. // Carreguem el logo "Racó Vermell" // Permet que la imatge es vagi carregant des de transparent //Una vegada s'ha engegat el dispositiu, ens trobem en l'estat 2 // Aquesta funció serveix per a donar 100% d'opacitat a la imatge // Carreguem la imatge de la carcassa de l'aparell // Carreguem la imatge del botó il·luminat  Per a apagar el GPS utilitzarem el mateix botó i ho podrem fer des de qualsevol pantalla // Tan sols es mostrarà la carcassa del GPS 8
  9. 9. BOTÓ MENÚ 9 El menú permet carregar els mapes i els tracks. Accionarem el menú amb aquest botó:
  10. 10.  En processin definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. // Botó principal del menú // Defineix la posició del botó // Defineix la mida del botó  El botó del menú només s’activarà en qualsevol dels estats que es troben dintre del función D’altra manera no funcionarà de la // Quan s'acciona el botó del menú, apagaran tots els sons, el de l'alarma i el de la tempesta en el cas que estiguin funcionant 10 // La pantalla de menú és l'estat 4
  11. 11. CARREGAR MAPES 11  Des del botó del menú accedim a una pantalla on es poden carregar els mapes i els tracks. La pantalla de carregar els mapes permet carregar un mapa d’Eivissa i un de Formentera.
  12. 12.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge Phosohop del GPS. // Botó per a carregar la pàgina de mapes // Defineix la posició del botó // Defineix la mida del botó // Botó per a carregar mapa d'Eivissa // Defineix la posició del botó // Defineix la mida del botó // Botó per a carregar mapa de // Defineix la posició del botó // Defineix la mida del botó  En el del switch es crida a la funció carregar les imatges per a poder visualitzar la pantalla de carregar mapes que el que fa es 12 // Pantalla carregar mapes // Barra de menús // Imatge principal del GPS  Per a accionar els botons definirem el . //CARREGAR MAPA EIVISSA // Només ha de funcionar des de la pantalla de carregar mapes // Carrega la imatge d’Eivissa // Reduirem el mapa en un terç
  13. 13. // El nivell de zoom és el 2 //CARREGAR MAPA FORMENTERA // Només ha de funcionar des de la pantalla de carregar mapes // Carrega la imatge de Formentera // Reduirem el mapa en un terç 13 // El nivell de zoom és el 2
  14. 14. CARREGAR TRACKS 14  La pantalla de carregar els mapes permet carregar dos tracks diferents, un d’Eivissa i un de Formentera.
  15. 15.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge Phosohop del GPS. //Botó per a carregar tracks // Defineix la posició del botó // Defineix la mida del botó //Botó per a carregar el track 1 // Defineix la posició del botó // Defineix la mida del botó //Botó per a carregar el track 2 // Defineix la posició del botó // Defineix la mida del botó  En el del switch es crida a la funció que el que fa es carregar les imatges per a poder visualitzar la pantalla de carregar mapes, el carregarà el track d’Eivissa i el carregarà el track de Formentera // CASE 6 - Funció per a carregar tracks // Pantalla carregar tracks // Barra de menús // Imatge principal del GPS //CASE 10 - Funció que carrega el track 1 - Eivissa // Carrega el track color blau d'Eivissa // Mapa actiu, coordenades de posició, amplada i alçada // Carrega el track color vermell d'Eivissa // Barra de menús // Imatge principal del GPS 15
  16. 16. // CASE 11 - Funció que carrega el track 2 - Formentera // Carrega el track color blau de Formentera // Mapa actiu, coordenades de posició, amplada i alçada // Carrega el track color vermell de Formentera // Barra de menús // Imatge principal del GPS  Per a accionar els botons i carregar els tracks, definirem el . // Carregar track 1 // Només ha de funcionar des de la pantalla de carregar tracks, que és l’estat 6 // Carreguem el mapa d’Eivissa 16 // Aquest és la posició ubicada just el punt inicial de la ruta per a començar l’excursió // El nivell de zoom és el 2 // El track 1 és l'estat 10 // Només ha de funcionar des de la pantalla de carregar tracks, que és l’estat 6 //Carrega el mapa de Formentera
  17. 17. // Aquest és la posició ubicada just el punt inicial de la ruta per a començar l’excursió // El nivell de zoom és el 2 // El track 2 és l'estat 11 17
  18. 18. BOTÓ POSICIÓ Amb el botó “posició” es pot visualitzar o ocultar la posició que es té en el mapa  El punt central s’inicialitza a per a que es vegi sempre en els mapes .  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. // Defineix la posició del botó // Defineix la mida del botó  Per a accionar fer el botó definirem el 18
  19. 19. DESPLAÇAR-SE PEL MAPA  Per a poder desplaçar-se pels mapes el GPS disposa d’uns botons de desplaçament  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. //Botó per a pujar mapa // Defineix la posició del botó // Defineix la mida del botó //Botó per a desplaçar a l'esquerra el mapa // Defineix la posició del botó // Defineix la mida del botó //Botó per a desplaçar a la dreta el mapa // Defineix la posició del botó // Defineix la mida del botó //Botó per a baixar el mapa // Defineix la posició del botó // Defineix la mida del botó  Per a accionar fer el botó definirem el públic void // Desplaçarem el mapa cap amunt // Límit del marc per baix 19
  20. 20. // Desplaçarem el mapa cap avall // Límit del marc per dalt // Desplaçarem el mapa cap a l'esquerra // Límit del marc per la dreta 20 // Desplaçarem el mapa cap a la dreta // Límit del marc per l’esquerra
  21. 21. COMENÇAR L’EXCURSIÓ  En el moment que la posició surt fora de la ruta del track, sonarà una alarma.  Sota el track vermell tenim un track igual però molt més gruixut. Aquest és el que llegeix el programa per a saber si la posició està sobre el track o no. El track ha de ser més gruixut per a poder tenir un espai al voltant del track que no soni l’alarma.  Quan comencem l’excursió trobem dos “chivatos” en la part de dalt que ens indiquen: porció de la ruta per on està passant la posició en aquest moment Color de píxel que s’està llegint en aquest moment. Si és blau no sonarà l’alarma, si és transparent sonarà l’alarma 21
  22. 22. // Funció principal que mostra el mapa // Si l'estat és 10 carregarem el mapa d'Eivissa // Contrast // Visió nocturna // Color del píxel de la imatge on està el track en blau del fons en x,y // Per a la posició x, y de la imatge del fons, on està el track en blau, es retalla un quadrat de 100x100 22 // Crida la funció de l'alarma // Carga la imatge test en la coordenada 5,5 // Reomple un rectangle de color de la variable b. Si llegeix el track, el color serà blau // Creació d'un rectangle que contindrà el color que llegeix de píxel. La posició és de 150, 15 i la mida de 50x50 píxels // Si l'estat és 11 carregarem el mapa de Formentera // Funció pel contrast // Funció per visió nocturna
  23. 23. // Color del píxel de la imatge on està el track en blau del fons en x,y // Per a la posició x, y de la imatge del fons, on està el track en blau, es retalla un quadrat de 100x100 // Crida la funció de l'alarma // Carga la imatge test en la coordenada 5,5 // Reomple un rectangle de color de la variable b. Si llegeix el track, el color serà blau // Creació d'un rectangle que contindrà el color que llegeix de píxel. La posició és de 150, 15 i la mida de 50x50 píxels // Radar 23
  24. 24.  Funció que fa sonar l’alarma: // Si el píxel llegit és blau, l'alarma no sona // Si el píxel llegit no és blau, l'alarma sonarà 24
  25. 25. BOTÓ ZOOM 25 Amb el botó de zoom podem ampliar i reduir els mapes o els tracks fins a quatre posicions. Ho fem pitjant aquest botó en el GPS:  Primerament definirem les variables del zoom // Comptador de desplaçament, per a corregir el zoom // Comptador de desplaçament, per a corregir el zoom
  26. 26.  Definirem el nivell del zoom per a controlar que no s'allunyi o s'apropi massa, i controlar les vores.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. //Botó del zoom "+" (ampliar) // Defineix la posició del botó // Defineix la mida del botó //Botó del zoom "-" (reduir) // Defineix la posició del botó // Defineix la mida del botó  Aquestes funcions activen el zoom. El zoom +, funcionarà sempre que el mapa es trobi actiu i que sigui més petit de 5. 26
  27. 27. El zoom – funcionarà sempre que el mapa es trobi actiu i que sigui més gran d’1. 27
  28. 28. FUNCIÓ DE RADAR METEOROLÒGIC 28 Una vegada s’entra dintre d’un mapa se selecciona el botó radar: El que fa aquest botó és que apareguin unes icones meteorològiques que es mouen sobre el mapa. Si ens apropem amb el cursor, sonarà un so de tempesta. La funció de radar només serveix per a els mapes.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. // Defineix la posició del botó // Defineix la mida del botó
  29. 29.  Se inicia amb el radar desactivat  Per a accionar fer el botó definirem el públic void  Per a que surtin les icones meteorològiques, s’ha creat un array que conte les quatre icones de tempesta 29  Una vegada s’acciona el radar, Processing seleccionarà aleatòriament una de les icones de l’array “meteo”.  Per a evitar que les icones apareguin fora del camp de visió les obliguem que apareguin en un punt “x” aleatori entre 150 i 500 píxels i un punt aleatori “y” entre 150 i 600 píxels.  Es carregarà la imatges aleatòria de l’array “meteo”  Es carregarà l'alarma que ha de sonar quan s'apropa a la icona meteorològica
  30. 30.  Dintre de la funció trobarem aquest que indica que si el radar s'activa es carregarà aleatòriament una imatge de l'array "meteo" // Apareixerà dintre de les coordenades del rang que defineixe “rx” i “ry” // Aquesta és la funció que fa moure la icona // Aquesta és la funció que fa saltar el so  Aquesta funció fa moure la icona meteorològica. Es mourà en diagonal des del lloc on aparegui fins a 20 píxels. // Si la imatge es mou, s'anirà desplaçant x, y fins que el comptador arribi a 20 30 // Quan el comptador arribi a 20, es desplaçarà en sentit contrari // Quan el comptador arribi a 0, tornarà a desplaçar-se com al principi, fins a 20 // Si ens situem entre rx+15 píxels i ry+15, salta el "chivato" que ens indica que ens apropem al núvol
  31. 31. Aquesta funció fa sonar el so de tempesta: // Si es detecta que la posició s'ha apropat a la icona meteorològica sonarà l'alarma // Si no, es pararà 31
  32. 32. BOTÓ DE CONTRAST 32 El contrast s’activa amb aquest botó: Amb el signes “+” i “-“ pujarem o baixarem el contrast del mapa fins a quatre posicions. El botó contrast funciona quan se carreguen els mapes i els tracks.
  33. 33.  Definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. // Botó per a pujar el contrast // Defineix la posició del botó // Defineix la mida del botó // Botó per a baixar el contrast // Defineix la posició del botó // Defineix la mida del botó  Al principi del programa, inicialitzarem el contrast a 1 i la brillantor a 0.  Per a accionar fer funcionar els botons definirem el Sempre que el contrast no superi 5, anirem augmentant +10 la brillantor Sempre que el contrast sigui major que 1, anirem baixant brillantor 33
  34. 34.  Cridarem la funció dintre de la funció Aquesta funció recorre cada píxel del mapa, separant el RGB de cada píxel i modificant el seu valor 34
  35. 35. BOTÓ DE MODE NIT 35 El mode nit s’activa amb aquest botó: Amb cada clic activarem i desactivarem el mode nit. El botó de mode nit funciona quan se carreguen els mapes i els tracks.  Quan inicia el programa, el mode nit està desactivat  Definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a botó és la imatge del GPS. // Botó per al mode nit // Defineix la posició del botó // Defineix la mida del botó
  36. 36.  Per a accionar fer funcionar el botó definirem el  Dintre de la funció estats activarem o desactivarem la visió nocturna en tots els // Si s'acciona el mode de visió nocturna // El mapa actiu se tenyirà de vermell // Torna el color original del mapa 36 PAQUITA RIBAS TUR, 2013 Llicència: Creative Commons: Reconeixement – No comercial – Sense obra derivada http://creativecommons.org/licenses/by-nc-nd/3.0/es/

×