DJ Robótico

Introducción

Explicamos al alumnado que el diseño y programación de esta mesa de DJ va a constar de varias partes diferenciadas:

• La primera de ellas es la construcción de la maqueta de la mesa de DJ, donde irá la placa ZUM Core 2.0 junto al potenciómetro y el botón.

• La segunda es el diseño y programación de la aplicación móvil usando Bitbloq Apps.

• La tercera es la programación de la placa Zum Core 2.0 con Bitbloq Robotics que enviará mensajes a la aplicación móvil cuando movamos el potenciómetro o pulsemos el botón.

Construcción de la mesa de mezclas

Comenzamos explicando a nuestro alumnado que vamos a construir la mesa de mezclas que se compone de un potenciómetro y un botón, así como la placa Zum Core 2.0 en su interior. 

Repartimos el descargable con el recortable y el material de papelería y peimos al alumnado que recorte por todas las líneas que tienen una tijera. Para las líneas interiores pueden usar punzón y alfombrilla si disponemos de ello.

Tras ello, les indicamos que doblen por todas las líneas discontinuas.

Repartimos un potenciómetro y un botón y les explicamos cómo colocar estos componentes. Damos la vuelta al descargable para tener delante la parte no impresa del papel y los pegamos con cinta adhesiva haciendo coincidir los agujeros en la mesa de DJ con los componentes electrónicos: el agujero pequeño para el potenciómetro y el grande para el botón.

Con los componentes colocados, pedimos que peguen las pestañas para formar la estructura de la mesa. 

Entregamos una placa Zum Core 2.0 y les decimos que solo falta conectar los componentes. Les indicamos que tienen que:

1- Conectar el botón a un pin digital de la Zum Core 2.0, por ejemplo el 7.2- Conectar el potenciómetro a un pin analógico, por ejemplo el A0.

Les pedimos que inserten la placa debajo de la mesa dejando el conector USB hacia fuera. 

¡Ya tenemos mesa de DJ! Sin embargo, no hay buen DJ sin buena música, así que vamos a ello.

Diseño de la app con Bitbloq Apps.

Comenzamos explicando que, para realizar el proyecto, cada grupo va a necesitar entre tres y cinco canciones. 

Les contamos que existen páginas web con canciones libres de derechos que pueden utilizar, como Pixabay o Free Music Archive. Les pedimos que exploren alguna de ellas y descarguen unas pocas canciones que les gusten.

Facilitando a nuestro alumnado los archivos para Bitbloq Apps que se adjuntan en el apartado Descargables de la actividad y les pedimos que accedan a la web de Bitbloq y seleccionen la herramienta Bitbloq Apps. Dejamos que nombren al proyecto como quieran y, a continuación, vamos explicando los siguientes pasos:

A continuación facilitamos a nuestro alumnado los archivos para Bitbloq Apps que se adjuntan en el apartado Descargables de la actividad y les pedimos que accedan a la web de Bitbloq y seleccionen la herramienta Bitbloq Apps. Dejamos que nombren al proyecto como quieran y, a continuación, vamos explicando los siguientes pasos:

1. En la pestaña Diseño, pulsar sobre + Añadir recurso y seleccionar tanto los dos recursos facilitados previamente como las canciones descargadas.

2. En el panel de propiedades de Pantalla, seleccionar en el desplegable Orientación la opción Horizontal.

3. En el panel de propiedades de Pantalla, seleccionar en Imagen de fondo la imagen de la mesa de mezclas y después la opción Contenedor en la propiedad Modo fondo.

4. Seleccionar y arrastrar un componente Visor lista a la zona central de la mesa de mezclas. Podemos configurar las propiedades de este componente, pero no es necesario añadir y nombrar una opción por cada canción, ya que eso lo vamos a hacer en la sección de programación.

Es recomendable renombrar los componentes de nuestras aplicaciones para facilitar su identificación.

5. Seleccionar y arrastrar dos componentes Botón, uno encima de cada disco. Cambiar la propiedad Relleno a sin color y cambiar la imagen de fondo por la imagen de los vinilos en cada botón. Luego, redimensionar cada botón para que parezca que el vinilo ocupa todo el disco de la mesa de mezclas. 

   Tras esto, cambiar la propiedad Texto de uno por Conectar y del otro por Desconectar.

6. Añadir el componente Reproductor de música y el componente Placa Zum Core 2.0.

Programación de la app con Bitbloq App

Una vez realizado el diseño, explicamos cómo programar su funcionamiento. Pedimos que cambien a la pestaña Bloques y programen lo siguiente: 

1. Cambiar a la pestaña Variables y listas y crear una nueva variable llamada mensaje e igualarla a un bloque de texto vacío. Usaremos esta variable para almacenar el mensaje recibido por Bluetooth desde el programa en la placa Zum Core 2.0.

2. Crear una lista llamada nombres canciones, donde vamos a guardar los nombres de cada canción añadida en la sección de recursos externos. Para ello, utilizamos pulsamos sobre el bloque de la lista y sobre el símbolo + que aparece tantas veces como canciones tengamos. Luego, mediante parámetros de tipo Texto nombramos cada canción.

3. A continuación vamos a crear otra lista llamada ruta canciones con tantos elementos como la anterior, pero en vez de rellenarla con parámetros de tipo Texto, vamos a rellenarla con parámetros de recurso externo de la categoría Componentes.

   En cada uno de ellos vamos a seleccionar, dentro del desplegable, una canción, en el mismo orden que en la lista de nombres canciones.

   Esta lista va a contener la “ruta” o “dirección” de cada canción, que es la información necesaria para hacer funcionar el reproductor de música.

