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

Latest revision as of 16:25, 21 May 2019

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:

Placa electrònica Arduino Nano

Targeta d'expansió

Cables de prototipatge

Cable USB

Infraroig

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

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:

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:

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

Llavors surt una pantalla emergent que permet pintar i dibuixar:

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...":

Apareixerà una pantalla emergent des d'on es pot escollir el desitjat, seleccionant-lo i clicant després a sobre d'"Importa":

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

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

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

Queda així:

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”:

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:

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.

Van mostrant-se a l'escenari:

Observeu que es pot saber a quin objecte s'està programant en cada moment, ja que queda remarcat en color blanc:

Per a esborrar-los, cal clicar amb el botó dret de cadascun i escollir l'opció "esborra'm":

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í:

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:

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

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

I dir-li d'una altra manera, escrivint el nom en aquest lloc:

Observem que es visualitza molt gran. Tal i com està no té aire espai per a moure's a dins de l'escenari:

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:

i queda així:

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:

Fin que quedi horitzontal:

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í.

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.

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:

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:

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:

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.

Ens ha de quedar una taula semblant a aquesta:

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:

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

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í:

En més gran:

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ó:

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í:

En més gran:

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?

@@ Line 147: / Line 147: @@
 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]]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 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]]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 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]]Plantilla
+[[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;
@@ Line 185: / Line 185: @@
 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í:
-[[File:Semafor 27.png|border|center|400px]]
+[[File:Semafor 27.png|border|center|400px|Semafor 27.png]]
 En més gran:
-[[File:Semafor 28.png|border|center]]Si provem el programa, veiem que efectivament hem aconseguir sincronitzar els leds físics amb el nostre semàfor virtual.
+[[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!
@@ Line 200: / Line 200: @@
 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>
-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'''". 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;
-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'''", així anirà d'un costat a l'altre però no surtirà mai del seu recinte. El programa final, per al cotxe, queda doncs així:
+[[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;
-[[File:Semafor 29.png|border|center|400px]]En més gran:
+&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.
@@ Line 220: / Line 224: @@
 Com l'imagines? T'animes a fer-ho?
-== Bitbot.cat ==
-Aquest és un article del programa [https://bitbot.cat/ '''Bitbot.cat'''], podeu consultar la resta d'articles a:
-*[[Recursos_formació_BitBot|Formació presencial '''Bitbot.cat''']]
-*[[Bitbot|Formació semipresencial '''Bitbot.cat''']]
-'''Bitbot.cat''' és un programa implusat per la Secretaria de Telecomunicacions, Ciberseguretat i Societat Digital de la '''Generalitat de Catalunya''', en col·laboració amb el Departament d’Ensenyament, que neix amb l’objectiu d’impulsar la millora de les competències digitals del jovent i promoure el creixement de les vocacions tecnològiques.
-Una de les accions que es proposa aconseguir és la capacitació de monitores i monitors per a conduir i desenvolupar '''activitats educatives de lleure en els camps de la robòtica i la programació''', per tal d’anar formalitzant aquesta oferta amb '''monitores i monitors certificats'''.

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

Latest revision as of 16:25, 21 May 2019

Contents

Components electrònics

Esquema del circuit electrònic

Objectes a Snap for Arduino

Fons

Objecte "Arduino"

Objecte vehicle

Objecte semàfor virtual

Programa a Snap4Arduino

Interacció amb objectes virtuals

Semàfor virtual

Vehicle

Perifèrics i muntatge físic final

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools