sirmrak/my_speaker_RPi3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
sirmrak
2025-12-25 12:01:35 +03:00
commit c574533f63
85 changed files with 6027 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/PAGE_LAYOUTS.md
+284
View File
@@ -0,0 +1,284 @@
# Макеты страниц веб-приложения My Speaker
Ниже представлены псевдографические макеты страниц приложения My Speaker в стиле ретро-игры (8-bit, шрифт "Press Start 2P", зеленая гамма `#0f0` на темном фоне). Макеты созданы для альбомной ориентации десктопных экранов и адаптивной верстки для мобильных устройств. Структура главного экрана включает:
1. **Шапка**: Верхняя панель (`header.html`) с именем пользователя и кнопкой выхода, навигационная панель (`nav.html`) с переключением разделов.
2. **Основной экран**:
- **Левая часть (Main Parameters)**: 40% ширины, постоянно отображает статус системы, индикаторы речи/энергии и системную статистику (`main-params.html`).
- **Правая часть (Контент)**: 60% ширины, динамически подгружает `graphics.html`, `settings.html`, `commands.html`.
3. **Футер**: Логи с последними распознанными фразами (`footer.html`).
Страница авторизации (`login.html`) отображается отдельно, без шапки, навигации и футера.
## 1. Страница авторизации (`login.html`)
**Описание**: Экран входа в стиле игрового меню с пиксельной рамкой. Содержит форму для логина (`PLAYER NAME`) и пароля (`SECRET CODE`), кнопку `[ START ]`, сообщение об ошибке (в красном цвете) и настройки интерфейса (цвет, URL бэкенда), открываемые по кнопке `[⚙️ Settings]`.
### Десктопная версия
```
+--------------------------------------------------+
| |
| == MY SPEAKER LOGIN == |
| |
| +-----------------------------+ |
| | PLAYER NAME: [==========] | |
| | SECRET CODE: [==========] | |
| | [ START ] | |
| +-----------------------------+ |
| [ ERROR: Invalid login ] |
| Default: admin / admin |
| |
| [⚙️ Settings] |
| +-----------------------------+ |
| | Main Color: [####] | |
| | Backend URL: [==========] | |
| +-----------------------------+ |
| |
+--------------------------------------------------+
```
### Мобильная версия
```
+---------------------+
| |
| == MY SPEAKER LOGIN ==
| |
| +-----------------+ |
| | PLAYER NAME: | |
| | [============] | |
| | SECRET CODE: | |
| | [============] | |
| | [ START ] | |
| +-----------------+ |
| [ ERROR: Invalid ] |
| Default: admin/admin|
| |
| [⚙️ Settings] |
| +-----------------+ |
| | Main Color: [##]| |
| | Backend: [====] | |
| +-----------------+ |
| |
+---------------------+
```
**Пояснения**:
- **Десктоп**: Форма центрирована, занимает ~30-40% ширины для альбомной ориентации. Пиксельная рамка (`+---+`) и ретро-стиль.
- **Мобильный**: Форма растягивается на всю ширину, поля ввода и кнопка увеличены.
- **Адаптивность**: Элементы масштабируются, текст остается читаемым.
## 2. Главный экран с `graphics.html`
**Описание**: Главный экран с `graphics.html` в правой части (60%). Левая часть (40%) показывает статус системы, индикаторы речи/энергии и статистику (`main-params.html`). Футер отображает последние фразы (`footer.html`).
### Десктопная версия
```
+--------------------------------------------------+
| User: admin [ Logout ] |
+--------------------------------------------------+
| [ Dashboard | Settings | Commands ] |
+--------------------------------------------------+
| +--------------------+ +--------------------------+
| | MAIN PARAMETERS | | SPEACH |
| | | | |
| | Status: Listening | | ^
| | [============] 85% | | * |
| | | | | * |
| | Speech Prob: [===] | | | * |
| | Energy: [==] | | +-------------------+
| | | | Time |
| | CPU: 25% | | |
| | MEM: 40% | | |
| | TEMP: 45°C | | |
| +--------------------+ +--------------------------+
+--------------------------------------------------+
| == RECENT PHRASES == |
| +---------------------------------------------+ |
| | "Turn on light" "What's the weather" | |
| +---------------------------------------------+ |
+--------------------------------------------------+
```
### Мобильная версия
```
+---------------------+
| User: admin [Logout]|
+---------------------+
| [Dash|Sett|Commands]|
+---------------------+
| == MAIN PARAMETERS ==
| Status: Listening |
| [===========] 85% |
| Speech Prob: [====] |
| Energy: [==] 1200 |
| CPU: 25% |
| MEM: 40% |
| TEMP: 45°C |
| == GRAPHICS == |
| ^ * |
| | * |
| | * |
| | * |
| +-----------------+
| Time |
| == RECENT PHRASES ==
| "Turn on light" |
| "What's the weather|
+---------------------+
```
**Пояснения**:
- **Десктоп**: Шапка и навигация во всю ширину. Левая часть (40%) с индикаторами и статистикой, правая (60%) с линейным графиком (`speech_prob`, `energy`). Футер с фразами.
- **Мобильный**: Карточки располагаются вертикально, график уменьшен.
- **Адаптивность**: Альбомная ориентация на десктопе использует ширину экрана, на мобильных — вертикальная компоновка.
## 3. Главный экран с `settings.html`
**Описание**: Правая часть (60%) подгружает `settings.html` с раскрывающимися формами для настройки VAD, системных параметров и т.д. Левая часть и футер неизменны.
### Десктопная версия
```
+--------------------------------------------------+
| User: admin [ Logout ] |
+--------------------------------------------------+
| [ Dashboard | Settings | Commands ] |
+--------------------------------------------------+
| +--------------------+ +--------------------------+
| | MAIN PARAMETERS | | SETTINGS |
| | | | |
| | Status: Listening | | + VAD Settings v |
| | [============] 85% | | +---------------------+ |
| | | | | Mode: [0-3] | |
| | Speech Prob: [===] | | | Speech Thr: [====] | |
| | Energy: [==] | | | Energy Thr: [####] | |
| | | | | [ SAVE ] | |
| | CPU: 25% | | +---------------------+ |
| | MEM: 40% | | - System Settings |
| | TEMP: 45°C | | [ REBOOT ] |
| +--------------------+ +--------------------------+
+--------------------------------------------------+
| == RECENT PHRASES == |
| +---------------------------------------------+ |
| | "Turn on light" "What's the weather" | |
| +---------------------------------------------+ |
+--------------------------------------------------+
```
### Мобильная версия
```
+---------------------+
| User: admin [Logout]|
+---------------------+
| [Dash|Sett|Commands]|
+---------------------+
| == MAIN PARAMETERS ==
| Status: Listening |
| [===========] 85% |
| Speech Prob: [====] |
| Energy: [==] 1200 |
| CPU: 25% |
| MEM: 40% |
| TEMP: 45°C |
| == SETTINGS == |
| + VAD Settings v |
| +-----------------+ |
| | Mode: [0-3] | |
| | Speech Thr: [==]| |
| | Energy Thr: [##]| |
| | [ SAVE ] | |
| +-----------------+ |
| - System Settings |
| [ REBOOT ] |
| == RECENT PHRASES ==
| "Turn on light" |
| "What's the weather|
+---------------------+
```
**Пояснения**:
- **Десктоп**: Правая часть показывает формы (`<details>`), например, VAD с выпадающим списком и ползунком. Кнопка `[ REBOOT ]` внизу.
- **Мобильный**: Формы растягиваются на всю ширину, поля ввода увеличены.
- **Адаптивность**: Элементы управления масштабируются, формы сворачиваются/разворачиваются.
## 4. Главный экран с `commands.html`
**Описание**: Правая часть (60%) подгружает `commands.html` с минимальной реализацией (путь к файлу команд и список). Левая часть и футер неизменны.
### Десктопная версия
```
+--------------------------------------------------+
| User: admin [ Logout ] |
+--------------------------------------------------+
| [ Dashboard | Settings | Commands ] |
+--------------------------------------------------+
| +--------------------+ +--------------------------+
| | MAIN PARAMETERS | | COMMANDS |
| | | | |
| | Status: Listening | | Commands File: [file] |
| | [============] 85% | | [ EDIT ] [ SAVE ] |
| | | | |
| | Speech Prob: [===] | | "Turn on light" |
| | Energy: [==] | | "Play music" |
| | | | |
| | CPU: 25% | | |
| | MEM: 40% | | |
| | TEMP: 45°C | | |
| +--------------------+ +--------------------------+
+--------------------------------------------------+
| == RECENT PHRASES == |
| +---------------------------------------------+ |
| | "Turn on light" "What's the weather" | |
| +---------------------------------------------+ |
+--------------------------------------------------+
```
### Мобильная версия
```
+---------------------+
| User: admin [Logout]|
+---------------------+
| [Dash|Sett|Commands]|
+---------------------+
| == MAIN PARAMETERS ==
| Status: Listening |
| [===========] 85% |
| Speech Prob: [====] |
| Energy: [==] 1200 |
| CPU: 25% |
| MEM: 40% |
| TEMP: 45°C |
| == COMMANDS == |
| Commands File: [f] |
| [ EDIT ] [ SAVE ] |
| "Turn on light" |
| "Play music" |
| == RECENT PHRASES ==
| "Turn on light" |
| "What's the weather|
+---------------------+
```
**Пояснения**:
- **Десктоп**: Правая часть показывает поле для `commands_file` и список команд. Кнопки `[ EDIT ]` и `[ SAVE ]` для редактирования.
- **Мобильный**: Элементы растягиваются на всю ширину, список команд вертикальный.
- **Адаптивность**: Компактное расположение, текст читаемый.
## Пояснения к макетам
- **Ретро-стиль**: Используются символы `+`, `=`, `*` для пиксельных рамок и индикаторов, отражая 8-bit эстетику и зеленую гамму (`#0f0`).
- **Альбомная ориентация**: Десктопные макеты оптимизированы для широкого экрана, с разделением на 40% (Main Parameters) и 60% (контент).
- **Адаптивность**: Мобильные макеты используют вертикальное расположение, избегая горизонтальной прокрутки, как указано в `FRONTEND_REQUIREMENTS.md`.
- **Структура**: Шапка, основной экран (две карточки) и футер соответствуют запросу. Страница авторизации отдельная.
- **Функциональность**: Макеты включают все элементы из требований (индикаторы, графики, формы, логи).