Un universo de extensiones con mBlock5

Julio de 2021

Un universo de

extensiones en

mBlock5

(Nivel maestría)

Susana Oubiña Falcón

UN UNIVERSO DE EXTENSIONES EN MBLOCK5

Índice

1. Introducción .......................................................................................................................... 3

2. Extensiones para objetos o sprites ....................................................................................... 6

2.1. Arte ................................................................................................................................ 6

2.1.1. Extensión Lápiz ...................................................................................................... 6

2.1.2. Extensión música ................................................................................................... 7

2.2. Inteligencia Artificial ...................................................................................................... 9

2.2.1. Extensión Texto a Voz y Traductor ........................................................................ 9

2.2.2. Servicios Cognitivos ............................................................................................. 13

2.2.3. Máquina educable ............................................................................................... 18

2.3. Datos de ciencia .......................................................................................................... 21

2.3.1. Hoja de cálculo de Google o Google Sheets ........................................................ 21

2.3.2. Gráfico de datos .................................................................................................. 33

2.3.3. Datos de clima ..................................................................................................... 45

2.4. IoT o Internet de las Cosas .......................................................................................... 47

2.4.1. Video Sensing ...................................................................................................... 48

2.4.2. Mensaje en la nube de usuario ........................................................................... 49

2.4.3. Cargar en modo difusión ..................................................................................... 50

3. Extensiones para dispositivos ............................................................................................. 64

3.1. Registrarse en “mBlock Extension Builder” ................................................................ 66

3.2. Preliminares en la creación de extensiones ................................................................ 69

4. Creando extensiones para el mundo Arduino .................................................................... 71

4.1. Entradas Pull-Up .......................................................................................................... 71

4.1.1. Importancia de una Resistencia Pull-Up ............................................................. 71

4.1.2. Creando la extensión “Entrada Pull-Up” ............................................................. 73

4.1.3. Publicar la extensión ........................................................................................... 84

4.2. Extensión Serial - Bluetooth ........................................................................................ 92

4.2.1. Importancia de la extensión Serial- Bluetooh ..................................................... 92

4.2.2. Creando la extensión Bluetooth_Serial ............................................................. 103

4.2.3. Probando la extensión: Ejemplos ...................................................................... 118

4.2.4. Publicando la extensión .................................................................................... 126

4.3. Extensión para el sensor de temperatura y humedad DHT11 y DHT12.................... 129

4.3.1. Importancia de la extensión DHT11 y DHT12 ................................................... 129

4.3.2. Creando la extensión ......................................................................................... 135

4.3.3. Probando la extensión....................................................................................... 143

SUSANA OUBIÑA FALCÓN PÁGINA 1 DE 207


4.4. Extensión tira de LEDs RGB WS2812 ......................................................................... 150

4.4.1. Importancia de la extensión tira de LEDs RGB WS2812 .................................... 150

4.4.2. Creando la extensión tira de LEDs RGB WS2812 ............................................... 153



4.5. Extensión OLED I2C 128x64 ....................................................................................... 171

4.5.1. Importancia de la extensión OLED I2C 128x64 ................................................. 171

4.5.2. Creando la extensión OLED I2C 128x64 ............................................................ 177



5. Conclusiones...................................................................................................................... 207

6. Bibliografía ........................................................................................................................ 207

Esta obra, “Un universo de extensiones en mBlock5”, creada por Susana Oubiña Falcón, está licenciada bajo una

licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.



1. Introducción

El mundo de las extensiones en mBlock siempre ha sido su punto fuerte y ha hecho que destaque

entre los diferentes softwares de programación. Este documento se ha trabajado bajo el

software mBlock5 de Makeblock y se centrará en sus extensiones.

Una extensión podemos definirla como un conjunto de bloques que han sido diseñados

específicamente para programar o controlar de forma sencilla (a través de comandos y no

picando código) determinadas acciones sobre el objeto o componentes electrónicos concretos

que se conectan a un dispositivo (robot o placa). Por lo tanto, debemos diferenciar entre

extensiones para dispositivos y extensiones para objetos y me explico:

• Si escogemos como dispositivo por ejemplo el mBot, podemos acceder a sus

extensiones haciendo clic en el botón azul de extensiones inferior derecho del

programa, representado con el signo más:

En la versión del software actual, nos encontramos con esta imagen:

Como puede verse, podemos “Añadir” cualquiera de las extensiones que se han diseñado para

el mBot, bien fuera creada por la propia casa Makeblock o por otro usuario registrado. Es decir,

nosotros podemos diseñar nuestra propia extensión. Eso es un objetivo del curso que en su



momento lo iniciaremos a través de la pestaña superior derecha “Create Extension” o entrando

directamente en mBlock Extension Builder.

• Si seleccionamos el objeto en lugar de dispositivos y hacemos clic en el botón azul de

extensiones, observamos que también podemos incluir en nuestros programas, pero

sólo para objetos, extensiones muy interesantes relativas a inteligencia artificial, IoT,

ciencia y arte:

En la imagen anterior nos encontramos con la opción de la extensión Lápiz y Música, que en la

versión mBlock3 se incluía en los bloques principales pero que, en esta versión se muestra como

una extensión a parte, ambas en el subapartado de arte:



Para incluir una extensión en nuestro programa accederemos a la pestaña extensiones y

haremos clic en Añadir y si queremos borrarla, obviamente, seleccionaremos Borrar desde el

propio centro de extensiones:

El icono con la flecha verde que se muestra en la imagen anterior nos informa que existen

actualizaciones en esa extensión por lo que, antes de Añadirla debemos actualizarla haciendo

clic en el círculo verde:

En el punto 2 de este documento se describirán las extensiones para objetos ya que algunas, en

mi opinión, son muy aprovechables. A partir del punto 3 nos centraremos en las extensiones

para dispositivos explicando cómo podemos crearlas para las placas Arduino. Obviamente, el

aprendizaje que obtengáis de este libro es extrapolable hacia la creación de extensiones para

otros dispositivos (mBot, Ranger, etc).



2. Extensiones para objetos o sprites

Veremos las que considero más interesantes de los diferentes bloques.

2.1. Arte

Sin duda, son las más conocidas. Aquí nos encontramos con las extensiones de dibujo (lápiz) y

música.

2.1.1. Extensión Lápiz

Con ella se incluyen o implementan comandos para que los objetos puedan dibujar sin dificultad

en el escenario. Como ya comenté en la introducción, es una extensión muy conocida y utilizada

en su software predecesor.

mBlock3 ya disponía de un propio bloque dentro del programa para pintar y que incluso de

llamaba “Lápiz”.

En el siguiente ejemplo se ha creado un objeto punto de color rojo y tras decidir cuantos lados

debe tener nuestro polígono y la medida de su lado, dibuja el polígono regular deseado. En la

siguiente imagen he querido dibujar un dodecágono (12 lados) regular de 60 pixeles de largo en

cada lado:



2.1.2. Extensión música

Obviamente, con ella podemos crear música e incluso simularla con diferentes instrumentos:

Los siguientes comandos permiten elegir entre múltiples instrumentos, inclusive para la

percusión:

En toda extensión de música no puede faltar la inclusión de un comando para reproducir las

notas musicales en sus diferentes tiempos (blanca, negra, corchea, etc):



También podemos incluir silencios o esperas:

De la misma forma que la extensión “Lápiz”, esta extensión también es muy conocida ya que se

incluía en los bloques iniciales de programación de mBlock3.

En la vida real, una canción gana en grandeza si hay otro músico que realice la percusión. En la

siguiente imagen se observa precisamente eso, una percusión a la vez se programa una canción

que, en nuestro ejemplo, sonará bajo la simulación de una flauta de madera:

Con la variable “Percusión” activamos o desactivamos su sonido:



2.2. Inteligencia Artificial

En esta temática nos encontramos con cuatro interesantes extensiones. Hoy en día, nuestros

teléfonos móviles (smartphone) usan la IA para personalizar y acercar el producto a los deseos

de sus propietarios. El uso de los asistentes virtuales que responden a preguntas, dan

recomendaciones y ayudan a organizar las rutinas de sus propietarios son ejemplos de IA que se

ha generalizado.

Podemos definir la IA como la capacidad que posee una máquina de presentar las mismas

habilidades que los seres humanos. Y con esto me refiero a conceptos como el razonamiento, el

aprendizaje, la creatividad, los sentimientos, etc.

2.2.1. Extensión Texto a Voz y Traductor

Estas extensiones se incluyen dentro del grupo de Inteligencia Artificial del objeto y gracias a

ellas nuestros sprites pueden hablar en diferentes idiomas e incluso traducir una frase o palabra

eligiendo el usuario como traductor una larga lista de 47 idiomas diferentes.



Estas extensiones incorporan los siguientes comandos:

Texto a Voz (Text to Speech)

Traductor (Translation)

Con ambas extensiones se pueden diseñar programas interesantes. Por ejemplo, el siguiente

script traduce de español al inglés y lo pronuncia con acento inglés:

Inclusive podemos hacer que el usuario elija con qué acento quiere que hable el programa (se

puede escoger dentro de un rango de 23), que traduzca una frase o palabra y que a su vez la

pronuncie en uno de los 47 idiomas diferentes con los que puede hablar. El programa que

ejecuta estas acciones es el siguiente:



Si ejecutamos el programa

haciendo clic en la bandera

verde, primero se nos pide que

escojamos un “acento” dentro

de los 23 disponibles en la

extensión: En la imagen se

observa que hemos escogido

el número 5 que se

corresponde con inglés. (Ver

imagen derecha).

A continuación, el script nos

pide que seleccionemos el

idioma con el que nos hablará

el objeto “Panda”. En la

imagen se observa que hemos

escogido el número 17, que se

corresponde con euskera.



Finalmente, nos traducirá a euskera la frase que hemos escrito. En el ejemplo de la imagen el

texto que traduce a euskera y lo pronuncia en euskera con acento inglés es: “Hola, me llamo

Susana”:



2.2.2. Servicios Cognitivos

Esta extensión pertenece al bloque de Inteligencia Artificial y según dice la casa Makeblock,

funciona mejor de forma online. Es decir, iniciando sesión con la cuenta en mBlock5.

La extensión nos ofrece una serie de servicios que requieren del uso de la webcam o del

micrófono de nuestro PC. Estos servicios son:

Reconocimiento de voz, reconocimiento de texto impreso, reconocimiento de texto escrito a

mano, reconocimiento de imágenes, reconocimiento de objetos comunes, reconocimiento de la

edad de la persona y reconocimiento y detección de emociones. Y me explico:

• Reconocimiento de voz: utiliza el micrófono para registrar nuestra voz y que esta se

pueda usar para dar órdenes en un programa.

• Reconocimiento de texto impreso: utiliza la webcam para reconocer palabras escritas

en un papel y tras ese reconocimiento podremos tomar decisiones sobre el desarrollo de

un programa. Eso sí, si es texto impreso éste lo reconocerá en varios idiomas pero, si es

texto escrito a mano, sólo lo reconocerá si está escrito en inglés.



• Reconocimiento de imagen: diferencia entre distintas imágenes y objetos que

coloquemos delante de la webcam.

• Reconocimiento de edad: utiliza la webcam para decirnos aproximadamente la edad de

la persona que detecta.

• Grado de felicidad: Observa nuestra cara a través de la webcam valorando entre 0 y 100

la felicidad que trasmites en ese momento. También permite diferenciar distintas

emociones como sorpresa, tristeza, ira, etc.

• Reconocimiento de género: diferencia entre género femenino y masculino.



• Detección de gafas: nos dice si llevamos gafas y de que tipo.

• Nivel de sonrisa, nos valora en una escala de 0 a 100 la sonrisa que lucimos en ese

momento.

• Distingue gestos de la cabeza relativos a diferentes ángulos de inclinación de la misma.

• Distingue el color del pelo.

• Reconoce cambios en la cara relativos a la frente, cara y ojos.



• Analiza si un texto escrito en diferentes idiomas es agradable o repulsivo.

La verdad es que es aplicable en un extenso campo de situaciones.

Reto 1: Utilizar el reconocimiento de edad de una persona.

Para ello, simplemente, creamos para un objeto de mBlock5 este pequeño script:

El resultado es el siguiente:



Reto 2: Utilizaremos el reconocimiento de voz para que el programa ejecute unas acciones

previamente programadas para cada palabra detectada.

Escenario detectando “Avanza”

Cada vez que pulse la tecla espacio mBlock dispondrá de 2 segundos donde escuchará. Si

escucha la palabra “Avanza” ejecutará el bloque diseñado para avanzar, si escucha la palabra

“Retrocede” ejecutará el bloque correspondiente para retroceder y si escucha la palabra “Salta”

ejecutará el bloque programado para saltar:



Los subprogramas para esas acciones son:

2.2.3. Máquina educable

Primero debemos comenzar creando un modelo de entrenamiento para que nuestro dispositivo

aprenda:



Decidimos el número de categorías a entrenar: (En la imagen se observa que he elegido 3)

Definimos las categorías y entrenamos el modelo introduciendo imágenes que las representen:

Sorpresa

Cansancio

Alegría

A continuación, hacemos clic en “Usar el modelo” creado. Vemos que se nos han creado nuevos

comandos relacionados con las categorías que nuestro PC ha aprendido a reconocer:



Finalmente, programamos el modelo donde se observan las tres categorías (sorpresa, cansancio

y alegría) así como, la probabilidad de que la imagen que ve la Webcam represente una de esas

categorías:

Vamos a comprobar si acierta o no:



2.3. Datos de ciencia

mBlock5 nos ofrece tres interesantes extensiones que ayudan a gestionar los datos que, por lo

general, recibiremos de los sensores.

2.3.1. Hoja de cálculo de Google o Google Sheets

Esta es una extensión que me encanta ya que le veo muchas aplicaciones. En la siguiente imagen

se observa que ya la he incluido (añadido) en mi programa:



