Application Note ENT-AN1011Web GUI CustomizationThis document provides detailed descriptions of how to customize the product name, logo, graphic, color,and other visual elements used in Microsemi application software such as WebSTaX , SMBStaX , andCEServices .Table of ContentsChange Product Name . . .Change Product DescriptionChange Logo . . . . . . . .Change Switch Image . . . .Change UPNP Description .Change Software Version . .Change GUI Colors . . . . .Change Default IP Address .Add Navigation LInk . . . . .Change Port Layout . . . . .1223334456Change Product NameThe following figure shows the product name displayed in the top banner. Editbuild/make/ to change the product name. This file is a link to a .mk file in thebuild/configs directory for the platform.Figure 1 Product NameAdd the following text to change the product name.Custom/SwitchName : Product Name For example,Custom/SwitchName : Vitesse SwitchPerform a make clean before make to ensure a proper build with the new setting. When the productname is changed, the name off the firmware is also changed to Product Name .dat in thebuild/obj/ directory.July 2015 2015 Microsemi Corporation1

Web GUI CustomizationChange Product DescriptionThe following figure shows the product description displayed in the top banner, next to the product name.Edit build/make/ to change the product name. This file is a link to a .mk file in thebuild/configs directory for the platform.Figure 2 Product DescriptionAdd the following text to change the product name.Custom/SwitchDesc : Product Description For example:Custom/SwitchDesc : 28 Port Gigabit Ethernet SwitchPerform a make clean before make to ensure a proper build with the new setting.Change LogoThe following figure shows the product logo at the left edge of the top banner.Figure 3 Product LogoUpdate the following files under vtss appl/web/html/ to change the logo. logo.gif top.htmUpdate the following line in top.htm to the desired specifications. img border "0" src "logo.gif" width "190" height "54" alt "Vitesse"/ The default logo image size is 190 x 54. Use an image editor to resize the image first before replacinglogo.gif because if the new image does not match this size, the web browser will adjust the image to fit,which may affect the quality of the image displayed.It is also possible to change the width and height specified for the image invtss appl/web/html/index.htm. Verify the layout of the entire page is as desired after makingsuch a change.2

