{"id":1667,"date":"2022-06-29T15:13:23","date_gmt":"2022-06-29T13:13:23","guid":{"rendered":"http:\/\/lab-interactivitat.recursos.uoc.edu\/?p=1667"},"modified":"2022-09-22T11:52:25","modified_gmt":"2022-09-22T09:52:25","slug":"conexion-ed1-con-snap","status":"publish","type":"post","link":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/conexion-ed1-con-snap\/","title":{"rendered":"Conexi\u00f3n ED1 con Snap!"},"content":{"rendered":"<p><strong>1. Introducci\u00f3n<\/strong><\/p>\n<div class=\"featured featured-blue\"><p>La conexi\u00f3n de MicroBlocks con Snap! est\u00e1, actualmente, en fase de desarrollo y algunos de los elementos descritos a continuaci\u00f3n pueden tener modificaciones. Este proceso se considera un ejercicio avanzado, que puede implicar alguna dificultad adicional.<\/p>\n<\/div>\n<p>Para poder hacer la conexi\u00f3n se necesitan tres elementos: un programa especial para MicroBlocks, una conexi\u00f3n wifi y una librer\u00eda para Snap!.<\/p>\n<p><strong>2. Programa de conexi\u00f3n a MicroBlocks<\/strong><\/p>\n<p>La conexi\u00f3n entre Snap! y ED1 se lleva a cabo mediante la red wifi, por lo tanto, necesitaremos poder acceder a una conexi\u00f3n de este tipo. El <em>software<\/em> intermediario que se necesita para poder programar ED1 con Snap! permite conectar nuestra placa a la misma red wifi que utiliza nuestro ordenador. Una vez que est\u00e9 conectada a la misma red wifi, la ED1 tendr\u00e1 asignada una direcci\u00f3n IP que podremos utilizar para controlarla desde Snap!.<\/p>\n<p>MicroBlocks y Snap! se comunican mediante el protocolo <em>websocket<\/em>. Este protocolo hace posible abrir una sesi\u00f3n de comunicaci\u00f3n interactiva entre el navegador de un usuario en un dispositivo (un ordenador o un m\u00f3vil, por ejemplo) y un servidor web remoto. Con este sistema, podemos enviar mensajes a un servidor y recibir respuestas controladas de forma bidireccional entre nuestro ordenador (Snap!) y la placa ED1.<\/p>\n<p>Descargaremos y abriremos <a href=\"https:\/\/cloud.citilab.eu\/s\/rPtekSFJjmtWrXf\" target=\"_blank\" rel=\"noopener\">este programa<\/a> desde MicroBlocks:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1669 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_1_ES-1024x645.jpg\" alt=\"\" width=\"1024\" height=\"645\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_1_ES-1024x645.jpg 1024w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_1_ES-300x189.jpg 300w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_1_ES-768x484.jpg 768w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_1_ES-1536x968.jpg 1536w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_1_ES.jpg 1611w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>3. Conexi\u00f3n por wifi<\/strong><\/p>\n<p>Para conectar la ED1 al wifi, tenemos que utilizar la versi\u00f3n piloto de MicroBlocks, que la podemos descargar <a href=\"https:\/\/microblocks.fun\/downloads\/pilot\/standalone\/\" target=\"_blank\" rel=\"noopener\">aqu\u00ed<\/a>.<\/p>\n<p>O utilizando la versi\u00f3n en l\u00ednea siguiendo este <a href=\"https:\/\/microblocks.fun\/run\/microblocks.html\" target=\"_blank\" rel=\"noopener\">enlace<\/a>.<\/p>\n<p>Cuando tengamos la versi\u00f3n piloto o la versi\u00f3n web de MicroBlocks abierta, tenemos que cargar el programa que hemos descargado en el paso anterior.<\/p>\n<p>En la parte inferior del programa, encontraremos un bloque amarillo de comentario conectado a un bloque azul que se llama \u00absabe WIFI\u00bb:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"my-image alignnone wp-image-1671\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_2_ES.jpg\" alt=\"\" width=\"628\" height=\"80\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_2_ES.jpg 846w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_2_ES-300x38.jpg 300w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_2_ES-768x98.jpg 768w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>Modificaremos los datos <em>SSID<\/em> y <em>password<\/em> por el nombre por el nombre de nuestra red y nuestra contrase\u00f1a, respectivamente. Es decir, si nuesttra red se llama <em>MiFibra-123<\/em> y nuestra contrase\u00f1a es <em>123456<\/em>, modificar\u00edamos el bloque de la siguiente manera:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"my-image alignnone wp-image-1673\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_3_ES.jpg\" alt=\"\" width=\"628\" height=\"80\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_3_ES.jpg 846w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_3_ES-300x38.jpg 300w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_3_ES-768x98.jpg 768w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>Una vez que lo tengamos modificado, haremos doble clic sobre el bloque y despu\u00e9s cargaremos el programa al ED1.<\/p>\n<p>Primero veremos un c\u00edrculo azul con un cuadrado verde intermitente encima. Si todo ha funcionado correctamente, despu\u00e9s de pocos segundos, la pantalla se volver\u00e1 negra y saldr\u00e1n unas letras donde se indicar\u00e1 la direcci\u00f3n IP que tiene asignada nuestra ED1. Por ejemplo, en esta imagen vemos la ED1 conectada a una red llamada vodafone6030 y con una direcci\u00f3n IP: 192.168.0.162.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1273 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-1024x290.jpg\" alt=\"\" width=\"953\" height=\"270\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-1024x290.jpg 1024w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-300x85.jpg 300w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-768x218.jpg 768w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_4.jpg 1292w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/p>\n<p>La conexi\u00f3n wifi solo hay que hacerla una vez y la ED1 se acordar\u00e1 directamente de la red y la contrase\u00f1a introducida en este paso. Si cambiamos de red o de contrase\u00f1a, tendremos que <a href=\"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/inicializar-la-placa\/\" target=\"_blank\" rel=\"noopener\">reinicializar<\/a> la placa (hacer <em>reset<\/em>) y volver a empezar el proceso de conexi\u00f3n.<\/p>\n<p>Aqu\u00ed tenemos un v\u00eddeo donde podemos ver todo el proceso de conexi\u00f3n de wifi con Snap!, que detallaremos a continuaci\u00f3n:<\/p>\n<p><iframe loading=\"lazy\" title=\"Citilab  ED1 &amp; Microblocks 7 ESP (conexi\u00f3n Snap! microBlocks)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ipJSom2kFkA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><strong>4. Conexi\u00f3n con Snap!<\/strong><\/p>\n<p>La conexi\u00f3n entre MicroBlocks y Snap! solo funciona si se utiliza una versi\u00f3n especial de Snap! que se llama <em>extensions<\/em>. Podemos encontrar la versi\u00f3n Snap! <em>extensions<\/em> en este <a href=\"http:\/\/extensions.snap.berkeley.edu\/snap\/snap.html\" target=\"_blank\" rel=\"noopener\">enlace<\/a>.<\/p>\n<p>Una vez en Snap! <em>extensions<\/em>, tenemos que cargar la librer\u00eda <strong><em>Signada<\/em><\/strong><em>:<\/em><\/p>\n<p>1. Abrimos el men\u00fa de librer\u00edas:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1675 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_5_ES.jpg\" alt=\"\" width=\"752\" height=\"577\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_5_ES.jpg 752w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_5_ES-300x230.jpg 300w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/p>\n<p>2. Seleccionamos la librer\u00eda <strong><em>Firmada<\/em><\/strong> que est\u00e1 al final de la lista:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"my-image alignnone wp-image-1677\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_6_ES.jpg\" alt=\"\" width=\"650\" height=\"647\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_6_ES.jpg 800w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_6_ES-300x300.jpg 300w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_6_ES-150x150.jpg 150w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_6_ES-768x764.jpg 768w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>Una vez que tengamos la librer\u00eda instalada, para iniciar el proceso de conexi\u00f3n tenemos que utilizar el bloque <strong><em>connect to<\/em><\/strong>, donde tenemos que escribir la direcci\u00f3n IP de la placa ED1:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1279 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_7.jpg\" alt=\"\" width=\"187\" height=\"40\" \/><\/p>\n<p>La direcci\u00f3n IP de la ED1 es la que sale en la pantalla cuando hemos hecho la conexi\u00f3n con \u00e9xito a la wifi.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1273 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-1024x290.jpg\" alt=\"\" width=\"953\" height=\"270\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-1024x290.jpg 1024w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-300x85.jpg 300w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_4-768x218.jpg 768w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_4.jpg 1292w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/p>\n<p>Ahora ya se pueden utilizar los diferentes bloques para interactuar con la ED1 sin utilizar MicroBlocks. Podemos cerrar MicroBlocks y utilizar solo Snap!. Estos son los diferentes bloques para controlar la ED1:<\/p>\n<div id=\"attachment_1281\" style=\"width: 553px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1281\" class=\"my-image wp-image-1281 \" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_8.jpg\" alt=\"\" width=\"543\" height=\"190\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_8.jpg 583w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_8-300x105.jpg 300w\" sizes=\"auto, (max-width: 543px) 100vw, 543px\" \/><p id=\"caption-attachment-1281\" class=\"wp-caption-text\">Bloques de <em>Movimiento<\/em><\/p><\/div>\n<div id=\"attachment_1283\" style=\"width: 328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1283\" class=\" wp-image-1283 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_9.jpg\" alt=\"\" width=\"318\" height=\"242\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_9.jpg 529w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_9-300x228.jpg 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><p id=\"caption-attachment-1283\" class=\"wp-caption-text\">Bloques de <em>Apariencia<\/em><\/p><\/div>\n<div id=\"attachment_1285\" style=\"width: 335px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1285\" class=\" wp-image-1285 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_10.jpg\" alt=\"\" width=\"325\" height=\"244\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_10.jpg 400w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_10-300x226.jpg 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><p id=\"caption-attachment-1285\" class=\"wp-caption-text\">Bloques de <em>Sensores<\/em><\/p><\/div>\n<div id=\"attachment_1287\" style=\"width: 341px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1287\" class=\" wp-image-1287 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_11.jpg\" alt=\"\" width=\"331\" height=\"191\" srcset=\"\/wp-content\/uploads\/2022\/06\/Wifi_Lab_11.jpg 414w, \/wp-content\/uploads\/2022\/06\/Wifi_Lab_11-300x173.jpg 300w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><p id=\"caption-attachment-1287\" class=\"wp-caption-text\">Bloques de <em>Variables<\/em><\/p><\/div>\n<p><strong>5. Ejemplo<\/strong><\/p>\n<p>En el siguiente ejemplo, podemos ver c\u00f3mo el personaje de Alonzo se va moviendo por la pantalla en funci\u00f3n de los valores de los sensores de inclinaci\u00f3n de la ED1. Cuando el personaje toca un borde, escribe en la pantalla de la ED1 \u00ab\u00a1Cuidado!\u00bb. Es un ejemplo sencillo de lectura de sensores en la ED1 que tienen un resultado en el mundo virtual de Snap! y tambi\u00e9n de c\u00f3mo provocar acciones en la ED1 que pasen al mundo virtual de Snap!.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1680 my-image\" src=\"\/wp-content\/uploads\/2022\/06\/snap_ed1_es.png\" alt=\"\" width=\"432\" height=\"294\" srcset=\"\/wp-content\/uploads\/2022\/06\/snap_ed1_es.png 432w, \/wp-content\/uploads\/2022\/06\/snap_ed1_es-300x204.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Introducci\u00f3n Para poder hacer la conexi\u00f3n se necesitan tres elementos: un programa especial para MicroBlocks, una conexi\u00f3n wifi y una librer\u00eda para Snap!. 2. Programa de conexi\u00f3n a MicroBlocks La conexi\u00f3n entre Snap! y ED1 se lleva a cabo mediante la red wifi, por lo tanto, necesitaremos poder acceder a una conexi\u00f3n de este [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[48,52,82],"tags":[],"class_list":["post-1667","post","type-post","status-publish","format-standard","hentry","category-ed1-es","category-microblocks-es","category-snap-ed1_2"],"acf":[],"_links":{"self":[{"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/1667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=1667"}],"version-history":[{"count":9,"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/1667\/revisions"}],"predecessor-version":[{"id":1904,"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/1667\/revisions\/1904"}],"wp:attachment":[{"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=1667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/categories?post=1667"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lab-interactivitat.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/tags?post=1667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}