Los comandos de la extensión son los siguientes:

Para trabajar con ella es indispensable disponer de una cuenta de correo electrónico Gmail y

entrar en nuestro Drive creando un archivo compartido en el formato de una hoja de cálculo.

Vamos a ver dos ejemplos de uso.

Reto 1: Grabar distancias con el sensor de ultrasonidos

Tras entrar en Drive hacemos clic en “Nuevo” y escogemos Hojas de cálculo de Google > Hojas

de cálculo en blanco:



Ya tenemos un archivo y, como es lógico, vamos a ponerle un nombre. Lo llamaremos

“Mediciones de ultrasonidos“ a nuestra hoja de cálculo:

El nombre del archivo lo dice todo; necesitamos un sensor de ultrasonidos y obviamente, el

sensor debe pertenecer a un dispositivo que puede ser el robot mBot o el Ranger (que ya lo

incluyen en el propio robot) o por ejemplo una placa Arduino Uno (en este caso deberíamos

montar el circuito eléctrico). Yo usaré un mBot y por lo tanto, escojo este dispositivo.

En mi caso, tras elegir el dispositivo mBot sobre mBlock5, su pequeño script que me daría las

mediciones del sensor de ultrasonidos cada 0.2s estando el sensor conectado al puerto 3 de la

placa, sería el siguiente:



Conectamos el mBot y vemos si funciona nuestro programa simple: En la siguiente imagen

observamos que por ahora todo va bien ya que va enviando la distancia a la variable “Distancia”

que podemos ver en el escenario del programa.

A continuación, pasamos a la pestaña Objetos y descargamos la extensión Google Sheets (pensar

que es una extensión pensada para objetos).

La idea es, por ejemplo, que el mBot consiga enviar a la hoja de cálculo los datos de 10

mediciones del sensor de ultrasonidos y que estas se guarden en la hoja de cálculo. Podríamos

hacer que se guardaran de forma horizontal (en filas) o vertical (en columnas). En nuestro reto

lo vamos a hacer de forma vertical (en diferentes filas dentro de una misma columna).

Para ello, en el apartado objetos de mBlock5 escribimos un pequeño script cuya función será

grabar las distancias y el orden de las medidas en nuestro archivo de la hoja de cálculo:

NOTA importante: Usaremos la columna 1 para el número de medidas y la columna 2

para el valor de las distancias.

Queremos que los datos se escriban a partir de la fila número 5, justo debajo de “Nº de

Mediciones” y de “Distancia (cm)”.



Finalmente, solo nos queda introducir en el script el enlace correcto. Ojo, no es un enlace

cualquiera, es un link compartido y editable.

Para conseguirlo primero hacemos clic en botón verde superior derecha “Compartir”:

Se nos abre la siguiente imagen y en ella escogemos la opción “Cambiar a cualquier persona con

el enlace”:



Se nos ofrecerán tres opciones y entre ellas escogemos el modo Editor (por defecto nos sale el

modo Lector):

Copiamos el enlace y lo pegamos en nuestro Script.



Tras ejecutar el programa haciendo clic en la bandera verde, podemos ver que las mediciones

de las distancias se han grabado en nuestra hoja de cálculo “Mediciones de ultrasonidos”:



Reto 2: Cuestionario

Vamos a crear un cuestionario y compartirlo con nuestro alumnado, de modo que, ellos puedan

contestar a las preguntas y que no borren los datos que otros han escrito.

Antes de nada, creamos la hoja de cálculo en Google Drive. Supongamos unas cuestiones o

campos a cubrir por el alumno/a como las que se muestran en la imagen siguiente:



Para asociar la fila en la que se guardarán los datos de cada alumno lo haremos utilizando su Nº

Clase que guardaremos en una variable “Fila” aumentada en 3 unidades. Y me explico.

Como queremos que el alumno/a con numero de clase 1 escriba en la fila 4 (ver imagen

anterior), sólo debemos sumarle 3 al número de clase y asociar esta suma a la variable “Fila”:

Tras ejecutarlo, nos encontramos con los siguientes datos grabados en nuestra hoja de cálculo

compartida y editable de Google:



A poco que pensemos, obviamente, cualquiera podría entrar en el link de la hoja de cálculo y

borrar algún dato. En la siguiente imagen, sin iniciar sesión (es decir, con sólo el link y un

navegador), he accedido a la hoja de cálculo y he borrado un dato. Pensar que no he iniciado

sesión. En fin, ¡borrar un dato no está bien!

¿Cómo solventar este problema?

Solo se puede solucionar si, justo después de que el alumno/a incluya sus respuestas, entramos

en la hoja de cálculo y cambiamos su modo “Editor” a modo “Lector”. Esta es la dura realidad.

Si nos interesa realizar un cuestionario debemos ser rápidos o pillos, implementamos el

programa en el aula y, tras recibir los datos, cambiamos el link de modo “Editor” a modo

“Lector”. Tras este cambio, ellos no podrán hacer cambios.

Aunque tengamos claro la realidad, vamos a intentar hacer creer al alumno que la cosa es “seria”

y para ello incluiremos en el programa anterior una contraseña de acceso a la hoja de cálculo.

Todos sabemos que es innecesaria porque disponen del link en modo “Editor”.

Supongamos que tenemos 10 estudiantes y cada estudiante conoce su número de estudiante y

su clave para acceder a las cuestiones planteadas en el programa.

Aunque el alumnado sabe su número de estudiante y su clave, ya que previamente se la hemos

dado, vamos a dar tres posibilidades de errores a la hora de incorporar la clave. Para ello

necesitamos que mBlock5 las vaya contabilizando. Para ello crearemos una nueva variable que

denominaremos “FallosClave” y que inicializamos a 0.



En la siguiente imagen se observa que hemos introducido el número de estudiante en el aula y

su clave de acceso:

El programa modificado con la clave sería el siguiente:

Como podemos ver en el pequeño script de la imagen anterior, ya hemos identificado la fila en

donde escribirá el alumno y, por lo tanto, sabemos qué dato relativo a la clave debe leer. Pensar

que cada alumno tiene su clave y cada alumno escribe en una fila.

El subprograma ClaveAcceso sopesa la clave del alumno. Si el alumno introduce la clave correcta,

se la cambia y accede a las preguntas que debe responder y quedan grabadas. El hecho de

cambiar la clave de acceso sólo es una “fricada” ya que el enlace muestra por ahora un archivo

editable.

En el caso de que el alumno/a introduzca mal la contraseña, el programa se lo dice y le deja

probar 3 veces. Si falla, el programa se acaba y no puede cumplimentar las cuestiones a través

de mBlock5.



Aun a costa de repetirme es importante matizar que, en el subprograma se observa que sólo se

accede al bloque de las preguntas si ingresa correctamente su clave. Clave que es leída de la

columna correspondiente en la hoja de cálculo y que, inmediatamente, se cambiará por otra de

5 dígitos. Este cambio de clave no conseguirá que el alumno no pueda hacer trampa cambiando

sus respuestas de forma directa accediendo al link de la hoja de cálculo. No olvidemos que lo

hemos compartido en modo “Editor”.

La única forma de que no haga cambios es, tan pronto se ingresen los datos, volver a acceder al

link y cambiarlo a modo “Lector”:



2.3.2. Gráfico de datos

Esta extensión la podemos encontrar dentro del bloque de gestión de datos de ciencia. Su

utilidad es graficar información. Para ello han desarrollado los comandos que se muestran en la

siguiente imagen.

Esta extensión presenta las siguientes características:

• Los datos los podemos importar a través de un

archivo de extensión .csv

• Obviamente, los datos también los podemos

introducir o recoger en tiempo real utilizando los

comandos de otras extensiones o genéricos de

mBlock como pueden ser a través de listas.

• Podemos ver los datos introducidos en forma de

tablas de datos y por supuesto, en forma de gráficos.

• Los gráficos que implementa son: gráficos de

líneas, gráficos de barras, gráficos de doble eje o

gráficos de sectores.

• En número máximo de datos que muestra son

500.

• El número máximo de grupos de datos es de 15

y cada grupo puede incluir un máximo de 300 datos.

La mejor forma de entenderlo es con ejemplos.

Reto 1: Graficar un MRU

Vamos a comenzar con un reto simple para graficar un movimiento rectilíneo y uniforme. Tras

entrar en mBlock5 y añadir la extensión a nuestro objeto, ingresemos el siguiente programa:

Inicialmente borramos los datos para

asegurarnos que la extensión sólo

gestionará los nuevos datos que le vamos

a introducir.

Definimos el nombre de la gráfica así

como, el de sus ejes (X e Y).

Elegimos el tipo de gráfica que debe crear

a partir de los datos (en este ejemplo

usamos el gráfico de líneas) y finalmente

introducimos los datos.

Tras hacer clic en la bandera verde el

programa comienza a ejecutarse y se nos

abre una ventana de gráfico de datos que

nos muestra los datos introducidos de

forma secuencial en una tabla:



Para visionar el gráfico sólo debemos hacer clic en la pestaña “Gráfico de datos”:

Aunque específicamente en el programa le hemos dicho al software que genere este tipo de

gráfico ya que es lo que mejor se ajusta a la visibilidad de estos datos, podríamos cambiarlo y

ver otro tipo de gráficos sin necesidad de comenzar de cero. Simplemente debemos escoger

otro tipo de diagrama como por ejemplo, el diagrama de barras:



Reto 2: Exportar gráfico o datos e importar datos

Una opción muy interesante es la relativa a la exportación, activa tanto para el gráfico como la

tabla de datos y se nos exportaría como un archivo png para los gráficos y un archivo .csv para

la tabla de datos.

Supongamos que ahora queremos importar unos datos que tenemos en una hoja de cálculo.

Obviamente, este archivo debemos guardarlo con la extensión .csv. En mi caso, el archivo se

llama “Prueba1”.



Para importarlos hacemos clic en el siguiente comando:

Se nos abre la siguiente ventana que nos muestra que no disponemos de datos. Vamos a

importar los datos haciendo clic en el botón Importar

Seleccionamos el archivo “Prueba1” que es en donde hemos guardado los datos:



Podemos observar que se nos han guardado y ya podemos graficarlos:



Podemos mejorarlo si creamos antes este programa y volvemos a subir el archivo Prueba1.csv:




Reto 3: Graficar a tiempo real mediciones de un sensor

Pero, lo genial de esta extensión no es la aplicación que hemos visto hasta ahora. Pensar que

podemos grabar datos a tiempo real en una hoja de cálculo, que esos datos sean recogidos por

mBlock5 y graficarlos. De ahí que esta extensión disponga del siguiente comando para refrescar

los datos y recogerlos.

Con el siguiente reto buscamos graficar 15 medidas de luminosidad de nuestro hogar. Yo voy a

usar el robot mBot pero podríamos hacer lo mismo con cualquier otro dispositivo o robot que

se conecte a mBlock5.

Después de conectar el robot comenzamos a crear nuestro programa en el apartado

dispositivos. Necesitamos crear 2 variables y una lista:

Variables

Listas



Nuestro robot realizará 15 medidas de la luminosidad del hogar. Las medidas se ingresarán en

la lista “Luminosidad” cada segundo y se enviarán a tiempo real al objeto “PandaGraficar” en el

cual hemos descargado la extensión “Gráfico de datos”:

Los programas, tanto para en el dispositivo mBot como para el Sprite “PandaGraficar” son:

Script para el dispositivo

Al accionar la bandera verde la variable “NumeroMedidas” se inicializa al valor 0 y se borran los

datos de la lista “Luminosidad” para asegurarnos que sólo graficaremos los nuevos datos que

va a grabar.

Creamos un bucle que sólo se ejecutará 15 veces y en él, tras recoger el dato e incluirlo en la

lista “Luminosidad” lo envía al objeto con el mensaje “EscribeDato”. Tras pasar 1 segundo,

vuelve a recoger un nuevo dato.

Cuando el objeto recibe el mensaje “EscribeDato” introduce en la tabla de datos a tiempo real

el valor del número de medida y de su luminosidad.



Script para el objeto

El resultado es el

siguiente:

A tiempo real se van

introduciendo las

medidas en la lista y

en la tabla de datos.



Reto 4: Graficar dos grupos de datos para un mismo eje x

En este reto introduciremos dos grupos de datos relativos a las temperaturas máxima y mínima

de Cambados en una semana de julio (en este caso son valores inventados). Los resultados de

estas mediciones son los que se muestran en la siguiente tabla de valores:



Dia de la semana Temperatura Máxima Temperatura Mínima

Lunes 22 18

Martes 25 20

Miércoles 27 22

Jueves 26 21

Viernes 25 20

Sábado 24 21

Domingo 25 22

Introducimos estos datos en mBlock5 en el apartado objetos usando la extensión “Gráfico de

Datos” y ejecutamos el programa:



Reto 5: Implementa un gráfico de doble eje

El gráfico de doble eje es un tipo de gráfico especial que se puede utilizar para mostrar varios

grupos de datos. Los datos de estos grupos de datos pueden registrarse en diferentes unidades,

pero pueden compartir el mismo eje x.

Vamos a reutilizar el ejemplo anterior y aumentarlo con un nuevo grupo de datos llamado

“Humedad” sobre el mismo eje x (días de la semana).

Dia de la semana

Temperatura

Máxima

Temperatura

Mínima

Humedad

Lunes 22 18 150

Martes 25 20 180

Miércoles 27 22 200

Jueves 26 21 150

Viernes 25 20 160

Sábado 24 21 190

Domingo 25 22 186

Añadimos al programa anterior el siguiente código:

Y como resultado obtenemos el gráfico deseado de dos ejes:



2.3.3. Datos de clima

Esta extensión nos ofrece un conjunto de bloques que nos permitirá conocer e incluir en nuestra

programación la temperatura tanto máxima como mínima, humedad, la hora de salida y puesta

del sol en una ciudad y también la calidad del aire. Este último parámetro depende de unas

