Luckfox Pico Max (Ultra) - endpoint с внешними клоками на Rockchip RV1106

я правильно понимаю, что в каждом новом браузере будет чекбокс с дисклаймером о пролистывании индульгенции?

1 лайк

сколько у каждого пользователя постоянных браузеров от силы? три? Думаю, можно пережить.

3 лайка

Зато минус нагрузка на Владимира и Павла от пользователей, которые умеют читать.

1 лайк

дождемся реализации этой спамофичи и начнем загибать пальцы)
а если невнимательно прочитал дисклаймер - отключим USB

2 лайка

заметьте, это окно будет вылазить не в основном интерфейсе, а только в момент залезания пользователя в rabbit hole, и то только один раз. Так что я бы не назвал это спамом

2 лайка

Саш, тебе и карты в руки.
Последняя самая свежая ветка (beta 0.3) на гитхабе моя - ppy

1 лайк

Народ!

А просто кнопку перехода на I2S settings можно добавить, без вот этих искусственных интеллектов, дисклеймеров, кукисов и CRM???

Вы чо, медоборудование для сердечников выпускаете? :))

Без проблем, вы только мануал скиньте, а то у меня лиса нет, я очень сильно не в контексте для мануала. Но саму фичу без проблем добавлю. Могу сейчас просто временно создать страничку с “рыбой”

1 лайк

Вы просто не по ту сторону от опыта “разработки” находитесь. Представьте, что разраб делает новые функции, и в этот момент тратит своё свободное время на подключение по “энидеску” к пользователю у которого (сюрприз) неполадки с берегами. Ну если вы готовы обменять отсутствие странички на ожидание новых возможностей и отладки стабильности проекта, то пожалуйста :slight_smile: Павел, например отодвинул Neo3 и тем более Бигль для фокса, о чём это говорит? Ну наверное, о том, что времени на всё не так уж и много.

1 лайк

Тогда PLL by default хотя бы, если Очень Важно Спрятать Настройки.

ещё меня раздражает эргономика вебрадио…

1 лайк

У меня тоже не сразу завелось. Я сделал следующее. Сперва я запустил другое устройство, которое работает в режиме MPD через usb. После подключил лисенка тоже в режиме MPD через usb. Потом подключил цап. На управляющем устройстве я визуально контролировал воспроизведение. На цап идет 5 проводов. Три дата, GND и 5v. Питание на лисенка давал на 38 и 40. Забирал 5v для цапа c 39 контакта. Провода использовал около 10см.

Есть такое дело…
У нас в поле “рендереров” 4 типа кнопок:

  1. Кнопки “прямого действия” - NAA, RAAT, AirPlay и т.д. - это те кнопки, которую просто нажал и получил результат незамедлительно.
  2. Кнопки “прямого действия с настройками” - APRenderer, APScream - получил результат, но вместе с результатом нужно получать доступ к настройкам, но только, когда кнопка нажата.
  3. Кнопка MPD (отдельный разговор) - с одной стороны “прямого действия”, но когда нажата, должен быть доступ к запуску “радио” - концептуально, как с “настройками” выше.
  4. Кнопка Aplayer - т.к. файлы не планируем проигрывать, нужно сразу запускать веб-интерфейс Аплеера (+ определиться, что делать с его настройками).

Все это нужно как-то зонировать на веб-морде)), чтобы было интуитивно

2 лайка

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>

Тут вопрос в концепции - как будет понимание запрограммировать не сложно.
Короче нужно пользовательские сценарии расписать…
Кто возьмется? ))

1 лайк

Вот поднял переполох.

Всё было хорошо. Одну кнопку. Бы. Куда. Угодно. )

По структуре, нужно что-то такое, если я всё правильно понял:

11 лайков




код:

Спойлер Выбор режима работы
<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.