Initial commit: OpenIPC Dashboard v2.1.0

Author: Rinibr

.gitignore

@@ -0,0 +1,24 @@
+# Папки с зависимостями и сборками
+/node_modules
+/dist
+
+# Логи npm
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Файлы операционной системы
+.DS_Store
+Thumbs.db
+
+# Файлы IDE
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Файл с данными камер (содержит пароли!)
+cameras.json

build/Readme.md

@@ -0,0 +1,212 @@
+Отлично! Создание документации — важный этап, который поможет пользователям (и вам в будущем) разобраться с приложением. Давайте составим хорошую и понятную документацию.
+
+Я напишу ее в формате Markdown, который легко конвертируется в HTML, PDF или просто читается как текст. Вы можете сохранить это в файл README.md в корне вашего проекта. Это стандартная практика для проектов на GitHub и не только.
+
+OpenIPC Dashboard v2.1.0 - Руководство пользователя
+Оглавление
+
+О приложении
+
+Установка
+
+Первый запуск и интерфейс
+
+Основное окно
+
+Сетка для видеопотоков
+
+Работа с камерами
+
+Добавление камеры
+
+Редактирование камеры
+
+Просмотр видео
+
+Контекстное меню камеры
+
+Расширенные функции
+
+SSH Терминал
+
+Файловый менеджер (SCP)
+
+Настройки камеры (Majestic)
+
+Устранение неисправностей
+
+1. О приложении
+
+OpenIPC Dashboard — это настольное приложение для управления камерами на базе прошивки OpenIPC. Оно предоставляет удобный интерфейс для просмотра видеопотоков, администрирования настроек, работы с файловой системой и выполнения команд через SSH.
+
+Ключевые возможности:
+
+Просмотр до 4 видеопотоков одновременно в настраиваемой сетке.
+
+Переключение между основным (HD) и дополнительным (SD) потоком.
+
+Полноэкранный режим для детального просмотра.
+
+Встроенный SSH-клиент для прямого доступа к командной строке камеры.
+
+Встроенный файловый менеджер для загрузки и скачивания файлов по протоколу SCP.
+
+Графический интерфейс для редактирования всех настроек прошивки Majestic.
+
+Мониторинг статуса и температуры процессора камеры.
+
+2. Установка
+
+Для установки приложения на Windows:
+
+Скачайте установочный файл OpenIPC Dashboard Setup X.X.X.exe.
+
+Запустите файл и следуйте инструкциям на экране. Вы можете выбрать папку для установки.
+
+После установки ярлык приложения появится на рабочем столе и в меню "Пуск".
+
+3. Первый запуск и интерфейс
+Основное окно
+
+Интерфейс приложения разделен на две основные части:
+
+Левая боковая панель: Здесь находится список всех добавленных вами камер.
+
+Основная область: Сетка для отображения видеопотоков.
+
+<!-- Замените на актуальный скриншот, если нужно -->
+
+
+Элементы боковой панели:
+
+Список камер: Каждая камера в списке отображает:
+
+Индикатор статуса: Зеленый — камера онлайн, серый — оффлайн.
+
+Название и IP-адрес: Основная информация для идентификации.
+
+Температура: Температура процессора камеры (если доступна).
+
+Кнопка "Добавить камеру": Открывает окно для добавления новой камеры.
+
+Кнопка "Аварийный сброс потоков": Принудительно завершает все процессы ffmpeg на вашем компьютере. Используйте, если видеопотоки "зависли" и не закрываются штатно.
+
+Сетка для видеопотоков
+
+В основной области расположена сетка 2x2.
+
+Пустая ячейка: Нажмите на камеру в списке слева, чтобы начать трансляцию в первой свободной ячейке.
+
+Активная ячейка: Отображает видеопоток. В углах ячейки находятся:
+
+В левом нижнем углу: Статистика потока (FPS и битрейт).
+
+В правом нижнем углу: Название камеры и качество потока (HD/SD).
+
+В правом верхнем углу (при наведении): Кнопки для управления звуком и закрытия потока.
+
+Полноэкранный режим: Дважды кликните на ячейку с видео, чтобы развернуть ее на весь экран и переключиться на HD-поток. Повторный двойной клик вернет сетку в обычный режим.
+
+4. Работа с камерами
+Добавление камеры
+
+Нажмите зеленую кнопку "Добавить камеру" на боковой панели.
+
+В открывшемся модальном окне заполните поля:
+
+Название: Любое удобное вам имя (например, "Камера в коридоре").
+
+IP Адрес: IP-адрес камеры в вашей локальной сети.
+
+RTSP Порт: Обычно 554.
+
+Логин: Стандартный логин для OpenIPC — root.
+
+Пароль: Ваш пароль от SSH/веб-интерфейса.
+
+Поток: Выберите, какой поток открывать по умолчанию при клике на камеру в списке (рекомендуется "Дополнительный (Низкое)" для экономии ресурсов).
+
+Нажмите "Сохранить". Камера появится в списке слева.
+
+Редактирование камеры
+
+Нажмите правой кнопкой мыши на нужную камеру в списке.
+
+В контекстном меню выберите "Редактировать".
+
+Внесите изменения в открывшемся окне и нажмите "Сохранить".
+
+Просмотр видео
+
+Начать просмотр: Просто кликните один раз на камеру в списке. Видео откроется в первой свободной ячейке сетки.
+
+Остановить просмотр: Наведите курсор на окно с видео и нажмите на значок "×" в правом верхнем углу.
+
+Контекстное меню камеры
+
+Клик правой кнопкой мыши по камере в списке открывает меню с дополнительными действиями:
+
+🗂️ Файловый менеджер: Открывает двухпанельный менеджер файлов.
+
+💻 SSH Терминал: Открывает окно терминала с прямым доступом к камере.
+
+⚙️ Настройки: Открывает окно для редактирования всех параметров прошивки Majestic.
+
+✏️ Редактировать: Редактирование данных подключения к камере.
+
+🗑️ Удалить: Удаляет камеру из списка приложения.
+
+5. Расширенные функции
+SSH Терминал
+
+Открывает полноценный терминал для выполнения любых команд на камере.
+
+Копирование: Ctrl+Shift+C.
+
+Вставка: Ctrl+Shift+V.
+
+Файловый менеджер (SCP)
+
+Предоставляет двухпанельный интерфейс для управления файлами.
+
+Левая панель: Файлы на вашем компьютере.
+
+Правая панель: Файлы на камере.
+
+Навигация: Двойной клик по папке для входа, двойной клик по .. для выхода на уровень вверх.
+
+Кнопки управления:
+
+▲ Загрузить: Копирует выбранный локальный файл на камеру в текущую удаленную папку.
+
+▼ Скачать: Копирует выбранный файл с камеры на ваш компьютер (путь сохранения будет предложено выбрать).
+
+Новая папка: Создает новую папку на камере.
+
+Удалить: Удаляет выбранный файл или пустую папку на камере.
+
+Обновить: Обновляет списки файлов на обеих панелях.
+
+Настройки камеры (Majestic)
+
+Это окно позволяет изменять абсолютно все параметры прошивки, которые доступны в файле majestic.yaml.
+
+Настройки сгруппированы по вкладкам, соответствующим секциям конфигурационного файла.
+
+После внесения изменений нажмите "Сохранить".
+
+Для применения некоторых настроек может потребоваться перезапуск сервиса Majestic. Для этого используйте кнопку "Перезапустить Majestic".
+
+6. Устранение неисправностей
+
+Проблема: Видеопоток не запускается или "завис".
+
+Решение: Убедитесь, что камера доступна (зеленый индикатор). Попробуйте закрыть поток и открыть заново. Если не помогает, используйте кнопку "Аварийный сброс потоков".
+
+Проблема: Файловый менеджер или SSH-терминал не подключаются.
+
+Решение: Проверьте правильность IP-адреса, логина и пароля в настройках камеры (через меню "Редактировать"). Убедитесь, что SSH-сервер на камере включен и доступен.
+
+Проблема: После изменения настроек в Majestic ничего не изменилось.
+
+Решение: Нажмите кнопку "Перезапустить Majestic" в окне настроек. Если это не помогло, подключитесь по SSH и проверьте логи (logread).

