Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

ESP32 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 10 de diciembre de 2025 por Carlos L.

13 visualizaciones

Proyecto ESP32

Más información Transcripción

Descargar la transcripción

Bueno, pues voy a intentar explicar los tres programas que he hecho, que corresponden a las dos lámparas fáciles, 00:00:02
una hecha desde un entorno de servidor web y otra con MQTT. 00:00:10
Y luego he hecho un tercer programa en el que hago la primera lámpara, pero conectándola con, conectando el servidor web con MQTT. 00:00:17
En el primer programa he incorporado alguna cosa de aquí como el deslizador para el brillo 00:00:27
Aquí están los programas que corresponden al programa 5, 6 y 7 00:00:36
Web MQTT y Web más MQTT 00:00:42
Y antes empecé, hay otros porque empecé antes 00:00:45
y el programa de la lámpara fácil con entorno web se parece mucho al que hicimos con el botón verde y rojo de encender y apagar 00:00:50
entonces yo lo que hice fue hacer algo parecido a eso 00:00:58
yo quería hacer esto, no empecé con esto, empecé con cuatro botones, verde, rojo, azul y blanco 00:01:02
y lo que pasa es que quería que los botones 00:01:10
no utilizar el servidor de Sin Dormir 00:01:13
o sea, no quería utilizar iconos a partir de ahí 00:01:20
sino que quería crear el sistema de archivos 00:01:23
y que las imágenes estuvieran dentro del SP32 00:01:28
entonces eso se hacía con una aplicación llamada Spips 00:01:33
que crea una estructura 00:01:39
entonces, bueno, estos son los dos primeros 00:01:40
programas que hice, primero lo hice 00:01:43
con archivos jpg 00:01:44
para hacer eso hay que crear 00:01:47
dentro de donde están 00:01:49
los sketch 00:01:51
hay que crear una carpeta data 00:01:53
con las imágenes 00:01:54
y bueno, pues yo lo intenté hacer y no me salía 00:01:56
luego ya descubrí que los jpg 00:01:59
son demasiado 00:02:01
son demasiado pesados 00:02:05
son como 400 kilobytes, tenía yo 00:02:07
y lo intenté hacer con PNGs 00:02:08
lo hice con GIMP 00:02:12
los hice más pequeños 00:02:13
pero tampoco me salió 00:02:15
entonces no sé exactamente 00:02:18
qué es lo que ha pasado 00:02:20
porque no me ha salido 00:02:21
sí que es verdad que hay veces que conectaba 00:02:23
pero bueno 00:02:27
me da la impresión de que eran 00:02:28
temas de memoria 00:02:31
a veces no reconocía el puerto 00:02:33
eso se arreglaba conectando y desconectando 00:02:34
pero yo creo que era un tema más bien de la gestión de la memoria 00:02:37
por lo visto el SPIPS tiene un tamaño que se puede modificar 00:02:40
pero bueno, yo no fui capaz 00:02:43
otra de las cosas que descubrí es que el SPIPS necesita una herramienta 00:02:47
que está aquí, la tuve que descomprimir, la bajé de Github 00:02:53
es este ejecutable y no funcionaba con los arduino 2.0 o lo que fuera 00:02:55
funcionaba con los arduino 1.0 00:03:03
también me bajé el Arduino 1.8 00:03:06
19 y en herramientas 00:03:09
esto 00:03:12
que no aparece en el 2.0 00:03:12
es debido a que es ejecutable 00:03:15
pero bueno, tampoco lo conseguí 00:03:16
entonces resumiendo 00:03:18
que estuve ahí un buen rato 00:03:18
con eso 00:03:22
y también intenté hacerlo 00:03:23
de pasarlo a base 64 pero tampoco me funcionaba 00:03:25
yo no sé si es que como toqué mucho 00:03:28
el tema de la memoria flash 00:03:30
a lo mejor dejé algo mal 00:03:31
en la tarjeta, entonces me bajé un archivo 00:03:34
que hacía borrado, pero bueno, lo dejé 00:03:36
lo reseté y ya 00:03:38
volví a 00:03:40
bueno, a avanzar porque no había hecho nada 00:03:41
llevaba un montón de tiempo y no había hecho nada todavía 00:03:44
entonces bueno, pues 00:03:46
el código como digo 00:03:47
es muy parecido 00:03:50
al que tuvimos, entonces 00:03:52
pues nada, en las librerías necesarias 00:03:53
lo que hice fue, pues el server 00:03:57
on este que creamos, pues como tenía 00:04:00
cuatro botones yo en principio 00:04:02
lo que hice fue crear cuatro funciones, cuatro páginas web 00:04:03
y como había código común, utilicé una variable llamada neopixel 00:04:09
que calculaba el brillo, a partir del brillo que yo quisiera darle 00:04:15
que eso lo hice después con este deslizador 00:04:20
entonces el deslizador lo que hace es, pasas de 0 a 127 00:04:24
y ese 127, bueno, es con la regla de 3 00:04:28
lo metí aquí, estos son variables 00:04:32
tuve que poner unas variables 00:04:34
globales, porque claro 00:04:35
el programa como hace un bucle 00:04:38
se me encendía, pero no me mantenía encendido 00:04:39
el LED 00:04:42
sino que se apagaba 00:04:44
entonces tuve que jugar con unas variables internas 00:04:45
en NeoPixel, RGB 00:04:48
y RGBBB 00:04:49
que están con la regla de 3 del brillo 00:04:51
y bueno 00:04:54
pues aquí están las funciones 00:04:56
rojo, verde, azul, blanco, apagar y la de brillo. La de brillo utilizo la función map, quería yo meter el porcentaje, pero no he sido capaz de esta variable porcentaje de brillo 00:04:58
sacarla de aquí y ponerla en la página web. Otra de las cosas que quería hacer yo era que al pulsar en la página web, si pulsaba verde, pues que se quedara verde, 00:05:10
pero se queda solo el tiempo del primer 00:05:25
del ciclo, lo que tarda en soltar 00:05:27
en soltar el botón 00:05:30
y eso 00:05:31
bueno, pues tampoco 00:05:32
fui capaz, ni con las variables 00:05:35
ni con las variables globales 00:05:38
como lo hace la página web 00:05:41
es con esto, que es 00:05:44
un código de javascript 00:05:45
¿dónde está? 00:05:46
no, no, es que 00:05:51
claro, aquí está el código 00:05:53
aquí está la página web 00:05:54
y la página web tiene aquí esto 00:05:55
lo que hace es, bueno, esto lo he sacado de W3Schools 00:05:59
igual que los estilos 00:06:03
para darle formato 00:06:05
y esto lo que hace es un Javascript que al hacer el evento onClick 00:06:08
pues cambia el fondo 00:06:13
lo que pasa es que como el programa está haciendo bucles con el loop 00:06:15
pues lo pierdo 00:06:19
entonces bueno, aquí tengo mis cuatro pestañas 00:06:21
y a ver, vamos a probarlo 00:06:24
entonces, bueno, pues verde 00:06:27
rojo 00:06:29
va descendiendo 00:06:32
y los bits 00:06:34
o sea, los LEDs van de uno en uno 00:06:35
no he querido que fueran todos a la vez para que se notara 00:06:37
el cambio, sobre todo, bueno, en color se nota 00:06:39
perfectamente, pero sobre todo 00:06:41
con el brillo 00:06:43
entonces yo pongo azul y cambio el brillo 00:06:45
al soltarlo se ve como va bajando 00:06:47
aquí, bueno, está todo con 127 00:06:51
en vez de 255 00:06:53
por lo que nos dijo Jorge 00:06:55
de que el neopixel es muy brillante 00:06:57
aquí sí que se nota 00:06:59
cuando yo lo bajo mucho 00:07:02
pero por esta parte sigue siendo 00:07:03
muy brillante 00:07:05
lo puedo apagar poniendo el brillo a 0 00:07:07
es una regla de 3, multiplica por 0 00:07:09
o con el 00:07:11
botón apagar 00:07:14
y bueno pues 00:07:16
en principio 00:07:17
pues no tiene 00:07:19
no tiene nada de especial 00:07:21
lo más interesante 00:07:24
aquí está el código del Spears 00:07:26
que era el que creaba el sistema 00:07:28
que lo he dejado de recuerdo 00:07:30
y nada, lo más especial 00:07:32
que hay aquí es lo de meter el brillo 00:07:34
en la regla 00:07:36
de tres y aquí 00:07:38
el código de 00:07:40
aquí están los botones 00:07:42
los cuatro botones que están creados 00:07:44
por página web y aquí está 00:07:46
el código del deslizador 00:07:48
en el bloque edit este 00:07:51
el slider 00:07:59
y bueno 00:08:00
el resto de 00:08:02
bueno, aquí está 00:08:07
el programa 6 00:08:10
que corresponde al mqtt 00:08:12
el código 00:08:14
el código está aquí 00:08:17
y no tiene nada de particular 00:08:27
es un ejercicio que ya hicimos 00:08:29
con el neopixel 00:08:30
y bueno, yo he llamado emergencia y lo que hace es 00:08:33
lo que quería era que fuera, que al pulsar el botón 00:08:36
bueno, está conectado aquí al MQTT 00:08:40
se ve aquí que está descargado 00:08:45
y lo que hace es que al apretar el botón 00:08:47
pues es una emergencia 00:08:55
entonces durante un serie de pulsos 00:08:58
pues va encendiendo y apagando 00:09:03
yo quería que al pulsar el botón 00:09:05
se pudiera apagar 00:09:09
pero no lo he conseguido 00:09:10
porque lo intenté 00:09:13
lo intenté con un while 00:09:14
pero claro, el while se queda 00:09:17
es imposible 00:09:18
entrar en él porque no cambia la condición 00:09:21
y bueno, pues con un bucle 00:09:24
se lo fui capaz de que 00:09:27
pulsara 5 o 6 veces y que 00:09:28
y parara 00:09:31
porque si no 00:09:33
no era capaz de 00:09:34
con una segunda pulsación 00:09:36
tengo que verlo 00:09:37
y el último programa 00:09:39
el 7 00:09:41
que es 00:09:45
prácticamente es igual que 00:09:46
el 1 00:09:50
que el que he hecho 00:09:52
con cliente web 00:09:54
lo único que conecta 00:09:55
el serveron 00:09:57
lo que hace es 00:09:59
en vez de ser comandos barra rojo 00:10:00
y la función rojo 00:10:02
tiene esto 00:10:03
que es, se llama 00:10:04
bueno lo he aprendido 00:10:07
trasteando, que es una lambda 00:10:09
que es una función que se define sobre la marcha 00:10:11
esta función tiene rojo 00:10:13
que era lo que tenía antes 00:10:15
y una conexión con el cliente para ver 00:10:16
para poder lanzarlo 00:10:19
entonces si yo lo 00:10:21
si yo lo ejecuto 00:10:23
a través de la 00:10:26
de la página web 00:10:28
poner aquí también el 00:10:29
si pulso verde 00:10:30
se ve que se enciende 00:10:39
pero además 00:10:40
estoy enviando 00:10:42
el topic de verde 00:10:44
o el topic de rojo 00:10:47
o el topic de azul 00:10:51
y a la vez que va cambiando 00:10:53
la pulsación 00:10:55
con el brillo no he conseguido hacerlo 00:10:56
es un poco más complicado 00:10:58
porque hay que coger 00:11:00
bueno 00:11:02
hay que enviar este valor de alguna manera que no he sido capaz 00:11:03
Materias:
Tecnología
Etiquetas:
Tecnología
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Educación Secundaria Obligatoria
    • Ordinaria
      • Primer Ciclo
        • Primer Curso
        • Segundo Curso
      • Segundo Ciclo
        • Tercer Curso
        • Cuarto Curso
        • Diversificacion Curricular 1
        • Diversificacion Curricular 2
    • Compensatoria
  • Bachillerato
    • Primer Curso
    • Segundo Curso
Subido por:
Carlos L.
Licencia:
Dominio público
Visualizaciones:
13
Fecha:
10 de diciembre de 2025 - 4:49
Visibilidad:
Público
Centro:
Sin centro asignado
Duración:
11′ 08″
Relación de aspecto:
1.78:1
Resolución:
2560x1440 píxeles
Tamaño:
60.12 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid