# Проект на потребителски интерфейс ## Система за разпознаване на автомобилни номера от видеокамери ### 1. Общ преглед на интерфейса Потребителският интерфейс на системата е проектиран като уеб базирано приложение с responsive дизайн, което позволява достъп от различни устройства - компютри, таблети и мобилни телефони. Интерфейсът е организиран в логически секции, които отговарят на основните функционалности на системата. Навигацията е интуитивна и позволява бърз достъп до всички функции според правата на потребителя. ### 2. Структура на интерфейса #### 2.1. Основни елементи - **Хедър (горна лента)** - съдържа лого на системата, име на текущия потребител, бутон за известия, бутон за настройки на профила и бутон за изход от системата. - **Основно меню** - разположено в лявата част на екрана, съдържа връзки към основните секции на системата. - **Работна област** - централната част на екрана, където се показва съдържанието на избраната секция. - **Футър** - долна лента с информация за версията на системата, връзка към документация и контакти за поддръжка. #### 2.2. Основно меню Основното меню съдържа следните секции: 1. **Табло (Dashboard)** - обобщена информация и статистика 2. **Камери и потоци** - управление на камери и видео потоци 3. **Разпознати номера** - преглед и търсене на разпознати регистрационни номера 4. **Бял списък** - управление на белия списък с регистрационни номера 5. **Черен списък** - управление на черния списък с регистрационни номера 6. **Известия** - преглед на всички известия в системата 7. **Отчети** - генериране и експорт на различни справки 8. **Потребители** - управление на потребителски акаунти (видимо само за администратори) 9. **Настройки** - системни настройки (видимо само за администратори) ### 3. Детайлно описание на екраните #### 3.1. Табло (Dashboard) Таблото предоставя обобщена информация за системата и включва: - **Статистика за деня** - брой разпознати номера, брой засечени номера от черния списък, брой активни камери - **Графика** - визуализация на активността по часове за последните 24 часа - **Последни разпознати номера** - списък с последните 10 разпознати номера с миниатюрни изображения - **Последни известия** - списък с последните 5 известия от системата - **Статус на камерите** - обобщена информация за активните и неактивните камери Дизайнът на таблото използва карти (cards) за представяне на различните секции, което позволява лесно преподреждане и персонализация. #### 3.2. Камери и потоци Секцията за управление на камери и потоци е организирана в два основни изгледа: ##### 3.2.1. Списък с камери - Табличен изглед с колони: ID, Име, Локация, Статус, Брой потоци, Последно активна, Действия - Бутон "Добави нова камера" в горната част на екрана - Филтри за търсене по име, локация и статус - Възможност за сортиране по различни колони - Бутони за действия: Редактиране, Деактивиране/Активиране, Изтриване, Преглед на потоци ##### 3.2.2. Добавяне/Редактиране на камера Формуляр с полета: - Име на камерата (задължително) - Локация (задължително) - Описание - IP адрес - Модел - Производител - Статус (активна/неактивна) - Бутони: Запази, Отказ ##### 3.2.3. Управление на потоци за камера - Табличен изглед с потоците за избрана камера - Колони: ID, Име, URL, Протокол, Резолюция, FPS, Статус, Действия - Бутон "Добави нов поток" в горната част на екрана - Бутони за действия: Редактиране, Деактивиране/Активиране, Изтриване, Преглед на живо ##### 3.2.4. Добавяне/Редактиране на поток Формуляр с полета: - Име на потока (задължително) - URL (задължително) - Протокол (падащо меню: RTSP, HTTP, HTTPS, MJPEG, HLS, OTHER) - Резолюция - FPS (кадри в секунда) - Статус (активен/неактивен) - Бутони: Запази, Отказ, Тествай връзка ##### 3.2.5. Преглед на живо - Видео плейър, показващ текущия поток от избраната камера - Информация за камерата и потока - Бутони за управление на видеото (пауза, възобновяване, пълен екран) - Индикатор за качеството на връзката - Опция за запис на кадър от видеото #### 3.3. Разпознати номера Секцията за преглед на разпознати номера включва: ##### 3.3.1. Списък с разпознати номера - Табличен изглед с колони: ID, Регистрационен номер, Камера, Дата и час, Увереност (%), Статус (бял/черен списък), Действия - Разширени филтри в горната част на екрана: - Период от-до - Регистрационен номер (с възможност за частично съвпадение) - Камера - Статус (всички, бял списък, черен списък) - Бутони за експорт: PDF, Excel, CSV - Бутони за действия: Преглед на детайли, Добави в бял списък, Добави в черен списък ##### 3.3.2. Детайли за разпознат номер - Голямо изображение на превозното средство - Изрязано изображение на регистрационния номер - Информация: Регистрационен номер, Дата и час, Камера, Локация, Увереност на разпознаване - Статус (бял/черен списък) - История на предишни засичания на същия номер (ако има) - Бутони: Добави в бял списък, Добави в черен списък, Редактирай номер (при грешно разпознаване), Назад #### 3.4. Бял списък Секцията за управление на белия списък включва: ##### 3.4.1. Списък с номера в белия списък - Табличен изглед с колони: ID, Регистрационен номер, Описание, Валиден от, Валиден до, Създаден от, Действия - Филтри за търсене по номер, период на валидност - Бутон "Добави нов номер" в горната част на екрана - Бутон "Импортирай от CSV" в горната част на екрана - Бутони за експорт: PDF, Excel, CSV - Бутони за действия: Редактиране, Изтриване, История на засичанията ##### 3.4.2. Добавяне/Редактиране на номер в белия списък Формуляр с полета: - Регистрационен номер (задължително) - Описание - Валиден от (дата и час, задължително) - Валиден до (дата и час, незадължително) - Бутони: Запази, Отказ ##### 3.4.3. Импортиране от CSV - Инструкции за формата на CSV файла - Поле за качване на файл - Опция за предварителен преглед на данните - Бутони: Импортирай, Отказ #### 3.5. Черен списък Секцията за управление на черния списък е подобна на тази за белия списък, но с някои допълнения: ##### 3.5.1. Списък с номера в черния списък - Табличен изглед с колони: ID, Регистрационен номер, Причина, Ниво на алерта, Валиден от, Валиден до, Създаден от, Действия - Филтри за търсене по номер, ниво на алерта, период на валидност - Бутон "Добави нов номер" в горната част на екрана - Бутон "Импортирай от CSV" в горната част на екрана - Бутони за експорт: PDF, Excel, CSV - Бутони за действия: Редактиране, Изтриване, История на засичанията ##### 3.5.2. Добавяне/Редактиране на номер в черния списък Формуляр с полета: - Регистрационен номер (задължително) - Причина (задължително) - Ниво на алерта (падащо меню: Ниско, Средно, Високо, Критично) - Валиден от (дата и час, задължително) - Валиден до (дата и час, незадължително) - Бутони: Запази, Отказ #### 3.6. Известия Секцията за известия включва: ##### 3.6.1. Списък с известия - Табличен изглед с колони: ID, Тип, Заглавие, Дата и час, Статус (прочетено/непрочетено), Действия - Филтри за търсене по тип, период, статус - Бутон "Маркирай всички като прочетени" в горната част на екрана - Бутони за действия: Преглед на детайли, Маркирай като прочетено/непрочетено, Изтриване ##### 3.6.2. Детайли за известие - Пълен текст на известието - Информация за свързания регистрационен номер (ако има) - Изображение на превозното средство (ако има) - Дата и час на създаване - Бутони: Маркирай като прочетено/непрочетено, Изтриване, Назад #### 3.7. Отчети Секцията за отчети включва: ##### 3.7.1. Генериране на отчет Формуляр с опции: - Тип на отчета (падащо меню: Всички разпознавания, Засичания от черен списък, Активност по камери, Статистика) - Период от-до (задължително) - Допълнителни филтри според типа на отчета (камери, регистрационни номера и т.н.) - Формат на експорт (PDF, Excel) - Бутони: Генерирай, Отказ ##### 3.7.2. Списък с генерирани отчети - Табличен изглед с колони: ID, Тип, Период, Формат, Дата на създаване, Създаден от, Действия - Филтри за търсене по тип, период, формат - Бутони за действия: Изтегляне, Изтриване #### 3.8. Потребители Секцията за управление на потребители (достъпна само за администратори) включва: ##### 3.8.1. Списък с потребители - Табличен изглед с колони: ID, Потребителско име, Име и фамилия, Имейл, Роля, Статус, Последно влизане, Действия - Филтри за търсене по име, имейл, роля, статус - Бутон "Добави нов потребител" в горната част на екрана - Бутони за действия: Редактиране, Деактивиране/Активиране, Изтриване, Преглед на активност ##### 3.8.2. Добавяне/Редактиране на потребител Формуляр с полета: - Потребителско име (задължително) - Парола (задължително при създаване, опционално при редактиране) - Повтори парола - Имейл (задължително) - Име (задължително) - Фамилия (задължително) - Телефон - Роля (падащо меню: Администратор, Оператор, Наблюдател) - Статус (активен/неактивен) - Настройки за известяване (чекбоксове за различните типове известия) - Бутони: Запази, Отказ ##### 3.8.3. Преглед на активност на потребител - Табличен изглед с колони: Дата и час, Действие, IP адрес, User Agent - Филтри за търсене по период, действие - Бутон за експорт на лог файл #### 3.9. Настройки Секцията за системни настройки (достъпна само за администратори) включва: ##### 3.9.1. Общи настройки Формуляр с полета: - Име на системата - Език по подразбиране (падащо меню) - Праг на увереност при разпознаване (%) - Период на съхранение на данни (дни) - Максимален брой известия за ден - Бутони: Запази, Отказ ##### 3.9.2. Настройки за известяване Формуляр с полета: - Настройки за имейл известия (SMTP сървър, порт, потребителско име, парола) - Настройки за SMS известия (API ключ, URL) - Шаблони за известия (за различните типове известия) - Бутони: Запази, Отказ, Тествай настройките ##### 3.9.3. Настройки за разпознаване Формуляр с полета: - Регион (държава) за разпознаване на номера - Формат на номерата - Допълнителни параметри за алгоритъма за разпознаване - Бутони: Запази, Отказ ##### 3.9.4. Архивиране и възстановяване - Опции за създаване на архив на базата данни - Опции за възстановяване от архив - Настройки за автоматично архивиране (честота, път за съхранение) - Бутони: Създай архив, Възстанови от архив, Запази настройките ### 4. Responsive дизайн Интерфейсът е проектиран да бъде responsive и да се адаптира към различни размери на екрана: #### 4.1. Десктоп версия (>= 1200px) - Пълно странично меню - Таблици с всички колони - Многоколонен изглед на таблото #### 4.2. Таблет версия (768px - 1199px) - Свиваемо странично меню - Таблици с по-малко колони (някои колони се скриват) - Двуколонен изглед на таблото #### 4.3. Мобилна версия (< 768px) - Меню тип "хамбургер" - Таблици с минимален брой колони и опция за хоризонтално скролиране - Едноколонен изглед на таблото - Опростени формуляри с вертикално подреждане на полетата ### 5. Цветова схема и стилове #### 5.1. Основни цветове - Първичен цвят: #2c3e50 (тъмно синьо) - Вторичен цвят: #3498db (светло синьо) - Акцентен цвят: #e74c3c (червено) - Фон: #f5f5f5 (светло сиво) - Текст: #333333 (тъмно сиво) #### 5.2. Статусни цветове - Успех: #2ecc71 (зелено) - Предупреждение: #f39c12 (оранжево) - Грешка: #e74c3c (червено) - Информация: #3498db (светло синьо) #### 5.3. Типография - Основен шрифт: Roboto - Заглавия: Roboto Condensed - Размери на шрифта: - Основен текст: 14px - Заглавия: 18px - 24px - Малък текст: 12px ### 6. Компоненти на интерфейса #### 6.1. Бутони - Първични бутони: запълнени с първичния цвят - Вторични бутони: контур с първичния цвят - Бутони за действие: запълнени с акцентния цвят - Бутони за отказ: сиви #### 6.2. Форми - Ясно обозначени задължителни полета - Валидация на формите в реално време - Подсказки и помощни текстове под полетата - Групиране на свързани полета #### 6.3. Таблици - Редуващи се цветове на редовете за по-добра четимост - Фиксирани хедъри при скролиране - Пагинация с опции за брой елементи на страница - Сортиране чрез кликване върху хедърите на колоните #### 6.4. Известия и съобщения - Изскачащи съобщения за успех, грешка, предупреждение - Индикатор за зареждане при по-дълги операции - Модални диалози за потвърждение на важни действия ### 7. Навигация и потребителско изживяване #### 7.1. Навигация - Ясно обозначена текуща секция в менюто - Breadcrumbs за показване на текущия път - Бързи връзки към често използвани функции - Клавишни комбинации за основни действия #### 7.2. Потребителско изживяване - Запомняне на последно използваните филтри и настройки - Автоматично запазване на формуляри при попълване - Предупреждение при напускане на страница с незапазени промени - Персонализируеми изгледи и подредба на таблото ### 8. Достъпност - Висок контраст между текст и фон - Достатъчно големи кликаеми елементи - Алтернативен текст за всички изображения - Поддръжка на клавиатурна навигация - Съвместимост с екранни четци ### 9. Сигурност на интерфейса - Автоматично излизане при неактивност - Защита срещу CSRF атаки - Валидация на всички входни данни - Ограничаване на видимостта на елементите според правата на потребителя - Криптиране на чувствителни данни при предаване ### 10. Примерни екрани #### 10.1. Табло (Dashboard) ``` +---------------------------------------------------------------+ | Лого Система за разпознаване на номера Потребител Изход | +---------------------------------------------------------------+ | | | | Табло | Статистика за деня | | | +----------------+ +----------------+ +------------+ | | Камери | | Разпознати | | Черен списък | | Активни | | | | | номера: 1,234 | | засечени: 12 | | камери: 8 | | | Номера | +----------------+ +----------------+ +------------+ | | | | | Бял | Активност по часове | | списък | +--------------------------------------------------+ | | | | | | | Черен | | | | | списък | | | | | | +--------------------------------------------------+ | | Известия| | | | Последни разпознати номера | | Отчети | +--------------------------------------------------+ | | | | CA1234BT | 10:23 | Камера 1 | Бял списък | | | Потреб.| | B5678CD | 10:21 | Камера 2 | | | | | | A9012EF | 10:18 | Камера 1 | Черен списък | | | Настр. | | ... | | | | +--------------------------------------------------+ | +---------------------------------------------------------------+ ``` #### 10.2. Списък с камери ``` +---------------------------------------------------------------+ | Лого Система за разпознаване на номера Потребител Изход | +---------------------------------------------------------------+ | | | | Табло | Камери | | | | | Камери | [Добави нова камера] | | | | | Номера | Търсене: [____________] [Филтър ▼] | | | | | Бял | +--------------------------------------------------+ | | списък | | ID | Име | Локация | Статус | Действия | | | | +--------------------------------------------------+ | | Черен | | 1 | Камера 1 | Вход | Активна| [Ред][Изт] | | | списък | | 2 | Камера 2 | Паркинг | Активна| [Ред][Изт] | | | | | 3 | Камера 3 | Изход | Неакт. | [Ред][Изт] | | | Известия| | ... | | | | +--------------------------------------------------+ | | Отчети | | | | Страници: 1 2 3 ... 10 > | | Потреб.| | | | | | Настр. | | | | | +---------------------------------------------------------------+ ``` #### 10.3. Добавяне на камера ``` +---------------------------------------------------------------+ | Лого Система за разпознаване на номера Потребител Изход | +---------------------------------------------------------------+ | | | | Табло | Добавяне на нова камера | | | | | Камери | +--------------------------------------------------+ | | | | Име на камерата*: | | | Номера | | [________________________] | | | | | | | | Бял | | Локация*: | | | списък | | [________________________] | | | | | | | | Черен | | Описание: | | | списък | | [________________________] | | | | | | | | Известия| | IP адрес: | | | | | [________________________] | | | Отчети | | | | | | | Модел: Производител: | | | Потреб.| | [________________] [________________] | | | | | | | | Настр. | | Статус: (•) Активна ( ) Неактивна | | | | | | | | | | [Запази] [Отказ] | | | | +--------------------------------------------------+ | +---------------------------------------------------------------+ ``` ### 11. Заключение Проектираният потребителски интерфейс е интуитивен, функционален и отговаря на всички изисквания, посочени в техническото задание. Интерфейсът е адаптивен и може да се използва на различни устройства. Всички основни функционалности са достъпни чрез ясно организирани екрани и менюта, като се спазват съвременните принципи за UX дизайн. Системата предоставя различни нива на достъп според ролята на потребителя и осигурява необходимата сигурност на данните.