Webradio player pe ESP32.

[Levy]

Am adaugat imagini din interfata web tradusa in limba romana in aceasta postare.

[Levy]

Modificare valabila doar pentru displayurile ILI9488.

Am modificat fisierul yoRadio\src\displays\conf\displayILI9488conf.h si am obtinut urmatoarea afisare a imaginii pe display



click pe imagine pentru a vedea videoclipul scurt de pe youtube.

Am adus urmatoarele modificari:

• Numele postului este aliniat la dreapta, la fel ca și numele artistului și numele melodiei.
• Informațiile despre vreme au o dimensiune crescută a fontului, iar informațiile despre vreme sunt afișate pe toată lățimea afișajului.
• Indicatorul ratei de biți este mutat în partea stângă a afișajului, iar chenarul este mărit.
• Indicatoarele de volum (contoarele de volum) au fost rotite orizontal si subtiate, au fost mutate sub partea in care este afisata data curenta.

Fisierul complet modificat pentru display-ul ILI9488 este urmatorul:

Code: Select all

/*************************************************************************************
    ST7796 480X320 displays configuration file.
    Copy this file to yoRadio/src/displays/conf/displayST7789conf_custom.h
    and modify it
    More info on https://github.com/e2002/yoradio/wiki/Widgets#widgets-description
*************************************************************************************/

#ifndef displayILI9488conf_h
#define displayILI9488conf_h

#define DSP_WIDTH       480
#define DSP_HEIGHT      320
#define TFT_FRAMEWDT    10
#define MAX_WIDTH       DSP_WIDTH-TFT_FRAMEWDT*2

#if BITRATE_FULL
  #define TITLE_FIX 44
#else
  #define TITLE_FIX 0
#endif
#define bootLogoTop     110

/* SROLLS  */                            /* {{ left, top, fontsize, align }, buffsize, uppercase, width, scrolldelay, scrolldelta, scrolltime } */
const ScrollConfig metaConf       PROGMEM = {{ TFT_FRAMEWDT, TFT_FRAMEWDT, 4, WA_RIGHT }, 140, true, MAX_WIDTH, 5000, 2, 40 };
const ScrollConfig title1Conf     PROGMEM = {{ TFT_FRAMEWDT, 62, 2, WA_LEFT }, 140, true, MAX_WIDTH-(TITLE_FIX==0?6*2*7-6:TITLE_FIX), 5000, 2, 40 };
const ScrollConfig title2Conf     PROGMEM = {{ TFT_FRAMEWDT, 86, 2, WA_LEFT }, 140, true, MAX_WIDTH, 5000, 2, 40 };
const ScrollConfig playlistConf   PROGMEM = {{ TFT_FRAMEWDT, 146, 3, WA_LEFT }, 140, true, MAX_WIDTH, 1000, 7, 40 };
const ScrollConfig apTitleConf    PROGMEM = {{ TFT_FRAMEWDT, TFT_FRAMEWDT, 4, WA_CENTER }, 140, false, MAX_WIDTH, 0, 7, 40 };
const ScrollConfig apSettConf     PROGMEM = {{ TFT_FRAMEWDT, 320-TFT_FRAMEWDT-16, 2, WA_LEFT }, 140, false, MAX_WIDTH, 0, 7, 40 };
const ScrollConfig weatherConf    PROGMEM = {{ TFT_FRAMEWDT, 116, 3, WA_LEFT }, 140, true, MAX_WIDTH, 0, 2, 40 };

/* BACKGROUNDS  */                       /* {{ left, top, fontsize, align }, width, height, outlined } */
const FillConfig   metaBGConf     PROGMEM = {{ 0, 0, 0, WA_LEFT }, DSP_WIDTH, 50, false };
const FillConfig   metaBGConfInv  PROGMEM = {{ 0, 50, 0, WA_LEFT }, DSP_WIDTH, 2, false };
const FillConfig   volbarConf     PROGMEM = {{ TFT_FRAMEWDT, DSP_HEIGHT-TFT_FRAMEWDT-8, 0, WA_LEFT }, MAX_WIDTH, 8, true };
const FillConfig  playlBGConf     PROGMEM = {{ 0, 138, 0, WA_LEFT }, DSP_WIDTH, 36, false };
const FillConfig  heapbarConf     PROGMEM = {{ 0, DSP_HEIGHT-2, 0, WA_LEFT }, DSP_WIDTH, 2, false };

