YoRadio panel webowy bez tajemnic ustawienia playlisty i dostępne opcje
YoRadio panel webowy bez tajemnic ustawienia playlisty i dostępne opcje
Jeżeli dotarłeś do tego artykułu, oznacza to, że Twoje YoRadio jest już uruchomione i działa poprawnie albo właśnie jesteś w trakcie jego składania. Jeśli jednak nie widziałeś jeszcze poprzedniego wpisu, w którym krok po kroku pokazaliśmy, jak zbudować radio internetowe YoRadio na ESP32, podłączyć wszystkie moduły oraz wgrać i skonfigurować oprogramowanie, to zdecydowanie warto zacząć właśnie od niego, ponieważ stanowi on solidną podstawę do dalszej pracy z projektem.
W tym artykule skupimy się w całości na panelu webowym YoRadio, czyli wbudowanym interfejsie dostępnym z poziomu przeglądarki internetowej. To właśnie tutaj znajduje się prawdziwe centrum sterowania radiem, miejsce, w którym możemy zarządzać playlistami, dodawać i edytować stacje radiowe, konfigurować połączenie Wi-Fi, zmieniać ustawienia systemowe, aktualizować pliki oraz sterować odtwarzaniem bez potrzeby dotykania samego urządzenia.
Panel webowy YoRadio jest bardzo rozbudowany, a jednocześnie intuicyjny, dzięki czemu pozwala w pełni wykorzystać możliwości projektu bez konieczności ponownego programowania ESP32. Pokażemy, jakie opcje są dostępne, do czego służą poszczególne zakładki oraz jak w praktyce korzystać z nich na co dzień, aby dopasować radio dokładnie do własnych potrzeb. Jeśli chcesz wycisnąć z YoRadio maksimum możliwości, ten artykuł jest właśnie dla Ciebie.
Po wejściu na adres IP naszego YoRadio w przeglądarce trafiamy na główny widok panelu webowego, który jest centrum sterowania radiem z poziomu komputera, telefonu lub tabletu. To właśnie ten interfejs pozwala w wygodny sposób zarządzać odtwarzaniem, playlistą oraz podstawowymi ustawieniami, bez konieczności używania enkodera czy samego wyświetlacza TFT.
W górnej części strony wyświetlana jest aktualnie odtwarzana stacja radiowa w tym przykładzie RMF MAXXX. W zależności od strumienia mogą pojawić się również elementy graficzne, takie jak logo stacji lub dodatkowe informacje identyfikujące aktualne źródło audio. Już na pierwszy rzut oka widzimy więc, czego aktualnie słuchamy.
Tuż pod nazwą stacji znajduje się panel sterowania odtwarzaniem, który działa bardzo intuicyjnie. Mamy tutaj przyciski do przełączania stacji w przód i w tył, pauzowania oraz wznawiania odtwarzania, a także regulacji głośności. Każda zmiana wykonana w tym miejscu jest natychmiast wysyłana do radia, interfejs webowy jest w pełni zsynchronizowany z urządzeniem, niezależnie od tego, czy radio sterowane jest z przeglądarki, czy z fizycznego enkodera.
Niżej widoczny jest pasek z informacjami technicznymi o aktualnym strumieniu. Znajdziemy tu bieżący poziom głośności, format i bitrate odtwarzanego audio np. MP3 128 kb/s oraz siłę sygnału Wi-Fi wyrażoną w dBm. To bardzo praktyczny element, który pozwala szybko ocenić jakość połączenia z siecią oraz parametry dźwięku, bez zagłębiania się w ustawienia systemowe.
Największą część ekranu zajmuje lista stacji radiowych, czyli playlista wczytana do YoRadio. Każda stacja wyświetlana jest jako osobna pozycja z nazwą oraz numerem porządkowym. Aktualnie odtwarzana stacja jest wyraźnie podświetlona, dzięki czemu zawsze wiemy, która pozycja jest aktywna. Kliknięcie dowolnej stacji na liście powoduje natychmiastowe przełączenie odtwarzania, co sprawia, że obsługa radia z poziomu przeglądarki jest szybka i bardzo wygodna.
Na dole strony znajduje się informacja o wersji oprogramowania, powered by ëRadio v0.9.720. Ten drobny szczegół bywa niezwykle przydatny, zwłaszcza gdy planujemy aktualizację systemu, sprawdzamy kompatybilność funkcji lub szukamy pomocy na forach i w dokumentacji projektu.
Po kliknięciu na ikonę ustawień dźwięku (suwaczki) w górnym panelu sterowania otwiera się rozszerzony panel korekcji audio dostępny bezpośrednio z poziomu przeglądarki. W tym miejscu możemy precyzyjnie dostosować brzmienie radia do własnych preferencji, bez konieczności zmiany czegokolwiek w oprogramowaniu czy ponownego wgrywania konfiguracji.
Panel umożliwia regulację balansu kanałów lewy/prawy, a także osobno wysokich tonów treble, środka middle oraz basu bass. Zmiany wprowadzane za pomocą suwaków są słyszalne niemal natychmiast, co pozwala szybko dopasować charakter dźwięku do użytych głośników, wzmacniacza lub warunków akustycznych pomieszczenia.
Po ustawieniu odpowiednich wartości wystarczy kliknąć przycisk ACCEPTABLE…, aby zapisać konfigurację i wrócić do głównego widoku panelu. Dzięki temu korekcja dźwięku staje się prostą i wygodną czynnością, którą można wykonać w dowolnym momencie, nawet z telefonu lub tabletu, bez fizycznego dostępu do samego radia.
Kolejnym bardzo ważnym elementem webowego panelu YoRadio jest edytor playlisty, który pozwala w pełni zarządzać listą stacji radiowych. Cała obsługa odbywa się wygodnie z poziomu przeglądarki, a zmiany możemy wprowadzać w dowolnym momencie.
Z tego widoku możemy importować gotową listę stacji np. plik playlist.csv, eksportować aktualną playlistę do pliku, a także dodawać nowe stacje, usuwać istniejące oraz zapisywać zmiany bezpośrednio w pamięci radia. Import i eksport to bardzo wygodna funkcja, szczególnie jeśli chcemy przygotować playlistę wcześniej na komputerze, przenieść ją na inne YoRadio lub wykonać kopię zapasową swojej konfiguracji.
Dodawanie nowej stacji jest bardzo proste wystarczy kliknąć przycisk ADD, a następnie wpisać nazwę stacji oraz adres URL strumienia audio. Adresy strumieni można łatwo znaleźć w ogólnodostępnych bazach stacji radiowych, na przykład tutaj:
👉 https://github.com/web-radio/webradio?tab=readme-ov-file#lista-stacji-radiowych
Po uzupełnieniu danych nowa stacja pojawi się na liście i będzie gotowa do odtwarzania.
Usuwanie stacji odbywa się poprzez zaznaczenie wybranych pozycji na liście i kliknięcie przycisku REMOVE, natomiast po każdej zmianie dodaniu, usunięciu lub edycji, należy pamiętać o kliknięciu SAVE, aby zapisać playlistę na stałe. Dzięki temu webowy edytor playlisty daje pełną kontrolę nad zawartością radia i pozwala w kilka chwil dopasować YoRadio dokładnie do własnych muzycznych preferencji.
W kolejnym kroku przechodzimy do ustawień YoRadio, do których dostaniemy się po kliknięciu ikony zębatki widocznej w prawym górnym rogu webowego panelu. To właśnie tutaj znajduje się centrum zarządzania całym radiem, w którym możemy zmieniać sposób działania urządzenia bez potrzeby ponownego wgrywania oprogramowania czy podłączania ESP32 do komputera. Panel ustawień pozwala na bieżąco dopasować YoRadio do własnych potrzeb, zarówno pod względem zachowania odtwarzania, jak i sposobu prezentowania informacji.
Z poziomu ustawień możemy kontrolować m.in. parametry związane z odtwarzaniem audio, reakcję radia na utratę sygnału, zachowanie po restarcie, a także różne opcje interfejsu webowego. Wszystkie zmiany wprowadzane są w czasie rzeczywistym i po zapisaniu od razu wpływają na działanie radia, co sprawia, że konfiguracja jest szybka, intuicyjna i bardzo wygodna. Webowy panel ustawień to jeden z najmocniejszych elementów YoRadio, bo pozwala traktować projekt nie jak jednorazową konstrukcję, ale jak w pełni konfigurowalne, „żywe” radio internetowe, które możemy stale dostosowywać do swoich preferencji.
Po wejściu w zakładkę SYSTEM trafiamy do najważniejszej części ustawień YoRadio, odpowiadającej za ogólne zachowanie urządzenia, sposób startu oraz podstawowe informacje systemowe. To tutaj decydujemy, jak radio ma się zachowywać po uruchomieniu, jak prezentować dane o strumieniu audio oraz w jaki sposób identyfikować się w sieci lokalnej.
Pierwszą opcją jest Smart Start, która odpowiada za automatyczne uruchamianie ostatnio odtwarzanej stacji po włączeniu zasilania. Włączenie tej funkcji sprawia, że radio „pamięta” ostatni stan i po restarcie samo zaczyna grać, co jest bardzo wygodne w codziennym użytkowaniu, zwłaszcza gdy YoRadio pełni rolę domowego radia grającego w tle.
Kolejna opcja to Audio Info, czyli wyświetlanie informacji o aktualnym strumieniu audio. Po jej włączeniu w interfejsie pojawiają się dane takie jak bitrate, format strumienia czy inne parametry techniczne nadawania. Jest to szczególnie przydatne dla osób, które lubią mieć pełną kontrolę nad jakością odtwarzanego dźwięku i chcą wiedzieć, z jakim strumieniem aktualnie pracuje radio.
Opcja VU meter odpowiada za wizualny wskaźnik poziomu dźwięku. Po jej aktywacji YoRadio wyświetla dynamiczny miernik sygnału audio, który reaguje na aktualnie odtwarzaną muzykę. To czysto wizualny dodatek, ale bardzo efektowny i świetnie pasujący do charakteru tego projektu.
Poniżej znajdują się ustawienia związane z buforowaniem i stabilnością pracy. Pole soft AP reboot delay (min) określa czas, po którym urządzenie może wykonać miękki restart punktu dostępowego, co bywa przydatne w sytuacjach problemów z połączeniem Wi-Fi. Z kolei audio buffer size pozwala regulować wielkość bufora audio, większa wartość może poprawić stabilność odtwarzania przy słabszym połączeniu sieciowym, ale jednocześnie zwiększa opóźnienie. To ustawienie warto zmieniać ostrożnie i testować jego wpływ na działanie radia.
Bardzo istotnym elementem jest pole mDNS name, które definiuje nazwę urządzenia widoczną w sieci lokalnej. Dzięki temu YoRadio może być dostępne nie tylko przez adres IP, ale również poprzez czytelny adres w przeglądarce, np. http://yoradio-xxxxx.local/. Jest to wygodne rozwiązanie, szczególnie gdy adres IP zmienia się w zależności od konfiguracji routera.
Na samym dole sekcji SYSTEM znajdują się przyciski UPDATE – FIRMWARE oraz UPDATE – BOARD. Pozwalają one na aktualizację oprogramowania YoRadio bezpośrednio z poziomu przeglądarki, bez konieczności używania Arduino IDE. To ogromna zaleta projektu, ponieważ umożliwia szybkie aktualizacje, testowanie nowych wersji firmware’u oraz łatwe utrzymanie radia w aktualnej wersji.
Kolejną zakładką w panelu webowym YoRadio jest SCREEN, czyli wszystkie ustawienia związane z zachowaniem i wyglądem wyświetlacza. To tutaj decydujemy, w jaki sposób ekran ma być prezentowany, jak wyświetlana jest playlista oraz kiedy i jak ma działać wygaszacz ekranu.
Na samej górze znajdują się podstawowe opcje orientacji i sposobu wyświetlania treści. Funkcja Flip screen pozwala obrócić obraz na wyświetlaczu o 180°, co jest bardzo przydatne, jeśli moduł TFT został zamontowany „do góry nogami” lub obudowa wymusza inne ułożenie ekranu. Opcja Invert screen odpowiada za odwrócenie kolorów, jasne elementy stają się ciemne i odwrotnie. Może to poprawić czytelność w określonych warunkach oświetleniowych lub po prostu lepiej pasować do stylistyki projektu.
Kolejna opcja to Numbered Playlist, która po włączeniu wyświetla numery przy pozycjach playlisty. Jest to szczególnie wygodne podczas sterowania radiem enkoderem lub przy większej liczbie zapisanych stacji, ponieważ łatwiej zorientować się, która pozycja jest aktualnie wybrana.
Niżej znajduje się sekcja SCREENSAVER, odpowiadająca za wygaszacz ekranu. Ustawienia te pozwalają znacząco ograniczyć zużycie energii oraz wydłużyć żywotność wyświetlacza, szczególnie w przypadku ekranów OLED pracujących przez wiele godzin dziennie.
Opcja while not playing dotyczy sytuacji, gdy radio nie odtwarza żadnej stacji. Możemy zdecydować, czy w takim stanie ekran ma zostać wygaszony blank screen oraz po jakim czasie wartość timeout (sec) określa liczbę sekund bezczynności, po których ekran zostanie wyłączony.
Analogicznie działa sekcja while playing, która odnosi się do momentu, gdy radio normalnie odtwarza muzykę. Również tutaj możemy włączyć lub wyłączyć wygaszanie ekranu oraz ustawić czas timeout (min), czyli po ilu minutach ekran ma się wygasić mimo trwającego odtwarzania. To dobre rozwiązanie, gdy radio gra długo w tle i nie chcemy, aby ekran był stale podświetlony.
Zakładka SCREEN pozwala więc bardzo precyzyjnie dopasować zachowanie wyświetlacza do własnych potrzeb, zarówno pod kątem montażu mechanicznego, estetyki, jak i oszczędzania energii. Dzięki tym opcjom YoRadio może działać jako efektowny panel informacyjny lub dyskretne radio grające w tle, bez zbędnego świecenia ekranu.
Kolejna zakładka w panelu webowym YoRadio to CONTROLS, czyli ustawienia odpowiadające za sposób sterowania radiem, głównie za pomocą enkodera obrotowego. To właśnie tutaj możemy dopasować reakcję urządzenia do własnych preferencji i stylu użytkowania.
Pierwsza opcja to volume steps, która określa, o ile jednostek zmienia się głośność przy jednym „kroku” enkodera. Ustawienie wartości 1 oznacza bardzo precyzyjną regulację, każdy klik enkodera zmienia głośność minimalnie. Jeżeli wolisz szybsze zwiększanie i zmniejszanie głośności, możesz ustawić tutaj wyższą wartość, np. 2 lub 3, kosztem dokładności regulacji.
Kolejne pole to encoder acceleration, czyli przyspieszenie enkodera. Parametr ten decyduje o tym, jak szybko zmieniają się wartości podczas szybkiego obracania pokrętła. Im wyższa wartość, tym większa dynamika zmian przy szybkim ruchu enkodera. Dzięki temu możesz jednocześnie zachować precyzję przy wolnym kręceniu oraz bardzo szybkie przewijanie listy stacji lub regulację głośności przy energicznym obrocie pokrętła. Jest to szczególnie wygodne przy długich playlistach.
Na dole znajduje się opcja one-click station switching. Po jej włączeniu możliwe jest przełączanie stacji radiowych jednym kliknięciem enkodera, bez konieczności wchodzenia w dodatkowe menu. Dla wielu użytkowników jest to bardzo intuicyjne rozwiązanie, które znacznie przyspiesza obsługę radia. Jeżeli jednak wolisz bardziej klasyczny sposób sterowania lub boisz się przypadkowych przełączeń stacji, opcję tę można pozostawić wyłączoną.
Kolejna zakładka w panelu webowym YoRadio to TIMEZONE, czyli ustawienia odpowiadające za poprawną synchronizację czasu w urządzeniu. Jest to szczególnie ważne, jeśli korzystamy z wyświetlania zegara, harmonogramów lub funkcji zależnych od aktualnej godziny.
Na samej górze znajdują się pola hours oraz minutes, które służą do ustawienia przesunięcia strefy czasowej względem czasu UTC. Dla Polski standardowo ustawiamy hours = 1 oraz minutes = 0, co odpowiada strefie CET (UTC+1). W okresie letnim YoRadio może dodatkowo korygować czas automatycznie, jeśli taka funkcja jest wspierana przez konfigurację.
Poniżej widzimy pola ntp server #1 oraz ntp server #2, gdzie podajemy adresy serwerów czasu NTP. Domyślnie ustawiony pool.ntp.org jest w pełni wystarczający i zalecany, ponieważ automatycznie wybiera najbliższe i najbardziej niezawodne serwery czasu. Drugi serwer, np. 1.ru.pool.ntp.org, pełni rolę zapasową, w przypadku problemów z pierwszym źródłem czasu YoRadio spróbuje zsynchronizować się z alternatywnym serwerem.
Kolejna opcja to sync interval (min), czyli interwał synchronizacji czasu wyrażony w minutach. Wartość 60 oznacza, że radio będzie odświeżało czas z serwera NTP raz na godzinę. Jest to bezpieczne i rozsądne ustawienie, które zapewnia dokładny czas bez nadmiernego obciążania sieci Wi-Fi.
Po wprowadzeniu lub zmianie ustawień klikamy przycisk APPLY, aby zapisać konfigurację. Od tego momentu YoRadio będzie korzystało z nowych parametrów synchronizacji czasu.
Zakładka TIMEZONE to niewielki, ale bardzo istotny element konfiguracji, dzięki niej zegar w YoRadio zawsze pokazuje poprawną godzinę, niezależnie od restartów urządzenia czy przerw w zasilaniu.
W kolejnej zakładce WI-FI konfigurujemy połączenie YoRadio z sieciami bezprzewodowymi. Ten panel pozwala zapisać jednocześnie kilka różnych sieci Wi-Fi, dzięki czemu radio może automatycznie łączyć się z dostępną siecią bez potrzeby każdorazowej ręcznej konfiguracji. W polach ssid wpisujemy nazwę sieci bezprzewodowej, a w odpowiadających im polach pass podajemy hasło do danej sieci. Możemy dodać tu zarówno domową sieć Wi-Fi, hotspot z telefonu, jak i inne zapasowe sieci, z których radio będzie mogło skorzystać.
YoRadio podczas uruchamiania próbuje połączyć się z zapisanymi sieciami po kolei, dlatego warto jako pierwszą wpisać tę, z której korzystamy najczęściej. Jeżeli dana sieć nie jest dostępna, radio automatycznie przejdzie do kolejnej zapisanej pozycji, co znacząco zwiększa wygodę użytkowania i niezawodność działania urządzenia, zwłaszcza gdy często zmieniamy lokalizację.
Na dole panelu dostępne są dwa przyciski. EXPORT umożliwia zapisanie konfiguracji sieci Wi-Fi do pliku, co jest bardzo przydatne przy tworzeniu kopii zapasowej lub przenoszeniu ustawień na inne YoRadio. Natomiast przycisk SAVE & REBOOT zapisuje wprowadzone dane w pamięci urządzenia i wykonuje restart radia. Po ponownym uruchomieniu YoRadio automatycznie połączy się z jedną z zapisanych sieci i będzie gotowe do dalszego użytkowania przez przeglądarkę oraz z poziomu samego urządzenia.
W zakładce WEATHER dostępna jest funkcja wyświetlania informacji pogodowych, jednak jest to opcja wymagająca dodatkowej konfiguracji. Aby z niej skorzystać, należy włączyć przełącznik show weather, a następnie podać współrzędne geograficzne swojej lokalizacji, czyli latitude oraz longitude, dzięki którym YoRadio będzie wiedziało, dla jakiego miejsca pobierać dane pogodowe. Konieczne jest również wygenerowanie i wpisanie własnego klucza OpenWeatherMap API, który umożliwia pobieranie aktualnych danych pogodowych z serwisu zewnętrznego, oraz ustawienie interwału synchronizacji, określającego co ile minut informacje mają być odświeżane.
Ponieważ konfiguracja pogody wymaga założenia konta w serwisie OpenWeatherMap, wygenerowania klucza API oraz odpowiedniego doboru parametrów, w tym artykule nie zagłębiamy się w ten temat. Jeżeli będziecie zainteresowani tą funkcją, możemy przygotować osobny wpis krok po kroku, w którym dokładnie pokażemy, jak uruchomić pogodę w YoRadio, skąd pobrać klucz API i jak poprawnie skonfigurować wszystkie ustawienia, aby prognoza działała stabilnie i poprawnie.
Na samym końcu panelu ustawień znajduje się zakładka TOOLS, która skupia funkcje serwisowe i diagnostyczne, przydatne głównie podczas testowania oraz utrzymania stabilnej pracy YoRadio. Opcja Telnet server umożliwia zdalne połączenie z radiem przez protokół Telnet, co może być pomocne przy diagnostyce lub analizie działania systemu w czasie rzeczywistym. Audio watchdog odpowiada za monitorowanie strumienia audio i automatyczne reagowanie w sytuacji, gdy dźwięk przestanie być odtwarzany, na przykład w wyniku zerwania połączenia ze stacją, dzięki temu radio potrafi samo się „podnieść” bez ingerencji użytkownika. Poniżej znajdują się przyciski akcji: reboot, który wykonuje szybki restart urządzenia, format, służący do wyczyszczenia pamięci danych, oraz reset, który przywraca radio do stanu początkowego. Są to narzędzia, z których należy korzystać świadomie, szczególnie opcji format i reset, ponieważ powodują utratę zapisanych konfiguracji. Po zakończeniu zmian i konfiguracji panelu klikamy DONE, co zamyka ustawienia i przenosi nas z powrotem do głównego interfejsu webowego YoRadio.
Podsumowanie
Webowy panel YoRadio daje ogromne możliwości konfiguracji i sprawia, że obsługa radia jest wygodna oraz w pełni dostępna z poziomu przeglądarki internetowej. Możemy w prosty sposób zarządzać playlistą stacji, ustawieniami dźwięku, siecią Wi-Fi, wyglądem ekranu oraz zachowaniem enkodera, bez konieczności ponownego wgrywania oprogramowania. Dzięki temu YoRadio świetnie sprawdza się zarówno jako projekt edukacyjny, jak i codzienne radio internetowe do domu czy warsztatu. To rozwiązanie bardzo elastyczne, które można łatwo dopasować do własnych potrzeb i preferencji. Jeżeli będziecie zainteresowani, w kolejnym artykule możemy opisać dodatkowe możliwości rozbudowy YoRadio. A teraz pozostaje już tylko testować, modyfikować i cieszyć się własnym, w pełni konfigurowalnym radiem internetowym.
Prezentowaną w artykule elektronikę znajdziesz oczywiście w naszym sklepie 👉 sklep.msalamon.pl 👈Zapraszamy również na nasze social media, gdzie na bieżąco informujemy o nowych produktach oraz o najciekawszych promocjach 😎👇
