← Назад к статьям

Видеонаблюдение Xeoma: кастомизация веб-интерфейса

Xeoma остаётся передовой програмой для видеронаблюдения. Помимо доступных цен и умопомрачительных возможностей, с помощью бесплатной утилиты для ребрендинга вы можете легко кастомизировать Xeoma, и на выходе получить уникальную и соответствующую именно вашему вкусу программу.

С помощью бесплатной утилиты кастомизации вы можете поменять интерфейс не только самой программы Xeoma, но и её веб-интерфейса в случае, если вы или ваши клиенты будут смотреть камеры в браузере. Вы сможете изменить иконки, цветовую схему, шрифты в веб-браузерной странице Xeoma, а также изменить название приложения в веб-интерфейсе.

Кастомизация веб-интерфейса Xeoma: 9 простых шагов для кастомизации:

1) Скачайте последнюю версию утилиты для ребрендинга с нашего сайта. Пожалуйста, не используйте ранее измененные файлы или устаревшую утилиту для кастомизации.

2) Скачайте версию Xeoma, которую хотите кастомизировать. Если понадобится более старая версия программы, вы найдете ее здесь.
*Обратите внимание, что использовать утилиту для кастомизации можно только на Windows, но кастомизировать при этом можно версии Xeoma и для других операционных систем.

3) Скопируйте скачанные дистрибутивы Xeoma в сообветстветсвующую подпапку (отдельно для Linux, Mac OSX, Android и Windows) в папке distrib

4) Откройте файл web.xml в папке custom

Здесь вы можете изменить логотип, цвета, шрифты в веб браузерной странице Xeoma (для внесения изменений в файлы кастомизации можно использовать такую программу как Notepad++). Сохраните изменения.

Программа Notepad для редактирования файлов кастомизации

5) Скопируйте необходимые ресурсы (иконки, логотип) в папку custom

6) Запустите customize.bat. Откроется консольное окно с прогрессом процесса кастомизации. Работа customize.bat обычно занимает в пределах 1 минуты. По окончанию работы окно закроется, а информацию можно будет посмотреть в файле .log.

Совет перед тем, как запускать customize.bat Внимание!
Перед тем, как запустить customize.bat, убедитесь, что:
-Xeoma закрыта и не установлена в автостарт.
-В диспетчере задач, убедитесь, что все процессы связанные с Xeoma, завершены.

7) Модифицированные файлы заберите из папки distrib

8) Запустите уже кастомизированную версию Xeoma и добавьте нужные камеры. В цепочку модулей после камеры добавьте модуль Веб Сервер.

9) Из настроек модуля Веб Сервер скопируйте URL и вставьте его в адресную строку браузера и нажмите Enter, OK, стрелочку, «Перейти» и т.п. (если подключение происходит с другого устройства, замените «localhost» на IP адрес сервера, где запущена кастомизированная Xeoma).
 

А теперь подробнее о том, что мы можем изменить при помощи кастомизации:

Название программы.

  • Выполните Шаги 1-3
  • В папке custom открываем файл oem_info, в нем находим строку <ProductName> и вписываем по центру название вашей программы.

    • Например: <ProductName>Your Program Name</ProductName>

  • Выполните Шаги 6-9.

    • With the help of the utility you can change the name of the program

    With the help of the utility you can change the name of the program

    Иконка Favicon

  • Выполните Шаги 1-3.
  • Создайте иконку в формате .ico (это должен быть реальный .ico, а не просто переименованный файл другого формата), поместите ее в папку custom (Шаг 5), скопируйте полное название файла с иконкой и его форматом (например: icon.ico).
  • Откройте файл web.xml, в строке <!‐‐ Favicon ‐‐> вставьте название файла, которое копировали.

    • Например: <Favicon>icon.ico</Favicon>.

  • Выполните Шаги 6-9.

    • With the help of the utility you can change the favicon

    With the help of the utility you can change the favicon

    Логотип

  • Выполните Шаги 1-3
  • Создайте логотип в формате .png либо .jpg.
  • Поместите данный логотип в папку custom (Шаг 5). Скопируйте полное название файла с логотипом и его форматом (например: logo1.png).
  • Откройте файл web.xml, в строке <!‐‐ Изображение логотипа ‐‐> вставьте название файла, которое копировали.

    • Например: <LogoImage>logo1.png</LogoImage>

  • Выполните Шаги 6-9.

    • With the help of the utility you can change the logo

    With the help of the utility you can change the logo

    Цветовая схема интерфейса

  • Выполните Шаги 1-3.
  • Выбираем нравящийся цвет в онлайн-порталах или в фоторедакторах и узнаем значение RGB для этого цвета. Например, rgb(128, 41, 41).

    • *Цвет можно задавать в любом совместимом с CSS формате, для этого есть онлайн приложения.

  • Вставляем значение в строку для изменения цвета нужного элемента, например в <!‐‐ Цвет фона страниц ‐‐>:

    • Например: <BackgroundColor>rgb(128, 41, 41)</BackgroundColor>

  • Выполните Шаги 6-9.

    • With the help of the utility you can change the color

    With the help of the utility you can change the color

    Совет перед тем, как запускать кастомизацию веб-интерфейса Внимание!
    Если при открытии браузера ничего не изменилось, проверьте следующие моменты:

  • Удалите cookie-файлы для адреса, указанного в модуле Веб Сервер, перезагрузите страницу и проверьте еще раз.
  • Скачайте новую версию утилиты для кастомизации.
  • Не кастомизируйте во второй раз уже кастомизированную версию программы, если что-то не получилось. Удалите Xeoma, скачайте новую, начните заново.
  • Прежде чем начать кастомизировать во второй раз, пожалуйста, убедитесь что в диспетчере задач все процессы связанные с Xeoma остановлены.
  • Если иконка, лого, или favicon не меняются, пожалуйста, проверьте, правильно ли вы указали имя файла с его форматом.
    		•

    9 октября 2020

    Читайте также:
    Бесплатная утилита для кастомизации — базовая информация
    Платная кастомизация и ребрендинг (услуга по кастомизации, удаление копирайта)
    Заказ доработки и добавления нового функционала в Xeoma
    Удаленное подключение через веб-браузер