/* WIDGETS  */                           /* { left, top, fontsize, align } */
const WidgetConfig bootstrConf    PROGMEM = { 0, 243, 1, WA_CENTER };
const WidgetConfig bitrateConf    PROGMEM = { 6, 100, 2, WA_LEFT };
const WidgetConfig voltxtConf     PROGMEM = { 0, DSP_HEIGHT-38, 2, WA_CENTER };
const WidgetConfig  iptxtConf     PROGMEM = { TFT_FRAMEWDT, DSP_HEIGHT-38, 2, WA_LEFT };
const WidgetConfig   rssiConf     PROGMEM = { TFT_FRAMEWDT, DSP_HEIGHT-38-6, 3, WA_RIGHT };
const WidgetConfig numConf        PROGMEM = { 0, 200, 70, WA_CENTER };
const WidgetConfig apNameConf     PROGMEM = { TFT_FRAMEWDT, 88, 3, WA_CENTER };
const WidgetConfig apName2Conf    PROGMEM = { TFT_FRAMEWDT, 120, 3, WA_CENTER };
const WidgetConfig apPassConf     PROGMEM = { TFT_FRAMEWDT, 173, 3, WA_CENTER };
const WidgetConfig apPass2Conf    PROGMEM = { TFT_FRAMEWDT, 205, 3, WA_CENTER };
//const WidgetConfig  clockConf     PROGMEM = { 16, 224, 70, WA_RIGHT };  /* 52 is a fixed font size. do not change */
const WidgetConfig  clockConf     PROGMEM = { 16, 224, 70, WA_RIGHT };
const WidgetConfig vuConf         PROGMEM = { TFT_FRAMEWDT, 260, 1, WA_CENTER };

const WidgetConfig bootWdtConf    PROGMEM = { 0, 216, 1, WA_CENTER };
const ProgressConfig bootPrgConf  PROGMEM = { 90, 14, 4 };
//const BitrateConfig fullbitrateConf PROGMEM = {{DSP_WIDTH-TFT_FRAMEWDT-38, 59, 2, WA_LEFT}, 42 };
const BitrateConfig fullbitrateConf PROGMEM = {{10, 150, 2, WA_RIGHT}, 102 };

/* BANDS  */                             /* { onebandwidth, onebandheight, bandsHspace, bandsVspace, numofbands, fadespeed } */
const VUBandsConfig bandsConf     PROGMEM = { 220, 15, 50, 2, 16, 10 };

/* STRINGS  */
const char         numtxtFmt[]    PROGMEM = "%d";
const char           rssiFmt[]    PROGMEM = "WiFi %d";
const char          iptxtFmt[]    PROGMEM = "%s";
const char         voltxtFmt[]    PROGMEM = "\023\025%d";
const char        bitrateFmt[]    PROGMEM = "%d kBs";

/* MOVES  */                             /* { left, top, width } */
const MoveConfig    clockMove     PROGMEM = { 0, 176, -1 };
const MoveConfig   weatherMove    PROGMEM = { 8, 120, MAX_WIDTH };
const MoveConfig   weatherMoveVU  PROGMEM = { 8, 120, 470 };

#endif



P.S.

In fisierul de mai sus am readus numele artistului si numele melodiei curente la partea stanga a displayului.

Spor la bricolat!

[Levy]

Desi are o interfata web care poate fi folosit ca telecomanda pentru yoRadio, s-a incercat realizarea unei telecomenzi intr-o aplicatie Android.

Rezultatele le puteti vedea aici:

Click pe imagine pentru a reda videoclipul.

si aici:

Click pe imagine pentru a reda videoclipul.

Comenzile dintre telecomanda si yoRadio se fac via telnet.
Lista cu comenzile telnet o puteti gasi aici.

