.ENT-AN1011-4.4

Application NoteMicrosemi Application Software

Customization GuideReleased

April 2018

Contents

1 Revision History.................................................................................................................................1

2 Introduction.......................................................................................................................................2

3 Customization....................................................................................................................................33.1 Changing the Product Name...............................................................................................................................33.2 Changing the Product Description......................................................................................................................33.3 Changing the Product Logo.................................................................................................................................43.4 Changing the Switch Image.................................................................................................................................53.5 Changing the UPNP Description.........................................................................................................................53.6 Changing the Software Version...........................................................................................................................63.7 Changing the GUI Color......................................................................................................................................63.8 Changing the Default IP Address......................................................................................................................113.9 Adding a New Link in the Navbar......................................................................................................................113.10 Changing the Port Layout...............................................................................................................................13

iiVPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Contents

Figures

Figure 1 • Change Product Name.........................................................................................................................................3Figure 2 • Product Description.............................................................................................................................................3Figure 3 • Product Logo........................................................................................................................................................4Figure 4 • Switch Image........................................................................................................................................................5Figure 5 • Software Version..................................................................................................................................................6Figure 6 • GUI Appearance...................................................................................................................................................6Figure 7 • Modified GUI: CSS Change Part 1.........................................................................................................................7Figure 8 • Modified GUI: CSS Change Part 2.........................................................................................................................7Figure 9 • Navigation bar....................................................................................................................................................12Figure 10 • Port layout.......................................................................................................................................................13

iiiVPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Figures

1 Revision History

The revision history describes the changes that were implemented in the document. The changes are listedby revision, starting with the most current publication.

Revision 1.0Revision 1.0 was published in April 2018. It was the first publication of this document.

1VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Revision History

2 Introduction

This application note provides a detailed description of how to customize Microsemi Application Software,such as WebStaX™, SMBStaX™, IStaX™, or CEServices™. Customizations include the product name, logo,product graphic, color, and more.

2VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Introduction

3 Customization

The following sections discuss various customization scenarios.

3.1 Changing the Product NameThe product name appears in the top banner of the page as shown in the following illustration. To changethe product name, the user must edit the build/make/config.mk file. The config.mk is a link toa.mk file in thebuild/configs directory based on the configuration chosen for that particular platform.

Figure 1 • Change Product Name

To change the product name, add the following text.

Custom/SwitchName :=

Example:

Custom/SwitchName := Microsemi_Switch

After modifying config.mk, it is recommended to perform amake clean before make to ensure a properbuild with the new setting.

3.2 Changing the Product DescriptionThe product description appears in the top banner next to the product name as shown in the followingillustration. To change the product description, modify the build/make/config.mk file. Recall thatconfig.mk is a link to a .mk file in build/configs directory based on the chosen configuration.

Figure 2 • Product Description

To change the product description, add the following text.

Custom/SwitchDesc :=

3VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

Example:

Custom/SwitchDesc := 53 Port Gigabit Ethernet Switch

3.3 Changing the Product LogoThe product logo resides in the upper left corner of the banner as highlighted in the following illustration.

Figure 3 • Product Logo

To change the product logo, modify the following files.• vtss_appl/web/html/logo.gif• vtss_appl/web/html/top.htm

Find the following line in the top.htm file and change the product logo image file as desired.

If the new image does not match this size, the web browser tries to adjust the image to fit. The side-effectis that the image quality decreases. Therefore, it is recommended to use an image editor to resize the imagefirst before replacing logo.gif. Another way is to specify both the height and width attributes for theimage.

For example:

However, this will likely impact the layout and feel of the entire page. Thus, modifyingvtss_appl/web/html/index.htmmay be needed.

For example:

4VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

3.4 Changing the Switch ImageThe switch image reflects the actual product and typically shows the vendor name and front panel ports.

Figure 4 • Switch Image

Change the appropriate image file: switch_enzo.png, switch.png, switch_small.png, orswitch_48.png based on the configuration used. Use an image editor to adjust the color and size asdesired. Then replace the image file.

3.5 Changing the UPNP DescriptionChange vtss_appl/upnp/base/upnp_device.cxx by replacing the text in the following codeblock as required.

