Rebranding Edge Xpert Manager
The rebranding feature allows you to configure Edge Xpert Manager to display your own themes and replace the company logo and icon images. This might be desirable, for example, if you are looking to deliver Edge Xpert within an OEM solution with your own company branding.
Please note that an OEM license agreement with IOTech is required in order to deploy this feature.
It is a simple configuration task to apply different themes and branding to the Edge Xpert Manager. The steps are explained below.
Configurable Items
All the configurable items are listed in a configs.json file as described below:
{
"appName": "Edge Xpert Manager",
"appDescription": "The Edge Xpert Manager is powered by IOTech.",
"companyName": "IOTech",
"docURL": "https://docs.iotechsys.com/",
"copyright": "© ${currentYear} IOTech",
"images": {
"menuLogo": "xpert-logo-reversed.png",
"loginLogo": "xpert-logo.png",
"copyright": "iotech-logo.png",
"menuCopyright": "iotech-logo-reversed.png",
"favicon": "iotech-favicon.ico"
},
"theme": {
"colors": {
"primary": {
"main": "#00ab9c",
"light": "#377791",
"contrastText": "#ffffff"
},
"background": "#eaeff1",
"header": {
"background": "#454545",
"text": "#ffffff"
},
"menu": {
"background": "#454545",
"text": "#ffffff",
"activeText": "#00ab9c",
"hoverText": "#ffffff",
"hoverBackground": "#617087"
},
"dashboard": {
"title": "#617087",
"counts": "#ee7177"
},
"tabs": {
"text": "#000000",
"background": "#cfdfe6",
"activeText": "#055576",
"activeBackground": "#ffffff"
},
"table": {
"selectedText": "#c41854",
"selectedBackground": "#f7e3ea"
}
}
}
}
appName
The application name to be displayed on the browser tab, header, and About pop-up dialog.
appDescription
The application description to be displayed in the About pop-up dialog.
companyName
The company name to be displayed as the license comment in the file that is exported or downloaded from the Edge Xpert Manager.
docURL
The URL that refers to the documentation.
copyright
The copyright information displayed on the Login Page, menu, and the "About" pop-up dialog.
- Use the placeholder ${currentYear} in
copyright
to dynamically insert the current year - The version of the application is automatically attached to the copyright
- The color used for
theme.menu.text
will also be applied to the menu copyright
images
menuLogo
: the logo to be displayed on top of the menuloginLogo
: the logo to be displayed on the login pagecopyright
: the logo to be displayed on top of the copyright which is optionalmenuCopyright
: the logo to be displayed on top of the copyright on the menu which is optionalfavicon
: the favicon to be displayed on the browser tab
theme/colors
primary
: the primary color of most of the application widgetsbackground
: the background color of the main pageheader
: the color of the header text and backgroundmenu
: the color of the menu text and backgrounddashboard
: the color of the dashboard title and countstabs
: the color of the tabstable
: the color of the selected count text
The following formats are supported for the color value: #nnn
, #nnnnnn
, rgb()
, rgba()
, hsl()
, hsla()
.
You can see examples of how these elements relate to the UI in the example screenshots displayed further below.
Update the Configuration
1. Download the below zip file containing the original IOTech configuration and associated images
2. Unzip the file and place the configs.json file and images in a local folder
3. Update the configs.json file as desired and add any new images to the same folder
4. To configure the Xpert Manager to pick up your rebranding you must first create a local docker-compose.yml file to add a new volume and mount your folder to /res/branding This can be achieved by copying the following content and saving it to your working directory.
version: '3.7'
services:
xpert-manager:
volumes:
# use host timezone
- /myBranding:/res/branding
Note
Ensure your folder contains the configs.json file or the container may not be able to run
5. Ensure that the files in the directory have appropriate permissions. To allow the Edge Xpert containers to read the files the Other
user must have read access.
This can be verified using the following command:
ls -l \<path\>/\<file\>
The other permission set is the three-character block at the end of the permission code. If this does not include r
, read permission can be granted with the following command:
chmod +r Logo.png
6. Start the Edge Xpert Manager UI and apply the new configuration
edgexpert up xpert-manager
7. The configuration can also be updated at run time. Simply refresh the browser to see the updated changes
Example Screenshots
Find examples below that demonstrate how the configurable elements relate to the UI.