Speram ca in viitorul apropiat sa apara si o aplicatie (probabil pentru Windows, Linux si Android) cu ajutorul careia sa putem construi cat mai simplu propriul yoRadio in diverse configuratii. Dar acesta este deocamdata in primele teste, sunt adaugate doar cateva tipuri de hardware, dar se lucreaza.

[Levy]

Am facut un scurt video despre felul in care am reusit schimbarea boot logo la yoRadio.

Acest video este o adaugare la aceasta postare: viewtopic.php?f=172&t=3380&p=26186#p26185

Spor la bricolat!

[Levy]

Pentru ca in postarile trecute am scis ca se lucreaza la ceva...

Se pare ca proiectul poate avea primul preview.
Nu sunt lucrurile in ordine inca, conexiuni gresite la butoane etc...dar se misca lucrurile!

Astazi copilul a facut un scurt video cu avansul proiectului yoRadio Creator.
Acesta va permite alegerea dintr-un set mare de componente (pe care le avem la dispozitie pentru a fi si testate conexiunile!) iar in momentul alegerii componentelor, vor aparea si conexiunile electrice pe display. Astfel oricine va face un yoRadio, chiar daca este incepator, va putea sa-si faca proiectul fara mari probleme.
Probabil se va si exporta fisierul myoptions.h gata configurat pentru legaturile standard din proiect, astfel nu va fi nevoie decat de ales componentele, iar legaturile electrice si configurarea hardware o va face aplicatia. Practic va fi un myoptions.h creator, dar putin mai evoluat. Sper


Click pe imagine pentru vizualiarea vidoclipului scurt.

A aparut si un alt video, in care foarte pe scurt se poate vedea avansul fata de varianta din videoclipul scurt de mai sus.

[Levy]

Mi-a adus fratele meu o boxa bluetooth obosita, care nu mai functiona decat alimentat continuu, sa vad ce pot sa fac cu el.
Pentru ca boxa si-a inlocuit-o cu una mai noua, ma gandeam sa-i fac un yoRadio folosind carcasa veche a boxei bluetooth.
Cam asa arata rezultatul:


Click pe imagine pentru redarea videoclipului.


Click pe imagine pentru redarea videoclipului.

AM folosit un ESP32 Wrover E



AM folosit un Max98357 I2S 3W Class D Amplifier, pentru ca exista un singur difuzor in boxa si acest DAC are si amplificatorul audio MONO incorporat.



Un display IPS ILI9488 de 3.5 inch Folositi IPS, are un unghi de vizualizare foarte bun si nici nu se schimba culorile la unghiuri mari asa cum fac cele TN.



Un rotary encoder. Acest model i-mi place mult, este foarte usor de utilizat si se si poate cositori mai omeneste pe o placa. In plus are si saiba, piulita si butonul de plastic.



si un conector USB-C cu ajutorul caruia se poate alimenta.



Am folosit acest fisier myoptions.h

Code: Select all

#ifndef myoptions_h
#define myoptions_h

/* Generated by myoptions.h generator - v0.8.1 */
/* https://e2002.github.io/docs/myoptions-generator.html?r=72,2,4,31,41,43,46,54,56&i=1,2,3,4,15,16,17,28,29,30&v=4,5,-1,2,27,26,25,35,34,32 */
/* Put this file next to yoRadio.ino and restart Arduino IDE. */

/* !!! Attention !!! */
/* This configuration depends on some additional libraries. Please install them using the library manager: */
/* Adafruit GFX Library, OneButton */

/* !!! Do not be alarmed, all right, the default values ​​are not included in this file !!! */

#define DSP_MODEL         DSP_ILI9488
#define BRIGHTNESS_PIN         2
#define PLAYER_FORCE_MONO         true
#define ENC_BTNR         35
#define ENC_BTNL         34
#define ENC_BTNB         32


#endif

si aceasta tema:

Code: Select all

// File created with YoRadio Theme Editor created by András Daradics
// File last modified: 10/20/2024 11:44:15 AM
// GitHub: https://github.com/andrasdaradici/YoRadio-Theme-Editor
// Itch.io: https://andrasdaradici.itch.io/yoradio-theme-editor
#ifndef _my_theme_h
#define _my_theme_h