ubicaciones preestablecidas.

La extensión es muy fácil de usar. Presenta los siguientes comandos:

Vamos a usarla para conocer estos datos climáticos en Cambados. Un posible escenario sería el

siguiente:



Haciendo clic en los dos objetos Sol, los dos Botones de Temperatura y nubes obtenemos los

datos programados para Cambados.

Para programar a qué hora y minuto se pone el sol en “Cambados” creo el siguiente programa

en el objeto “SolPoniendose”. De la mima forma se programaría el objeto “SolSaliendo”:

Tras hacer clic en los objetos Sol se nos mostraría la hora y minuto:

Para programar la humedad uso el objeto nubes y en é escribo el siguiente programa:



Finalmente, programamos ambos botones para la temperatura máxima y mínima. Uno de sus

scripts es el siguiente:

Cuyo resultado es:

2.4. IoT o Internet de las Cosas

Cuando hablamos de Internet de las Cosas pensamos en un mundo interconectado, un mundo

en donde los sensores perciben y están conectados entre si intercambiando datos a través de la

internet. Nos centraremos en las tres primeras extensiones que observamos en la siguiente

imagen:



2.4.1. Video Sensing

Video Sensing pertenece al grupo de extensiones clasificadas en el campo de IoT o Internet de

las Cosas. Esta extensión nos permite interactuar con un objeto basándonos en el movimiento

que in situ detecta la webcam.

Los comandos de la extensión son los siguientes:

El primer comando permite que el sprite comience a ejecutar una acción cuando la cámara web

detecte un movimiento que supere un valor numérico (por defecto el valor es 10, pero

obviamente podemos cambiarlo).

Con el comando Vídeo movimiento/dirección sobre el objeto/escenario podemos decidir si el

movimiento es en el escenario o en nuestro personaje.

Con el bloque Cambiar vídeo podemos encender o apagar la cámara web e inclusive invertir la

imagen.



En el siguiente ejemplo, si nos fijamos en el escenario, allí se observa que estoy moviendo la

mano. Como he fijado la detección a un valor bajo (el 10 de defecto), se ejecutará la acción de

“saltar”.

En la imagen siguiente la transparencia del vídeo está a 50 (que es su valor por defecto).

Si no quisiéramos que en el escenario se viera la imagen que detecta la webcam sólo deberíamos

poner la transparencia a 100. Obviamente, la webcam seguiría detectando el movimiento.

2.4.2. Mensaje en la nube de usuario

Con esta extensión podemos intercambiar datos entre dispositivos usando la nube de mBlock5.

En la versión de mBlock5 online podemos guardar nuestros programas en su nube. Para ello

debemos registrarnos y se nos pedirá un email y que formalicemos una contraseña.

Podemos generar datos y enviarlos a la nube de mBlock y, cuando los solicitemos mBlock nos

devuelve esos datos.

Al probar esta extensión veo que solamente funciona con el dispositivo Halocode (que es la placa

IoT de Makeblock ) y por ese motivo no se explica en este tutorial.



2.4.3. Cargar en modo difusión

Esta extensión se creó para que un sprite interactúe con un dispositivo en modo carga. En

mBlock5 los comandos de los sprites son independientes de los comandos de los dispositivos.

Esta extensión es muy importante ya que tras cargar el programa en el dispositivo (placa

Arduino, mBot, Ranger, etc) éste se comunicará con nuestro PC enviándole mensajes que, por

supuesto, pueden incluir información de sensores. Veremos que la extensión “cargar en modo

difusión” necesita de otra destinada a dispositivos llamada “Mensajes entre dispositivos” y que

ambas se complementan:

Extensión de Sprites u objetos

Extensión de dispositivos



Comandos de la extensión “Cargar en modo

difusión”

Comandos de la extensión “Mensajes entre

dispositivos”

La mejor forma de entender estas extensiones es utilizándolas. Vamos a verlas con unos

ejemplos.

• Reto 1: Encender y apagar el led interno de la placa Arduino Uno usando como accionador

el teclado de un PC.

Abrimos un nuevo programa con mBlock5. Explicaremos de forma independiente los objetos,

los dispositivos y los fondos.

Objetos: Eliminamos el objeto “Panda” e incluimos el objeto “bulb” que yo he renombrado como

“Bombilla”:



Este objeto se compone de dos disfraces que también he renombrado como “bulb on” y “buld

off” y a mayores he añadido otro disfraz del bloque Fantasía.

Pantalla del disfraz añadido

En ese objeto cargamos la extensión “Cargar en modo difusión”.

Dispositivos: Escogemos como dispositivo la placa Arduino Uno y en ella cargamos la extensión

“Mensajes entre dispositivos”. Debemos fijarnos que siempre ha de estar en modo “carga”.



El Dispositivo ha

de estar en modo

“Carga” y no en

modo “En vivo”

Fondos: Se compone de tres fondos que son “Inicio” (para el principio del programa) y los dos

fondos que se intercambiarán cuando encendamos o apaguemos el LED con el teclado y que los

llamo “Luz_Encendida” y “Luz_Apagada”:

Comenzamos la programación por el objeto “Bombilla”:

Al hacer clic en la bandera verde debe salirnos el mago para contarnos cómo podemos

interactuar con el programa.

Si pulsamos la letra “e” se debe encender el LED y por ese motivo se envía el mensaje en carga

“Encender_Led”, pero si pulsamos la tecla “a” se debe apagar y esto se consigue enviando el

mensaje en carga “Apagar_Led”.

Todo envío presupone una recepción de alguien. En nuestro caso, la placa Arduino Uno.



Programación del objeto Bombilla

El dispositivo Arduino Uno recibirá los mensajes y procederá a encender y apagar su LED interno:

Programación del dispositivo Arduino Uno



Conectamos la placa Arduino Uno a mBlock5 y subimos el programa:

Tras hacer clic en la bandera verde comienza a interactuar el “mago”:

Tras pulsar la letra “e” del teclado se enciende el LED interno de la placa Arduino Uno y en el

escenario de mBlock5 observamos que el fondo ha cambiado al igual que el disfraz del objeto

“Bombilla”. Se simula el encendido:



Tras pulsar la letra “a” observamos que el LED interno se apaga y el escenario y disfraz de la

“Bombilla” simula la oscuridad:



• Reto 2: Usaremos como dispositivo el Ranger ya que todos/as lo tenemos en el taller. Vamos

a enviar al PC los valores de diferentes sensores (ultrasonidos, sensor de luz y temperatura

ambiente).

Dispositivo: Comenzamos creando las variables necesarias para asociarlas con su

correspondiente sensor y así enviar mensajes con estos valores. En nuestro ejemplo serán

“Distancia”, “Luz” y “Temperatura”. Cargamos la extensión “Mensajes entre dispositivos”.

Fijamos los valores de las variables con los sensores correspondientes dentro de un bucle “para

siempre''. Finalmente, enviamos los mensajes con estos valores:

Programa para el dispositivo Ranger

Debemos tener claro que, con el programa anterior el Ranger está continuamente enviando

mensajes y no podrá nunca recibir. Si quisiéramos que también lo hiciera, debemos modificar el

programa de robot Ranger y, obviamente, el del objeto. Lo veremos en el ejemplo 3.

Objeto: He diseñado un objeto que llamo “Recepción” y en él creamos y situamos 3 nuevas

variables para recibir las mediciones y que llamo “DistanciaRecibida”, “LuzRecibida” y

“TemperaturaRecibida”. También escondemos las variables que hemos creado para el

dispositivo:



Recordar que al haciendo clic en la variable con el botón

derecho del ratón, podemos convertir las variables en

otros formatos. Usaremos el tamaño grande para el

objeto “Recepción”:

El resultado del montaje en el objeto es el siguiente:



Relativo al programa del objeto sólo debemos dar valor a las variables de recepción. Lo hacemos

con el siguiente programa:

Fondo: Lo cubrimos con un recuadro azul.

Programa para el objeto Recepción

Sólo queda probarlo: Conectamos el Ranger y subimos el programa. Tras hacer clic en la

“Bandera verde” comenzamos a recibir los datos:



• Reto 3: Vamos a aprovechar el programa anterior y modificarlo de modo que el Ranger no

sólo envíe datos, sino que también los reciba. La idea es que, además de enviar los datos de

los tres sensores del ejemplo 2, reciba la orden de poner los leds de la corona de leds en un

color determinado.

Dispositivo: Modificamos el programa anterior del Ranger para que pueda enviar y recibir.

Hemos sacado el comando “Por siempre” en el envío porque si siempre está enviando, no podrá

recibir. En su lugar hemos usado el comando “al recibir mesaje sensores” que, obviamente,

alguien debe enviarlo y en nuestro caso serán los objetos.

Programa para el dispositivo Ranger

Objetos: Modificamos el programa del objeto “Recepción” e incluimos un nuevo objeto (un

simple botón que disponga de varios disfraces) para interactuar con los leds de la corona de leds

RGB.

Introducimos el objeto que mBlock llama “Confirm button 1”. Cambiamos su tamaño al 50% y

renombramos los disfraces a “Amarillo”, “Rojo” y “Azul”.



Este objeto comenzará con el disfraz amarillo y enviará aleatoriamente los mensajes de color

“rojo” y “azul” cuando el usuario haga clic con el ratón en el objeto: (estos mensajes los recibirá

el dispositivo que actuará iluminando durante 1 segundo los leds de la corona de LEDs RGB en

ese color que se envía):



Programa para el objeto botón

El control de las mediciones lo realiza el objeto “Recepción”. Este objeto se encarga de decirle

al Ranger que testee sus sensores cada 0.5 segundos. Por lo tanto, el Ranger cuando no envía

los datos de sus sensores, puede recibir órdenes. En nuestro caso, las relativas a los LEDs RGB.

Cuando el Ranger reciba el mensaje “sensores” envía los datos en los mensajes “distancia”,

“temperatura” y “luz”. Estos datos los recibe el objeto “Recepción” gracias a la extensión

“Cargar en modo difusión”:



Programa del objeto Recepción



3. Extensiones para dispositivos

En mBlock5 disponemos de extensiones para una amplia gama de dispositivos, que van desde

los propios de la casa Makeblock hasta otros de diferentes casas comerciales como Lego e

incluso dispositivos de desarrollo libre como pueden ser las placas Arduino.



Lo más interesante del tema “creación de extensiones” es que cualquiera puede diseñar una

extensión para que un componente electrónico pueda usarse con código de bloques en un

dispositivo o placa electrónica concreta. Eso si, debemos registrarnos en “mBlock Extension

Builder”: https://ext.mblock.cc/

Por defecto nos saldrá en chino, pero podemos escoger la opción del idioma inglés:

Utilizaremos el navegador Google Chrome por dos motivos:

porque así nos lo aconseja Makeblock en relación a la

compatibilidad y actualizaciones y el segundo motivo es

porque de vez en cuando, por comodidad, nos interesará

traducir el contenido de la página al español.



Si escogemos como dispositivo la placa Arduino Uno y hacemos clic en el bloque de extensiones:

Nos encontramos con un largo listado de creaciones. Antes de crear una extensión es

importante comprobar si ya ha sido creada y si nos funciona.

3.1. Registrarse en “mBlock Extension Builder”

Tras acceder a https://ext.mblock.cc y escoger como idioma el inglés, veremos la opción “Not

have an account? Sign up now”:



Clicamos en la opción del recuadro rojo de la imagen anterior. Nos pedirá que ingresemos un

correo electrónico para acceder a la cuenta que vamos a crear en “mBlock Extension Builder”:

Simplemente, lo cubrimos y hacemos clic en “Next”:

A continuación nos preguntará si somos o no mayores de 16 años. En mi caso, obviamente, hago

clic en “Yes”:



Nos saldrá la típica pantalla de privacidad y que debemos aceptar en la pestaña “Agree and sign

up”:

Finalmente, introduciremos nuestra contraseña para este entorno web y haremos clic en “OK”:



Como siempre, debemos entrar en el correo que hemos usado y confirmar la cuenta que hemos

creado. Y ya con eso y a partir de ahora, estamos en disposición de entrar en “mBlock Extension

Builder” con ese correo y contraseña.

3.2. Preliminares en la creación de extensiones

Cuando entramos en mBlock5 observamos que existen comandos de diferentes formas y

colores. Cada uno de ellos se incluye dentro de un bloque concreto representado por un color y

donde su apariencia es significativa. Es decir, los bloques que crean eventos poseen diferente

forma que los bloques que manipulan variables numéricas o condicionales, etc.

Dentro de “mBlock Extension Builder” podemos construir estos diferentes bloques. En el

programa se denominan categorías y son las siguientes:



Tipos de bloques o categorías que podemos crear:

Gráfico Categoría Descripción

Comand

Tipo de bloques que conectamos debajo de

otros y contienen instrucciones concretas.

String

Genera una variable de tipo texto (puede

contener números)

Number

Genera una variable de tipo numérico

Boolean

Bloque booleano (solo tiene 2 valores que

son verdadero o falso).

Event

Bloque de eventos

Conditional

Bloque condicional

Button

Botones

Por otro lado, el tipo de datos que podemos usar en los diferentes bloques que creemos en muy

amplio. En las siguientes imágenes se muestran las opciones, pero pensar que de ellas nosotros

necesitaremos usar un pequeño subgrupo.



4. Creando extensiones para el mundo Arduino

4.1. Entradas Pull-Up

4.1.1. Importancia de una Resistencia Pull-Up

Vamos a comenzar con algo sencillo y al mismo tiempo útil. En Arduino podemos configurar los

pines de la placa como entradas, como salidas y como entradas pull up. Son muchos los circuitos

en los que necesitamos introducir un pulsador y sabemos que estos deben implementarse

sumándole una R que puede estar en configuración Pull-Up o Pull-Down.

Esta resistencia en la configuración de Pull-Up (o Pull-Down) es un elemento que evita un

cortocircuito que ocurriría al ser presionado un pulsador o interruptor conectando la parte en