char g_xml_content[] = "" "" "" "1" "0" "" "" "urn:schemas-upnp-org:device:Basic:1" "SMBStaX" "Vitesse Semiconductor Corp." "http://www.vitesse.com" "Layer2+ Giga Stacking Switch SMBStaX" "" "" "%u" "%s" "" "" "urn:schemas-upnp-org:service:Layer4_Layer2:1" "urn:upnp-org:serviceId:Layer4_Layer21" "" "" "" "" "" "http://%s:80" "" "";

5VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

3.6 Changing the Software VersionTo view the software version information, clickMonitor > System > Information, the information pagedisplays the software version information as shown in the following figure.

Figure 5 • Software Version

Edit thebuild/make/module_main.in file that contains a format of the following code block. Locatethe following code block and change the value of version-$1.o: RELEASE_VERSIO as required.

version-$1.o: RELEASE_VERSION ?= $$(BUILD_ID) Config:$1 Profile:$2$(if $$(MSCC_SDK_VERSION), SDK:$$(MSCC_SDK_VERSION)-$$(MSCC_SDK_FLAVOR))

For example, you can change above variable as:

version-$1.o: RELEASE_VERSION ?= MyProd v4.00.

3.7 Changing the GUI ColorThehomepage (index.htm) contains 3HTML frames (frameset),top.htm,navbar.htm, andtop.htm

The color, font, and style within the GUI are described in the following CSS files.• vtss_appl/web/html/lib/help.css• vtss_appl/web/html/lib/menu.css• vtss_appl/web/html/lib/normal.css• vtss_appl/web/html/lib/top.css

Figure 6 • GUI Appearance

6VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

The following example shows how the GUI would look with different fonts, colors, and styles.

Figure 7 • Modified GUI: CSS Change Part 1

Figure 8 • Modified GUI: CSS Change Part 2

The top.css file has the following contents for this example.

diff --git a/vtss_appl/web/html/lib/top.css b/vtss_appl/web/html/lib/top.cssindex 4947ae9..34c38d0 100644--- a/vtss_appl/web/html/lib/top.css+++ b/vtss_appl/web/html/lib/top.css@@ -34,7 +34,7 @@ div.helpbutton { }

