Difference between revisions of "Semàfor real i virtual"

From Edutec Wiki
Jump to: navigation, search
 
(25 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<div>
 
= &nbsp; =
 
  
 +
[[File:Semafor4.jpg|border|left|200px|Semafor4.jpg]] Aquesta pràctica de [[Introducció_a_Snap4Arduino|'''Snap4Arduino''']] preten ser un exemple d'interacció entre un sistema real i un simulat virtualment. Consisteix a fer un doble '''semàfor '''que, per una banda, detecti la presència real i tangible d'un obstacle al món real, posant-se a la realitat de color vermell, i que, a més, d'altra banda interaccioni amb un escenari a la pantalla d'un ordinador, a la qual hi hagi dibuixats diferents elements com, per exemple, un vehicle. El vehicle de la pantalla es mourà lliurement per ella&nbsp;però quan algú s'acosti al semàfor real, es posarà vermell pels vehicles, també a la pantalla i pel vehicle dibuixat.
  
= Els components =
+
&nbsp;
  
</div> Per realitzar aquesta pràctica, necessitem varis components electrònics. Els veiem a continuació:
+
&nbsp;
  
{| class="wikitable" style="width: 272px;"
+
&nbsp;
 +
 
 +
&nbsp;
 +
 
 +
&nbsp;
 +
 
 +
&nbsp;
 +
 
 +
== Components electrònics ==
 +
 
 +
Per realitzar l'activitat calen els següents components electrònics:
 +
 
 +
{| class="wikitable" style="width: 272px"
 
|-
 
|-
 
| [[File:Nano.jpg|100x100px|RTENOTITLE]]
 
| [[File:Nano.jpg|100x100px|RTENOTITLE]]
| style="width: 163px;" | Placa Arduino Nano;&nbsp;
+
| style="width: 163px" |  
 +
Placa electrònica&nbsp;&nbsp; Arduino Nano
 +
 
 
|-
 
|-
 
| [[File:Arduino nano shield.jpg|100x100px|Arduino nano shield.jpg]]
 
| [[File:Arduino nano shield.jpg|100x100px|Arduino nano shield.jpg]]
| style="width: 163px;" | Placa Shield
+
| style="width: 163px" | Targeta d'expansió
 
|-
 
|-
 
| [[File:RC.jpg|100x100px|RTENOTITLE]]
 
| [[File:RC.jpg|100x100px|RTENOTITLE]]
| style="width: 163px;" | Cables de prototipatge&nbsp;
+
| style="width: 163px" | Cables de prototipatge&nbsp;
 
|-
 
|-
 
| [[File:ImagesP2DDIEO0.jpg|100x100px|RTENOTITLE]]
 
| [[File:ImagesP2DDIEO0.jpg|100x100px|RTENOTITLE]]
| style="width: 163px;" | Cable USB
+
| style="width: 163px" | Cable USB
 
|-
 
|-
 
| [[File:Infraroig.jpg|100x85px|P1.JPG]]
 
| [[File:Infraroig.jpg|100x85px|P1.JPG]]
| style="width: 163px;" | Infraroig
+
| style="width: 163px" | Infraroig
 
|-
 
|-
 
|  
 
|  
Line 31: Line 44:
 
|}
 
|}
  
| style="width: 163px;" | LED's vermell i verd
+
| style="width: 163px" | LED's vermell i verd
 
|}
 
|}
  
== Esquema del circuit ==
+
== Esquema del circuit electrònic ==
  
Primerament connectem els components a la placan seguint l'esquema inferior. Fixeu-vos amb el número que correspon els pins d’entrada i de sortida:
+
Comença connectant els components electrònics a la placa seguint l'esquema inferior. Fixa't en el número que correspon a cada pin d’entrada i de sortida:
  
{| border="1" cellpadding="1" cellspacing="1" style="width: 500px;"
+
{| style="width: 500px" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
| style="width: 233px;" | Actuador LED vermell
+
| style="width: 233px" | Actuador LED vermell
| style="width: 258px;" | Pin digital 11
+
| style="width: 258px" | Pin digital 11
 
|-
 
|-
| style="width: 233px;" | Actuador LED verd
+
| style="width: 233px" | Actuador LED verd
| style="width: 258px;" | Pin digital 12
+
| style="width: 258px" | Pin digital 12
 
|-
 
|-
| style="width: 233px;" | Sensor infraroig&nbsp;
+
| style="width: 233px" | Sensor infraroig&nbsp;
| style="width: 258px;" | Pin analògic 0
+
| style="width: 258px" | Pin analògic 0
 
|}
 
|}
<p style="text-align: center;">[[File:Snap17.PNG|RTENOTITLE]]</p>  
+
<p style="text-align: center">[[File:Snap17.PNG|RTENOTITLE]]</p>  
&nbsp;
+
== Objectes a Snap for Arduino ==
  
== Els objectes ==
+
L’[[Introducció_a_Snap4Arduino|Snap4Arduino]] permet interactuar entre el món real i el virtual. És per això que també realitzarem una simulació,&nbsp;on un vehicle anirà d’un lloc a un altre de l’escenari quan el semàfor es mostra en color verd i s’aturarà quant estigui en vermell.
  
L’S4A ens permet interactuar entre el món real i el virtual. És per això que també realitzarem una simulació dins d’Scratch, on un cotxe anirà d’un lloc a un altre de l’escenari quant el semàfor es mostra en color verd i per contra s’aturarà quant estigui en vermell.
+
=== Fons ===
  
Començarem dibuixant un paisatge de fons per l’escenari. Si ho preferim també podem importar-lo:
+
Començarem dibuixant un paisatge de fons per l’escenari. L'escenari és un objecte diferent, com el teló de fons d'un teatre. Cada objecte, i l'escenari també, es programen per separat. L'escenari té com a diferència que ocupa sempre tot el fons i no pot canviar de lloc ni de mida, per exemple. Per defecte és tot blanc. Per a dibuixar-hi un paisatge de fons, primer cal clicar sobre l'"objecte" escenari:
<p style="text-align: center;">[[File:Sna0.jpg|300px|RTENOTITLE]]</p>
+
&nbsp;
+
  
El següent pas és amagar l’objecte Arduino, ja que de moment no necessitem tenir-lo visible. Com qualsevol objecte normal, ho podem fer tot fent clic sobre el bloc “amagar”.
+
[[File:Semafor 1.png|border|center|400px|Semafor 1.png]]Quan selecciono l'escenari, o quan hi sóc, el seu nom està també en color blanc, en comptes de gris. Fixa't en la diferència:
<p style="text-align: center;">[[File:Sna3.PNG|RTENOTITLE]]</p>
+
A continuació, necessitem un cotxe que podem trobar a la galeria d’objectes d’Scratch, fent clic a la següent icona:
+
<p style="text-align: center;">[[File:Icones.PNG|RTENOTITLE]]</p>
+
Nosaltres hem optat per fer servir aquest, però qualsevol dibuix d’un cotxe també ens serviria.
+
<p style="text-align: center;">[[File:Snap6.0.PNG|RTENOTITLE]]</p>
+
Observem que es visualitza força desproporcionat, així que fixem la seva mida a 50%.
+
<p style="text-align: center;">[[File:Snap4.PNG|RTENOTITLE]]</p>
+
Ja tenim el cotxe i l’escenari. Només ens falta un semàfor, que podem dibuixar nosaltres mateixos o importat les dues imatges que us facilitem a continuació. Cada imatge, serà un vestit, un farà referència al semàfor en verd i l’altre al vermell.
+
<p style="text-align: center;">[[File:Snap5.PNG|RTENOTITLE]][[File:Snap6.PNG|RTENOTITLE]]</p>
+
Col·loquem aquests dos objectes a l’escenari, de manera que quedin aproximadament així:
+
<p style="text-align: center;">[[File:Snap6.1.PNG|300px|RTENOTITLE]]</p>
+
Si voleu començar a programar ja amb la plantilla dels elements carregats feu clic [http://snap4arduino.org/run#present:Username=joanguell&ProjectName=plantilla%20semàfor aquí] per descarregar-vos l'arxiu que la conté. Només cal que la importeu i ja podeu començar a programar-la.&nbsp;
+
  
== El programa d’Arduino ==
+
[[File:Semafor 2.png|border|center|400px|Semafor 2.png]]
  
Ja podem començar a programar Arduino. Recordem que per poder obtenir el valor dels sensors que utilitzem, hem de seleccionar un port i marcar amb un tic el sensor per tal de poder-lo visualitzar a l'escenari.&nbsp;
+
Per a dibuixar-ne un, cal anar a la pestanya "'''Fons'''" i clicar a sobre de la icona d'un pinzell:
<p style="text-align: center;">[[File:Snap19.PNG|RTENOTITLE]]</p>  
+
 
 +
[[File:Semafor 3.png|border|center|600px|Semafor 3.png]]
 +
 
 +
Llavors surt una pantalla emergent que permet pintar i dibuixar:
 +
 
 +
[[File:Semafor 4.png|border|center|600px|Semafor 4.png]]
 +
 
 +
Altrament podem importar un dels que ja hi ha a la llibreria del programa. Per això&nbsp;cal clicar la icona del full de paper, a la cantonada superior esquerra de la pantalla, i seleccionar l'opció "'''Fons...'''":
 +
 
 +
[[File:Semafor 5.png|border|center|400px|Semafor 5.png]]Apareixerà una pantalla emergent des d'on es pot escollir el desitjat, seleccionant-lo i clicant després a sobre d'"'''Importa'''":
 +
 
 +
[[File:Semafor 6.png|border|center|400px|Semafor 6.png]]Finalment, una altra opció és importar-lo d'un fitxer imatge. Per exemple, podeu guardar la imatge que hi ha a&nbsp;continuació a l'escriptori
 +
<p style="text-align: center">[[File:Sna0.jpg|300px|RTENOTITLE]]</p>
 +
i importar-la de la següent manera: clicant&nbsp;a sobre de la icona del full de paper i seleccionant l'opció "'''Importa'''":
 +
 
 +
[[File:Semafor 7.png|border|center|400px|Semafor 7.png]]
 +
 
 +
I una finestra emergent us permetrà seleccionar la imatge descarregada. Clicant a sobre d'"'''Abrir'''" es carrega el fons escollit:
 +
 
 +
[[File:Semafor 8.png|border|center|400px|Semafor 8.png]]Queda així:
 +
 
 +
[[File:Semafor 9.png|border|center|400px|Semafor 9.png]]
 +
 
 +
=== Objecte "Arduino" ===
 +
 
 +
El següent pas és amagar l’objecte '''Arduino''', ja que de moment no necessitem tenir-lo visible. En aquest objecte és on programem la placa Arduino i, per tant, el semàfor real format pels dos leds. Com qualsevol objecte normal, ho podem fer tot fent clic sobre el bloc “amagar”:
 +
<p style="text-align: center">[[File:Sna3.PNG|RTENOTITLE]]</p>
 +
Recordeu que cal estar a l'objecte Arduino per a dir-li que s'amagui el seu dibuixet a la pantalla (que fer defecte és una fletxa), com en general per a qualsevol cosa relacionada amb la placa, el circuit electrònic o aquest dibuixet de fletxeta de l'objecte. Cada objecte, i també el fons, es programen per separat, a la seva pàgina corresponent.
 +
 
 +
=== Objecte vehicle ===
 +
 
 +
A continuació, necessitem un vehicle virtual que es mourà a la pantalla. Per això cal clicar a sobre de la fletxeta que hi ha just a sota de l'escenari:
 +
 
 +
[[File:Icones.PNG|border|center|RTENOTITLE]]Observeu que cada vegada que hi cliqueu surt un nou objecte, que [http://wiki.edutec.citilab.eu/Introducció_a_Snap4Arduino#Mascota per defecte és una fletxeta] d'un color diferent cada vegada i cadascun es va dient objecte, objecte (1), objecte (2), objecte (3), objecte (4), etc.
 +
 
 +
[[File:Semafor 11.png|border|center|400px|Semafor 11.png]]
 +
 
 +
Van mostrant-se a l'escenari:
 +
 
 +
[[File:Semafor 12.png|border|center|400px|Semafor 12.png]]Observeu que es pot saber a quin objecte s'està programant en cada moment, ja que queda remarcat en color blanc:
 +
 
 +
[[File:Semafor 13.png|border|center|400px|Semafor 13.png]]Per a esborrar-los, cal clicar amb el botó dret de cadascun i escollir l'opció "esborra'm":
 +
 
 +
[[File:Semafor 15.png|border|center|400px|Semafor 15.png]]Si has provat a crear objectes, pots esborrar tots els objectes per a deixar només l'objecte Arduino i un més. Sinó, si només tens l'objecte Arduino, cal crear un objecte nou. És a dir, que partint d'aquí:[[File:Semafor 14.png|border|center|400px|Semafor 14.png]]Acabarem de crear l'objecte del vehicle, on programarem únicament el que fa referència al vehicle. Recordeu que la part de programació relacionada amb el semàfor real (el circuit electrònic) es programa a l'objecte Arduino.
 +
 
 +
Al nou objecte li busquem una imatge que ens recordi a un vehicle. En podem trobar a la galeria d’objectes d’'''Snap4Arduino''' fent clic a la següent icona:
 +
 
 +
[[File:Semafor 16.png|border|center|400px|Semafor 16.png]]Nosaltres hem optat per fer servir aquest, però un altre també ens serviria:
 +
<p style="text-align: center">[[File:Snap6.0.PNG|RTENOTITLE]]</p>
 +
Podem canviar-li el nom, que per defecte és Objecte(2):
 +
 
 +
[[File:Semafor 17.png|border|center|400px|Semafor 17.png]]I dir-li d'una altra manera, escrivint el nom en aquest lloc:
 +
 
 +
[[File:Semafor 18.png|border|center|400px|Semafor 18.png]]Observem que es visualitza molt gran. Tal i com està no té aire espai per a moure's a dins de l'escenari:
 +
 
 +
[[File:Semafor 19.png|border|center|400px|Semafor 19.png]]així que el fixem a una mida més petita, per exemple al 50%, amb el bloc "'''Fixa la mida a ...%'''" de la categoria <span style="color:#FFFFFF">'''<span style="background-color:#9900cc">Aparença</span>'''</span>:
 +
<p style="text-align: center">[[File:Snap4.PNG|RTENOTITLE]]</p>
 +
i queda així:
 +
 
 +
[[File:Semafor 20.png|border|center|400px|Semafor 20.png]]També potser cal ajustar la seva orientació. Si està inclinat com fent una volta de campana, o fins i tot com per pujar o baixar una rampa, com a l'escenari hem posat un terra pla, modifiquem la seva inclinació amb ajuda dels blocs "'''Gira...''' graus" de la categoria de blocs de <span style="color:#F0FFFF">'''<span style="background-color:#0000FF">Moviment</span>'''</span>:
 +
 
 +
[[File:Semafor 21.png|center|Semafor 21.png]]Fin que quedi horitzontal:[[File:Semafor 22.png|border|center|400px|Semafor 22.png]]Finalment, el disposem al lloc on volem de l'escenari, com per exemple just on s'uneixen el color blau i el negre. Recordeu que això es fa simplement arrossegant la imatge de l'escenari amb el ratolí.
 +
 
 +
[[File:Semafor 23.png|border|center|400px|Semafor 23.png]]
 +
 
 +
=== Objecte semàfor virtual ===
 +
 
 +
Ja tenim el vehicle i l’escenari. Només ens falta un semàfor: el podem dibuixar nosaltres mateixos o bé podem importar les dues imatges següents. Caldrà crear un nou objecte, igual que hem creat al vehicle, i al mateix objecte li importem aquesta vegada dues imatges. És important això, no són dos objectes diferents sinó un de sol. Cada imatge serà un "vestit", un pel semàfor en verd i l’altre a quan està en vermell.
 +
<p style="text-align: center">[[File:Cotxes verd.gif|border|Cotxes verd.gif]]&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; [[File:Cotxes vermell.gif|border|Cotxes vermell.gif]]</p>
 +
Fixeu-vos que hi ha dos vestits però un sol objecte "semàfor" a l'àrea d'objectes (junt amb l'Arduino i el vehicle) i també un sol de dibuixat a l'escenari:
 +
 
 +
[[File:Semafor 24.png|border|center|400px|Semafor 24.png]]Si cliqueu alternativament a un i altre vestit del semàfor, veureu com l'objecte a l'escenari va passant del verd al vermell i viceversa:
 +
 
 +
[[File:Semafor 25.png|center|600px|Semafor 25.png]]Caldrà girar i potser canviar de tamany el semàfor, de la mateixa manera que amb el cotxe, i també disposar-lo a un lloc a l'escenari:
 +
 
 +
[[File:Semafor 26.png|border|center|400px|Semafor 26.png]]Plantilla
 +
 
 +
Si voleu començar a programar ja amb la plantilla dels elements carregats feu clic [https://drive.google.com/file/d/1Z-DMaStHlARqBEHw15Ob77ofi6qszeTh/view?usp=sharing aquí] per descarregar-vos l'arxiu que la conté. Només cal que la importeu i ja podeu començar a programar-la.&nbsp;
 +
 
 +
== Programa a Snap4Arduino ==
 +
 
 +
Com hem fet anteriorment, abans de començar carreguem el microprogramari "Standard Firmata" a la placa. Podem repassar els passos [http://wiki.edutec.citilab.eu/index.php/Introducció_a_Snap4Arduino aquí].&nbsp;
 +
 
 +
Ja podem començar a programar la placa '''Arduino Nano''' des del programari '''Snap4Arduino'''. Recordem que, per poder obtenir el valor dels sensors que utilitzem, hem de seleccionar un port i marcar amb un tic el sensor per tal de poder-lo visualitzar a l'escenari.&nbsp;
 +
<p style="text-align: center">[[File:Snap19.PNG|RTENOTITLE]]</p>  
 
Ens ha de quedar una taula semblant a aquesta:&nbsp;
 
Ens ha de quedar una taula semblant a aquesta:&nbsp;
<p style="text-align: center;">[[File:Snap11.PNG|RTENOTITLE]]</p>  
+
<p style="text-align: center">[[File:Snap11.PNG|RTENOTITLE]]</p>  
Si hem connectat correctament el sensor d’infraroig, els valors haurien de fluctuar quant acostem i allunyem la ma d’aquest.
+
Si hem connectat correctament el sensor d’infraroig, els valors haurien de fluctuar quant acostem i allunyem la d’aquest.
  
Ara cal que fem una estimació aproximada del valor del pin Analog0, a partir del qual volem que el semàfor es posi en vermell. Nosaltres hem escollit el valor 200, però en funció de cada sensor aquest nombre pot variar completament.
+
Ara cal que fem una estimació aproximada del valor del pin '''Analog0''', a partir del qual volem que el semàfor es posi en vermell. Nosaltres hem escollit el valor '''200''', però en funció de cada sensor aquest nombre pot variar completament.
  
A continuació, quant el sensor passi d’aquest valor, volem que el cotxe s’aturi i el semàfor canvi a vermell.
+
A continuació, quant el sensor passi d’aquest valor, volem que el cotxe s’aturi i el semàfor canviï a vermell.
  
Recorda de seleccionar l’objecte Arduino:
+
Recorda seleccionar l’objecte '''Arduino''':
<p style="text-align: center;">[[File:Snap12.PNG|RTENOTITLE]]</p>  
+
<p style="text-align: center">[[File:Snap12.PNG|RTENOTITLE]]</p>  
 
De moment, el programa que hem hagut d’obtenir ha de ser semblant a aquest:
 
De moment, el programa que hem hagut d’obtenir ha de ser semblant a aquest:
<p style="text-align: center;">[[File:Snap13.PNG|RTENOTITLE]]</p>
 
Si fem una prova, veurem que el LED verd sempre està encès i al apropar la ma al sensor, aquest s’apaga i s’encén el vermell.
 
  
== Interacció amb objectes d’Scratch ==
+
[[File:Semafor 10.png|border|center|400px|Semafor 10.png]]Si fem una prova, veurem que el led de color verd sempre està encès i al apropar la mà al sensor, aquest s’apaga i s’encén el vermell.
  
Fins ara hem programat l’objecte Arduino. Aquest és exactament igual que qualsevol altre objecte d’Scratch, amb la diferència que disposa de blocs més específics per el control de la placa.
+
=== Interacció amb objectes virtuals ===
 +
 
 +
Fins ara hem programat l’objecte '''''Arduino'''''. Aquest objecte és exactament igual que qualsevol altre objecte d’[[Introducció_a_Scratch|Scratch]] o d'[[Introducció_a_Snap!|Snap!]], amb la diferència que disposa de blocs més específics per el control de la placa.
  
 
Per fer que els altres objectes interactuïn amb l’estat del sensor, podem utilitzar un parell de missatges.
 
Per fer que els altres objectes interactuïn amb l’estat del sensor, podem utilitzar un parell de missatges.
  
Ara podem programar el semàfor virtual així:
+
=== Semàfor virtual ===
<p style="text-align: center;">[[File:Snap14.PNG|RTENOTITLE]]</p>
+
Si provem el programa, veiem que efectivament hem aconseguir sincronitzar els LEDs físics amb el nostre semàfor virtual.
+
  
Només ens falta que el cotxe també faci cas d’aquests missatges i ja tindrem la simulació completa!
+
Ara podem programar el semàfor virtual. Recordeu que cal fer-ho a l'objecte semàfor. Com ja li hem posat dos vestits (amb els noms "vermell" i "verd", respectivament), un amb una imatge amb el llum vermell&nbsp;encès i l'altre en verd, la programació queda així:
  
== El cotxe ==
+
[[File:Semafor 27.png|border|center|400px|Semafor 27.png]]
  
Abans de continuar, anem a amagar la taula de sensors que ens tapa bona part de l’escenari.
+
En més gran:
  
(foto)
+
[[File:Semafor 28.png|border|center|Semafor 28.png]]Si provem el programa, veiem que efectivament hem aconseguir sincronitzar els leds físics amb el nostre semàfor virtual.
 +
 
 +
Només ens falta que el vehicle també faci cas d’aquests missatges i ja tindrem la simulació completa!
 +
 
 +
&nbsp;
 +
 
 +
=== Vehicle ===
 +
 
 +
Abans de continuar, anem a amagar la taula de sensors que ens tapa bona part de l’escenari. Per fer-ho podem treure el "tic" que remarca el sensor o bé&nbsp;arrastrar els sensors de l'escenari fins a la paleta de blocs, tal hi com ho fem per borrar qualsevol dels blocs.
  
 
Seguidament, hem de canviar el tipus de rotació del cotxe, ja que volem que al rebotar amb la bora inverteixi en sentit horitzontal. Així que, seleccionem el cotxe i escollir el tipus de rotació que es mostra a continuació:
 
Seguidament, hem de canviar el tipus de rotació del cotxe, ja que volem que al rebotar amb la bora inverteixi en sentit horitzontal. Així que, seleccionem el cotxe i escollir el tipus de rotació que es mostra a continuació:
<p style="text-align: center;">[[File:Snap20.PNG|RTENOTITLE]]</p>
 
Aquestes opcions són les mateixes que en l’Scratch 2.0 trobàvem al prémer la icona “y” dels personatges.
 
  
El programa d’aquest objecte és força senzill:
+
[[File:Semafor 30.png|border|center|Semafor 30.png]]Ens posem a l'objecte "cotxe" per a programar-lo. Volem que camini quan tingui el semàfor en verd i que no ho faci quan el tingui en vermell. Per tant, quan rebi "semàfor verd" li direm que camini amb el bloc "'''mou-te ... passos'''" de a categoria de blocs de <span style="color:#F0F8FF">'''<span style="background-color:#0000FF">Moviment</span>'''</span>. Observeu que amb pocs passos es mou més lentament i amb molt passos molt ràpid. Li posem un nombre que el nostre ull percebi bé i ens agradi, no massa alt.&nbsp;
<p style="text-align: center;">[[File:Snap16.PNG|RTENOTITLE]]</p>  
+
 
== Conclusions ==
+
&nbsp;
 +
 
 +
Si ho provem, veurem que el cotxe comença a caminar en línia recta fins que se surt de la pantalla. Per a evitar-lo, recorrem al bloc "'''rebota en tocar una vora'''", també de la categoria <span style="color:#F0F8FF">'''<span style="background-color:#0000FF">Moviment</span>'''</span>, així anirà d'un costat a l'altre però no surtirà mai del seu recinte. El programa final, per al cotxe, queda doncs així:
 +
 
 +
&nbsp;
 +
 
 +
[[File:Semafor 29.png|border|center|400px|Semafor 29.png]]En més gran:
 +
<p style="text-align: center">[[File:Snap16.PNG|RTENOTITLE]]</p>  
 +
Fixeu-vos que no cal indicar-li res per quan el semàfor estigui en vermell. Tal i com està, es mourà únicament si el semàfor està verd, que és el que volíem. Com si està vermell no rep el missatge "semàfor verd", aleshores no farà això. De fet no farà res, romandrà aturat, que és el que volem.
 +
 
 +
Ja hem acabat tota la programació!
 +
 
 +
&nbsp;
 +
 
 +
== Perifèrics i muntatge físic final ==
 +
 
 +
Si tot funciona bé, en prémer la bandera verda observarem que el cotxe s’atura quant apropem la mà al sensor. A més, tant el semàfor físic com el virtual es posen en vermell. Per contra, quan&nbsp;allunyem la mà, els semàfors es posen en verd i el cotxe comença a moure’s de nou.
 +
 
 +
Ara podríem treballar més la part real, muntant per exemple els leds en un pal amb forma de semàfor i afegint un personatge&nbsp;de joguina, o un fet per tu mateixa, fent un circuit, etc.
  
Si tot funciona bé, al prémer la bandera verda observarem que el cotxe s’atura quant apropem la ma al sensor. A més, tant el semàfor físic com el virtual es posen en vermell. Per contra, quant allunyem la ma, els semàfors es posen en verd i el cotxe comença a moure’s de nou. <!--![endif]---->
+
Com l'imagines? T'animes a fer-ho?

Latest revision as of 16:25, 21 May 2019

Semafor4.jpg
Aquesta pràctica de Snap4Arduino preten ser un exemple d'interacció entre un sistema real i un simulat virtualment. Consisteix a fer un doble semàfor que, per una banda, detecti la presència real i tangible d'un obstacle al món real, posant-se a la realitat de color vermell, i que, a més, d'altra banda interaccioni amb un escenari a la pantalla d'un ordinador, a la qual hi hagi dibuixats diferents elements com, per exemple, un vehicle. El vehicle de la pantalla es mourà lliurement per ella però quan algú s'acosti al semàfor real, es posarà vermell pels vehicles, també a la pantalla i pel vehicle dibuixat.

 

 

 

 

 

 

Components electrònics

Per realitzar l'activitat calen els següents components electrònics:

RTENOTITLE

Placa electrònica   Arduino Nano

Arduino nano shield.jpg Targeta d'expansió
RTENOTITLE Cables de prototipatge 
RTENOTITLE Cable USB
P1.JPG Infraroig
P2.JPG  
LED's vermell i verd

Esquema del circuit electrònic

Comença connectant els components electrònics a la placa seguint l'esquema inferior. Fixa't bé en el número que correspon a cada pin d’entrada i de sortida:

Actuador LED vermell Pin digital 11
Actuador LED verd Pin digital 12
Sensor infraroig  Pin analògic 0

RTENOTITLE

Objectes a Snap for Arduino

L’Snap4Arduino permet interactuar entre el món real i el virtual. És per això que també realitzarem una simulació, on un vehicle anirà d’un lloc a un altre de l’escenari quan el semàfor es mostra en color verd i s’aturarà quant estigui en vermell.

Fons

Començarem dibuixant un paisatge de fons per l’escenari. L'escenari és un objecte diferent, com el teló de fons d'un teatre. Cada objecte, i l'escenari també, es programen per separat. L'escenari té com a diferència que ocupa sempre tot el fons i no pot canviar de lloc ni de mida, per exemple. Per defecte és tot blanc. Per a dibuixar-hi un paisatge de fons, primer cal clicar sobre l'"objecte" escenari:

Semafor 1.png
Quan selecciono l'escenari, o quan hi sóc, el seu nom està també en color blanc, en comptes de gris. Fixa't en la diferència:
Semafor 2.png

Per a dibuixar-ne un, cal anar a la pestanya "Fons" i clicar a sobre de la icona d'un pinzell:

Semafor 3.png

Llavors surt una pantalla emergent que permet pintar i dibuixar:

Semafor 4.png

Altrament podem importar un dels que ja hi ha a la llibreria del programa. Per això cal clicar la icona del full de paper, a la cantonada superior esquerra de la pantalla, i seleccionar l'opció "Fons...":

Semafor 5.png
Apareixerà una pantalla emergent des d'on es pot escollir el desitjat, seleccionant-lo i clicant després a sobre d'"Importa":
Semafor 6.png
Finalment, una altra opció és importar-lo d'un fitxer imatge. Per exemple, podeu guardar la imatge que hi ha a continuació a l'escriptori

RTENOTITLE

i importar-la de la següent manera: clicant a sobre de la icona del full de paper i seleccionant l'opció "Importa":

Semafor 7.png

I una finestra emergent us permetrà seleccionar la imatge descarregada. Clicant a sobre d'"Abrir" es carrega el fons escollit:

Semafor 8.png
Queda així:
Semafor 9.png

Objecte "Arduino"

El següent pas és amagar l’objecte Arduino, ja que de moment no necessitem tenir-lo visible. En aquest objecte és on programem la placa Arduino i, per tant, el semàfor real format pels dos leds. Com qualsevol objecte normal, ho podem fer tot fent clic sobre el bloc “amagar”:

RTENOTITLE

Recordeu que cal estar a l'objecte Arduino per a dir-li que s'amagui el seu dibuixet a la pantalla (que fer defecte és una fletxa), com en general per a qualsevol cosa relacionada amb la placa, el circuit electrònic o aquest dibuixet de fletxeta de l'objecte. Cada objecte, i també el fons, es programen per separat, a la seva pàgina corresponent.

Objecte vehicle

A continuació, necessitem un vehicle virtual que es mourà a la pantalla. Per això cal clicar a sobre de la fletxeta que hi ha just a sota de l'escenari:

RTENOTITLE
Observeu que cada vegada que hi cliqueu surt un nou objecte, que per defecte és una fletxeta d'un color diferent cada vegada i cadascun es va dient objecte, objecte (1), objecte (2), objecte (3), objecte (4), etc.
Semafor 11.png

Van mostrant-se a l'escenari:

Semafor 12.png
Observeu que es pot saber a quin objecte s'està programant en cada moment, ja que queda remarcat en color blanc:
Semafor 13.png
Per a esborrar-los, cal clicar amb el botó dret de cadascun i escollir l'opció "esborra'm":
Semafor 15.png
Si has provat a crear objectes, pots esborrar tots els objectes per a deixar només l'objecte Arduino i un més. Sinó, si només tens l'objecte Arduino, cal crear un objecte nou. És a dir, que partint d'aquí:
Semafor 14.png
Acabarem de crear l'objecte del vehicle, on programarem únicament el que fa referència al vehicle. Recordeu que la part de programació relacionada amb el semàfor real (el circuit electrònic) es programa a l'objecte Arduino.

Al nou objecte li busquem una imatge que ens recordi a un vehicle. En podem trobar a la galeria d’objectes d’Snap4Arduino fent clic a la següent icona:

Semafor 16.png
Nosaltres hem optat per fer servir aquest, però un altre també ens serviria:

RTENOTITLE

Podem canviar-li el nom, que per defecte és Objecte(2):

Semafor 17.png
I dir-li d'una altra manera, escrivint el nom en aquest lloc:
Semafor 18.png
Observem que es visualitza molt gran. Tal i com està no té aire espai per a moure's a dins de l'escenari:
Semafor 19.png
així que el fixem a una mida més petita, per exemple al 50%, amb el bloc "Fixa la mida a ...%" de la categoria Aparença:

RTENOTITLE

i queda així:

Semafor 20.png
També potser cal ajustar la seva orientació. Si està inclinat com fent una volta de campana, o fins i tot com per pujar o baixar una rampa, com a l'escenari hem posat un terra pla, modifiquem la seva inclinació amb ajuda dels blocs "Gira... graus" de la categoria de blocs de Moviment:
Semafor 21.png
Fin que quedi horitzontal:
Semafor 22.png
Finalment, el disposem al lloc on volem de l'escenari, com per exemple just on s'uneixen el color blau i el negre. Recordeu que això es fa simplement arrossegant la imatge de l'escenari amb el ratolí.
Semafor 23.png

Objecte semàfor virtual

Ja tenim el vehicle i l’escenari. Només ens falta un semàfor: el podem dibuixar nosaltres mateixos o bé podem importar les dues imatges següents. Caldrà crear un nou objecte, igual que hem creat al vehicle, i al mateix objecte li importem aquesta vegada dues imatges. És important això, no són dos objectes diferents sinó un de sol. Cada imatge serà un "vestit", un pel semàfor en verd i l’altre a quan està en vermell.

Cotxes verd.gif        Cotxes vermell.gif

Fixeu-vos que hi ha dos vestits però un sol objecte "semàfor" a l'àrea d'objectes (junt amb l'Arduino i el vehicle) i també un sol de dibuixat a l'escenari:

Semafor 24.png
Si cliqueu alternativament a un i altre vestit del semàfor, veureu com l'objecte a l'escenari va passant del verd al vermell i viceversa:
Semafor 25.png
Caldrà girar i potser canviar de tamany el semàfor, de la mateixa manera que amb el cotxe, i també disposar-lo a un lloc a l'escenari:
Semafor 26.png
Plantilla

Si voleu començar a programar ja amb la plantilla dels elements carregats feu clic aquí per descarregar-vos l'arxiu que la conté. Només cal que la importeu i ja podeu començar a programar-la. 

Programa a Snap4Arduino

Com hem fet anteriorment, abans de començar carreguem el microprogramari "Standard Firmata" a la placa. Podem repassar els passos aquí

Ja podem començar a programar la placa Arduino Nano des del programari Snap4Arduino. Recordem que, per poder obtenir el valor dels sensors que utilitzem, hem de seleccionar un port i marcar amb un tic el sensor per tal de poder-lo visualitzar a l'escenari. 

RTENOTITLE

Ens ha de quedar una taula semblant a aquesta: 

RTENOTITLE

Si hem connectat correctament el sensor d’infraroig, els valors haurien de fluctuar quant acostem i allunyem la mà d’aquest.

Ara cal que fem una estimació aproximada del valor del pin Analog0, a partir del qual volem que el semàfor es posi en vermell. Nosaltres hem escollit el valor 200, però en funció de cada sensor aquest nombre pot variar completament.

A continuació, quant el sensor passi d’aquest valor, volem que el cotxe s’aturi i el semàfor canviï a vermell.

Recorda seleccionar l’objecte Arduino:

RTENOTITLE

De moment, el programa que hem hagut d’obtenir ha de ser semblant a aquest:

Semafor 10.png
Si fem una prova, veurem que el led de color verd sempre està encès i al apropar la mà al sensor, aquest s’apaga i s’encén el vermell.

Interacció amb objectes virtuals

Fins ara hem programat l’objecte Arduino. Aquest objecte és exactament igual que qualsevol altre objecte d’Scratch o d'Snap!, amb la diferència que disposa de blocs més específics per el control de la placa.

Per fer que els altres objectes interactuïn amb l’estat del sensor, podem utilitzar un parell de missatges.

Semàfor virtual

Ara podem programar el semàfor virtual. Recordeu que cal fer-ho a l'objecte semàfor. Com ja li hem posat dos vestits (amb els noms "vermell" i "verd", respectivament), un amb una imatge amb el llum vermell encès i l'altre en verd, la programació queda així:

Semafor 27.png

En més gran:

Semafor 28.png
Si provem el programa, veiem que efectivament hem aconseguir sincronitzar els leds físics amb el nostre semàfor virtual.

Només ens falta que el vehicle també faci cas d’aquests missatges i ja tindrem la simulació completa!

 

Vehicle

Abans de continuar, anem a amagar la taula de sensors que ens tapa bona part de l’escenari. Per fer-ho podem treure el "tic" que remarca el sensor o bé arrastrar els sensors de l'escenari fins a la paleta de blocs, tal hi com ho fem per borrar qualsevol dels blocs.

Seguidament, hem de canviar el tipus de rotació del cotxe, ja que volem que al rebotar amb la bora inverteixi en sentit horitzontal. Així que, seleccionem el cotxe i escollir el tipus de rotació que es mostra a continuació:

Semafor 30.png
Ens posem a l'objecte "cotxe" per a programar-lo. Volem que camini quan tingui el semàfor en verd i que no ho faci quan el tingui en vermell. Per tant, quan rebi "semàfor verd" li direm que camini amb el bloc "mou-te ... passos" de a categoria de blocs de Moviment. Observeu que amb pocs passos es mou més lentament i amb molt passos molt ràpid. Li posem un nombre que el nostre ull percebi bé i ens agradi, no massa alt. 

 

Si ho provem, veurem que el cotxe comença a caminar en línia recta fins que se surt de la pantalla. Per a evitar-lo, recorrem al bloc "rebota en tocar una vora", també de la categoria Moviment, així anirà d'un costat a l'altre però no surtirà mai del seu recinte. El programa final, per al cotxe, queda doncs així:

 

Semafor 29.png
En més gran:

RTENOTITLE

Fixeu-vos que no cal indicar-li res per quan el semàfor estigui en vermell. Tal i com està, es mourà únicament si el semàfor està verd, que és el que volíem. Com si està vermell no rep el missatge "semàfor verd", aleshores no farà això. De fet no farà res, romandrà aturat, que és el que volem.

Ja hem acabat tota la programació!

 

Perifèrics i muntatge físic final

Si tot funciona bé, en prémer la bandera verda observarem que el cotxe s’atura quant apropem la mà al sensor. A més, tant el semàfor físic com el virtual es posen en vermell. Per contra, quan allunyem la mà, els semàfors es posen en verd i el cotxe comença a moure’s de nou.

Ara podríem treballar més la part real, muntant per exemple els leds en un pal amb forma de semàfor i afegint un personatge de joguina, o un fet per tu mateixa, fent un circuit, etc.

Com l'imagines? T'animes a fer-ho?