{"id":2111,"date":"2021-10-14T13:24:37","date_gmt":"2021-10-14T11:24:37","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/?page_id=2111"},"modified":"2022-09-21T10:56:39","modified_gmt":"2022-09-21T08:56:39","slug":"3-6-5-ejemplo-trabajamos-con-sensores","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/3-6-5-ejemplo-trabajamos-con-sensores\/","title":{"rendered":"3.6.5. Ejemplo: trabajamos con sensores"},"content":{"rendered":"<p>Hasta ahora hemos visto c\u00f3mo trabajar con los actuadores o <em>outputs<\/em> de la placa ED1, es decir, su propia pantalla. Ahora empezaremos a trabajar y experimentar con sensores o <em>inputs<\/em>. Como hemos visto al empezar este apartado, lo interesante de los microcontroladores como ED1 es que nos permiten interactuar con el mundo f\u00edsico gracias a los sensores incorporados al microcontrolador o bien con sensores externos que podamos a\u00f1adir.<\/p>\n<p>Integrado a la ED1 encontramos un sensor que nos indica (devuelve) la inclinaci\u00f3n de la placa. Haremos una primera actividad sencilla para aprender c\u00f3mo funciona este sensor.<\/p>\n<p>Podemos copiar el siguiente c\u00f3digo o cargarlo de <strong>Archivo &gt; Abre &gt; Ejemplos &gt; Balance.ubp<\/strong><\/p>\n<p>Como veremos, el proyecto ha importado directamente las librer\u00edas \u00abSensores b\u00e1sicos\u00bb y \u00abPantalla LED\u00bb que se utilizar\u00e1n en el c\u00f3digo. Cuando guardemos un c\u00f3digo en MicroBlocks que utiliza una librer\u00eda concreta, al volverlo a abrir se importa directamente. En este caso, para pintar en la pantalla de nuestra ED1, lo haremos a trav\u00e9s de la librer\u00eda \u00abPantalla LED\u00bb y no la TFT como hemos utilizado en el apartado anterior.<\/p>\n<p>La principal diferencia entre estas dos librer\u00edas para pintar la pantalla es que est\u00e1n hechas por componentes distintos. La TFT nos permite utilizar una pantalla de cristal l\u00edquido, como la que tiene nuestra ED1, y a la cual podemos mostrar gr\u00e1ficos complejos como im\u00e1genes o dibujos. Las pantallas LED, en cambio, son pantallas compuestas por matrices de m\u00f3dulos LED limitados. Aqu\u00ed tenemos una imagen de ejemplo de una pantalla micro:bit con una matriz de LED mostrando el dibujo de una flecha:<\/p>\n<figure id=\"attachment_2724\" aria-describedby=\"caption-attachment-2724\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-2724 size-large\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_microbit-1024x1010.jpg\" alt=\"\" width=\"640\" height=\"631\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_microbit-1024x1010.jpg 1024w, \/wp-content\/uploads\/2022\/05\/3_6_5_microbit-300x296.jpg 300w, \/wp-content\/uploads\/2022\/05\/3_6_5_microbit-768x758.jpg 768w, \/wp-content\/uploads\/2022\/05\/3_6_5_microbit-1536x1515.jpg 1536w, \/wp-content\/uploads\/2022\/05\/3_6_5_microbit-2048x2020.jpg 2048w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-2724\" class=\"wp-caption-text\">Placa micro:bit con una flecha dibujada encendiendo LEDs<\/figcaption><\/figure>\n<p>Cuando importemos una librer\u00eda, si clic\u00e1is encima de esta, veremos que en sus bloques importados aparece el bloque \u00abpantalla\u00bb que corresponde a la matriz de LED de la imagen anterior:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2729\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_pantalla_led_ES-1024x870.jpg\" alt=\"\" width=\"500\" height=\"425\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_pantalla_led_ES-1024x870.jpg 1024w, \/wp-content\/uploads\/2022\/05\/3_6_5_pantalla_led_ES-300x255.jpg 300w, \/wp-content\/uploads\/2022\/05\/3_6_5_pantalla_led_ES-768x652.jpg 768w, \/wp-content\/uploads\/2022\/05\/3_6_5_pantalla_led_ES.jpg 1419w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Con la librer\u00eda \u00abPantalla LED\u00bb podemos trabajar con la pantalla de la ED1 como si fuera una pantalla LED. Lo que hace esta librer\u00eda es dividir la pantalla TFT de la ED1; el resultado de la divisi\u00f3n es una matriz de 5&#215;5 \u00abp\u00edxeles\u00bb. M\u00e1s adelante, veremos c\u00f3mo estos \u00abp\u00edxeles\u00bb son en realidad unos cuadrados bastante m\u00e1s grandes que un p\u00edxel real.<\/p>\n<p>En el c\u00f3digo <em>Balance.ubp<\/em>, veremos la siguiente programaci\u00f3n:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2733\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_balance_ES.jpg\" alt=\"\" width=\"400\" height=\"702\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_balance_ES.jpg 415w, \/wp-content\/uploads\/2022\/05\/3_6_5_balance_ES-171x300.jpg 171w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>El c\u00f3digo utiliza la librer\u00eda \u00abPantalla LED\u00bb para \u00abencender\u00bb un LED de la matriz simulada en la pantalla TFT de la ED1 (que nosotros veremos como un cuadrado verde), y moverlo por la pantalla en X e Y seg\u00fan la inclinaci\u00f3n de la placa. Pod\u00e9is mover la placa para ver la interacci\u00f3n con el sensor.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2734\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_balance-1024x256.jpg\" alt=\"\" width=\"800\" height=\"200\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_balance-1024x256.jpg 1024w, \/wp-content\/uploads\/2022\/05\/3_6_5_balance-300x75.jpg 300w, \/wp-content\/uploads\/2022\/05\/3_6_5_balance-768x192.jpg 768w, \/wp-content\/uploads\/2022\/05\/3_6_5_balance-1536x384.jpg 1536w, \/wp-content\/uploads\/2022\/05\/3_6_5_balance-2048x512.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Ahora os proponemos una segunda actividad un poco m\u00e1s compleja utilizando este sensor, donde deformaremos un pol\u00edgono de forma din\u00e1mica con la inclinaci\u00f3n de la placa. Los v\u00e9rtices del pol\u00edgono cambian al sacudir la placa.<\/p>\n<p>En vuestro entorno de MicroBlocks, pod\u00e9is cargar el c\u00f3digo de <strong>Archivo &gt; Abre &gt; Ejemplos &gt; by board &gt; Citilab ED1 and M5Stack &gt; Dynamic Polygons.ubp<\/strong><\/p>\n<p>Para acceder a los sensores internos de la placa, debemos trabajar con los m\u00f3dulos de la secci\u00f3n \u00abSensores b\u00e1sicos\u00bb de la secci\u00f3n de librer\u00edas (no es necesario que descarguemos librer\u00edas, ya vienen por defecto como en el ejemplo anterior).<\/p>\n<p>Puesto que es un c\u00f3digo relativamente complejo, repasaremos qu\u00e9 hace cada parte de los bloques. No os preocup\u00e9is si no lo entend\u00e9is completamente en este punto del curso, ya que se trata de un programa avanzado. Sin embargo, nos sirve para presentar las capacidades m\u00e1s complejas de MicroBlocks y ED1, y os recomendamos volver a revisar el ejemplo m\u00e1s adelante.<\/p>\n<p>El programa tiene dos partes diferenciadas: los bloques de la derecha, que generan el pol\u00edgono, y los de la izquierda que son acciones asociadas a algunas interacciones concretas.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2739\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_ES-941x1024.jpg\" alt=\"\" width=\"500\" height=\"544\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_ES-941x1024.jpg 941w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_ES-276x300.jpg 276w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_ES-768x836.jpg 768w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_ES-1412x1536.jpg 1412w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_ES.jpg 1659w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>La parte de generaci\u00f3n del pol\u00edgono (derecha), empieza por iniciar, en los dos primeros bloques, las variables de medida y color del pol\u00edgono.<\/p>\n<p>Despu\u00e9s, se crea un bucle que se ejecuta por siempre, donde encontramos tres acciones principales antes de dibujar el pol\u00edgono:<\/p>\n<ul>\n<li>La primera detecta la inclinaci\u00f3n Y de la placa y transforma esta inclinaci\u00f3n en el n\u00famero de <em>sides <\/em>o caras del pol\u00edgono.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"size-full wp-image-2743 alignnone\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_3_ES.jpg\" alt=\"\" width=\"459\" height=\"117\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_3_ES.jpg 459w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_3_ES-300x76.jpg 300w\" sizes=\"(max-width: 459px) 100vw, 459px\" \/><\/p>\n<ul>\n<li>La segunda asigna la medida de las caras para que se ajusten a la medida de la pantalla. Lo m\u00ednimo es un tri\u00e1ngulo, lo m\u00e1ximo es 100\/5 + 6 = 26, casi un c\u00edrculo.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"size-full wp-image-2747 alignnone\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_4_ES.jpg\" alt=\"\" width=\"452\" height=\"94\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_4_ES.jpg 452w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_4_ES-300x62.jpg 300w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/p>\n<ul>\n<li>La tercera coloca el pol\u00edgono en el centro de la pantalla. El pol\u00edgono se va moviendo por este eje en funci\u00f3n de la inclinaci\u00f3n X.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"size-full wp-image-2751 alignnone\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_5_ES.jpg\" alt=\"\" width=\"547\" height=\"106\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_5_ES.jpg 547w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_5_ES-300x58.jpg 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/p>\n<p>La parte m\u00e1s complicada es el c\u00e1lculo de la distancia para cada paso y as\u00ed conseguir que el pol\u00edgono no salga de la pantalla.<\/p>\n<p>Tambi\u00e9n tenemos un bloque personalizado, que hemos llamado <strong><em>polygon<\/em><\/strong>, que dibuja el pol\u00edgono a partir de la actualizaci\u00f3n de las variables correspondientes al n\u00famero de caras, medida y posici\u00f3n (sides, size y xoffset). Para ver la definici\u00f3n del pol\u00edgono, podemos clicar con el bot\u00f3n derecho encima del bloque <strong><em>polygon <\/em><\/strong>y nos aparecer\u00e1 la opci\u00f3n de \u00abmuestra la definici\u00f3n del bloque\u00bb que abrir\u00e1 el c\u00f3digo que dibuja el pol\u00edgono.<\/p>\n<p><img loading=\"lazy\" class=\"size-large wp-image-2755 alignnone\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_mostra_bloc_ES-1024x972.jpg\" alt=\"\" width=\"640\" height=\"608\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_polygon_mostra_bloc_ES-1024x972.jpg 1024w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_mostra_bloc_ES-300x285.jpg 300w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_mostra_bloc_ES-768x729.jpg 768w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_mostra_bloc_ES-1536x1458.jpg 1536w, \/wp-content\/uploads\/2022\/05\/3_6_5_polygon_mostra_bloc_ES.jpg 1844w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Dentro del bloque <strong><em>polygon<\/em><\/strong>, encontramos tambi\u00e9n un bloque personalizado llamado <strong><em>decoration<\/em><\/strong>, que se ocupa de la decoraci\u00f3n de los pol\u00edgonos (los puntitos que unen las l\u00edneas).<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2759\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_5_decoration_mostra_bloc_ES-982x1024.jpg\" alt=\"\" width=\"550\" height=\"573\" srcset=\"\/wp-content\/uploads\/2022\/05\/3_6_5_decoration_mostra_bloc_ES-982x1024.jpg 982w, \/wp-content\/uploads\/2022\/05\/3_6_5_decoration_mostra_bloc_ES-288x300.jpg 288w, \/wp-content\/uploads\/2022\/05\/3_6_5_decoration_mostra_bloc_ES-768x800.jpg 768w, \/wp-content\/uploads\/2022\/05\/3_6_5_decoration_mostra_bloc_ES-1474x1536.jpg 1474w, \/wp-content\/uploads\/2022\/05\/3_6_5_decoration_mostra_bloc_ES.jpg 1892w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hasta ahora hemos visto c\u00f3mo trabajar con los actuadores o outputs de la placa ED1, es decir, su propia pantalla. Ahora empezaremos a trabajar y experimentar con sensores o inputs. Como hemos visto al empezar este apartado, lo interesante de los microcontroladores como ED1 es que nos permiten interactuar con el mundo f\u00edsico gracias a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2111"}],"collection":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=2111"}],"version-history":[{"count":17,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2111\/revisions"}],"predecessor-version":[{"id":2891,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2111\/revisions\/2891"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=2111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}