body {- background-color: #249CD5;+ background-color: #98A5AC; color: white; font-family : Arial, Helvetica, sans-serif; margin: 0pt;

7VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

The normal.css file has the following contents for this example.

8VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

diff --git a/vtss_appl/web/html/lib/normal.css b/vtss_appl/web/html/lib/normal.cssindex 6d92fea..3d97c40 100644--- a/vtss_appl/web/html/lib/normal.css+++ b/vtss_appl/web/html/lib/normal.css@@ -33,7 +33,7 @@ body { font-family : Arial, Helvetica, sans-serif; font-size : 10pt;- background-color : white;+ background-color : #B2BDC4; }

body.content {@@ -74,15 +74,16 @@ div.port_list {

h1 { font-size : 12pt;- color : #103851;+ color : #FFFFFF; font-weight: bold; }

h2 { font-size : 11pt;- color : #103851;+ color : #FFFFFF; font-weight: bold; }

td {+ border: solid 1px #000000; font-size : 10pt; }

@@ -92,8 +93,13 @@ td.hdrc { }

td.hdrl {+ border: solid 1px #000000; padding : 0ex 1ex 0ex 1ex; font-weight : bold;+ background-color : #B52C29;+ padding-top: 10px; + padding-bottom: 10px;+ color : #ffffe1; }

td.crh {@@ -107,8 +113,10 @@ td.cr { }

td.cl {+ border: solid 1px #000000; padding : 0ex 1ex 0ex 1ex; text-align : left;+ background-color : #ffffe1; }

td.dummy {@@ -148,6 +156,7 @@ td.emphasize { }

td.c {+ border: solid 1px #000000; text-align : center; }

@@ -187,7 +196,7 @@ td.linkUp {

.portlabel { font-size : 8pt;- color : #FFFFFF;+ color : #000000; text-align : center; margin: 4px 0px 0px 0px; }@@ -202,26 +211,26 @@ table.config { }

9VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

table thead tr, tr.config_header {- background-color : #acdaf0;- color: black;+ background-color : #b52c29;+ color: #ffffe1; }

/* first and non-paired lines */ tr.config,tr.config_even {- background-color : #FFFFFF;+ background-color : #ffffe1; }

tr.config_odd {- background-color : #e1eaf0;+ background-color : #ffffe1; }

table.display {- border: solid black 1px;+ border: solid 1px #000000; border-collapse: collapse; }

tr.display_header {- background-color : #acdaf0;+ background-color : #b52c29; color: black; }

@@ -232,7 +241,7 @@ tr.display_separate_header{

/* first and non-paired lines */ tr.display,tr.display_even {- background-color : #FFFFFF;+ background-color : #ffffe1; }

tr.display_odd {@@ -240,14 +249,17 @@ tr.display_odd { }

th {- border: solid black 1px;+ border: solid 1px #000000; font-weight : bold; font-size : 11pt; padding : 0ex 1ex 0ex 1ex;+ padding-top : 10px;+ padding-bottom : 10px;+ color : #ffffe1; }

th.portno {- border: solid black 1px;+ border: solid 1px #000000; font-weight : bold; font-size : 9pt; text-align : center;@@ -256,14 +268,18 @@ th.portno {

/* TH-style - only the first cell is a header, next is typically an input element */ td.param_label {+ border: solid 1px #000000; font-weight : bold;- background-color : #acdaf0;+ background-color : #b52c29; padding : 0ex 1ex 0ex 1ex;+ padding-top : 10px;+ padding-bottom : 10px;+ color : #ffffe1; }

/* Frame param leaders */ table.config td.param_label {- border: solid black 1px;+ border: solid 1px #000000;

10VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

height: 16pt; }

@@ -271,6 +287,8 @@ table.config td.param_label { td.displaytext { font-weight : bold; padding : 0ex 1ex 0ex 1ex;+ padding-top : 10px;+ padding-bottom : 10px; }

.notice {

The menu.css file has the following contents for this example.

diff --git a/vtss_appl/web/html/lib/menu.css b/vtss_appl/web/html/lib/menu.cssindex c7ba403..0bedaaf 100644--- a/vtss_appl/web/html/lib/menu.css+++ b/vtss_appl/web/html/lib/menu.css@@ -28,7 +28,8 @@ */

body {- font-family: "Arial";+ font-family: "fantasy";+ font-style : italic; margin: 0pt; }

3.8 Changing the Default IP AddressThe configuration system architecture is called iCFG. In iCFG, the default configuration is contained in asingle text file.

The default icfg configuration file name can be found in build/make/module_icfg.in. The searchkeyword is ICFG_DEFAULT_CONFIG. Different icfg files are used based on the config file. Forbuild/config.mk with voice vlan enabled, the default icfg file isvtss_appl/icfg/icfg-default-config.txt. The user may edit the bold text items in thefollowing code block.

! Default configuration file! --------------------------!! This file is read and applied immediately after! the system configuration is reset to default.! The file is read-only and cannot be modified.vlan 1name defaultvoice vlan oui 00-01-E3 description Siemens AG phonesvoice vlan oui 00-03-6B description Cisco phonesvoice vlan oui 00-0F-E2 description H3C phonesvoice vlan oui 00-60-B9 description Philips and NEC AG phonesvoice vlan oui 00-D0-1E description Pingtel phonesvoice vlan oui 00-E0-75 description Polycom phonesvoice vlan oui 00-E0-BB description 3Com phonesinterface vlan 1ip address 192.0.2.1 255.255.255.0end

3.9 Adding a New Link in the NavbarTomodify the navigation bar, edit thevtss_appl/web/menu_default.cxxfile. As thenavbar.htmfile is dynamically generated based on menu_default.cxx, after modifying menu_default.cxx,execute make, and a new navbar.htm is generated.

11VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

The following is an example showing a new link "Hello_World" is added.

diff --git a/vtss_appl/web/menu_default.cxx b/vtss_appl/web/menu_default.cxxindex b981492..950bbce 100644--- a/vtss_appl/web/menu_default.cxx+++ b/vtss_appl/web/menu_default.cxx@@ -54,6 +54,7 @@ int WEB_navbar(CYG_HTTPD_STATE* p, int &size) {

ITEM("Configuration"); ITEM(" System");+ ITEM(" Hello_World"); #if defined(VTSS_SW_OPTION_POST) ITEM(" POST,post_config.htm"); #endif

Figure 9 • Navigation bar

12VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

3.10 Changing the Port LayoutThe port layout information highlighted in the following illustration is found in thevtss_appl/port/port_web_xxx.cfile,wherexxx could be jr2, lu26, or serval basedon theplatformused.

Figure 10 • Port layout

The port layout is handled by stat_portstate_switch_xxx() function, where xxx could be jr2,lu26, or serval.

The location of each port icon can be adjusted easily in this function. There is no need to change the htmlfile. For example, the following codes shows that you can control the image file, X offset, Y offset, andposition of the image file for each port.

for (iport = 0; iport < port_cnt; iport++) { if (port_custom_table[iport].cap & MEBA_PORT_CAP_SFP_DETECT) { if(lu26) { row = 0; col = 18 + (iport + 2 - mesa_port_cnt(nullptr)); // 2x SFP ports xoff = PORT_ICON_WIDTH + col * PORT_ICON_WIDTH + 20; yoff = PORT_ICON_HEIGHT * (2 - row); } else { row = 0; col = 10 + sfp_port; xoff = PORT_ICON_WIDTH + col * PORT_ICON_WIDTH + (12 * (col / 4 + (sfp_port++))); yoff = PORT_ICON_HEIGHT * 2; } } else { if(lu26) { /* Two columns */ row = iport % 2; col = iport / 2; xoff = PORT_ICON_WIDTH + col * PORT_ICON_WIDTH + (12 * (col / 6)); yoff = PORT_ICON_HEIGHT * (2 - row); } else { /* Single column */ row = 0; col = iport; xoff = PORT_ICON_WIDTH + col * PORT_ICON_WIDTH + (12 * (col / 4)); yoff = PORT_ICON_HEIGHT * 2; } }

13VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Customization

Microsemi makes no warranty, representation, or guarantee regarding the information containedherein or the suitability of its products and services for any particular purpose, nor doesMicrosemiassume any liability whatsoever arising out of the application or use of any product or circuit. Theproducts sold hereunder and any other products sold by Microsemi have been subject to limitedtesting and should not be used in conjunctionwithmission-critical equipment or applications. Anyperformance specifications are believed to be reliable but are not verified, and Buyermust conductand complete all performance and other testing of the products, alone and together with, orinstalled in, any end-products. Buyer shall not rely on any data and performance specifications orparameters provided by Microsemi. It is the Buyer's responsibility to independently determinesuitability of any products and to test and verify the same. The information provided byMicrosemihereunder is provided "as is, where is" and with all faults, and the entire risk associated with suchinformation is entirely with the Buyer. Microsemi does not grant, explicitly or implicitly, to anyparty any patent rights, licenses, or any other IP rights, whether with regard to such informationitself or anything described by such information. Information provided in this document isproprietary toMicrosemi, andMicrosemi reserves the right tomake any changes to the informationin this document or to any products and services at any time without notice.

Microsemi HeadquartersOne Enterprise, Aliso Viejo,CA 92656 USA

Within the USA: +1 (800) 713-4113Outside the USA: +1 (949) 380-6100Sales: +1 (949) 380-6136Fax: +1 (949) 215-4996Email: sales.support@microsemi.comwww.microsemi.com

© 2019 Microsemi. All rights reserved.Microsemi and the Microsemi logo aretrademarks of Microsemi Corporation. Allother trademarks and service marks are theproperty of their respective owners.

Microsemi, awholly owned subsidiary ofMicrochip Technology Inc. (Nasdaq:MCHP),offers a comprehensive portfolio of semiconductor and system solutions foraerospace&defense, communications, data center and industrialmarkets. Productsinclude high-performance and radiation-hardened analog mixed-signal integratedcircuits, FPGAs, SoCs and ASICs; power management products; timing andsynchronization devices and precise time solutions, setting the world's standardfor time; voice processing devices; RF solutions; discrete components; enterprisestorage and communication solutions; security technologies and scalable anti-tamperproducts; Ethernet solutions; Power-over-Ethernet ICs and midspans; as well ascustom design capabilities and services. Microsemi is headquartered in Aliso Viejo,California, and has approximately 4,800 employees globally. Learn more atwww.microsemi.com.

VPPD-04596

14VPPD-04596 ENT-AN1011-4.4 Application Note Revision 1.0

Legal

ContentsFigures1 Revision History2 Introduction3 Customization3.1 Changing the Product Name3.2 Changing the Product Description3.3 Changing the Product Logo3.4 Changing the Switch Image3.5 Changing the UPNP Description3.6 Changing the Software Version3.7 Changing the GUI Color3.8 Changing the Default IP Address3.9 Adding a New Link in the Navbar3.10 Changing the Port Layout