4. En la pestaña de Pantalla 1 programar que, al abrir la pantalla (es decir, iniciar la aplicación), las opciones del Visor lista sean las mismas que están guardadas en la lista nombres canciones.

En este momento, es interesante ver la diferencia entre las dos listas ya que si pulsamos en el botón de Prueba la app y previsualización web podemos ver el contenido de cada una en el visor de lista cambiando de lista en el desplegable de la programación anterior.

• La lista nombres canciones hace que en el visor aparezcan los nombres de las canciones tal cual los han escrito en los parámetros de tipo Texto.

• La lista ruta canciones muestra la ruta del archivo dentro del disco duro donde esté alojada, lo cual no es un dato que nos interese pero que necesita el componente Reproductor de música para ser capaz de reproducir la canción.

5. Programar que, cuando se haga clic sobre el botón Conectar, conecte la placa Zum Core 2.0.

6. De la misma manera, que cuando se pulse el botón Desconectar, desconecte la placa.

7. Programar que, cuando recibamos un mensaje de la placa Zum Core 2.0, ese mensaje se guarde en la variable creada  anteriormente.

8. A continuación del bloque anterior, programar que, si el mensaje recibido es igual a “arriba”, la posición (índice) de la lista de canciones aumente en uno. De la misma forma, programar que si el mensaje es “abajo”, disminuye en uno.

9. Para evitar que el índice se reduzca por debajo de 0 o aumente a un valor por encima de nuestro límite (que es el número de canciones totales), tenemos que programar que cuando llegue a estos valores, vuelva a un valor correcto. Para ello:

• Programar que, si el valor del índice es -1, este pase a valer 0.

• Programar que, si el valor del índice es igual al número de canciones en la lista, este pase a valer el valor máximo, que es el número de canciones menos 1.

Para entender esta sección, es necesario comprender que el valor del índice para la primera posición de la lista es 0. Por ello, si la lista tiene tres canciones, el valor máximo del índice es 2. Cuando el índice valga 3, realmente estará apuntando al cuarto elemento de la lista.

10. El siguiente paso es el encargado de decirle al reproductor de música qué canción reproducir. Para ello, igualar la propiedad Origen del componente reproductor de música al elemento de la lista de ruta canciones que tenga la misma posición (índice) que la canción seleccionada en el visor.

    De esta forma, si pulsamos en la lista de la interfaz de la app (la que nos muestra los nombres de las canciones) y seleccionamos la canción que está en 2ª posición, le diremos al reproductor que coja la ruta que está en la 2ª posición de la lista que contiene las rutas de las canciones.

11. Por último, programar que, al recibir el mensaje “reproducir”, el reproductor empiece a hacer sonar la canción. ¡Qué empiece la marcha!

Programación de la placa Zum Core 2.0 con Bitbloq Robotics.

Pedimos al alumnado que, sin cerrar Bitbloq Apps, acceda a la web de Bitbloq y seleccione la herramienta Bitbloq Robotics. Pedimos que nombren al proyecto como quieran y, a continuación, vamos explicando los siguientes pasos:

1. En la pestaña Hardware, seleccionar la placa controladora Zum Core 2.0., arrastrar los mismos componentes del Zum Kit Advanced que se han utilizado en el montaje y conectarlos a los mismos pines.

2. En la pestaña Bloques, abrir la sección Variables globales y funciones y crear dos variables llamadas pot_actual y pot_anterior, inicializando ambas con una lectura del sensor potenciómetro.Vamos a utilizar estas variables para comparar el valor del potenciómetro y así saber en qué dirección gira.

3. En la sección Bucle principal (Loop), guardar en la variable pot_actual el valor recibido por el sensor potenciómetro.

El potenciómetro es un sensor analógico que nos devuelve valores comprendidos entre 0 y 1023 en función de la posición de su eje, que puede girar.

4. A continuación, mediante un condicional, comparar el valor actual del potenciómetro con el valor anterior de este para saber en qué dirección se mueve. Además, para evitar que este condicional se active al mínimo movimiento, vamos a añadir un margen al valor del potenciómetro.

5. Programar que, si esta condición se cumple, se envíe el mensaje “arriba” por el bluetooth de la la placa. Tras esto, guardamos el valor actual del potenciómetro en la variable pot_anterior para una futura comparación. Finalmente, esperamos medio segundo para asegurarnos de que esta condición no se ejecuta demasiado rápido.

6. Repetir la lógica anterior para detectar el otro sentido de giro del potenciómetro y envíar el mensaje “abajo”. Es importante tener en cuenta el signo de comparación del condicional para programarlo correctamente.

Cuando queremos crear un programa que tenga en cuenta cambios de un sensor, es muy útil emplear dos variables para guardar el valor actual (que leemos constantemente en el bucle principal) con el valor anterior, el cual actualizamos cada vez que nos interesa (por ejemplo cuando se cumple una condición o cada cierto tiempo). 

Al tener dos variables diferentes podemos compararlas y así saber si el nuevo valor es mayor o menor que el anterior.

7. Por último, programar que, al pulsar el botón, enviemos el mensaje “reproducir” y esperemos medio segundo.

A continuación te proponemos algunas ideas de mejora para el sistema por si quieres seguir practicando:

• Añadir otro sensor a la placa y programar que el reproductor de la app pueda pausar la canción.

• Rediseñar la app para incluir un vídeo o animación de unos vinilos, de forma que giren cuando la música suena y se detengan cuando no.

Accede a los proyectos:

Haz clic en las imágenes para abrir las páginas de los proyectos en Bitbloq Apps y Bitbloq Robotics.