Hemos creado un receptor de radio online sobre la placa ESP32 STEAMakers AI. El kit utilizado incluye la placa ESP32 STEAMakers AI, una pantalla TFT, un altavoz con amplificador, un micrófono SPI y los cables de conexión necesarios. En este caso podemos prescindir del micrófono. Para contener todos los elementos hemos utilizado una caja impresa en 3D. Las piezas para imprimir en plástico se pueden descargar de Thingiverse.
Al encender el aparato la pantalla TFT nos muestra En la primera line la emisora seleccionada y en la segunda el volumen, que por defecto es 4.
En la tercera y cuarta líneas se muestra la red Wifi y la contraseña utilizada para proporcionar acceso a internet a la radio y al servidor web alojado en la ESP32. En la última línea se muestra la dirección IP de este servidor web en donde está alojada la página web que nos permite cambiar le emisora y modificar el volumen. Para poder acceder a esta página web, el ordenador, Tablet o teléfono móvil que utilicemos han de estar conectados a esa misma red wifi.
En la página web hay tres botones, dos de ellos para subir o bajar el volumen (Entre 0 y 21) y el tercero para ir cambiando de emisora entre las cinco opciones que hay programadas.
El nombre de la emisora y el valor del volumen van variando en la pantalla TFT a medida que se van cambiando desde la página web.
A continuación se muestra el programa completo realizado con STEAMakersBlocks.
En el conjunto Inicializar se configura la velocidad del puerto serie y la red wifi a la que se ha de conectar. A continuación se establecen dos variables, una para el valor del volumen y otra para el índice de la emisora. Las cinco variables siguientes guardan la dirección web en donde se encontrará la señal de estas cinco emisoras. En este caso son:
https://playerservices.streamtheworld.com/api/livestream-redirect/RAC_1.mp3
https://playerservices.streamtheworld.com/api/livestream-redirect/LOS40.mp3
https://playerservices.streamtheworld.com/api/livestream-redirect/CADENADIAL.mp3
https://playerservices.streamtheworld.com/api/livestream-redirect/CADENASER.mp3
https://vprclassical.streamguys1.com/vprclassical64.mp3
A continuación se configura el Audio I2S y se muestra el contenido de la pantalla TFT.
Para acabar se inicia el servidor web, se le asigna un mDNS y se envían los valores IP por el puerto serie.
A continuación se muestra el contenido de la página web alojada en el servidor.
La etiqueta de Meta es:
http-equiv="Refresh" content="2" charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1.0"
En Syle (css):
body {background-color: #ffffff;}
A continuación se pueden ver estas etiquetas:
<h4>Volumen</h4>
<input onClick="window.location.href='aumentar' " type=button value="Subir" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 60pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
<input onClick="window.location.href='disminuir' " type=button value="Bajar" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 60pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
<p id="Volumen"></p> <script> let Volumen =
; document.getElementById("Volumen").textContent = "El volumen es: " + Volumen; </script>
<h4>Emisora</h4>
<input onClick="window.location.href='emisora' " type=button value="Cambiar emisora" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 40pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
El siguiente conjunto de bloques envía una solicitud GET cuando presionamos el botón Subir de la página alojada en el servidor web.
En Meta la etiqueta es:
http-equiv="Refresh" content="2" charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1.0"
El contenido de la etiqueta es el que se muestra a continuación.
<p>Volviendo a la página anterior en 2 segundos...</p> <script> setTimeout(() => history.back(), 20); </script>
El siguiente conjunto de bloques envía una solicitud GET cuando presionamos el botón Bajar de la página alojada en el servidor web.
El siguiente conjunto de bloques envía una solicitud GET cuando presionamos el botón Cambiar emisora de la página alojada en el servidor web.
No hay comentarios:
Publicar un comentario