la que tenemos tensión directamente a masa. Como la impedancia de un pin de entrada digital

de las placas Arduino suele ser de 1MΩ y la norma dice que usemos una resistencia 10 veces

menor, usamos una R =10KΩ que nos proporcionará un consumo despreciable y a la vez una

corriente suficiente (0,5mA) para que reaccione el chip de la placa (supone una potencia de

2,5mW).

Un pulsador implementado en una configuración Pull-Up, funciona de la siguiente forma: (ver

siguiente imagen)

• Si no pulsamos el pulsador, en el pin de entrada de la placa Arduino tendríamos 5V, es

decir, un 1 lógico.

• Si pulsamos el pulsador, en el pin de entrada de la placa Arduino tendríamos 0V, es decir,

un 0 lógico.

Pero, lo más importante de todo esto radica en que, el microcontrolador ATmega de las placas

Arduino tienen acopladas internamente unas resistencias Pull-Up y estas se pueden usar. Para

ello hay que decirle a nuestro microcontrolador a través del software que la entrada en un pin



determinado de la placa es una entrada INPUT_PULLUP. En la siguiente imagen se está utilizando

una R interna del microcontrolador en configuración Pull-Up.

En el setup introduciríamos:

pinMode(2, INPUT_PULLUP);

Y en el loop, en algún momento,

debería leer el valor:

digitalRead(2)

Si nos fijamos en mBlock5, no disponemos de un comando específico para estas entradas pullup.

Por lo tanto, tenemos dos opciones:

1. Implementar la R pull-up en nuestro circuito (usando una R de 10KΩ) y usar los

comandos para una entrada normal: por ejemplo, el siguiente programa

enecendería el led 13 de la placa arduino uno cuando presionemos un pulsador

conectado a una entrada pin 2.

2. O diseñar nuestra propia extensión para configurar este tipo de entradas. Y esto

es lo que vamos a comenzar a crear en el siguiente punto de este tutorial.



4.1.2. Creando la extensión “Entrada Pull-Up”

Entramos en mBlock Extension Builder: Cubrimos nuestro email y password (ya antes creamos

una cuenta en esta web) y hacemos clic en el botón azul “Sign in”:

En fin, ya estamos dentro. En el lateral izquierdo, en My Plugin, accedemos a My Extensión. Por

ahora no se muestran extensiones en vuestro espacio. Para crear una extensión hacemos clic en

el botón azul “Add extension”:

Nos aparecerá una pantalla en la

que debemos escoger si

queremos una plantilla para

Arduino u otra universal.

Escogemos la plantilla de

Arduino ya que vamos a crear

una extensión para esas placas:



Nos pide que introduzcamos un nombre para nuestra extensión. Yo la llamaré “Entrada

PULL_UP” (No debe superar 20 caracteres):

Finalmente, se nos abre la pantalla donde trabajaremos la extensión: La configuración de los

bloques en el apartado “Basic configuration”:

Nuestra idea es crear un único bloque o comando de la categoría boleana, y por lo tanto, así lo

escogemos:



Pero, obviamente, no queremos que nuestro comando muestre el texto “preview block”. Esto

lo solucionamos en la parte “Content”. En ese recuadro escribimos lo que queremos que

contenga el bloque. Yo escribiré:

Lectura INPUT PULL_UP en pin digital (Espacio y @ para que se me desplieguen unas opciones

de tipos de variables) y ahora podré escoger el parámatro Number:

Tendremos algo como esto:



Ahora debemos definir el parámetro “Number”, que para nosotros en esta extensión será un

pin digital. Le llamo, por ejemplo, pin y le doy el valor por defecto de 1:

IMPORTANTE: Guardamos lo que hemos hecho haciendo clic en “Save” (la aplicación no tiene

un guardado automático y debemos tenerlo muy en cuenta):

Ya podemos ver el bloque en la lista:



Sólo nos falta introducir el código para que ese comando haga bien su función. Introduciremos

dos líneas de código: una en el setup y otra en code:

Comenzamos pinchamos en la zona negra del setup y se nos abre una pantalla:

Y aquí introducimos el código arduino relativo a ese pin digital. Recordad que lo hemos llamado

“pin” y para que se de cuenta que es una variable debemos introducirla siempre entre barras

con asteriscos y llaves. Es decir:

/*{nuestra_variable}*/

Y guardamos con OK:



Nos falta introducir una línea de código en el apartado “code”. Pinchamos en el recuadro negro

de code y tras abrirse una pestaña introdimos el código de lectura. Fijaros que, otra vez, la

variabe va entre barras, asteriscos y llaves y que nuestra variable se llama pin:

/*{nuestra_variable}*/

Guardamos el código introducido (OK):



Y por último, hecemos clic en “Save”:

Nuestra extensión, como se compone solamente de este comando, ya está creada:



El siguiente paso sería probarla. Primero la descargamos haciendo clic en “Download” (en la

parte superior derecha)

Primero se monta el paquete y si todo está bien nos aparece la opción “Download now” y

haciendo clic en esa opción veremos nuestro archivo en la carpeta Descargas:

Es un archivo del tipo “mblock extension”, es decir, .mext:



Para probarla, simplemente abrimos el mBlock5 y arrastramos la extensión a la zona de código:

Veremos que nos introduce un bloque nuevo que se llama “Entrada PULL_UP”:



Y en la opción Dispositivos se nos añaden todas las placas para las cuales hemos creado esta

extensión:

Vamos a quedarnos con el dispositivo Arduino Uno (borramos los demás) y la probaremos con

este simple ejemplo:

Fijaros en el código Arduino de la derecha al que accedemos haciendo clic en el icono



Cargamos el programa (pensar que éste sólo se guardará en la placa si no hay errores en el

código):

Lo comprobamos con nuestro circuito. En las siguientes imágenes observamos que funciona

correctamente:



Pulsador presionado

Pulsador no presionado

4.1.3. Publicar la extensión

En los ordenadores de los centros educativos gallegos se utiliza Linux con la distribución Debian.

El software mBlock5 no está disponible para Linux de forma offline pero si de forma online y ya

es operativo en la maqueta de la Xunta de Galicia. Por lo tanto, en los centros educativos gallegos

solo tenemos la opción de trabajar de forma online con el programa mBlock5.

Si ahora, después de crear la extensión, la buscamos con el mBlock5 offline, veremos que existe

y que podemos usarla: (esto sólo podemos hacerlo en Windows y MAC)

Tras hacer clic en

“Añadir”

dispondríamos de la

extensión



Pero si hacemos lo mismo en el mBlock5 online, observamos que no la encuentra:

Y aunque intentemos arrastrarla, nos va a dar error al cargarla:



La solución a este problema consiste en publicar la extensión. Pero antes de hacerlo vamos a

formalizar algo más la extensión accediendo a la pestaña “Advanced contiguration”:



Le damos una ID, Versión, Nombre y Descripción. También es aconsejable introducir una URL en

donde se explique cómo se puede usar la extensión y esto se haría en el apartado Plugin

Homepage:

Si bajamos la pantalla con la rueda del ratón vemos que podemos añadir una imagen para

identificar la extensión, y bajando más seleccionamos la plataforma donde se usará (mBlock

offline o de Pc o su versión online) y lo más importante, para qué dispositivo (o dispositivos) va

destinado esta extensión (Arduino Uno, Arduino Mega, Arduino Nano, mCore (mBot), Auriga

(Ranger), etc).

Aunque no es obligatorio, siempre me gusta documentar el uso de las extensiones que creo. Es

más, para mi es importante. En esta imagen vemos que he introducido un link en el apartado

“Plugin Homepage” en el que cualquier usuario puede leer y ver algún ejemplo de uso de esta

simple extensión.



Tras formalizar la extensión ya podemos publicarla:

Para ello accedemos a Publish Service > Extension Management:

Hacemos clic en “Publish new extensión”:

Y nos encontramos con la siguiente pantalla:



Si nos fijamos, anteriormente le habíamos dado la ID “Entrada PULL_UP”:

Escribimos “Entrada PULL_UP”” y cubrimos el recuadro negro relativo a detalles de la versión.

Finalmente hacemos clic en el recuadro azul “OK”:



El programa nos indica que esperemos unos minutos:

Y vemos que nuestra extensión está en revisión (“In review”): La casa Makeblock la testeará

antes de publicarla.



Si todo va bien, ¿cuánto tardan en publicarla? Depende, no hay un tiempo fijo estipulado.

¿Qué hago yo para acelerar el proceso?

Escribir un correo a support@makeblocksupport.zendesk.com

En él me presento, con nombre completo, le explico que soy docente y que en mi centro

educativo utilizamos Linux como sistema operativo. De ahí la importancia de que publique la

extensión ya que es la única forma de acceder a ella.

Contestan rápido y tras testearla, en pocos días está publicada.



4.2. Extensión Serial - Bluetooth

Esta segunda extensión ya es más compleja y se compone de varios comandos.

4.2.1. Importancia de la extensión Serial- Bluetooh

Con mBlock no podemos realizar una comunicación serie con la placa Arduino desde el propio

programa e inmediatamente ver la recepción o el envío de datos de la placa al PC por monitor

serie (pensar que mBlock no dispone de monitor serie). Pero, curiosamente, incluye un bloque

que denomina “Puerto serie” y con él podemos establecer una recepción de datos entre la placa

Arduino y el PC. Eso si, para ver qué datos se reciben debemos seguir los siguientes pasos:

1. Cargar el programa desde mBlock5

2. Desconectar la placa en el mBlock5

3. Abrir el IDE de Arduino y conectarla allí al puerto correspondiente y, tras abrir el monitor

serie, escoger la velocidad de transmisión de 115200:

Para ilustrarlo vamos a hacerlo con dos ejemplos:

Reto 1: Usaremos un potenciómetro de 10K con un LED RGB de Cátodo Común y observaremos

en el monitor serie los valores que va tomando el potenciómetro y el color que va mostrando el

LED RGB en ese momento.

Un posible circuito sería el siguiente: En mi caso, como utilizo un LED RGB de cátodo común de

10mm puedo omitir las resistencias de protección.

En la siguiente imagen se observa que hemos conectado las patillas R, G y B a los pines PWM 9,

10 y 11 respectivamente y la patilla de control del potenciómetro al pin A0.



El pin A0 nos proporcionará valores de 0 a 1023. Repartimos estas opciones en tres grupos de

modo que:

• Si el potenciómetro nos ofrece valores entre 0 y 340 se iluminará la patilla roja del LED

RGB.

• Si el potenciómetro nos ofrece valores entre 341 y 681 se iluminará la patilla verde del

LED RGB.

• Y, si el potenciómetro nos ofrece valores mayores que 682 se iluminará la patilla azul

del LED RGB.

Los componentes que utilizo son los siguientes:

Potenciómetro de 10K

LED RGB Cátodo Común de 10mm

Un posible programa de control en mBlock5 podría ser el siguiente:



Tras cargarlo en la placa Arduino Uno, desconectamos la misma de mBlock5:



Abrimos el IDE de Arduino, conectamos la placa Arduino a él y abrimos el Monitor serial a una

velocidad de 115200 (ver el código en la imagen anterior). El monitor de puerto serie es una

pequeña utilidad integrada dentro de IDE Standard que nos permite enviar y recibir fácilmente

información a través del puerto serie. En este ejemplo, recibiremos datos.

Si el potenciómetro nos ofrece valores entre 0 y 340 se iluminará la patilla roja del LED RGB y en

el monitor serie se mostrará:

Si el potenciómetro nos ofrece valores entre 341 y 681 se iluminará la patilla verde del LED RGB

y en el monitor serie se mostrará:



Si el potenciómetro nos ofrece valores mayores que 682 se iluminará la patilla azul del LED RGB

y el monitor serie nos mostrará.

Reto 2: Vamos a utilizar el Puerto Serie para conseguir la curva de carga y descarga de un

condensador. Es una práctica que hago con el alumnado todos los años y les ayuda a entender

el funcionamiento de este componente.

Para ver la carga y descarga de un condensador, comenzamos con el montaje eléctrico del

circuito RC que se muestra en la siguiente imagen:

Obviamente, podríamos usar otros valores para R y C.



Las entradas analógicas de Arduino representan 1024 valores (de 0 a 1023), de modo que: si le

entran 0V nos dará el valor 0 y se le entran 5V no devolverá el valor 1023. Obviamente, entre 0

y 5V nos dará una medida proporcional.

El programa que nos dará una medida analógica en A0 para la cargar y descarga de un

condensador en el siguiente:

Cargamos el programa en la placa Arduino. Desconectamos la placa de mBlock5, abrimos el IDE

de Arduino, conectamos la placa a su puerto COM correspondiente y abrimos el Monitor Serie

a 115200 baudios.

Tras esperar el tiempo de descarga inicial del condensador, comenzaremos a recibir los datos

de la carga y la descarga:



Esos datos del monitor serie los copiamos y los pegamos en una hoja de cálculo: En la siguiente

imagen pueden verse en la columna B (Pin Analógico) de una hoja de cálculo de Drive:



En esa hoja de cálculo programamos el Tiempo y el Voltaje de salida (a partir de la señal de

salida del pin analógico):

• Tiempo:

• Voltaje del condensador:

Ahora sólo nos queda graficar T en el eje X y V en el eje Y: Para ello sellecionamos las columnas

Tiempo y Voltaje y acccedemos a la pestaña Insertar>Gráfico



En el Editor de Gráficos: Tipo de gráfico, escojemos Voltaje frente a Tiempo




Sólo nos resta dejar nuestra gráfica bonita usando la pestaña personalizar del editor. Un ejemplo

sería:

Podríamos incluso cambiar el condensador por otro y añadir la nueva gráfica a la anterior. Y de

esta forma compararíamos la carga y descarga de cada condensador.

Tras estos dos retos, nos queda claro que, los puertos serie son la forma principal de comunicar