Change Switch ImageChange Switch ImageThe following figure shows a switch image that reflects the actual product and typically shows the vendorname and front panel ports.Figure 4 Switch ImageUse an image editor to modify the text, color, and size as desired in the following files undervtss appl/web/html/images/, as appropriate, based upon the configuration used. switch enzo.png switch.png switch small.png switch 48.pngChange UPNP DescriptionThe following code shows the text thatvtss appl/upnp/platform/vtss upnp.c file.canbechangedasdesiredinthestatic char upnp xml string[] {" friendlyName SMBStaX /friendlyName "" manufacturer Vitesse Semiconductor Corp. /manufacturer "" manufacturerURL /manufacturerURL "" modelDescription Layer2 Giga Stacking Switch SMBStaX \ /modelDescription "" modelName /modelName "" modelNumber /modelNumber "" serialNumber A830023251 /serialNumber "Change Software VersionThe following figure shows the software version information displayed at Monitor System Information.Figure 5 Software VersionUpdate the following line in the build/make/module file as desired.3

Web GUI CustomizationRELEASE VERSION ? dev-build by (USER)@ (HOSTNAME) (CTIME) \ (CONFIG FILE)For example, change dev-build by (USER)@ (HOSTNAME) (CTIME) \ (CONFIG FILE)to My product v1.0.Change GUI ColorsThe colors, fonts, and styles used in the interface are controlled by the following cascading style sheetfiles under vtss appl/web/html/lib/. help.css menu.css normal.css top.cssFigure 6 Original Web GUI ColorThe following figures show an example of changing colors, fonts, and styles.Figure 7 Modified Web GUI ColorThe following diff files are available. normal.css.diff top.css.diffChange Default IP ultvaluesarelistedinbuild/make/module Use the search keyword ICFG DEFAULT CONFIG to identify the4

Add Navigation LInkdesired file. The following code shows the default iCFG file vtss appl/icfg/icfg-defaultconfig.tx that is used for build/ with voice VLAN enabled.! 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 Navigation LInkThe navbar.htm file uses the vtss appl/web/html/menu default.txt file to generate the links displayed inthe navigation bar shown in the following figure.Figure 8 Web GUI Navigation MenuEdit menu default.txt and execute make to update navbar.htm.5

Web GUI CustomizationChange Port LayoutThe following figure shows the port layout information, which is specifiedvtss appl/port/port web xxx.c, where the value of xxx.c is based on the platform used.inFigure 9 Web GUI Port LayoutUse the stat portstate switch() function to modify the port layout.There is no need to change the htmlfile.void stat portstate switch(CYG HTTPD STATE* p, vtss usid t usid, vtss isid tisid)The following code shows the settings used to specify the image file, X-offset, Y-offset, and position ofthe image file for each port.for (iport 0; iport port count; iport ) {row 0;placement "bottom";xoff add PORT ICON WIDTH;if (cap & PORT CAP 10G FDX) {/* 10G port, one row */type (iport 26 iport 27 ? "sfp" : "x2");if ((iport % 4) 0)xoff add PORT BLOCK GAP;} else {type ((cap & PORT CAP COPPER) ? "copper" : "sfp");/* PORT CAP COPPER */if (iport front1g ports) {/* 1G port, two rows */if (iport & 1) {row 1;if (cap & PORT CAP COPPER)placement "top";xoff add 0;}6

Power Matters.TMMicrosemi Corporate HeadquartersOne Enterprise, Aliso Viejo,CA 92656 USAWithin the USA: 1 (800) 713-4113Outside the USA: 1 (949) 380-6100Sales: 1 (949) 380-6136Fax: 1 (949) 215-4996E-mail: [email protected] 2015 Microsemi Corporation. Allrights reserved. Microsemi and theMicrosemi logo are trademarks ofMicrosemi Corporation. All othertrademarks and service marks are theproperty of their respective owners.Microsemi Corporation (Nasdaq: MSCC) offers a comprehensive portfolio of semiconductorand system solutions for communications, defense & security, aerospace and industrialmarkets. Products include high-performance and radiation-hardened analog mixed-signalintegrated circuits, FPGAs, SoCs and ASICs; power management products; timing andsynchronization devices and precise time solutions, setting the world's standard for time; voiceprocessing devices; RF solutions; discrete components; security technologies and scalableanti-tamper products; Ethernet solutions; Power-over-Ethernet ICs and midspans; as well ascustom design capabilities and services. Microsemi is headquartered in Aliso Viejo, Calif., andhas approximately 3,600 employees globally. Learn more at makes no warranty, representation, or guarantee regarding the information contained herein orthe suitability of its products and services for any particular purpose, nor does Microsemi assume anyliability whatsoever arising out of the application or use of any product or circuit. The products soldhereunder and any other products sold by Microsemi have been subject to limited testing and should notbe used in conjunction with mission-critical equipment or applications. Any performance specifications arebelieved to be reliable but are not verified, and Buyer must conduct and complete all performance andother testing of the products, alone and together with, or installed in, any end-products. Buyer shall not relyon any data and performance specifications or parameters provided by Microsemi. It is the Buyer'sresponsibility to independently determine suitability of any products and to test and verify the same. Theinformation provided by Microsemi hereunder is provided “as is, where is” and with all faults, and the entirerisk associated with such information is entirely with the Buyer. Microsemi does not grant, explicitly orimplicitly, to any party any patent rights, licenses, or any other IP rights, whether with regard to suchinformation itself or anything described by such information. Information provided in this document isproprietary to Microsemi, and Microsemi reserves the right to make any changes to the information in thisdocument or to any products and services at any time without notice.VPPD-03579. 1.0. July 2015

and other visual elements used in Microsemi applic ation software such as WebSTaX , SMBStaX , and CEServices . Table of Contents Change Product Name The following figure shows the product name displayed in the top banner. Edit build/make/ to change the product name. This file is a link to a .mk file in the