build/icon.ico

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Файловый менеджер</title>
+    <style>
+        :root {
+            --bg-color: #1e1e1e; --text-color: #d4d4d4; --border-color: #333;
+            --pane-bg: #252526; --header-bg: #3c3c3c; --selected-bg: #094771;
+            --button-bg: #0e639c; --button-hover-bg: #1177bb;
+            --progress-bar-bg: #5a5a5a; --progress-bar-fill: #0e639c;
+        }
+        body, html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background-color: var(--bg-color); color: var(--text-color); font-size: 14px; }
+        .container { display: flex; flex-direction: column; height: 100vh; }
+        .panes-container { display: flex; flex-grow: 1; overflow: hidden; }
+        .pane { width: 50%; display: flex; flex-direction: column; background-color: var(--pane-bg); border: 1px solid var(--border-color); }
+        .pane:first-child { border-right: none; }
+        .pane-header { background-color: var(--header-bg); padding: 5px; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
+        .pane-header h3 { margin: 0; font-size: 1em; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .pane-header .path-input { flex-grow: 1; background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 4px; font-size: 13px; margin-left: 10px; }
+        .file-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
+        .file-list li { padding: 5px 10px; cursor: pointer; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); }
+        .file-list li:hover { background-color: #3a3a3a; }
+        .file-list li.selected { background-color: var(--selected-bg); }
+        .file-list .icon { margin-right: 8px; width: 18px; text-align: center; }
+        .file-list .file-size { margin-left: auto; color: #888; }
+        .controls { padding: 8px; display: flex; justify-content: center; gap: 10px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
+        .controls button { background-color: var(--button-bg); color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
+        .controls button:hover { background-color: var(--button-hover-bg); }
+        .controls button:disabled { background-color: #555; cursor: not-allowed; }
+        .status-bar { padding: 5px 10px; background-color: var(--header-bg); font-size: 12px; height: 22px; line-height: 22px; flex-shrink: 0; display: flex; align-items: center; }
+        .progress-bar-container { width: 200px; height: 16px; background-color: var(--progress-bar-bg); border-radius: 3px; overflow: hidden; display: none; margin-left: auto;}
+        .progress-bar-fill { width: 100%; height: 100%; background-color: var(--progress-bar-fill); animation: pulse 2s infinite; }
+        @keyframes pulse {
+            0% { opacity: 0.7; }
+            50% { opacity: 1; }
+            100% { opacity: 0.7; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="panes-container">
+            <div class="pane" id="local-pane">
+                <div class="pane-header">
+                    <h3>Локально</h3>
+                    <input type="text" id="local-path" class="path-input">
+                </div>
+                <ul class="file-list" id="local-file-list"></ul>
+            </div>
+            <div class="pane" id="remote-pane">
+                <div class="pane-header">
+                    <h3>Камера: <span id="camera-name"></span></h3>
+                    <input type="text" id="remote-path" class="path-input" value="/">
+                </div>
+                <ul class="file-list" id="remote-file-list"></ul>
+            </div>
+        </div>
+        <div class="controls">
+            <button id="btn-upload" title="Загрузить выбранный локальный файл на камеру">▲ Загрузить</button>
+            <button id="btn-download" title="Скачать выбранный файл с камеры">▼ Скачать</button>
+            <button id="btn-new-folder">Новая папка</button>
+            <button id="btn-delete">Удалить</button>
+            <button id="btn-refresh">Обновить</button>
+        </div>
+        <div class="status-bar">
+            <span id="status-text">Готов</span>
+            <div class="progress-bar-container" id="progress-bar-container">
+                <div class="progress-bar-fill" id="progress-bar-fill"></div>
+            </div>
+        </div>
+    </div>
+    <script src="./file-manager.js"></script>
+</body>
+</html>