una placa Arduino con un ordenador. Un puerto serie envía la información mediante una

secuencia de bits y para ello necesita de, al menos, dos conectores para realizar la comunicación

de datos que son, RX para la recepción y TX para la transmisión.

Es importante saber que cada puerto serie está físicamente unido a unos determinados

pines de la placa Arduino y, por esa razón, mientras usamos los puertos de serie no podemos

usar como entradas o salidas digitales los pines asociados con el puerto serie en uso. Pensar que,



por ejemplo, la placa Arduino Uno dispone de un único puerto serie, pero hay otras placas que

presentan más que uno como la Arduino Mega.

Pero a veces nos interesa crear una comunicación serie en otros puertos (en otros pines de la

placa), o incluso una comunicación Bluetooth. La tecnología bluetooth no es una tecnología

antigua y es uno de los mejores medios para comunicarnos de forma inalámbrica con Arduino.

Los dos módulos más comunes para ello son el HC-05 y el HC-06. La diferencia entre ambos

módulos reside en el tipo de comunicaciones que permiten hacer: HC-06 sólo puede recibir (es

lo que se denomina un esclavo o slave) mientras que el HC-05 puede recibirlas e iniciarlas

(master and server). Por lo tanto, el módulo HC-05 es superior en características técnicas al HC-

06.

La comunicación Bluetooth es similar al uso del puerto serie normal; requiere el uso de un

puerto serie de nuestra placa Arduino. Por lo tanto, mientras usemos el módulo Bluetooth no

podremos utilizar el puerto serie en las placas modelo Uno, Mini, y Nano. La placa Arduino Mega

no tiene este problema ya que incorpora 4 puertos de serie.

Además, mientras estemos cargando un nuevo programa en la placa Arduino tenemos que

desconectar el módulo Bluetooth dado que la programación se realiza a través de su único

puerto serie.

Módulos Bluetooth HC-05 y HC-06. Estos módulos trabajan a 3,3V

Antes de comenzar a crear la extensión debemos entender diferentes códigos que se

encuentran por la red relativos al puerto serial y al módulo bluetooth.

Serial y BT:

//Inicializamos puerto serie y bluetooth

Puerto Serie:

Serial.begin(9600);

Bluetooth:

BT.begin(9600); //Mi módulo bluetooth lo he llamdo BT

//Librerías para conectar un módulo Bluetooth

#include <SoftwareSerial.h> //Librería que permite establecer comunicación

serie en otros pines



SoftwareSerial BT(10,11); //10 RX, 11 TX. //Aquí conectamos los pines RXD,TDX

del módulo Bluetooth que hemos llamado BT.

// Mostrar la información recibida en el monitor serie.

Serial.write(BT.read()); //Mi módulo bluetooth se llama BT

// Enviar: Comprobar si hay algún dato en el monitor serie para ser enviado al módulo

Bluetooth

if (Serial.available())

{

// Enviar la información por Bluetooth

BT.write(Serial.read());

}

//Imprimimos el valor de una cadena en el Monitor serie:

Serial.print(Cadena);

//Imprimimos el valor de una variable con retorno de carro en el monitor serie:

Serial.println(variable);

//Guarda los datos carácter a carácter en la variable “dato”

char dato=BT.read();

//Cuando haya datos disponibles

if(BT.available())

