Xeoma OEM: Web Interface Customization

Xeoma video surveillance software offers free rebranding opportunities for partners and users. Following a simple process of Xeoma customization you will get a unique version of Xeoma, just to your taste. The customization tool is free of charge.
Note: you can also request paid customization if you don’t want to get into that yourself.

By means of our OEM utility you can change both the interface of the application as well as its web interface in case you or your clients are going to be viewing cameras through a web browser instead of the app or software. With the free web interface customization and rebranding you will be able to change icons, color scheme, logo, and also the name of the program in Xeoma’s Web page.

Web interface customization – 9 easy steps:

1) Download the latest version of our free OEM utility from our website. Please do not use previously edited customization files.

2) Download the Xeoma version that you’d like to customize web interface for. If you need older versions of Xeoma, please check this page
*Note that you can run the customization tool on a Windows machine only, but Xeoma for any supported operating system can be rebranded with it.

3) Copy Xeoma’s executable files (xeoma.exe, xeoma.app, xeoma.dmg etc.) to the corresponding subfolder distrib folder.
*Note that you should be using a “clean” version of Xeoma every time you do the customization. We do not recommend doing follow-up customization improvement on top of a previous attempt.

4) Go to custom folder and open web.xml file (you can use different programs to open .xml files e.g. NotePad++).
Here you can change the logo, colors, text, etc. Save all the changes.

Notepad program for editing customization files

5) Copy necessary resources (icons, logo) into custom folder.

6) Run customize.bat. The customization process will start and open a console window where you can see the progress. You can also view basic output in the .log file next to the customizer.

Attention!
Before running customize.bat, make sure that Xeoma or its rebranded versions are stopped and are not running at the machine where you’re doing the customization. Pay special attention if your Xeoma is installed into autostart: in that case, it restarts when you try to kill it. Stop the service with the -stopservice command before you do the customization on such a machine.

7) Take the modified files from the distrib folder

8) Launch the customized Xeoma version on the appropriate operating system and add cameras. Add the ‘Web Server’ module in the modules chain of each or some of cameras.

9) Copy URL from ‘Web Server’ module’s settings and insert it into your browser’s address bar and hit Enter, Go, or arrow. (if accessing from a remote device, replace the “localhost” address with the Server’s IP address of the machine where Xeoma is installed).

A web interface will be opened where you will be able to see the changes you have applied.

What exactly we can change with customization utility:

Program name

Follow Steps 1-3.

Open oem_info file in the custom folder, find <ProductName> line and insert the new name for the program in between:

e.g.: <ProductName>Your Program Name</ProductName>

Follow Steps 6-9.

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

Favicon

Follow Steps 1-3.

Create an icon in .ico format. It must be the genuine .ico format, not simply rename file. Move the .ico to the custom folder (Step 5), copy full icon’s name with its format (e.g.: icon.ico).

Open web.xml file, insert previously copied icon’s name into the line <Favicon>:

e.g.: <Favicon>icon.ico</Favicon>

Follow Steps 6-9.

With the help of the utility you can change the favicon

Logo

Follow Steps 1-3.

Create a logo in .png or .jpg format.

Move the logo into custom folder (Step 5). Copy full logo’s name with its format (e.g.: logo1.png):

Open web.xml file, insert previously copied logo’s name into the line <Logo name>.

e.g.: <LogoImage>logo1.png</LogoImage>

Follow Steps 6-9.

With the help of the utility you can change the logo

Interface color scheme

Follow Steps 1-3.

In an online resource or image editor, select a color that you’d want to change Xeoma’s default color to, and check the color’s RGB numbers. For example: rgb(128, 41, 41).

*You can set the color in any CSS-compatible format. You can use online applications for defining the color number.

Open the web.xml file, insert this color code into the line for the part of Xeoma where you’d like to change the color, for example into <Backgroundcolor>:

e.g.: <BackgroundColor>rgb(128, 41, 41)</BackgroundColor>

Follow Steps 6-9.

With the help of the utility you can change the color

Attention!
If nothing changes with the browser page opening, check if the following advice help:

Delete cookie-files for the address that you see in the Web Server module, reload the page, then check one more time.

Download a new version of customization utility and repeat the steps with it.

Do not customize twice already customized program’s version if something went wrong. Delete Xeoma, download a new one, start again.

Before starting to customize for a second time, please make sure that all Xeoma processes are finished in the Task manager.

If the icon, logo, or favicon doesn’t change, please make sure whether you typed in the name and format correctly.

October, 9 2020