To customise the logo in the WebUI which persists across factory resets.  There will be other parts of the WebUI to offer full customisation in the future.

Customizing the WebUI requires supporting files to be created and transferred onto the Accelerated device.  This article assumes you have the knowledge and the resources to create these files.  Tools such as scp, WinSCP, or PuTTY can be used to transfer files securely from the host PC to the device.

This configuration example also requires you to have the knowledge to enable shell access on the Accelerated device.  For more information, visit Enabling Shell Access.

The files used in this guide are attached.

Two files are required to be created and transferred onto the Accelerated device:

• Logo file (*.png): The file must be a transparent png file.
• custom.css: This file includes the CSS required to extend the 'logo_skin' class, which is read by WebUI.

The logo file are required to be approximately  180 pixels wide.  There are no inbuilt facilities to automatically scale logo images.  If the logo image is too large, it may not correctly fit into the WebUI's logo area.  The suggested dimension is 180px wide and 60px high.  If files are larger than the specified dimensions, downsizing will be required:

# convert -resize 95% logo_original.png logo_custom.png # assume ImageMagick is installed

To create the 'custom.css' file, open a new text file and rename it to 'custom.css'.  In this file, specify the logo file, the width and the height of the drawable logo canvas.  The 'custom.css' file should include the following:

.logo_skin { background-image: url("/assets/custom/logo_custom.png"); width:179px; height:107px; }

• Logo path: The path '/assets/custom/' is fixed.  It is where the device's WebUI will look for the logo file.
• logo_custom.png:  This filename can be customised as necessary, as long as it is the logo file's filename.
• Logo canvas width/height:  This is the dimension of the drawable canvas.  The logo may not be correctly formatted if it is more than 180px wide.

Once the two files are created in the previous step, they are to be transferred onto the Accelerated device's device directory /opt/custom/.  This directory cannot be altered as the software is hardcoded to search for customised resources in that directory.

To transfer the files onto the device, first, ensure the shell access to the device is enabled.  An active connection to the machine where the newly created files are stored is also established.

For Windows

Windows 10 or above has native support to run a Linux distribution inside the Operating System (OS) which enables the use of SCP.  For details, visit this article and then follow the instructions under "For Mac OS/Linux" below.

Alternatively, WinSCP is a widely used program to transfer files via the SCP file transfer protocol.  The following steps outline the file transfer process using WinSCP.

1. Install and open WinSCP
2. In the Login dialog box, input the appropriate credentials, for example:
   • File protocol: SCP
   • Host name: 192.168.2.1 (or 192.168.210.1 for the device's default IP)
   • Port number: 22
   • User name: root
   • Password: <your user or root password>
3. Click Advanced... button to reach the advanced settings dialog box
4. In Advanced Site Settings dialog box, identify and navigate to Environment > SCP/Shell to make the following adjustments as shown in the screenshot below:
   • Change "Shell:" to /bin/sh
   • In Directory listing, uncheck Try to get full timestamp
5. Click OK to exit Advanced Site Settings and click Save in the Login dialog box to save the login profile
6. When saved, click Login to log into the device
7. Navigate to opt/custom and transfer the necessary resources into this directory

For Mac OS/Linux

Mac OS and Linux-based/emulated systems normally has the "SCP" utility built in by default.  The following the steps outline the process to transfer the resource files.

1. Copy the two files into the device's /opt/custom/ directory, e.g.:
   scp /path/to/files/* [email protected]:/opt/custom/
2. Once the files are transferred, reload the WebUI to see the updated logo

Automated download

If you have a fileserver, you can create a custom script to download files from that server onto the device.

1. Copy the two files onto the file server
2. Setup the following custom script on the device, replacing the urls for the two files with the appropriate domain and path based on your file server settings.

css_file_url='https://downloads.accns.com/webui_logo/custom.css'
logo_file_url='https://downloads.accns.com/webui_logo/logo_custom.png'


curl -kLo /opt/custom/custom.css "$css_file_url"
ret=$?
[ "$ret" = '0' ] || accns_log w config "error downloading custom.css logo file ($ret)"


curl -kLo /opt/custom/logo_custom.png "$logo_file_url"
ret=$?
[ "$ret" = '0' ] || accns_log w config "error downloading logo_custom.png logo file ($ret)"