я правильно понимаю, что в каждом новом браузере будет чекбокс с дисклаймером о пролистывании индульгенции?
сколько у каждого пользователя постоянных браузеров от силы? три? Думаю, можно пережить.
Зато минус нагрузка на Владимира и Павла от пользователей, которые умеют читать.
дождемся реализации этой спамофичи и начнем загибать пальцы)
а если невнимательно прочитал дисклаймер - отключим USB
заметьте, это окно будет вылазить не в основном интерфейсе, а только в момент залезания пользователя в rabbit hole, и то только один раз. Так что я бы не назвал это спамом
Саш, тебе и карты в руки.
Последняя самая свежая ветка (beta 0.3) на гитхабе моя - ppy
Народ!
А просто кнопку перехода на I2S settings можно добавить, без вот этих искусственных интеллектов, дисклеймеров, кукисов и CRM???
Вы чо, медоборудование для сердечников выпускаете? :))
Без проблем, вы только мануал скиньте, а то у меня лиса нет, я очень сильно не в контексте для мануала. Но саму фичу без проблем добавлю. Могу сейчас просто временно создать страничку с “рыбой”
Вы просто не по ту сторону от опыта “разработки” находитесь. Представьте, что разраб делает новые функции, и в этот момент тратит своё свободное время на подключение по “энидеску” к пользователю у которого (сюрприз) неполадки с берегами. Ну если вы готовы обменять отсутствие странички на ожидание новых возможностей и отладки стабильности проекта, то пожалуйста
Павел, например отодвинул Neo3 и тем более Бигль для фокса, о чём это говорит? Ну наверное, о том, что времени на всё не так уж и много.
Тогда PLL by default хотя бы, если Очень Важно Спрятать Настройки.
ещё меня раздражает эргономика вебрадио…
У меня тоже не сразу завелось. Я сделал следующее. Сперва я запустил другое устройство, которое работает в режиме MPD через usb. После подключил лисенка тоже в режиме MPD через usb. Потом подключил цап. На управляющем устройстве я визуально контролировал воспроизведение. На цап идет 5 проводов. Три дата, GND и 5v. Питание на лисенка давал на 38 и 40. Забирал 5v для цапа c 39 контакта. Провода использовал около 10см.
Есть такое дело…
У нас в поле “рендереров” 4 типа кнопок:
- Кнопки “прямого действия” - NAA, RAAT, AirPlay и т.д. - это те кнопки, которую просто нажал и получил результат незамедлительно.
- Кнопки “прямого действия с настройками” - APRenderer, APScream - получил результат, но вместе с результатом нужно получать доступ к настройкам, но только, когда кнопка нажата.
- Кнопка MPD (отдельный разговор) - с одной стороны “прямого действия”, но когда нажата, должен быть доступ к запуску “радио” - концептуально, как с “настройками” выше.
- Кнопка Aplayer - т.к. файлы не планируем проигрывать, нужно сразу запускать веб-интерфейс Аплеера (+ определиться, что делать с его настройками).
Все это нужно как-то зонировать на веб-морде)), чтобы было интуитивно
CSS vertical Tabs
ИИ же есть…
вот пример более или менее юзабилити по типам кнопок.
вставьте в html файл и запустите:
Спойлер
Выбор режима работы<div class="max-w-lg mx-auto bg-white shadow-lg rounded-lg p-6 space-y-6">
<h2 class="text-xl font-bold text-gray-800">Выбор режима работы</h2>
<!-- Кнопки прямого действия -->
<div>
<h3 class="font-semibold text-gray-700">Прямое действие</h3>
<div class="flex space-x-2 mt-2">
<button class="mode-btn px-4 py-2 bg-blue-500 text-white rounded-lg" data-mode="NAA">NAA</button>
<button class="mode-btn px-4 py-2 bg-blue-500 text-white rounded-lg" data-mode="RAAT">RAAT</button>
<button class="mode-btn px-4 py-2 bg-blue-500 text-white rounded-lg" data-mode="AirPlay">AirPlay</button>
</div>
</div>
<!-- Кнопки с настройками -->
<div>
<h3 class="font-semibold text-gray-700">Прямое действие с настройками</h3>
<div class="space-y-2 mt-2">
<div>
<button class="mode-btn px-4 py-2 bg-green-500 text-white rounded-lg" data-mode="APRenderer" onclick="toggleSettings('aprenderer-settings')">APRenderer</button>
<div id="aprenderer-settings" class="hidden mt-2 p-2 bg-gray-200 rounded">
<label class="text-sm">Настройки APR: <input type="text" class="border p-1"></label>
</div>
</div>
<div>
<button class="mode-btn px-4 py-2 bg-green-500 text-white rounded-lg" data-mode="APScream" onclick="toggleSettings('apscream-settings')">APScream</button>
<div id="apscream-settings" class="hidden mt-2 p-2 bg-gray-200 rounded">
<label class="text-sm">Настройки APS: <input type="text" class="border p-1"></label>
</div>
</div>
</div>
</div>
<!-- MPD кнопка -->
<div>
<h3 class="font-semibold text-gray-700">MPD (особый режим)</h3>
<button class="mode-btn px-4 py-2 bg-yellow-500 text-white rounded-lg" data-mode="MPD" onclick="toggleSettings('mpd-radio')">MPD</button>
<div id="mpd-radio" class="hidden mt-2 p-2 bg-gray-200 rounded">
<button class="px-4 py-2 bg-red-500 text-white rounded-lg">Запустить радио</button>
</div>
</div>
<!-- APlayer -->
<div>
<h3 class="font-semibold text-gray-700">APlayer</h3>
<button class="mode-btn px-4 py-2 bg-purple-500 text-white rounded-lg" data-mode="APlayer" onclick="openAPlayer()">Открыть APlayer</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
let lastMode = localStorage.getItem("selectedMode");
if (lastMode) {
highlightButton(lastMode);
}
});
function toggleSettings(id) {
let elem = document.getElementById(id);
elem.classList.toggle('hidden');
}
function openAPlayer() {
window.open("http://aplayer.local", "_blank");
}
function highlightButton(mode) {
document.querySelectorAll(".mode-btn").forEach(btn => {
if (btn.dataset.mode === mode) {
btn.classList.add("ring-4", "ring-indigo-500");
} else {
btn.classList.remove("ring-4", "ring-indigo-500");
}
});
}
document.querySelectorAll(".mode-btn").forEach(button => {
button.addEventListener("click", function () {
let mode = this.dataset.mode;
localStorage.setItem("selectedMode", mode);
highlightButton(mode);
});
});
</script>
Тут вопрос в концепции - как будет понимание запрограммировать не сложно.
Короче нужно пользовательские сценарии расписать…
Кто возьмется? ))
Вот поднял переполох.
Всё было хорошо. Одну кнопку. Бы. Куда. Угодно. )
код:
Спойлер
Выбор режима работы<div class="flex bg-white shadow-lg rounded-lg overflow-hidden w-2/3 h-[500px]">
<!-- Вертикальное меню -->
<div class="flex flex-col w-1/4 border-r bg-gray-50 p-4 space-y-2">
<h3 class="text-gray-600 text-sm font-semibold">Прямое действие</h3>
<button class="tab-btn" data-tab="direct-1">🎯 NAA</button>
<button class="tab-btn" data-tab="direct-2">🎯 RAAT</button>
<button class="tab-btn" data-tab="direct-3">🎯 AirPlay</button>
<h3 class="text-gray-600 text-sm font-semibold mt-4">С настройками</h3>
<button class="tab-btn" data-tab="settings-1">⚙️ APRenderer</button>
<button class="tab-btn" data-tab="settings-2">⚙️ APScream</button>
<h3 class="text-gray-600 text-sm font-semibold mt-4">Особый режим</h3>
<button class="tab-btn" data-tab="mpd">📻 MPD</button>
<h3 class="text-gray-600 text-sm font-semibold mt-4">APlayer</h3>
<button class="tab-btn" data-tab="aplayer">🎵 APlayer</button>
</div>
<!-- Контент -->
<div class="w-3/4 p-6">
<div id="content-direct-1" class="tab-content">Выбран тип: NAA</div>
<div id="content-direct-2" class="tab-content hidden">Выбран тип: RAAT</div>
<div id="content-direct-3" class="tab-content hidden">Выбран тип: AirPlay</div>
<div id="content-settings-1" class="tab-content hidden">
<h2 class="text-xl font-bold">Настройки APRenderer</h2>
<label class="block mt-4">Громкость: <input type="range" class="w-full"></label>
</div>
<div id="content-settings-2" class="tab-content hidden">
<h2 class="text-xl font-bold">Настройки APScream</h2>
<label class="block mt-4">Частота: <input type="text" class="border p-1"></label>
</div>
<div id="content-mpd" class="tab-content hidden">
<h2 class="text-xl font-bold">MPD</h2>
<button class="mode-btn bg-red-500">📻 Запустить радио</button>
</div>
<div id="content-aplayer" class="tab-content hidden">
<h2 class="text-xl font-bold">🎵 APlayer запускается...</h2>
<script>window.open("http://aplayer.local", "_blank");</script>
</div>
</div>
</div>
<script>
document.querySelectorAll('.tab-btn').forEach(button => {
button.addEventListener('click', function () {
let tab = this.dataset.tab;
// Удаляем активный класс у всех кнопок
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('bg-blue-500', 'text-white');
btn.classList.add('bg-gray-200', 'text-black');
});
// Добавляем активный класс к нажатой кнопке
this.classList.add('bg-blue-500', 'text-white');
// Скрываем весь контент
document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
// Показываем нужный блок
document.getElementById('content-' + tab).classList.remove('hidden');
});
});
</script>
<style>
.tab-btn {
padding: 10px;
border-radius: 6px;
background-color: #e5e7eb;
text-align: left;
font-weight: bold;
transition: 0.3s;
}
.tab-btn:hover {
background-color: #d1d5db;
}
.mode-btn {
padding: 10px 16px;
background-color: #3b82f6;
color: white;
border-radius: 6px;
font-weight: bold;
transition: 0.3s;
}
.mode-btn:hover {
background-color: #2563eb;
}
</style>
Это концепция.
данный чип es9018 подключил к лисенку напрямую. в режиме pll . замечательно поет. прошивка v3.




