Skip to content

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.

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 menu
  • loginLogo: the logo to be displayed on the login page
  • copyright: the logo to be displayed on top of the copyright which is optional
  • menuCopyright: the logo to be displayed on top of the copyright on the menu which is optional
  • favicon: the favicon to be displayed on the browser tab

theme/colors

  • primary: the primary color of most of the application widgets
  • background: the background color of the main page
  • header: the color of the header text and background
  • menu: the color of the menu text and background
  • dashboard: the color of the dashboard title and counts
  • tabs: the color of the tabs
  • table: 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
Replace /myBranding with the path to your folder.

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.

Login Page with Copyright

login page

UI Dashboard

dashboard

Devices Page

devices

about