electronica de consumo y de entretenimiento

Diseñar una interfaz de usuario para un reproductor de musica basado en un ESP32 con LVGL

soloelectronicosDeja un comentario

En este post, vamos a ver una guia creada por @moononournation, que nos muestra cómo usar LVGL y SquareLine Studio para diseñar una interfaz de usuario de reproductor de música estilo Winamp. LVGL es una biblioteca de gráficos para crear fácilmente una interfaz gráfica de usuario elegante y SquareLine Studio ayuda a reducir la cantidad de codificación requerida para usar LVGL

En este post vamos a ver como implementar un reproductor casero al mas puro estilo winamp de forma completamente personalizable. Para ello cualquier dispositivo de desarrollo ESP32 con pantalla y salida de audio debería estar bien.

A continuación se muestran algunos dispositivos que podemos usar:

  • Por ultimo una opción con pantalla mas grande es el módulo ESP32-S3-pantalla inteligente HMI 8M PSRAM 16M Flash Arduino LVGL WIFI y Bluetooth 7 «800×480, módulo TFT LCD RGB de 7,0 pulgada ( mas información en https://www.aliexpress.com/item/1005004952726089.html).

Diseño de interfaz de usuario

Puede usar varias formas de pantalla, redonda, cuadrada, rectangular. Es mejor determinar usar qué forma primero. Luego, el siguiente paso es determinar cómo se ve la interfaz de usuario.

Reproductor de música clásica

Reproductor de música clásica
Reproductor de música clásica
Reproductor de música clásica
Reproductor de música clásica

Si aún no tiene ninguna idea de diseño de interfaz de usuario, imitar un reproductor de música clásico puede ser un buen comienzo.

Winamp es un reproductor de música de escritorio clásico de Windows que apareció en el siglo pasado, luego mas tarde hubo una variante de interfaz de usuario similar con soporte de caracteres chinos llamada TTPlayer . Estas 2 aplicaciones son el recuerdo de la infancia de muchos aficionados (y también el de muchas personas), así que usaremos esas UI como plantilla de diseño.

Winamp está diseñado para cambiar la «máscara» fácilmente, y los recursos de imagen de la máscara están en formato BMP empaquetados en un archivo zip. Puede encontrar una gran colección de máscaras de Winamp en skins.webamp.org , por lo que es fácil acceder a su máscara de Winamp favorita como plantilla de diseño.

Puede encontrar cómo iniciar el diseño de la interfaz de usuario desde la máscara de Winamp en bilibili:

https://www.bilibili.com/video/BV1ia4y137KM/

El reproductor de música tiene varias funciones, pero el autor del git esta interesado en las características que se encuentran en Winamp o TTPlayer. 

Aquí está la lista de deseos de funciones muchas ya implementadas en el actual firmware disponible en el git:

  • Reproducir MP3 desde la tarjeta SD
  • Lista de archivos MP3 de la tarjeta SD
  • Mostrar caracteres Unicode
  • Operación de reproducción básica (reproducir, pausar, detener, anterior y siguiente)
  • Control del volumen
  • Mostrar información MP3 ID3
  • Mostrar imagen de portada de MP3
  • Mostrar letras MP3
  • Sincroniza la visualización de letras mientras juegas
  • Mostrar analizador de espectro de audio

Reproducir MP3 desde la tarjeta SD

Al principio, necesitamos una biblioteca de audio que pueda leer archivos MP3 desde la tarjeta SD y reproducirlos. Esta vez usaremos ESP32-audioI2S. Es compatible con la familia ESP32, lee archivos de audio de varias fuentes y reproduce la salida al módulo I2S. 

Puede encontrar más detalles en Github:

https://github.com/schreibfaul1/ESP32-audioI2S.git

Operación de reproducción básica

Operación básica de reproducción

ESP32-audioI2S proporcionó toda la API de reproducción básica, solo necesitamos crear todos los widgets de botón correspondientes para cada operación. Sin embargo, el diseño del botón original de Winamp es demasiado pequeño para operar en la pantalla táctil con el dedo. Así que amplié un poco los botones y también extiendo un poco el área táctil con un fondo transparente.

Para cada botón, asigne el widget de botón a una función correspondiente.

Utilice el botón de reproducción como ejemplo:

lv_obj_add_event_cb(ui_ButtonPlay, playSong, LV_EVENT_CLICKED, NULL);

Y luego, en la función playSong, llame a la API ESP32-audioI2S:

void playSong(lv_event_t *e) 
{ 
  if (isPlaying) 
  { 
    audio.pauseResume(); 
  } 
  más 
  { 
    play_selected_song(); 
  } 
}

Enumeración de los archivos MP3 de la tarjeta SD

Antes de decirle a ESP32-audioI2S que reproduzca el archivo MP3, primero debemos buscar y enumerar los archivos MP3 de la tarjeta SD. Aquí está el extracto del código de read_song_list() que ilustra cómo concatenar la cadena de la lista de canciones separada por el carácter de salto de línea (\n):

Raíz del archivo = SD_MMC.open("/"); 
Archivo archivo = root.openNextFile(); 
while (archivo) 
{ 
  if (archivo.isDirectory()) 
  { 
    Serial.printf("DIR: %s\n", archivo.nombre()); 
  } 
  else 
  { 
    const char *nombre de archivo = archivo.nombre(); 

    int8_t len ​​= strlen(nombre de archivo); 
    const char *MP3_EXT = ".mp3"; 
    if ((nombre de archivo[0] != '.') && (strcmp(MP3_EXT, &nombre de archivo[len - 4]) == 0)) { // Serial.printf(" 
    Archivo 
      de canción: %s, tamaño: %d\ n", nombre de archivo, archivo.tamaño()); 
      if (cuenta_canciones > 0) 
      { 
        stringSongList += '\n'; 
      } 
      stringSongList += nombre de archivo; 
      cuenta_canciones++; 
    }
  } 
  archivo = root.openNextFile(); 
}

Luego asigne la cadena de lista de canciones concatenada al componente de rodillo LVGL:

lv_roller_set_options(ui_RollerPlayList, stringSongList.c_str(), LV_ROLLER_MODE_INFINITE);

Mostrar caracteres Unicode

Mostrar caracteres Unicode

La compatibilidad con LVGL muestra caracteres Unicode, pero requiere un archivo de fuente Unicode. 

Control de volumen

Control del volumen

Asigne el control deslizante de volumen a una función de evento de cambio de valor:

lv_obj_add_event_cb(ui_ScaleVolume, volumenCambiado, LV_EVENT_VALUE_CHANGED, NULL);

Y luego, en la función de evento, llame a la API ESP32-audioI2S:

void volumenCambiado(lv_event_t *e) 
{ 
  int16_t volumen = lv_slider_get_value(ui_ScaleVolume); 
  audio.setVolume(volumen); 
}

La interfaz de usuario de progreso de tiempo también es un widget deslizante. Pero está demasiado cerca de los botones y la interfaz de usuario de control de volumen, por lo que deshabilité la entrada táctil para evitar una operación inesperada.Agregar sugerenciaPreguntaComentarioDescargar

Mostrar la información MP3 ID3

ESP32-audioI2S expuso una función de devolución de llamada audio_id3data(). La función es llamada para cada etiqueta ID3 que se encuentra en el archivo MP3.

En la función de devolución de llamada, simplemente concatene todos los datos en una cadena:

if (playingStr.length() > 0) 
{ 
  playingStr += " "; 
} 
jugandoStr += info;

Luego asigne a una etiqueta para mostrar:

lv_label_set_text(ui_LabelPlaying, playingStr.c_str());

Mostrar una imagen de portada de MP3

ESP32-audioI2S expuso una función de devolución de llamada audio_id3image(). Se llama a la función si se encuentra una imagen de portada en la etiqueta MP3 ID3. La imagen puede ser cualquier formato de imagen, actualmente en soporte para decodificar y mostrar un archivo de imagen JPEG no progresivo.

En la función de devolución de llamada, copie los datos binarios:

archivo.buscar(pos); 
archivo.leer(coverImgFile, len);

Busque el encabezado JPEG:

tamaño_t idx = 11; 
while ((idx < len) && ((coverImgFile[idx++] != 0xFF) || (coverImgFile[idx] != 0xD8))) 
; 
--idx;

Luego decodifica con JPEGDEC:

jpegdec.openRAM(coverImgFile + idx, len - idx, jpegDrawCallback);

Agregar sugerenciaPreguntaComentarioDescargar

Mostrar las letras de las canciones en MP3

ESP32-audioI2S expuso una función de devolución de llamada audio_id3lyrics(). Se llama a la función si se encuentran letras sincronizadas, letras no sincronizadas o etiquetas de datos de texto en un archivo MP3.

En la función de devolución de llamada, copie los datos binarios:

archivo.buscar(pos); 
file.read((uint8_t *)lyricsText, len);

Decodificar texto binario a UTF8:

audio.unicode2utf8(letraTexto, largo);

Si el texto tiene una etiqueta de tiempo de sincronización, almacene el índice de tiempo en la matriz syncTimeLyricsSec[] y syncTimeLyricsLineIdx[].

Luego configure el texto de la letra en el widget de rodillo:

lv_roller_set_options(ui_RollerLyrics, lyricsText, LV_ROLLER_MODE_NORMAL);

Agregar sugerenciaPreguntaComentarioDescargar

Sincronizar las letras de la pantalla mientras se reproduce

Si se encuentra la etiqueta de letras sincronizadas, haga rodar el widget de letras mientras juega:

for (int i = 0; i < syncTimeLyricsCount; ++i) 
{ 
  if (syncTimeLyricsSec[i] == currentTime) 
  { 
    lv_roller_set_selected(ui_RollerLyrics, syncTimeLyricsLineIdx[i], LV_ANIM_ON); 
    romper; 
  } 
}

Mostrar analizador de espectro de audio

ESP32-audioI2S también expuso una función de devolución de llamada audio_process_i2s() para procesar la salida de audio. Podemos utilizar esta función para recopilar los datos de audio para visualizar el espectro de audio.

En la función de devolución de llamada, recopile los datos de audio:

raw_data[raw_data_idx++] = *muestra;

Si los datos están llenos, procese con la clase FFT:

if (raw_data_idx >= WAVE_SIZE) 
{ 
  fft.exec((int16_t *)raw_data); 
  dibujar_fft_nivel_metro(canvasFFT_gfx); 
  lv_obj_invalidate(ui_CanvasFFT); 
  raw_data_idx = 0; 
}

Nota: La visualización se dibuja en un lienzo, canvasFFT_gfx, por separado. Y el lienzo está asociado con el widget ui_CanvasFFT de LVGL.

Opcional: Carcasa

Un hermoso estuche para el dispositivo de desarrollo puede hacer que se parezca más a un reproductor de música.

Puede encontrar el estuche de escritorio WT32-SC01 PLUS en Thingiverse y luego imprimirlo en el color que le guste ( https://www.thingiverse.com/thing:6030590 )

Por cierto , todas las fuentes de imágenes, los proyectos de SquareLine Studio y el código fuente se pueden encontrar en Github:

https://github.com/moononournation/LVGL_Music_Player.git

Fuente: https://www.instructables.com/Design-Music-Player-UI-With-LVGL/?utm_source=newsletter&utm_medium=email

Anuncio publicitario

!Socorro mi vitro y horno no funcionan!

soloelectronicos3 comentarios

Para solucionar un problema con el horno, puede ser mejor llamar a un profesional para que lo repare. La reparación de un horno puede ser peligrosa si no tiene experiencia o conocimientos técnicos en electricidad, por lo que siempre es mejor tomar precauciones y evitar riesgos innecesarios.

Photo by Frank Cone on Pexels.com

A veces, cuando mas lo necesitamos, de repente, no podemos cocinar porque el horno o la vitrocerámica se niegan a hacerlo.

Antes de nada hay un paso principal que no debemos olvidar: que llegue la corriente a la entrada de la vitro , del horno o del «combi» ( es decir del horno con vitrocerámica). Para ello, primero deberíamos comprobar que el enchufe donde esta enchufado tiene AC bien con un polímetro, o si no contamos con este con una lamparita o lo que tengamos a mano.

Ojo con hacer suposiciones sin contrastar, porque que pueda encenderse algun testigo del combi no significa que le llegue AC , pero si obviamente, si se puede encender alguna placa, o algun motor, si que significa que le llega AC al conjunto. Ciertamente pueden despistar los testigos que puedan encenderse, porque estos suelen componerse de pequeñas ampollas de neón que solo necesitan unos de los hilos , por lo que si lucen eso no significa que haya ac (sólo indica que llega al menos la fase pero no que llegue el neutro que lo necesitamos para que funcione ) .

Si nos centramos en solo los hornos eléctricos, una vez descartado la entrada de ac, algunas de las averías más comunes que pueden ocurrir en los hornos eléctricos pueden ser las siguientes :

  • Problemas con la resistencia: La resistencia es la parte del horno que se encarga de calentar el interior del mismo. Si la resistencia se quema o se rompe, el horno no podrá calentar adecuadamente.
  • Problemas con el termostato: El termostato es el dispositivo que controla la temperatura del horno. Si el termostato falla, el horno puede calentarse demasiado o no lo suficiente.
  • Problemas con el temporizador: El temporizador es la parte del horno que se encarga de controlar el tiempo de cocción. Si el temporizador no funciona correctamente, el horno puede cocinar los alimentos por más tiempo del necesario, lo que puede resultar en alimentos quemados o carbonizados.
  • Problemas con el ventilador: Si el ventilador del horno no funciona correctamente, el aire caliente no se distribuirá adecuadamente dentro del horno, lo que puede causar una cocción desigual o lenta.
  • Problemas con la puerta: Si la puerta del horno no cierra correctamente, el calor puede escapar del horno, lo que puede reducir la eficiencia energética del horno y prolongar el tiempo de cocción. También puede haber fugas de calor que pueden ser peligrosas para las personas que están cerca del horno.

Y si ya nos vamos a los combis (vitrocerámicas encastradas con un horno eléctrico) o solo vitrocerámicas con mandos manuales en un lateral, estos son los principales problemas que pueden tener :

  • Problemas con los elementos calefactores: Los elementos calefactores de la vitrocerámica pueden quemarse o dañarse con el tiempo, lo que puede hacer que la placa no caliente adecuadamente o no se caliente en absoluto.
  • Problemas con los interruptores de control: Los interruptores de control en la vitrocerámica pueden fallar con el tiempo, lo que puede hacer que la placa no se encienda o no se apague cuando se debe.
  • Problemas con el sensor de temperatura: El sensor de temperatura en la vitrocerámica puede fallar, lo que puede hacer que la placa no detecte correctamente la temperatura y se caliente demasiado o no lo suficiente.
  • Problemas con el panel de control: El panel de control en la vitrocerámica puede fallar, lo que puede hacer que sea difícil de usar y ajustar la temperatura.
  • Problemas con la conexión eléctrica: Si hay un problema en la conexión eléctrica del horno o de la vitrocerámica, puede haber cortocircuitos, chispas o incluso incendios. Este es realmente el principal problema y de los más comunes, porque los normal es que falle parcialmente algun elemento (sobre todo si es un combi) y no todo.
  • En caso de que falle todo ( es decir que no funcione ni la vitro no el horno en caso del combi ) puede que no sea demasiado complejo solucionarlo. Veamos con mas detalle que podemos hacer:
    • Comprobaremos en primer lugar el enchufe donde esta conectado. Para ello, primero deberíamos comprobar que el enchufe donde esta conectado el horno o vitro tiene tensión, bien con un polímetro, con un buscapolos, o lo que tengamos a mano (en definitiva asegurarnos que tenemos ac en nuestra vivienda antes de desmontar nada).
    • Si la toma de ac tiene tensión, entonces deberíamos comprobar el estado del enchufe del horno , e incluso si tenemos duda desmontarlo y comprobar que la fase, neutro y tierra estan todos bien conectados.
    • Si hay signos de sobrecalentamiento del cable no seria un disparate reemplazar todo el cable por otro nuevo
    • Bueno si tenemos tensión entonces puede ser el cable del conjunto o la regleta del conjunto, lo cual nos va a dar trabajo comprobarlo, pero no es nada que no podamos superar.
    • Primero sacaremos el horno del encastre ( suele llevar 4 tornillos que se ven al abrir la puerta del horno) y estos van fijados al mueble. Bien sacaremos con cuidado a media distancia porque enseguida veremos unos cables que salen de la vitro hacia el cuerpo del horno. Desmontaremos con cuidado la tapa de esos cables y veremos una regleta como la que se ve en la imagen:

Ahora quitaremos ahora la tapa de la regleta ( solo lleva dos tornillos). Observar por cierto que esta tapa lleva rectángulos de 4 colores que nos sirven de guia para cuando desconectemos y volamos a conectar sepamos en que lado debemos conectar los hilos de cada placa (observe como lleva también los cables unos adhesivos de colores),

Bien quitaremos los dos tornillos que sujetan la tapa y enseguida ya podemos soltar ( van por presión) los conectores de los cables de las 4 fogones y los dos hilos de los testigos:

Una vez liberados los 5 mazos de cable, también no olvidar la conexión de masa que va atornillada con un cablecillo al chasis

Bueno soltado los cables de la vitro, ahora toca sacar el horno y quitarle la tapa posterior ( suelen ser unos 4 tornillos)

Ahora viene lo importante porque nos iremos a la parte inferior donde estan las conexiones del cable del horno hacia el resto de circuitería.

En este caso vemos señales de que ha pasado algo grave porque se ven restos negros de haber saltado una chispa justo en el hilo de fase ( el azul) que por cierto de la violenta explosión llegó a cortarse y por tanto dejó sin corriente todo el conjunto.

Si ha habido cortocircuito, lo mejor es cortar la sección desgastada del cable(s) de corriente y volver a conectar fuertemente el hilo seccionado por la parte superior como vemos en la imagen ( asegurarse de que queda(n) muy bien apretado(s)).

Bueno esto debería solucionar el problema así que montaremos la tapa , conectaremos los hilos de la vitro con sus tapas correspondientes , volveremos a colocar el horno en su lugar y conectaremos nuevamente el conjunto a la toma de ca ..

Si funciona ya hemos solucionado el problema, si no es así y salta algun térmico podria ser la propia regleta de conexiones que deberíamos comprobar que nos est cruzado algun hilo entre si o mejor si ha sufrido un percance como en el de la foto sustituirla por una nueva.

Resumen

Reparar un horno /vitro puede ser una tarea compleja, pero si es habilidoso y tiene experiencia en trabajos eléctricos, puede intentar hacerlo usted mismo siguiendo estos pasos:

  1. Identifique el problema: Primero, debe identificar cuál es el problema con el horno/vitro. Puede ser la resistencia, el termostato, el temporizador, el ventilador o la puerta, o la regleta de entradas como se mencionó anteriormente.
  2. Consiga las herramientas adecuadas: Antes de empezar a trabajar, asegúrese de tener las herramientas necesarias para la reparación, como un multímetro, destornilladores, alicates, soldador, entre otros.
  3. Desconecte el horno/vitro: Antes de empezar a trabajar en el horno/vitro, asegúrese de que esté completamente desconectado de la corriente eléctrica para evitar accidentes.
  4. Desmonte el panel frontal: Desmonte el panel frontal del horno/vitro para acceder a las resistencias, el termostato y otros componentes.
  5. Pruebe la resistencias: Si cree que el problema puede ser alguna resistencia, utilice el multímetro para verificar si hay continuidad eléctrica en la misma. Si no hay continuidad, entonces la resistencia debe ser reemplazada.
  6. Verifique el termostato: Si el problema es el termostato, verifique su continuidad eléctrica y asegúrese de que está funcionando correctamente. Si no es así, entonces el termostato debe ser reemplazado.
  7. Revise el temporizador: Si el temporizador está fallando, verifique si hay alguna pieza rota o desgastada que necesite ser reemplazada. Si no encuentra nada obvio, es posible que necesite reemplazar todo el temporizador.
  8. Reemplace los componentes defectuoso: Si has identificado qué componente está fallando, debería reemplazarlo por uno nuevo.
  9. Vuelva a ensamblar el horno: Una vez que haya reemplazado el componente defectuoso, vuelva a ensamblar el horno/vitro y verifica que todo esté funcionando correctamente.

Si después de seguir estos pasos aún no puede solucionar el problema con el horno, puede ser mejor llamar a un profesional para que lo repare. La reparación de un horno puede ser peligrosa si no tiene experiencia o conocimientos técnicos en electricidad, por lo que siempre es mejor tomar precauciones y evitar riesgos innecesarios