{

char dato=BT.read(); //Guarda los datos carácter a carácter en la variable “dato”

cadena[i++]=dato; //Vamos colocando cada carácter recibido en el array “cadena”

//Cuando reciba una nueva línea (al pulsar enter en la app) entra en la función

if(dato==’\n’)

{

Y ya con esto, aunque en principio no se entienda, vamos más que servidos para comenzar a

crear la extensión del control Bluetooth y del puerto Serial.

4.2.2. Creando la extensión Bluetooth_Serial

Entramos en mBlock Extension Builder y creamos una nueva extensión que llamaremos

“Bluetooth_Serial”. La editamos para darle un color naranjo (Guardamos los cambios):



• El primer bloque que vamos a crear nos servirá para iniciar la comunicación serie en los

pines que usa por defecto (Rx= 0 y Tx=1) y a una velocidad en baudios de 9600.

Será un bloque de la

categoría “Command” y

usaremos una variable que

llamamos “baudios” y que

mostraremos en un

desplegable “Dropdown”:

Describimos las opciones

que queremos que estén

disponibles en el

desplegable para la

variable e incluso elegimos

un valor predeterminado

para ella:



Recuerda que a la izquierda ponemos lo

que vemos en el bloque y a la derecha el

texto que se añade a la programación en

Arduino C.

Ahora sólo queda lo más importante: Escribir su código. Debemos hacerlo en el Setup:

Ojo, debemos acordarnos de grabar todo ya que “mBlock Extension Builder”, por él mismo, no

guarda lo que estamos creando.

• A veces nos interesa crear una comunicación serie en otros puertos o incluso una

comunicación Bluetooth en pines diferentes a los establecidos (Rx y Tx) en la placa



Arduino Uno. Para ello vamos a crear un segundo comando de inicialización que

dependerá de dos variables numéricas (rx y rt) y de la velocidad de comunicación en

baudios que escojamos:

Relativo al código y tras ver otros programas de Arduino para programar módulos bluetooth,

vemos que debemos introducir la librería serial y definir las conexiones de nuestro elemento

bluetooth y que llamaremos BT:



Finalmente, introducimos el código de inicialización de nuestro BT en el setup:

• Necesitamos conocer si nuestro puerto (Serial o BT) estará disponible para recibir datos.

Para ello creamos un nuevo comando en la categoría “Boolean” (boleana):



Su programación la introducimos en el apartado “code”:

• Nuestro siguiente comando nos servirá para escribir una cadena (un string):

Utilizaremos un desplegable (Dropdown) para una variable “puerto” y así poder

seleccionar si queremos hacerlo usando el Serial o en el BT. Relativo al String, lo

llamaremos “dato” y quedará vacío:



Recuerda que a la izquierda ponemos lo

que vemos en el bloque y a la derecha el

texto que se añade a la programación en

Arduino C.

Han de ser, necesariamente:

Serial y BT

Queremos conseguir:

Serial.write(dato);

Y

BT.write(dato);

NOTA: Ver siguiente código de la red



• El siguiente comando nos servirá para imprimir en el Monitor Serie un dato que

prioritariamente sea un número:



Su código lo introduciremos en el apartado “code”:

• A veces nos interesa que lo que se imprima en el Monitor Serie finalice con un salto de

línea. Vamos a crear ese comando.



Su código lo introducimos en el apartado “code”:

• Necesitamos un comando para que lea los datos que se reciba tanto del Puerto Serial

como de BT. Pertenecerá a la categoría “String” o cadena.



Su programación se introduce en el apartado “code”:

• Necesitamos un bloque para comparar la recepción de datos. Será del tipo boleano y

usaremos la variable “puerto” para escoger entre el Puerto Serie o Bluetooth y la

variable “dato” para comparar las cadenas:



En relación al código, lo introducimos en el apartado “code”:

• A veces nos interesa que vaya leyendo letras y que las almacene. Es muy cómodo al

crear aplicaciones con App Inventor.



Para ello vamos a declarar una variable “letra”:

• Completamos al comando anterior para darle más funcionalidad.



Vamos a darle todas estas opciones:



• El último comando que creamos puede ser útil si usamos el módulo BT para enlazarlo

con el móvil tras crear una APP. Cuando reciba una nueva línea (al pulsar enter en la

app) entra en la función if(dato==’\n’) que no es más que un dato vacío para que sepa

que no estamos pulsando ese botón. En vez de Enter vamos a llamarlo Play:

Su parámetro puede ser letra o dato:



Referente al código, queremos que ambas opciones ingresen el valor ‘\n’:

4.2.3. Probando la extensión: Ejemplos

Desde mBlock Extension Builder podemos descargar nuestra extensión y probarla arrastrándola

a la parte de código del mBlock5:

Vamos a probarla con algunos ejemplos en la placa Arduino Uno:

• Reto 1: Recibir información desde la placa Arduino.

Vamos a recibir el valor de un contador enviado desde la placa Arduino. Este valor se incrementa

cada segundo. Podemos observar cómo se reciben los valores desde el monitor serial.

Cargaríamos el siguiente programa a la placa Arduino Uno:



Desde mBlock5, desconectaríamos la placa Arduino Uno y abrimos el IDE de Arduino y la

conectamos en su puerto COM:

Tras abrir el Monitor Serie y escoger 9600 baudios de velocidad comenzamos a ver que

recibimos la información de nuestro contador:



• Reto 2: Enviar información a la placa:

En este ejemplo empleamos el puerto serie para encender o apagar el LED integrado en la placa

Arduino. Para ello enviamos un carácter a la placa Arduino, empleando el monitor serial. En el

caso de enviar ‘A’ la placa Arduino apaga el LED, y en caso de enviar ‘B’ lo enciende.

Un posible programa que implementa nuestro reto podría ser el siguiente:



Desde mBlock5, primero desconectaríamos la placa Arduino Uno. Después abrimos el IDE de

Arduino y la conectamos allí. El siguiente paso consiste en abrir el Monitor serie en el IDE de

Arduino a 9600 baudios de velocidad.

En la siguiente imagen se ha remarcado en rojo la zona de envío de datos. En esa zona

escribiremos A o B.

Lo probamos y funcionará si al escribir A no se enciende o se apaga el led interno de la placa

Arduino Uno y si enviamos B se ilumina.

• Reto 3: Enviando datos desde un móvil a la placa Arduino Uno



La idea es crear una aplicación en App Inventor para abrir y cerrar la puerta corredera del

proyecto que vemos en la imagen inferior:

Vista frontal

Vista trasera

Las placas Arduino necesitan un controlador de motores. Yo uso el L9110 que nos sirbe para

hacer correr hasta 2 motores. Como sólo tenemos un motor vamos a escoger, por ejemplo, la

parte de MOTOR-B. Es decir, usaremos las zonas que marco en color verde:

Motor DC (Sin polaridad)

Conexionado del L9110 a la placa

Arduino Uno:

• GND a GND de Arduino Uno

• Vcc a 5V de Arduino Uno

• B-IB al pin D9 de Arduino Uno

• B-IA al pin D10 de Arduino Uno

Obviamente, necesitamos usar un módulo Bluetooth. Por ejemplo un HC-05:



Aunque el módulo puede operar a 5V (que es la conexión de la imagen anterior) lo

recomendable es conectar su patilla Vcc a 3.3V ya que conseguimos un ahorro de energía.

Nosotros lo conectaremos a 3,3V (pensar que el pin de 5V ya está ocupado por el Vcc de L9110).

Con el circuito implementado ya podemos programar el módulo bluetooth HC-05 desde

mBlock5. Un posible programa sería el siguiente:

Como ya había comentado, para cargarlo a la placa debemos desconectar la alimentación del

módulo HC-05. Tras cargarlo podemos conectar Vcc de HC-05.



Finalmente, nos queda crear la aplicación de móvil para controlar la puerta enviando las letras

A, C y P a la placa Arduino Uno. Este envío será posible porque el módulo bluetooth se enlazará

con nuestro móvil Android. Podemos crearla en App Inventor o en Thunkable. Yo usaré App

Inventor. En las siguientes imágenes se muestra mi App:

App: Apertura y cierre de una puerta



En su parte de bloques observamos que unos hacen referencia al módulo BT y a la pantalla

principal “Screen1”:

Y otros, que son los que nos interesan y se complementan con nuestro programa, se asocian a

los botones con las letras que hemos utilizado en mBlock5:



Descargamos la APP y la instalamos en nuestro dispositivo móvil. Enlazamos el Bluetooth y ya

podemos usarla. En las siguientes imágenes se ve como nuestro BT se conecta, se abre la puerta

y se cierra.

BT conectado Puerta abierta Puerta cerrada

4.2.4. Publicando la extensión

Tras testearla, estamos seguros de que nuestra extensión funciona. Para poderla usar en los PCs

Linux de nuestro centro educativo debemos necesariamente publicarla.

¿Cómo? Siguiendo los mismos pasos que se han descrito en el punto 4.1.3 de este tutorial.

Accedemos a “Advanced configuration” y comenzamos a formalizar nuestra extensión:

Cubrimos el ID, Version, Name, Description, PluginHomepage, imagen y marcamos los

dispositivos para los cuales queremos crearla:



Tras hacer clic en Save, vemos que los cambios se han grabado:



Ya podemos publicarla. Para ello accedemos a Publish Service > Extension Management.

Hacemos clic en el botón azul Publish New Extension y rellenamos los últimos datos:

Tras hacer clic en el botón azul inferior derecho OK nos dirán que debemos esperar unos minutos

y cuando concluya la subida veremos que nuestra extensión está en revisión:



4.3. Extensión para el sensor de temperatura y humedad DHT11 y DHT12

4.3.1. Importancia de la extensión DHT11 y DHT12

Antes de crear una extensión yo siempre me aseguro de si existe o no. Pensar que mis

necesidades pudieron ser las de otros y quizás esté implementada. Si abrimos el mBlock5,

seleccionamos la placa Arduino Uno y hacemos clic en “extensión”, podremos hacer una

búsqueda dentro de un gran universo de extensiones:



Escribimos dht11 y vemos que existen un montón y fijaros que está disponible en castellano:

Vamos a añadir la que he marcado en la siguiente imagen: (en este caso, antes de Añadirla debo

actualizarla. Me lo indica el botón azul con el signo +, por lo que hago clic en él).

Tras añadirla y probarla, veo que funciona correctamente para mis sensores DHT. En fin, no

tendría sentido crear y publicar una extensión que todos/as podemos usar.



Podemos, si queremos, hacer una búsqueda con DTH11 (mayúsculas) y veremos que nos salen

más:

En fin, la extensión está megacreada por lo que la pregunta del millón es: ¿Por qué vamos a

perder un tiempo precioso en crear algo que ya está hecho?

La respuesta es sencilla, porque queremos aprender y con esta extensión comenzaremos a

utilizar las librerías de Arduino para elementos específicos.

A mi me ayudó a entender este mundo de creación de extensiones y como podéis ver, la creé

pero no la publiqué porque para mí no tenía sentido hacerlo ya que ya existía y me era funcional:

Si nos fijamos en mBlock5, simplemente arrastrando el comando amarillo “cuando Arduino Uno

se inicia”, se incluyen tres librerías. Es decir, estas librerías ya están dentro de mBlock5 con este

comando. Un comando que siempre usaremos si queremos cargar el programa en la placa:

Pero, si probamos la extensión anterior e inicializamos el sensor (sin pedirle temperatura ni

humedad…). Algo muy básico. Vemos que se ha incorporado una librería llamada DTH.h y que

se ha cargado desde una carpeta que llamaron DHT: “DHT/DHT.h”.



Con esto nos queda claro que a veces necesitamos subir librerías a mBlock Extension Builder y si

no lo hacemos, no funcionará nuestra extensión.

La librería que necesitamos la podemos descargar desde el siguiente link: Librería DHT

En el desplegable de “Code” seleccionamos Download ZIP

Esa carpeta .zip la descomprimimos:

Y, por comodidad, la renombramos como DHT:



Es decir, nuestra carpeta DHT incluirá estos 13 archivos:

Si abrimos el archivo DHT.h con WordPad, por ejemplo, nos encontramos con lo siguiente:

Resulta que con esta librería podemos conectar cualquiera de estos sensores:



Y en apartado “public” vemos el siguiente código que, para muchos de vosotros/as puede ser

legible y para otros muchos no serlo tanto:

Una traducción puede ser la siguiente:

• Tenemos que declarar el sensor con el comando DHT (nº del pin al que está conectado,

tipo de sensor).

• Será necesario iniciar el sensor en void setup con el comando dht.begin

• Podemos obtener la temperatura con readTemperatura() y la humedad con

readHumidity()

• El último comando de la lista read(void) es una variable de tipo booleano. Esto quiere

decir que solo tiene 2 valores, verdadero o falso, lo que nos permite usarlo en bloques

de tipo condicional.

Para muchos esta información es más que suficiente para comenzar a crear la extensión en

mBlock Extension Builder. Pero si no lo tenemos claro, debemos buscar por la red “¿Cómo

programar un sensor DHT en Arduino?”. El resumen de la búsqueda se puede ver en las

siguientes imágenes:

• Para Inicializar el sensor



Para leer la temperatura en °C y F así como la humedad:

Y con esta información, ya podemos lanzarnos a crear nuestra extensión.

4.3.2. Creando la extensión

Entramos en mBlock Extension Builder y creamos una nueva extensión que llamaremos “Sensor

DHT11 y DHT12”. La editamos si queremos darle algún color que no sea el predeterminado

(Guardamos los cambios):



Nota: Yo le llamaré Prueba DHT ya que esta extensión ya le he creado

Antes de comenzar a diseñar y crear los comandos de la extensión procederemos a subir la

librería ¿Cómo? Lo haremos siguiendo estos pasos:

1. Pinchamos en “Add source file” y hacemos clic en el signo `+’ central.

2. Accedemos a la carpeta “DHT” que habíamos renombrado con las librerías y tras

seleccionarla hacemos clic en “Subir”.

Nos preguntará si queremos subir todos los archivos y aceptamos haciendo clic en “Subir”.

Comenzará a subir los archivos y….que no cunda el pánico, ya que mBlock Extension Builder

discrimina y cargará sólo los archivos necesarios.



3. El último paso consiste en guardar los cambios con el botón azul inferior

izquierdo “Save”. (ojo, no se guardan solos)

Ahora volvemos a “Basic configuration” para comenzar a crear los comandos de la extensión:



• En primer comando inicializará el sensor (DHT11 o DHT12) en un pin digital. Pertenecerá

a la categoría “Command” y en él definiremos dos variables Dropdown que llamaré

“tipo” y “pin”.



Cubrimos las opciones de cada una de las variables: Recordad que a la izquierda ponemos lo que

vemos en el bloque y a la derecha el texto que se añade a la programación en Arduino C.

Configuración de la lista desplegable para la variable “tipo”

En esta imagen

no se ve pero

hemos

introducido las

opciones del

pin 2 al pin 10

Por último, procedemos con la programación:

Configuración de la lista desplegable para la variable “pin”

Si pinchamos en el recuadro “include” vemos los dos

archivos con extensión .h que hemos subido.

Seleccionamos DHT/DHT.h:



En el apartado “lib” definimos nuestro componente dht. En la página 128 de este extenso libro

veíamos que la extensión inicializa los elementos con el siguiente constructor que apunta al

objeto dht:

Es decir, entre paréntesis primero introducimos la variable “pin” y después la variable “tipo”.

En la página 129 de este libro vemos que debemos incluir el comando “dht.begin();” en el setup.

Recordad que debemos ir guardándolo todo en cada momento: OK y Save



Ya tenemos nuestro primer comando perfectamente creado:

Para seguir incluyendo comandos hacemos clic en el signo + (situado en la parte inferior):

• Necesitamos un comando de la categoría número para leer la temperatura en °C.



Relativo a la programación (Ver la página 129) incluimos en comando de la imagen en code:

Recordad dar siempre a Ok y Save.

• Vamos a crear otro comando análogo al anterior pero esta vez para la temperatura en

grados Fahrenheit.



• Nos queda un último comando, también de la categoría número y que nos

proporcionará la humedad en %.





Ahora podemos descargarla para probarla: nos proporcionará un archivo con extensión .mext

que arrastraremos a la parte de código (derecha) de mBlock5.

4.3.3. Probando la extensión

Lo ideal sería probarla con una pantalla LCD I2C o con una pantalla OLED I2C ya que en estos

módulos gráficos podríamos visualizar los datos que va midiendo el sensor DHT11 o DHT12, pero

primero vamos a hacer una prueba más sencilla usando el Monitor Serie del IDE de Arduino

como visualizador de datos.



Arrastramos la extensión a la parte de código de mBlock5 y escogemos la placa Arduino Uno

(borramos los demás dispositivos):

Reto 1: Visualizar los datos de la temperatura en °C y humedad en % aportados cada medio

segundo en el Monitor Serie de Arduino.

Usaremos el primer comando del bloque verde “puerto serie” que viene por defecto en

mBlock5.

Vamos a conectar nuestro módulo sensor DHT11 a una placa Arduino Uno. Han salido varios

modelos al mercado y fijaros que el pin de datos o señal puede ser el pin central o uno de los

pines laterales:

Sensor con R pull up Sensor con R pull up, C filtrado y LED Sensor con R pull up

En mi caso usaré el modelo de la derecha y lo conectamos al pin D2 de la placa Arduino Uno, tal

y como se muestra en la siguiente figura:



Un posible programa que da solución al reto 1 sería el siguiente:

Conectamos la placa Arduino Uno a mBlock5 y subimos el programa.



A continuación desconectamos la placa del mBlock5, abrimos el IDE de Arduino y la conectamos

allí a su puerto COM para, finalmente, abrir el Monitor Serie a una velocidad de 115200.

Observamos que el Monitor Serie recibe los datos de temperatura y humedad relativa:

Reto 2: Mostrar en una pantalla LCD I2C de 16x2 la humedad y temperatura que detecta el

sensor DHT11

Este reto requiere controlar una pantalla LCD I2C 16x2 (2 filas y 16 columnas) y son muchas las

extensiones disponibles para ello y publicadas en mBlock5.

Una pantalla LCD I2C se conecta de la siguiente forma a una placa Arduino Uno:

• Para las placas Arduino Uno, Nano y Mini el pin SCL es el pin analógico A5 y SDA es el

pin analógico A4. Relativo a Vcc debe conectarse a 5V de la placa Arduino Uno y GND a

una GND del dispositivo Arduino Uno.



Usaré la extensión I2C LCD 1902 TEB:



Como queremos medir temperatura y humedad, conectaremos el sensor DHT11 tal y como se

muestra en a siguiente imagen:

Sensor DHT11

-Patilla Roja (Vcc) = 5V

-Patilla Amarilla (Datos)=

pin D9

-Patilla Negra (GND) =

GND de Arduino Uno

Pantalla LCD I2C

SCL = A5

SDA = A4

Vcc = 5V

GND=GND

Para conectar una pantalla LCD I2C necesitamos conocer su dirección I2C. Si no la sabemos

podemos usar I2C Scanner

Nuestra LCD I2C presenta la siguiente dirección I2C: 0x27. Conectamos e pin de datos del sensor

DHT11 al pin D9. Con el siguiente programa veríamos que en la pantalla se nos imprime la T y la

H:





4.4. Extensión tira de LEDs RGB WS2812

4.4.1. Importancia de la extensión tira de LEDs RGB WS2812

Hace unos años, en el 2019, vi este post en Adafruit: Open Led Race

“Open Led Race” es un juego en el que cada jugador interactúa con un pulsador para “mover”

un led (que presenta su color de jugador) a través de una tira de LED RGB. Cuanto más rápido le

demos al pulsador, más avanzará nuestro LED. Sobra decir que me encantó y lo apunté para un

futuro reciente!

En el 2020 todos teníamos otras cosas en la cabeza y este curso 2021 idem de idem. Pero en

junio, decimos montarlo en Salnés Campus para el campamento del verano y me vi en la

necesidad de diseñar una extensión para controlar una tira de LEDs RGB. La idea era que los

niños/as pudieran usarla para crear su programa de control “LEDs Race” con mBlock5.

Como siempre, comencé ojeando en el Administrador de Extensiones la existencia o no de esta

extensión. No tuve suerte; esta extensión no se había creado. Tras asumir que debía diseñarla

comencé a investigar las librerías en Arduino para una tira de LEDs RGB WS2812. Conseguir las

librerías adecuadas a veces es una tarea de días. Tenía claro debía ser la librería NeoPixels de

Adafruit pero tras crear la extensión y probarla, tenía errores y me di cuenta que la librería

estaba incompleta. Al final, las conseguí en una página rusa.

Mi problema consistía en lograr descargar de algún lado el archivo que marco con un rectángulo

rojo en la siguiente figura:



Resulta que, cuando alguien carga un programa desde mBlock5 en la placa (Arduino, mCore,

etc), ya use o no una extensión, se descargan a la vez las librerías que utiliza ese programa a

nuestro PC y siempre se guardan en la siguiente ubicación:

No tenemos más que abrir la carpeta “src” y comprobamos que se han guardado allí. En fin,

tenemos un truco muy bueno para conseguir unas librerías que funcionan con un dispositivo en

mBlock5 (cargar un programa de una extensión, aunque esté en chino, y quedarnos con las

librerías para formalizar nuestra propia extensión).



Ahora que tenemos las librerías toca investigar ¿Cómo se programa una tira de LEDs RGB

WS2812 en Arduino? Lo resumo.

• Inicializar la tira de leds: Usamos el siguiente constructor para declarar nuestro objeto:

Adafruit_NeoPixel pixels (NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800); // sus argumentos son

(el número de pixels de la tira de leds, el pin donde tengo conectado el bus de datos de la tira

de leds, tipo de tira de leds)

En el setup:

void setup() {

pixels.begin(); // Inicializa la librería NeoPixel.

pixels.show(); // Actualiza los leds. (este código me interesa ponérselo al comienzo, cuando

inicialice la tira de LEDs ya que el setup apaga todos los píxeles

}

• Fijar un brillo:

pixels.setBrightness (numero); // La variable “numero” toma valores de 0 a 255

• Configurar el color de un pixel:

pixels.setPixelColor (i, rojo,verde,azul); // i es un número de pixel determinado (el primer pixel

es el cero) y las variables rojo, verde y azul toman valores de 0 a 255.

• Actualizar o mostrar: La función setPixelColor () no tiene un efecto inmediato en los

LEDs. Para "empujar" los datos de color a la tira debemos llamar a la función show():

pixels.show();

• Borrar píxeles



pixels.clear();

Utilizaremos estas funciones para crear la extensión cuyas librerías podéis descargar desde

mBlock5 accediendo a esta extensión y cargando con ella un pequeño programa:

4.4.2. Creando la extensión tira de LEDs RGB WS2812

Desde mBlock Extension Builder accedemos a My Plugin > My Extension y clicamos en Add

extensión:

Le damos un nombre a la extensión.

Por ejemplo “Srip Neopixels” y la

editamos para asignarle otro color.

Prodecemos a cargar las librerías que

ya habíamos guardado en la carpeta

de recursos “src”. Esto se hace desde

la pestaña “Add source files” del

menú, haciendo clic en el icono +:



Se nos abre una ventana y en ella escogemos la carpeta “src” que contiene las librerías y

hacemos clic en “Subir”:

Confirmamos que queremos subir los archivos de la carpeta “src”:

Ya os había mencionado que mBlock Extensión Builder discrimina y sólo carga los que necesita:



Finalizamos haciendo clic en el botón azul inferior izquierdo “Save”:



El siguiente paso es ir creando cada uno de los comandos que compondrán la extensión.

• El primer comando que necesitamos será el que inicializa la tira de LEDs y dependerá de

un número máximo de LEDs (que llamaremos LedMax y que por defecto asociamos a

300 leds) y del pin de datos de la tira que se conecta a un pin digital de las placas Arduino

(que llamaremos PinLed y que por defecto pondremos, por ejemplo, el pin número 6).

Ambas son variables numéricas:

Relativo a la programación, primero debemos introducir las librerías en el apartado “include”,

inicializar el constructor en “declare” y el código en el “setup”:



Nota: este es el código del apartado “declare” y que no se ve completamente en la figura

anterior:

Adafruit_NeoPixel pixels = Adafruit_NeoPixel(/*{LedMax }*/, /*{PinLed}*/, NEO_GRB +

NEO_KHZ800);

• Con este segundo comando pretendo darle brillo a nuestros LEDs



Su programación es sencilla:

• El siguiente comando nos servirá para iluminar un LED determinado de la tira en el color

que deseemos:

Aunque el primer led que puedo encender es el de la posición 0, voy a poner como valor por

defecto el 1. Este comando depende de 4 variables: la primera es la posición del LED contada

desde cero y será de tipo número y que denoto por la letra “i”; y relativo a las 3 siguientes

variables que otorgan el color RGB y que son de tipo número las he llamado rojo, verde y azul

(las variables RGB tomarán el valor 0 por defecto).





Relativo al código, usamos la función pixels.setPixelColor(posición del LED, R, G.B):

• El siguiente comando no es necesario, pero es cómodo ya que no hay que olvidar la

funcionalidad que le quiero dar a esta extensión. Recordad que esta extensión está

pensada para poder programar carreras de NeoPixels y en el Open Led Race pueden

jugar hasta 4 jugadores con los colores rojo, verde, azul y blanco. En fin, vamos a crear

un comando específico para elegir uno de esos colores:



Para la posición de cada LED sigo usando la variable “i” y a cada color del desplegable del

comando le asocio un número.

Su programación se asociará a esta elección del color. Es decir, si en el desplegable escojo el

color “Rojo”, en Arduino Code este color se asocia al número “1” por lo que el argumento R debe

tomar el valor 255. Si elegimos Verde este color se vincula al número 2 y su parámetro G debe

ser de 255. Si escogemos Azul este color se asocia al número 3 que equivale a que el argumento

B tome el valor 255. Y en el caso de escoger Blanco, los tres parámetros RGB deben tomar el

valor 255:



• Continuamos con un comando importante cuya función será actualizar el LED. Es decir,

visualizarlo encendido. Llamaremos a este parámetro “Mostrar”.

Su programación es simple: pixels.show()



• Por último, nos faltaría un comando para borrar o apagar todos los LEDs. Pensar que

podemos apagar un led determinado con el comando:

pixels.SetPixelColor(posición del LED,0,0,0);

Como a veces nos interesará borrar los colores de todos los LEDs crearemos un comando que

llamamos “Borrar”:

Su código es simple:

• A mayores, y ya sería todo un lujo, podríamos incluso crear un comando donde el LED

recogiera un color determinado en código hexadecimal. Me refiero a algo como lo que

vemos en la siguiente imagen:



Si observo el código de este programa me encuentro con lo siguiente:



Aunque no entandamos perfectamente el código en sí mismo, podemos deducir lo que hace:

Separa un color en hexadecimal (como puede ser #7ED321) en tres partes que llama color_R1,

color_G1 y color_B1 y que las declara como variables de tipo byte. Esta separación o división de

colores lo realiza a través de la función strtol.

Basándonos en ese código podemos crear nuestro nuevo comando: Fijaros que hemos

introducido una variable del tipo Color:

Este comando dependerá de la posición del LED (“i”) y del parámetro “color” que presenta el

valor verde por defecto:



Relativo al código, debemos declarar unas variables (en “declare”) y escribir la función para que

ilumine el LED determinado después de hacer la conversión de color hexadecimal (en “code”):

declare:

String urNeohex;

long color_num1;

byte color_R1;

byte color_G1;

byte color_B1;

code:

urNeohex = "/*{color}*/";

color_num1 = strtol( &urNeohex[1], NULL, 16);

color_R1 = color_num1>>16;

color_G1 = color_num1>>8;

color_B1 = color_num1;

pixels.setPixelColor(/*{i}*/,pixels.Color(color_R1, color_G1, color_B1));

Finalizada la extensión podemos descargarla y probarla.


Si descargamos la extensión y la arrastramos a la zona de código de mBlock5 nos encontramos

con los comandos que hemos diseñado en el punto anterior:

Antes de explicar cómo conectar una tira de LEDs RGB WS2812 a Arduino Uno vamos a explicar

un poco que es una tira de LEDs RGB. Entre las muchas del mercado nos centraremos en la que

voy a utilizar.



Las tiras de LED RGB de la familia WS2812 contienen LEDs direccionables, que son aquellos nos

permiten un acceso individual a cada LED. Es decir, puedo controlar la iluminación de cada uno

de los LEDs de la tira de LEDs RGB de forma independiente.

En el mercado podemos encontrar

tiras de LED de diferentes

longitudes e inclusive, de diferente

cantidad de LEDs por cada metro de

tira. A mi me gusta la tira del tipo

IP67 que viene envuelta en un

plástico protector y tiene la

peculiaridad de ser impermeable.

La que estoy usando es una tira de

LEDs IP67 WS2812B de 5m de

60LEDs por metro y que funciona a

una tensión de 5V.

Eso significa que en 5m dispongo

de, nada más y nada menos que,

300 LEDs (60x5m).

Cada LED tiene un circuito interno

que es capaz de almacenar 3 bytes

(8x3= 24 bits), que corresponden con los 3 colores del RGB. Cada pixel puede tener 256 niveles

(de 0 a 255) en 3 colores, lo que supone un total de 16.777.216 posibles colores.

Cuando conectemos una tira de Leds RGB veremos serigrafiadas unas flechas y estas non indican

el sentido de los LED y sabremos cual es el LED número 0 (si las conectamos en el sentido

contrario no funcionará):

El pin de entrada de nuestra cinta led RGB tendrá la etiqueta “DIN” (entrada de datos). También

podremos identificarla por la flecha que indica la dirección en la que se realiza el envío de datos.

Ese pin de entrada a la tira de LEDs debe conectarse a un pin digital de la placa Arduino. Pero

ojo, es necesario utilizar una resistencia de 470 ohmios entre el pin digital y el pin de señal del



WS2818b ya que si no lo hacemos se pueden dañar los primeros LEDs de la tira de LEDs RGB

debido a posibles picos en la línea de datos.

Relativo al circuito, la casa comercial aconseja utilizar un condensador de 1000µF entre GND y

5V para suavizar la alimentación de los LEDs. Ojo, deben compartir la misma GND tal y como se

ve en la siguiente imagen:

Circuito de conexión de una tira de LEDs RGB con Arduino Uno

Vamos a probar la extensión en nuestra tira de LEDs RGB con los siguientes ejemplos:

• Reto 1: Semáforo

En este ejemplo el pin de datos de nuestra tira de LEDs RGB de 300 LEDs se conecta al pin D2 de

la placa Arduino Uno. Buscamos iluminar paulatinamente cada tercio de los leds totales de una

tira de LEDs en los colores Rojo, Amarillo y Verde. (Ver imagen inferior)



El programa que implementa el reto “Semáforo” se muestra en siguiente figura: Se han creado

los bloques Rojo (ilumina los LEDs desde la posición 0 a 99), Amarillo (ilumina los LEDs desde la

posición 100 a 199) y Verde (ilumina los LEDs desde la posición 200 a 299),

• Reto 2: Color al azar

Se trata de iluminar todos los LED de la tira de LEDs RGB con diferentes colores, al azar. Tras

estar todos encendidos, después de un segundo se pagarán.

Tira de LED antes de que se apaguen



Un posible programa que ejecuta el reto es el siguiente:

Debemos introducir el comando

Mostrar después de Borrar para

que se actualicen los LEDs

Código: https://naylampmechatronics.com/blog/20_tutorial-cinta-led-rgb-ws2812b.html


Una vez que estamos seguros de que nuestra extensión funciona, podemos publicarla. En los

puntos 4.1.3 y 4.2.4 he descrito paso a paso como formalizarla primero y cómo publicarla. En

este apartado me remito a ellos.



4.5. Extensión OLED I2C 128x64

4.5.1. Importancia de la extensión OLED I2C 128x64

La extensión OLED I2C 128x64 es el motivo por el cual he creado este tutorial y, por ende, el

curso.

El año académico 2020-2021 fue el año de “no compartir”. Mi departamento decidió invertir en

kits individuales para el alumnado de 3ºESO y uno de los componentes de ese kit fue una

pantalla OLED I2C de 0,96 pulgadas con una resolución de128x64 píxeles y cuyo controlador es

el chip SDD1316.

La función del controlador SSD1306 es comunicarse con el microcontrolador de la placa y

obtener los datos y enviarlos a la pantalla OLED, para que dibuje esos datos.

Compramos 45 pantallas OLED I2C en lugar de las típicas LCD I2C por coste (en ese momento

estaban mucho más económicas) y por calidad (su resolución y funcionalidad, sin duda, es muy

superior). Las pantallas OLED (Organic Light-Emitting Diode) utilizan diodos orgánicos de emisor

de luz que consumen muy poca energía, son delgadas y muestran imágenes más nítidas.

OLED I2C con el chip SDD1316

LCD I2C

Antes de comprarlas entre en el Administrador de extensiones de mBlock5 (mi idea era usarlas

con este software) y vi publicada una extensión para programar pantallas OLED. Mi error fue no

comprobarla antes de adquirir las 45 pantallas OLED. Cuando llegó el pedido y testeé la

extensión en los módulos que se compraron vi que no funcionaba y entré en pánico. No me

quedaba más remedio que crear una extensión para sacarle partido a las 45 pantallas OLED.

Y en este proceso aprendí el 80% de lo que estáis viendo en el punto 4 de este libro. Es como

comenzar un primer proyecto de Arduino con un brazo robótico en lugar del típico blink

(encender y apagar un LED).

Comenzamos investigando por la red cómo programar una pantalla OLED I2C SSD1316 128x64

en Arduino. Veremos que con el IDE de Arduino necesitaríamos instalar dos librerías:

Adafruit_SSD1306 y Adafruit-GFX-Library.



• Librería Adafruit GFX

La podemos encontrar en el repositorio de la librería en GitHub. Es la librería gráfica y gracias a

ella podemos dibujar en la pantalla OLED. Esta librería necesita de otra librería específica para

el controlador. Por ejemplo, para dibujar en pantallas OLED hay que combinarla con la librería

Adafruit SSD1306.

• Librería Adafruit SSD1306

Esta librería es la específica para las pantallas OLED basadas en el controlador SSD1306.

Funciona tanto para pantallas I2C como SPI. Podemos descargarla desde el repositorio de

GitHub.

Si las instalamos en el IDE de Arduino y abrimos un archivo de ejemplos, veremos que utiliza

también las librerías SPI y Wire:

La librería Wire se introduce por defecto en mBlock5, pero no la librería SPI:



Relativo a la librería SPI, esta ya viene incluida en las librerías principales del IDE de Arduino y

podemos copiarla:

En fin, ya tenemos todas las librerías. Lo que hacemos es descargarlas e introducimos los archivo

que necesitará utilizar mBlock Extension Builder para esta extensión en una carpeta de recursos

que podemos llamar src. Nos quedaría algo como esto:

Ahora pasamos a la parte fácil: investigar

como programar la pantalla OLED con esas

librerías. En los ejemplos de la librería

Adafruit SSD1306 vemos una información

detallada de su programación.

Podemos resumirla de esta forma:



1. Para inicializar una pantalla OLED I2C necesitamos su dirección I2C: las típicas son 0x3C

y 0x3D.

Debemos crear un objeto de la clase Adafruit_SSD1306. El constructor de esta clase admite 4

parámetros.

Donde:

Adafruit_SSD1306 display(ANCHO_PANTALLA, ALTO_PANTALLA, &Wire, -1);

• ANCHO_PANTALLA: es la constante donde se almacena el ancho de la pantalla.

• ALTO_PANTALLA: es la constante donde se almacena el alto de la pantalla.

• &Wire: el un puntero a la clase estática Wire.

• -1: es el pin de Arduino o ESP8266 que se utiliza para resetear la pantalla.

Para iniciar la pantalla OLED, en la función setup() hay que llamar a la función begin(…) de la

clase Adafruit_SSD1306.

Donde:

display.begin(SSD1306_SWITCHCAPVCC, direccion)

• SSD1306_SWITCHCAPVCC: indica que se activa el voltaje de 3,3V interno para la

pantalla. Se puede utilizar una fuente externa utilizando la constante

SSD1306_EXTERNALVCC.

• direccion: es la dirección I2C que utiliza la pantalla. Si no estás seguros te aconsejo que

utilices este escáner I2C.

2. Para borrar la pantalla o limpiar el buffer de datos debemos usar:

display.clearDisplay();

Limpiar el contenido del buffer de la pantalla consiste en poner todos los píxeles a off. La función

display.clearDisplay() no admite ningún parámetro. Si no borramos pantalla, escribiremos

siempre sobre lo que ya esté dibujado.

3. Tamaño del texto: Usaremos la función

display.setTextSize(numero);

El tamaño número igual a 1 indica que las letras ocupan una altura de 8 píxeles de la pantalla. Si

número es 2 se multiplicará por dos el tamaño y ocuparán 16 píxeles. Y así sucesivamente.

4. Color del texto: Por lo general queremos pintar en lo que se llama color WHITE que no

es más que iluminar los píxeles, pero si queremos que no se vea usaremos BLACK. La

función que utilizamos para ello es:

display.setTextColor(SSD1306_WHITE);



Si queremos que se vea utilizamos SSD1306_WHITE y por el contrario, buscamos apagar los

píxeles utilizaremos SSD1306_BLACK.

5. Posición del cursor: Para poder pintar el texto en la pantalla, debemos primero situar el

cursor. Para conseguirlo usaremos la función:

display.setCursor(columna, fila);

La posición indica dónde se sitúa la parte superior izquierda del texto. Es decir, si pones el cursor

(0,0) el texto comenzará a pintarse a partir de las coordenadas (0,0) que se sitúan arriba y a la

derecha.

El ancho de nuestra pantalla es de 128 y el alto de 64:

En la imagen izquierda se observan dos

píxeles encendidos: Uno en el (0,0) y otro

en la posición (128,64).



6. Escribir texto: Podemos usar las siguientes funciones y la diferencia entre ellas es un

simple retorno de carro.

display.println("¡¡Hola mundo!!");

display.print("¡¡Hola mundo!!");

Los signos de apertura de exclamación no los interpreta bien porque no son un carácter estándar

y para poder hacerlo debemos usar su codificación ASCII. (Página de códigos 437 - Wikipedia, la

enciclopedia libre).

7. Un comando importante es la actualización de la pantalla. Eso se realiza con la siguiente

función:

display.display();

8. A veces nos interesará realizar un scroll de derecha a izquierda o al contrario de un texto

sobre la pantalla OLED. Podemos hacerlo con las siguientes funciones:

// Mover texto de izquierda a derecha

display.startscrollright(0x00, 0x0F);

// Mover texto de derecha a izquierda

display.startscrollleft(0x00, 0x0F);

Para parar el scroll usaremos la función:

display.stopscroll();

NOTA:

Donde:

display.startscrollright(inicio, fin);

• inicio: es la primera fila que se moverá.

• fin: es la última fila que se moverá.

• Para mover todas las filas de la pantalla inicio tiene que ser igual a 0x00 y fin tiene que

ser igual a 0x0F (son números en hexadecimal).

9. Para dibujar un punto, una línea, rectángulo y círculo usamos las siguientes funciones.

// Dibujar un punto x 1, y 1

display.drawPixel(x 1, y 1, SSD1306_WHITE);

// Dibujar una línea del punto x 1, y 1 al punto x 2 , y 2

display.drawLine(x 1, y 1, x 2, y 2, SSD1306_WHITE);

// Dibujar un rectángulo del punto x 1, y 1 al punto x 2 , y 2

display.drawRect(x 1, y 1, x 2, y 2, SSD1306_WHITE);



// Dibujar un círculo de centro x 1, y 1 y radio r

display.drawCircle(x 1, y 1, r, SSD1306_WHITE);

10. Por último, nos gustaría dibujar un objeto. Primero debemos declarar el objeto y

después utilizar la función que fue creada para representar la imagen:

Declaramos el objeto:

static const unsigned char PROGMEM datos_imagen[414] = {

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8,

0xff, 0xf0, 0x03, 0xff, 0xff, 0xfe, 0x00, 0x7f, 0xf8,

0xff, 0xc0, 0x00, 0x7f, 0xff, 0xf0, 0x00, 0x1f, 0xf8,

0xff, 0x00, 0x00, 0x1f, 0xff, 0xc0, 0x00, 0x07, 0xf8,

0xfc, 0x00, 0x00, 0x0f, 0xff, 0x80, 0x00, 0x01, 0xf8,

etc

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8

};

Función para programarla:

display.drawBitmap(x inicio, y inicio, imagen en Bitmap,128,64,1);

Podemos dar paso a la creación de la extensión.

4.5.2. Creando la extensión OLED I2C 128x64

Procedemos como en las anteriores. Entramos en mBlock Extensión Builder y añadimos una

nueva extensión. Le damos un nombre y procedemos a subir las librerías (recordad la carpeta

src) que creamos en el punto anterior.



• Nuestro primer comando es el que inicializa la pantalla OLED y dependerá del parámetro

dirección:

Introducimos las dos direcciones I2C típicas: 0x3C y 0x3D.



Lib: Introducimos las librerías, definimos los parámetros ancho, largo , reset y creamos un objeto

de la clase Adafruit_SSD1306

#include "src/Adafruit_GFX.h"

#include "src/Adafruit_SSD1306.h"

#include "src/SPI.h"

#define SCREEN_WIDTH 128

#define SCREEN_HEIGHT 64

#define OLED_RESET 4

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

Setup: Inicializamos la pantalla (que dependerá de su dirección I2C) e inicializa la librería Wire

(conecta Arduino al bus).

display.begin(SSD1306_SWITCHCAPVCC, /*{direccion}*/);

Wire.begin();

• Otro comando necesario es el de borrar pantalla o actualizar el buffer:



Code: Su código es sencillo

display.clearDisplay();

• Este nuevo comando nos servirá para actualizar pantalla o mostrar los cambios:

Code: Su código es simple

display.display();

• Este comando nos servirá para situar el cursor un determinado punto de la pantalla.



Code:

display.setCursor(/*{col}*/,/*{fil}*/);

• Vamos a crear un comando para escribir texto en la pantalla. Podríamos incluso crear

dos comandos: uno con print y otro con prinln. Vamos a crear sólo el primero ya que

será suficiente para la utilidad que le vamos a dar.



Code:

display.print (/*{dato}*/);

• A veces nos interesará tener un tamaño de texto más grande que otro. Lo haremos con

el siguiente comando:



Code:

display.setTextSize (/*{numero}*/);

• Para asegurarnos de que los píxeles se representarán iluminados o no creamos este

comando que dependerá de la variable color:



Code:

display.setTextColor (/*{color}*/);

• Vamos a crear los comandos para representar puntos, líneas, rectángulos y círculos:

Code:

display.drawPixel(/*{x}*/, /*{y}*/, SSD1306_WHITE);



Code:

display.drawLine(/*{x1}*/, /*{y1}*/, /*{x2}*/, /*{y2}*/, SSD1306_WHITE);



Code:

display.drawRect(/*{x1}*/, /*{y1}*/, /*{x2}*/, /*{y2}*/, SSD1306_WHITE);



Code:

display.drawCircle(/*{x}*/, /*{y}*/, /*{r}*/, SSD1306_WHITE);

Lo más importante, en mi opinión, ya lo hemos hecho.

• A veces nos interesará que un dato se mueva por la pantalla OLED de derecha a izquierda

o viceversa. Es decir, realizar un scroll horizontal.



Su código se introduce en “code” y depende de la variable “acción”:



if (/*{accion}*/ == 0)

{

// scroll de derecha a izquierda

display.startscrollleft(0x00, 0x0F);

}

if (/*{accion}*/ ==1)

{

// Scroll de izquierda a derecha

display.startscrollright(0x00, 0x0F);

}

• Vamos a crear otro comando para parar el scroll

Code:

display.stopscroll();

• Y por último, vamos a crear un comando que consiga representar una bombilla

encendida o apagada en la pantalla OLED.

Nuestra pantalla OLED permite visionar imágenes. He bajado de la red un gif que muestra el

encendido y apagado de una bombilla. He dividido el gif en sus dos frames usando

https://ezgif.com/ . En ellos se ve claramente una bombilla apagada y otra encendida y estas

imágenes se verán en la pantalla OLED:



Los 2 frames del gif

Con la aplicación http://javl.github.io/image2cpp/ convertimos los frames en arrays de bytes:

Primero subimos la imagen a convertir.



Transformamos la imagen para que nos coja en el tamaño de nuestra pantalla OLED de 128x64.

Ya podemos ver una previsualización:

Escogemos el formato de salida del código y escribimos el nombre BombillaOFF para

identificarla. Finalmente, hacemos clic en el botón verde “Generate code”:



Solo tenemos que seleccionar todo el código y pegarlo en un archivo de texto que abriremos

para programar este comando.

Repetimos estos pasos con la segunda imagen o frame del gif de la bombilla, la encendida:



Generamos el código y lo copiamos en el mismo documento que el frame anterior:

En ese archivo de texto anulamos esta parte de código de cada frame:

Ya con esto podemos comenzar a diseñar nuestro último comando que dependerá de una

variable imagen que en el desplegable se verá como BombillaOFF y BombillaON pero a la hora

de direccionarla en código tomarán los valores 0 y 1 respectivamente:



Declare: Pegamos el código de cada frame (el que teníamos en nuestro archivo de texto)

const unsigned char BombillaOFFBitmap [] PROGMEM = {

// 'frame_0_apagada, 128x64px

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff,





























0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x07, 0xff, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x01, 0xff, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xf0, 0xff, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x7f, 0xfe, 0x3f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0xff, 0xff, 0x1f, 0xff, 0xff,






0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xcf, 0xff, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xc7, 0xff, 0xff,






0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xfb, 0xff, 0xc7, 0xff, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xfb, 0xdf, 0xcf, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0xdf, 0xcf, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf1, 0xfd, 0xdf, 0x8f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf9, 0xfd, 0xff, 0x9f, 0xff, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x7d, 0xfe, 0x3f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xbc, 0x7f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xbc, 0xff, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xb8, 0xff, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x8f, 0xb1, 0xff, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xb1, 0xff, 0xff, 0xff,






0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff,










0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x0f, 0xff, 0xff, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x1f, 0xff, 0xff, 0xff,





























0xff, 0xff, 0xff, 0xff

};

const unsigned char BombillaONBitmap [] PROGMEM = {

// 'frame_1_encendida, 128x64px









0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff,














0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xff, 0xff, 0xfc, 0x7f, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xfe, 0x3f, 0xf8, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x8f, 0xe0, 0x07, 0xf1, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc7, 0x80, 0x01, 0xf3, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xef, 0x0f, 0xf0, 0xf7, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x7f, 0xfe, 0x3f, 0xff, 0xff,














0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x73, 0xff, 0xff, 0xc6, 0x01, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x73, 0xf7, 0x6f, 0xc6, 0x03, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xfb, 0xff, 0xc7, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xfb, 0xdf, 0xcf, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf1, 0xff, 0xdf, 0xcf, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf1, 0xfd, 0xdf, 0x8f, 0xff, 0xff,






0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x7d, 0xbe, 0x3f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xbc, 0x7f, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe7, 0x1f, 0xb8, 0xe7, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x87, 0x9f, 0xb8, 0xe1, 0xff, 0xff,




0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0x8f, 0xb1, 0xf0, 0xff, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xcf, 0xb1, 0xfc, 0x7f, 0xff,


0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x7f, 0xcf, 0xb3, 0xfe, 0x7f, 0xff,



















































0xff, 0xff, 0xff, 0xff

};

Code: Utilizamos la función display.drawBitmap…

if (/*{imagen}*/ == 0)

{

// Dibujar bombilla OFF

display.drawBitmap(0,0,BombillaOFFBitmap,128,64,1);

}

if (/*{imagen}*/ ==1)

{

// Dibujar bombilla ON

display.drawBitmap(0,0,BombillaONBitmap,128,64,1);

}

Así se vería la bobilla al utilizar este comando: Esta OLED es de dos colores (amarillo y azul).

Ya podemos descargar la extensión para probar o testear si funciona correctamente.


Como vamos a montar y programar circuitos electrónicos comenzaremos viendo cómo se

conecta una pantalla OLED I2C al dispositivo Arduino Uno.

Nuestra pantalla tiene 4 pines, que son: GND, V CC, SCL y SDA



• GND: Es el pin de tierra y debe conectarse a GND en Arduino Uno

• VCC: Es el pin de alimentación. Se puede alimentar la pantalla entre 1,8V y 6V. En la

placa Arduino Uno usaremos 5V.

• SCL: Es el pin de la señal de reloj de la interfaz I2C que se corresponde con el pin A5 en

la placa Arduino Uno.

• SDA: Es el pin de la señal de datos de la interfaz I2C y se corresponde con el pin A4 de la

placa Arduino Uno.



Con este circuito tan simple, sin necesidad de más podemos probar la imagen de la bombilla

encendida y apagada:

Podéis utilizar vuestra propia extensión (arrastrándola a la parte del código y escoger la placa

Arduino Uno) o Añadir la extensión desde el Administrador de extensiones de mBlock5 (como

veis, está publicada):

Tenemos que conocer la dirección I2C de nuestra pantalla OLED. En nuestro caso es 0x3C.

Si desconocemos esta dirección para saberla procederíamos de la misma forma que con la

pantalla LCD I2C que usamos en la extensión anterior, cargando el programa I2C Scanner a la

placa (obviamente, teniendo conectada la pantalla OLED). El monitor serie nos mostraría la

dirección I2C.



Como decía, nuestra dirección I2C es 0x3C. Un posible programa que muestra la imagen de una

bombilla encendida y apagada, en un intervalo de 2 segundos es el siguiente:



La funcionalidad principal de esta extensión es mostrar los datos de sensores en tiempo real.

Supongamos que queremos mostrar en nuestra pantalla OLED la medición de temperatura del

sensor DHT11 (en ºC):

La extensión para el módulo DHT11 está disponible en mBlock5: Usaré la que remarco en color

rojo:

Un programa que nos muestra la T podría ser el siguiente:





Si quisiéramos mostrar la Temperatura y la Humedad, podríamos usar el siguiente sketch:

Tras probar la extensión y ver que funciona correctamente solo nos queda publicarla. Esta

extensión ya está publicada y accesible a todos así que tiene sentido volver a publicar lo mismo.


Una vez que estamos seguros de que nuestra extensión funciona, podemos publicarla. En los

puntos 4.1.3 y 4.2.4 he descrito paso a paso como formalizarla primero y cómo publicarla. En

este apartado me remito a ellos. En este caso, esta extensión ya está publicada:



5. Conclusiones

Simplemente, espero que todo el tiempo que habéis dedicado a este PDF y a las sesiones que

hemos tenido os den su fruto. En mi caso me ha servido para mejorar y ya con eso “ya soy feliz”

pero me encantaría que toda esta información os ayudara “en el día a día en el taller de

tecnología” aplicando estos conocimientos a vuestras necesidades particulares, en proyectos

concretos que conlleven programación.

La programación en el campo de la creación de extensiones es algo que asusta. Hasta que una

se decide, da el salto y se mete un poco. Ahí es cuando te das cuenta de que es accesible y no

tan difícil como en principio parece.

6. Bibliografía

[1] https://www.mblock.cc/en-us/blog/mblock/guide-using-mblock-extension-builder/

[2] https://forum.makeblock.com/c/mblock/mBlock-Extensions

[3] Tecnología en Bloques (YouTube)

[4] Extensiones en mBlock5 (Formación creada por Antonio Pinilla para Juegos Robótica)


Un universo de extensiones con mBlock5

Create successful ePaper yourself

Delete template?

Save as template?