#define ENABLE_THEME
#ifdef  ENABLE_THEME

#define COLOR_BACKGROUND     255,  0,  0
#define COLOR_STATION_NAME     255,  255,  255
#define COLOR_STATION_BG    53,  0,  0
#define COLOR_STATION_FILL    53,  0,  0
#define COLOR_SNG_TITLE_1    255,  255,  255
#define COLOR_SNG_TITLE_2    255,  255,  0
#define COLOR_WEATHER    255,  255,  255
#define COLOR_VU_MAX    255,  255,  0
#define COLOR_VU_MIN    0,  255,  255
#define COLOR_CLOCK    249,  255,  255
#define COLOR_CLOCK_BG    245,  0,  0
#define COLOR_SECONDS    255,  255,  255
#define COLOR_DAY_OF_W    255,  255,  0
#define COLOR_DATE    255,  255,  0
#define COLOR_BUFFER    115,  0,  0
#define COLOR_IP    255,  255,  255
#define COLOR_VOLUME_VALUE    249,  255,  255
#define COLOR_RSSI    249,  255,  255
#define COLOR_VOLBAR_OUT    255,  255,  255
#define COLOR_VOLBAR_IN    115,  0,  0
#define COLOR_DIGITS    1255, 255, 255
#define COLOR_DIVIDER    238,  0,  0
#define COLOR_BITRATE    255,  255,  255
#define COLOR_HEAP    255, 168, 162
#define COLOR_PL_CURRENT    255,  0,  0
#define COLOR_PL_CURRENT_BG    255,  255,  255
#define COLOR_PL_CURRENT_FILL    255,  255,  255
#define COLOR_PLAYLIST_0    255,  255,  255
#define COLOR_PLAYLIST_1    255,  200,  200
#define COLOR_PLAYLIST_2    255,  150,  150
#define COLOR_PLAYLIST_3    255,  100,  100
#define COLOR_PLAYLIST_4    255,  50,  50


#endif
#endif


Conexiunile intre componente si microcontroler sunt acestea:


Displayul, DAC-ul si ecoderul rotativ au fost alimentate la 5V.

[Levy]

Pentru ca forumul a avut probleme, nu am apucat sa postez prima versiune din ce v-am spus ca urmeaza:



Astazi deja avem primul update la software!

Au fost adaugate cateva tipuri de display.

A fost exportata si varianta WebGL, cu ajutorul caruia puteti sa vedeti ce hardware este adaugat.

Puteti descarca gratuit sau testa aici.

Au fost exportate versiunile:
Windows 32 biti
Windows 64 biti
Windows ARM
Android
Si versiunea WEBGL pe care o puteti incerca chiar pe pagina de download.

Probabil mai tarziu sau la urmatoarele versiuni va fi si o versiune Linux.

Ca si in yoRadio Theme Editor se poate adauga in aplicatie calea unde sa salveze fisierul myoptions.h


Puteti vedea conexiunile hardware a componentelor


Sau puteti vedea lista componentelor necesare, impreuna cu un link de cautare a acelor componente pe AliExpress


In aceasta versiune din pacate a disparut posibilitatea de a fape un print screen din butonul inclus in aplicatie, dar se va remedia in versiunile urmatoare.

Totusi ce face acest yoRadio Creator?
Va construieste foarte simplu fisierul myoptions.h si-l copieaza langa yoRadio.ino, bineinteles daca ati adaugat calea catre fisierul yoRadio.ino si ati salvat-o.
Este utila incepatorilor, pentru ca dupa alegerea componentelor afiseaza foarte clar si conexiunile electrice. Astfel fiecare incepator va putea sa-si contruieasca mai usor primul yoRadio!
Va duce rapid la o cautare de componente pe AliExpress, eu de acolo cumpar componentele la preturi destul de bune, cel putin raportat la cele din Romania.
Aplicatia NU VA DUCE la un anumit magazin preferat de mine sau de altcineva.

In limita timpului liber copilul va adauga hardware compatibil cu yoRadio.

Daca aveti bug-uri de raportat, chiar ne-am bucura sa le gasim mai usor. In limita cunostintelor copilului vr fi si remediate.

Spor la bricolat!