GS2K Custom Webpage Build Procedure Application Note NT11598A Rev

Transcription

1 GS2K Custom Webpage Build Procedure Application Note 80560NT11598A Rev

2 SPECIFICATIONS ARE SUBJECT TO CHANGE WITHOUT NOTICE NOTICE While reasonable efforts have been made to assure the accuracy of this document, Telit assumes no liability resulting from any inaccuracies or omissions in this document, or from use of the information obtained herein. The information in this document has been carefully checked and is believed to be reliable. However, no responsibility is assumed for inaccuracies or omissions. Telit reserves the right to make changes to any products described herein and reserves the right to revise this document and to make changes from time to time in content hereof with no obligation to notify any person of revisions or changes. Telit does not assume any liability arising out of the application or use of any product, software, or circuit described herein; neither does it convey license under its patent rights or the rights of others. It is possible that this publication may contain references to, or information about Telit products (machines and programs), programming, or services that are not announced in your country. Such references or information must not be construed to mean that Telit intends to announce such Telit products, programming, or services in your country. COPYRIGHTS This instruction manual and the Telit products described in this instruction manual may be, include or describe copyrighted Telit material, such as computer programs stored in semiconductor memories or other media. Laws in the Italy and other countries preserve for Telit and its licensors certain exclusive rights for copyrighted material, including the exclusive right to copy, reproduce in any form, distribute and make derivative works of the copyrighted material. Accordingly, any copyrighted material of Telit and its licensors contained herein or in the Telit products described in this instruction manual may not be copied, reproduced, distributed, merged or modified in any manner without the express written permission of Telit. Furthermore, the purchase of Telit products shall not be deemed to grant either directly or by implication, estoppel, or otherwise, any license under the copyrights, patents or patent applications of Telit, as arises by operation of law in the sale of a product. COMPUTER SOFTWARE COPYRIGHTS The Telit and 3rd Party supplied Software (SW) products described in this instruction manual may include copyrighted Telit and other 3rd Party supplied computer programs stored in semiconductor memories or other media. Laws in the Italy and other countries preserve for Telit and other 3rd Party supplied SW certain exclusive rights for copyrighted computer programs, including the exclusive right to copy or reproduce in any form the copyrighted computer program. Accordingly, any copyrighted Telit or other 3rd Party supplied SW computer programs contained in the Telit products described in this instruction manual may not be copied (reverse engineered) or reproduced in any manner without the express written permission of Telit or the 3rd Party SW supplier. Furthermore, the purchase of Telit products shall not be deemed to grant either directly or by implication, estoppel, or otherwise, any license under the copyrights, patents or patent applications of Telit or other 3rd Party supplied SW, except for the normal non-exclusive, royalty free license to use that arises by operation of law in the sale of a product NT11598A Rev. 3.0 Page 2 of

3 USAGE AND DISCLOSURE RESTRICTIONS I. License Agreements The software described in this document is the property of Telit and its licensors. It is furnished by express license agreement only and may be used only in accordance with the terms of such an agreement. II. Copyrighted Materials Software and documentation are copyrighted materials. Making unauthorized copies is prohibited by law. No part of the software or documentation may be reproduced, transmitted, transcribed, stored in a retrieval system, or translated into any language or computer language, in any form or by any means, without prior written permission of Telit III. High Risk Materials Components, units, or third-party products used in the product described herein are NOT faulttolerant and are NOT designed, manufactured, or intended for use as on-line control equipment in the following hazardous environments requiring fail-safe controls: the operation of Nuclear Facilities, Aircraft Navigation or Aircraft Communication Systems, Air Traffic Control, Life Support, or Weapons Systems (High Risk Activities"). Telit and its supplier(s) specifically disclaim any expressed or implied warranty of fitness for such High Risk Activities. IV. Trademarks TELIT and the Stylized T Logo are registered in Trademark Office. All other product or service names are the property of their respective owners. V. Third Party Rights The software may include Third Party Right software. In this case you agree to comply with all terms and conditions imposed on you in respect of such separate software. In addition to Third Party Terms, the disclaimer of warranty and limitation of liability provisions in this License shall apply to the Third Party Right software. TELIT HEREBY DISCLAIMS ANY AND ALL WARRANTIES EXPRESS OR IMPLIED FROM ANY THIRD PARTIES REGARDING ANY SEPARATE FILES, ANY THIRD PARTY MATERIALS INCLUDED IN THE SOFTWARE, ANY THIRD PARTY MATERIALS FROM WHICH THE SOFTWARE IS DERIVED (COLLECTIVELY OTHER CODE ), AND THE USE OF ANY OR ALL THE OTHER CODE IN CONNECTION WITH THE SOFTWARE, INCLUDING (WITHOUT LIMITATION) ANY WARRANTIES OF SATISFACTORY QUALITY OR FITNESS FOR A PARTICULAR PURPOSE. NO THIRD PARTY LICENSORS OF OTHER CODE SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION LOST PROFITS), HOWEVER CAUSED AND WHETHER MADE UNDER CONTRACT, TORT OR OTHER LEGAL THEORY, ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE OTHER CODE OR THE EXERCISE OF ANY RIGHTS GRANTED UNDER EITHER OR BOTH THIS LICENSE AND THE LEGAL TERMS APPLICABLE TO ANY SEPARATE FILES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES NT11598A Rev. 3.0 Page 3 of

4 APPLICABILITY TABLE PRODUCT GS2K based Modules Note: The features described in the present document are provided by the products equipped with the software versions equal or higher than the versions shown in the table. See also the Revision History chapter NT11598A Rev. 3.0 Page 4 of

5 Revision History Version Date Remarks 1.0 Dec, 2015 Initial Draft 2.0 Jun, 2016 Added prerequisites and installation steps for required tools. 3.0 Dec, 2017 Added Appendix A Adding and Processing Custom Elements in Webpages 80560NT11598A Rev. 3.0 Page 5 of

6 Table of Contents NOTICE... 2 COPYRIGHTS COMPUTER SOFTWARE COPYRIGHTS... 2 USAGE AND DISCLOSURE RESTRICTIONS... 3 CHAPTER 1. INTRODUCTION PURPOSE AND SCOPE TERMINOLOGY... 9 CHAPTER 2. PREREQUISITES CHAPTER 3. TOOLS INSTALLATION INSTALLING JAVA INSTALLING APACHE ANT INSTALLING ANT-CONTRIB INSTALLING CLOSURE COMPILER INSTALLING CSSTIDY CHAPTER 4. GENERIC ARCHITECTURE BUILDING BLOCK FOR GSLINK PROVISIONING WEB APPLICATIONS TYPICAL REQUEST FLOW ELEMENTS OF GSLINK APPLICATION SOURCE CODE HTML Pages Style Sheets JavaScript Build Process CHAPTER 5. WEBPAGE BUILD PROCEDURE CHECKING OUT THE CODE CONFIGURING THE BUILD BUILDING THE WEBPAGE MAKING CHANGES IN WEB APPLICATIONS APPENDIX A ADDING AND PROCESSING CUSTOM ELEMENTS IN WEBPAGES A.1 CUSTOMIZING THE WEBPAGE SOURCE CODE A.2 CUSTOMIZING THE EMBEDDED SOURCE CODE NT11598A Rev. 3.0 Page 6 of

7 List of Figures Figure 1: GSLink Provisioning Web Application-Architecture Figure 2: Webpage Client Settings Figure 3: Client Settings Summary Information Figure 4: XML Data NT11598A Rev. 3.0 Page 7 of

8 List of Tables Table 1: Glossary of Terms NT11598A Rev. 3.0 Page 8 of

9 Introduction 1.1 PURPOSE AND SCOPE This document guides to install the required tools for building Webpages, build a webpage, and make changes in GSLink provisioning web application. It is assumed that the reader has experience with web technologies such as HTML and CSS. 1.2 TERMINOLOGY The terminologies used in this document are as listed: Table 1: Glossary of Terms Term API SoC HTML CSS GZIP API SoC HTML Explanation Application Program Interface System on Chip Hyper Text Markup Language Cascading Style Sheet GNU ZIP Application Program Interface System on Chip Hyper Text Markup Language 80560NT11598A Rev. 3.0 Page 9 of

10 Prerequisites Following are the software and hardware requirements for building a webpage: Software requirements: o Java o Apache Ant o Ant-Contrib o Closure Compiler o CSStidy Hardware requirements: o Computer running Windows OS Windows XP or later versions 80560NT11598A Rev. 3.0 Page 10 of

11 3.1 INSTALLING JAVA Tools Installation Java is a programming language that developers use to create applications on your computer. Perform the following steps to download and install Java. 1. Go to the link Click Free Java Download as shown in the following figure. 2. Click Agree and Start Free Download to download the exe file. 3. Double-click the downloaded.exe file as Administrator NT11598A Rev. 3.0 Page 11 of

12 4. Click Install on the Java Setup Welcome window to start the installation. 5. Downloading Java Installer window pops up displaying the download status. 6. Java Setup Progress window displays the installation status NT11598A Rev. 3.0 Page 12 of

13 7. Once installation is successfully completed, Java Setup Complete window displays the successful installation message as shown in the following figure. Click Close. 8. Java is installed in the following location in a 64-bit Windows OS machine. C:\Program Files (x86)\java 9. Type sysdm.cpl in Run window and click OK to open System Properties NT11598A Rev. 3.0 Page 13 of

14 10. Go to Advanced tab and click Environment Variables. 11. In the Environment Variables window, under System variables, click New NT11598A Rev. 3.0 Page 14 of

15 12. Enter Variable name as JAVA_HOME and Variable value which is the path in C:\ drive (where Java is installed), and click OK. 13. JAVA_HOME is displayed as a Variable along with the path under system variables as shown in the following figure. Under System Variable, select Path, and click Edit to update the path. 14. Add %JAVA_HOME%; in the beginning of the path mentioned for Variable value and click OK NT11598A Rev. 3.0 Page 15 of

16 15. To check whether Java is installed properly or not, open the Command Prompt, execute Java version command. This results in displaying the Java version as shown in the following figure NT11598A Rev. 3.0 Page 16 of

17 3.2 INSTALLING APACHE ANT Apache Ant is a popular build system used extensively in the Java world. The ant is analogous to Make system in C/C++. Perform the following steps to download and install Apache Ant. 1. Go to the link Click Binary Distributors, select the latest release of Apache Ant as shown in the following figure. 2. Extract the zip file and save in C:\ drive NT11598A Rev. 3.0 Page 17 of

18 3. Type sysdm.cpl in Run window and click OK to open System Properties. 4. Go to Advanced tab and click Environment Variables NT11598A Rev. 3.0 Page 18 of

19 5. In the Environment Variables window, under System variables, click New. 6. Enter Variable name as ANT_HOME and Variable value which is the path in C:\ drive (where Apache Ant is installed). Click OK. 7. ANT_HOME is displayed as a Variable along with the path under system variables. Under System Variable, select Path, and click Edit to update the path. 8. Add %ANT_HOME%; in the beginning of the path mentioned for Variable value and click OK NT11598A Rev. 3.0 Page 19 of

20 3.3 INSTALLING ANT-CONTRIB Ant-Contrib is a set of extensions to Apache Ant which is not part of the default installation of Apache Ant. These extensions are necessary while building webpage. Perform the following steps to download and install Ant-Contrib. 1. Go to the link download Ant-Contrib form, and unzip it into a directory (C:\ant-contrib). 2. Copy ant-contrib-1.0b3.jar file into C:\apache-ant-1.9.6\ directory; where ANT_HOME is the folder where Apache Ant was installed. 3.4 INSTALLING CLOSURE COMPILER Closure is a JavaScript compiler from Google, which compiles JavaScript and makes code smaller by analyzing and minimizing the source. Using a combination of Closure compiler and GZIP compression, we were able to compress our JavaScript to about 15% of its original size (~90KB minifies to ~44KB, which then GZIPs to ~12KB). 1. Go to to download Closure compiler, and extract it into a directory (C:\closure-compiler) 80560NT11598A Rev. 3.0 Page 20 of

21 3.5 INSTALLING CSSTIDY Closure compiler is great at minimizing JavaScript, but it does not handle CSS. CSSTidy is used to minimizing CSS code. 1. Go to and download CSSTidy. 2. Extract the.exe file into a location (For example, C:\csstidy) NT11598A Rev. 3.0 Page 21 of

22 Generic Architecture This section provides complete flow of the build process in GSLink provisioning web application. 4.1 BUILDING BLOCK FOR GSLINK PROVISIONING WEB APPLICATIONS The GSLink Web Application, consists of the following blocks: 1) HTML Pages, which define the content structure. 2) JavaScript, which dynamically generates form elements and navigation on-the-fly; and consumes the REST API exposed by the GS SoC. 3) CSS, which puts a presentation around the structure and content. In addition, the application also has a build process (using Apache Ant) that can be used to build a binary containing only the specific combination of pages desired. 4.2 TYPICAL REQUEST FLOW Client (Web Browser) Server (1011 embedded web server) Onetime fetch Request Response (HTML, CSS, JS) Static HTML page Screen navigation by DOM manipulation Driven by JavaScript AJAX Calls Response (XML) AJAX API s GSLink web-app: Block Diagram Figure 1: GSLink Provisioning Web Application-Architecture The above block diagram describes the typical request flow, the steps are as follows: 1) You type the page address in the browser (for example /gsprov.html) 2) The Embedded web server serves the gsprov.html page (in a zipped format) NT11598A Rev. 3.0 Page 22 of

23 3) Browser unzips the HTML page and starts rendering it. 4) Browser observes that the HTML page refers to other resources, including a. An image file (for the logo) b. A JavaScript file c. A style-sheet (CSS) file. The browser makes a separate HTTP request for each of these. Except the image, all other files are also served with GZIP compression, and the browser uncompresses them when it receives them. 5) Now that the browser has all resources it needs, it continues with rendering the HTML page. Directory Structure of the deployed GSLink Provisioning app. The deployed directory structure has source code containing several files and the output of the directory structure of the build process is as given below: js/ css/ -- gs.min.js.gz -- styles.css.gz gsprov.html.gz gsclient.html.gz gsap.html.gz 80560NT11598A Rev. 3.0 Page 23 of

24 4.3 ELEMENTS OF GSLINK APPLICATION SOURCE CODE This section provides details on how the source code for the GSLink Provisioning web application is organized HTML Pages The HTML pages in the GSLink provisioning application has 2 features: 1) Provide top-level containers for every screen in the application 2) Kick-start the execution of the JavaScript. Code List for limited AP page (gsap.html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv="pragma" content="no-cache" /> <title>gslink AP Provisioning</title> <link rel="stylesheet" href="css/styles.css" type="text/css" /> <script type="text/javascript" src="js/gs.min.js"></script> <script type="text/javascript"> var appmode = 'modelimitedap'; window['appmode']=appmode; OnReady(function(){ displimlandingscreen('lim'); }); </script> </head> <body> <!--[if lte IE 7]> <div id="ieroot"> <![endif]--> <div class="global"> <div class="logo"> <img src="logo.gif" alt="gainspan" /> </div> <div id="pghead"><h1 class="pghead">device Setup</h1></div> <div id="limland" class="section"></div> <div id="limprov" class="section"></div> <div id="admin" class="section"></div> <div id="limsummary" class="section"></div> <div id="limconnect" class="section"></div> <div id="status" class="section"></div> </div> <!--[if lte IE 7]> </div> <![endif]--> 80560NT11598A Rev. 3.0 Page 24 of

25 </body> </html> This page provides the following top-level containers (HTML divs), each corresponds to a screen in the page flow. When navigated to a screen, the div corresponding to screen is displayed and all other divs are hidden. limland: For Limited AP Landing Screen. Displays the options for Wireless Configuration and Administrator Settings. limprov: For the actual provisioning configuration. Displays the settings like SSID, Channel, security and so on. admin: For administrator settings. limsummary: For Summary screen. status: For the final status message (For example, your settings are applied. Please re-connect). NOTE: The DIVs are initially empty. The actual contents of these divs (links, forms, summaries and so on.) are constructed dynamically by the JavaScript. Then, notice the below code: var appmode = 'modelimitedap'; window['appmode']=appmode; OnReady(function(){ displimlandingscreen('lim'); }); This sets the current flavor as Limited-AP Mode (as against Client or Pro). Then, it tells the browser to execute the JavaScript function displimlandingscreen() once the HTML page is ready Style Sheets The GSLink provisioning web application contains a single style-sheet: styles.css. This contains all the styles used in the application like-apply the formatting to the page title, or bold the footer, or apply the alignment to the form fields and so on JavaScript The JavaScript is the root of the GSLink provisioning web application. It creates page elements on the fly, communicates with the embedded server using AJAX (consumes the REST API), and handles screen navigation. For example, when you click Next on a screen, the JavaScript hides the current screen, constructs the elements for the next screen as appropriate, and displays it. The JavaScript also fetches data from the server for pre-population, and submits the configuration settings that is entered to the server. The JS files and detailed explanation is listed below. common.js This file contains functions for communicating with the server. It contains generic AJAX functions and also XML-related functions NT11598A Rev. 3.0 Page 25 of

26 domhelper.js This file contains generic functions to create various HTML elements dynamically. For example, the code for the summary page uses the createbutton() function to create the Back and Next buttons on the fly. gscommon.js This file contains a collection of JS functions used by all GSLink code. These are functions which are not specific to the particular flavor of the application (Client only, AP only or Pro). Also includes things like validation, API version checking and so on. gs.ap.js This file includes functions specific to Limited AP page. For example, creates the form for configuring Limited AP settings, pre-populating this form, submitting it to the server and so on. gs.client.js This file functions specific to client page and includes the code to scan for AP List. It displays the results in a table, configures scan parameters, and performs DHCP versus static IP configuration gs.pro.js The file includes functions specific to Pro page only. Example the footer (displaying the current mode of operation) is present only in the pro flavor. gs.mode.js The file contains functions related to the Set Mode of Operation functionality. gs.admin.js The file contains functions for administrator settings Build Process The build process uses Apache Ant scripts performing the below operation Minifies the JavaScript files. Minification is the process of reducing the code without changing the functionality i.e., the code size is reduced up to 50%. This is done by eliminating comments, dead code, shortening variable names and so on. Google s Closure Compiler has been used for Minification and the process to set this up is explained in the Appendix. Includes only the required JS files for Minification. For example, if you are building a Client Mode only application, the gs.ap.js and gs.pro.js files are not necessary. The build process takes care of this. The output of Minification is a single JS file which contains all the functions aggregated from the various input JS files. Minifies the CSS file. We use CSSTidy for CSS Minification. GZIPs all the necessary HTML files, the CSS file and the JS file. For example, if you are building the AP Mode only application, only the gsap.html file is required. The build ignores the other HTML files NT11598A Rev. 3.0 Page 26 of

27 Puts together all these into the deployment directory structure. Finally, the contents of the deployment directory are put into a ZIP file. The master build file is gsbuild_ext.xml and is located in the root of the project directory. It in turn uses other build files like: gsbuild_s2w.xml: This file contains build targets for building S2W-specific web app combinations. gsbuild_tls.xml: This file contains build targets for building TLS-specific web app combinations. The build files contain several targets, but only a handful of them are top-level build targets. These are the targets which begin with gsbuild- and are invoked by the developers for building. The rest are internal targets used by the build. The following table summarizes the build target names and functions: Build Target What it Builds Output Folder Name gsbuild-ap Limited AP Only Provisioning Application gsprov_ap gsbuild-ap-tls Limited AP Only Provisioning Application + TLS Data application gsprov_ap_tls gsbuild-client Client Mode Only Provisioning Application gsprov_client gsbuild-client-ap Individual Provisioning Applications Limited AP Only mode and Client Only mode. This is not the same as the Pro version. gsprov_client_ap gsbuild-pro The PRO version of the Provisioning App. gsprov_pro gsbuild-pro-tls The PRO version of the Provisioning App + the TLS data application gsprov_pro_tls gsbuild-pro-client-ap-tls The Master application which has everything and which can be used for demos. Contains the PRO version of Provisioning App + Individual Limited AP only and Client only home-owner flavors + TLS data application. gsprov_pro_client_ap_tls gsbuild-pro-smartplug The PRO version of the provisioning app + the Smartplug application gsprov_pro_smartplug gsbuild-all Builds all of the targets mentioned above. Each of the folders mentioned above is generated NT11598A Rev. 3.0 Page 27 of

28 Webpage Build Procedure 5.1 CHECKING OUT THE CODE The CVS path for the project is gslink/web_apps/provisioning. Use preferred method for checking out the code from appropriate branch. 5.2 CONFIGURING THE BUILD Once the code is checked out, configure the build scripts need to find the required tools as explained in the following steps: 1. Open gsbuild_properties file in a text editor. 2. Look for the line <property name="closurecompiler.dir" value="c:/closure-compiler" />. Replace the value with the path where Closure compiler is installed. 3. Look for the line <property name="csstidy.dir" value="c:/csstidy" />. Replace the value with the path where CSSTidy is installed. 5.3 BUILDING THE WEBPAGE Perform the following steps to build a webpage: 1. Open the Command Prompt in Administrator mode. 2. Navigate to websource location folder. \gs2011mxx_adksdkpackage_5.2.1_27_jan_2016_00_44_58\sdk\embedded\tools\f s_image_creater\websource 3. Execute ant -f gsbuild_ext.xml command to start the build procedure NT11598A Rev. 3.0 Page 28 of

29 4. Upon successful completion of build, BUILD SUCCESSFUL message is displayed. NOTE: If BUILD FAILD message is seen, add a dummy folder named img inside the WebContent folder from the following path \Embedded\tools\fs_image_creater\websource\WebContent NT11598A Rev. 3.0 Page 29 of

30 5.4 MAKING CHANGES IN WEB APPLICATIONS The most common types of changes would be to change the styling, or the logo. To change the styling, open the PROJECT_ROOT\WebContent\cssin\styles.css file in a text editor, and edit the appropriate style. All the styles are contained in this single file. Whenever you make any change to the CSS, JavaScript or HTML files, simply re-run the build (as described in Building the Webpage) NT11598A Rev. 3.0 Page 30 of

31 Appendix A Adding and Processing Custom Elements in Webpages This section describes the procedure required to add and process new custom elements in a GainSpan firmware. The following example provides an understanding on how to update the existing webpage with the new elements such as IP address, Port Number, Protocol, and the data Transmission Frequency. The following methods demonstrate the steps required to communicate from the webpage to an embedded device. A.1 Customizing the Webpage Source Code A.2 Customizing the Embedded Source Code A.1 CUSTOMIZING THE WEBPAGE SOURCE CODE By default, the GainSpan webpages are dynamic. Error! Reference source not found. and REF _Ref \h \* MERGEFORMAT Error! Reference source not found. give an example of the final webpage build. Figure 2: Webpage Client Settings 1. To add new HTML elements as shown in Error! Reference source not found., update t he java script and the custom CSS elements with the below details. Server; IP Address Server port; Port Address Protocol; Communication Protocol Frequency; Data Transmission Frequency 80560NT11598A Rev. 3.0 Page 31 of

32 2. Click Next to view the configuration summary. Figure 3: Client Settings Summary Information 3. Click Save to apply the above settings. The webpage will form xml tags as shown below. Figure 4: XML Data 80560NT11598A Rev. 3.0 Page 32 of

33 Configuration Steps To achieve the above webpage modification, perform the following steps: 1. Create new text box HTML elements. 2. Create summary page with new HTML elements. 3. Create XML tags for the new added information. STEP 1: Create new text box HTML elements. Create the new div element called idprefix + tcpsrvcfgdiv ( idprefix = cl ) for holding the new text boxes. var tcpsrvcfgdiv = creatediv(parent, idprefix + 'tcpsrvcfgdiv'); Next, add the following codes, to add four text boxes on the newly created div element. createipadrrow(tcpsrvcfgdiv, idprefix+'tcpsrvip', 'Server : '); createfieldrow(tcpsrvcfgdiv, 'Server Port : ', createtextbox(idprefix+'tcpsrvport')); createfieldrow(tcpsrvcfgdiv, 'Protocol : ', createtextbox(idprefix+'protocol')); createfieldrow(tcpsrvcfgdiv, 'Frequency : ', createtextbox(idprefix+'frequency')); In gs.client.js file create a new div element and add four text boxes in dispdirectconfig() 80560NT11598A Rev. 3.0 Page 33 of

34 STEP2: Create summary page with new HTML elements. Create the new div element called divsum for holding the new text boxes. creatediv(divsum, '', '','TCP Server Configuration Summary','wizhead'); /* Get the TCP Server IP and Port Numer */ var tcpsrvipadr = getconcatip(idprefix+'tcpsrvip'); var tcpsrvport = getcontentofid(idprefix+'tcpsrvport'); var protocol = getcontentofid(idprefix+'protocol'); var frequency = getcontentofid(idprefix+'frequency'); addsummaryrow(divsum, 'Server Address: ', tcpsrvipadr); addsummaryrow(divsum, 'Server Port addsummaryrow(divsum, 'Protocol addsummaryrow(divsum, 'Frequency : ', tcpsrvport); : ', protocol); : ', frequency); In gs.client.js file create a new div element and add four text boxes in dispstasummaryscreen() 80560NT11598A Rev. 3.0 Page 34 of

35 STEP 3: Create XML tags for the added information: Add the following parameters to update the values when button is pressed. dispclientconnect (idprefix, ssid, pwd, security, channel, wepauth, ip_type, ipadr, snmask, gw, dns, eaptype, eapusername, eappwd, settime, tcpsrvipadr, tcpsrvport, protocol, frequency) Add the following function parameter under dispclientconnect dispclientconnect (idprefix, ssid, enteredpass, security, channel, wepauth, ip_type, ipadr, snmask, gw, dns, eaptype, eapusername, eappwd, settime, tcpsrvipadr, tcpsrvport, protocol, frequency) In gs.client.js file under the function definition of dispstasummaryscreen() add four new arguments as highlighted in the following figure. Create XML tag called srvcfg and other information as child elements. var srvconfelem = postxml.createelement('srvcfg'); client.appendchild(srvconfelem); appendxmlelement(postxml, srvconfelem, 'tcpsrvip', tcpsrvipadr); appendxmlelement(postxml, srvconfelem, 'tcpsrvport', tcpsrvport); appendxmlelement(postxml, srvconfelem, 'protocol', protocol); appendxmlelement(postxml, srvconfelem, 'frequency', frequency); 80560NT11598A Rev. 3.0 Page 35 of

36 80560NT11598A Rev. 3.0 Page 36 of

37 A.2 CUSTOMIZING THE EMBEDDED SOURCE CODE Data handling on an embedded device is a three-step process: 1. Define the variables for holding the XML data. 2. Create XML schema for decoding the data from the webpage. 3. Write the logic to save the data. The above steps are explained as follows: STEP 1: Define the variables for holding the XML Data. In the embedded device, the XML data are created in four different variables in accordance to the four text boxes that are created on the webpage. These four variables are added under the GSN_SYS_CONFIG_CLIENT_T structure, available in the client configuration mode (Refer to Error! Reference source not found.). UINT32 tcpsrvip; /**< TCP Server IP address */ UINT16 tcpsrvport; /**TCP Server Port */ UINT8 protocol[16]; UINT32 frequency; The image below displays an example of the elements added in gsn_sys_config.h in GSN_SYS_CONFIG_CLIENT_T 80560NT11598A Rev. 3.0 Page 37 of

38 STEP 2: Create XML schema for decoding the data from the webpage. XML schema creation needs an understanding about XML tag names and its associated value types such as a string, Integer and so on of the final XML data. For this example, the xml tags are as shown in Error! Reference source not found.. The following section details the source code modification: <network> <client> <wireless> </wireless> <ip> </ip> <srvcfg> <tcpsrvip> </tcpsrvip> <tcpsrvport>9100</tcpsrvport> <protocol>tcp</protocol> <frequency>30</frequency> </srvcfg> </client> </network> a. Create structures corresponding to new XML elements in gsn_config_xml_schema.c typedef struct { GSN_XML_STRING_T tcpsrvip; UINT16 tcpsrvport; GSN_XML_STRING_T protocol; UINT32 frequency; } xml_client_srvcfg_settings_t; b. As server configuration is part of client configuration, define xml_client_srvcfg_settings_t variable under client settings structure xml_client_settings_t. typedef struct { xml_client_wireless_settings_t client_wireless_settings; xml_client_ip_settings_t client_ip_settings; xml_client_srvcfg_settings_t client_srvcfg_settings; } xml_client_settings_t; 80560NT11598A Rev. 3.0 Page 38 of

39 c. Define Individual XML sub elements of server configuration. The server configuration elements are of GSN_XML_OBJ_T structure. It consists of the following five variables. 1. XML Tag name: It is a string containing the name of the current element, it must match with the XML tag defined in the webpage. For example, in server configuration mode XML data, tcpsrvip is one of the XML tag. <tcpsrvip> </tcpsrvip> 2. XML Object Type: It is classified as simple or complex type. a. Simple Type: It has content contained between the element s opening and closing tags. It does not consist of attributes or child elements. For example, <tcpsrvip></tcpsrvip> is as simple XML object. b. Complex Type: It can have attributes, can contain other elements, can contain a mixture of elements and text. For example, <srvcfg></srvcfg> is complex XML object. 3. XML Data Type: It can be of any type. A simple object data type of XML value is defined in GSN_XML_DATA_TYPE_T structure. However, a complex object is formed with a combination of multiple simple objects of different data types. As a result, the data type of complex object will be XML_DT_NONE. 4. Maximum number of Objects: It contains information about the number of objects in the XML object. For simple objects, the value is 1 and for complex objects, it specifies the number of sub elements. For example, for < tcpsrvip></ tcpsrvip> the values are Offset of each XML Object: It is used to locate the variable in a XML object structure. For example, offsetof (xml_client_srvcfg_settings_t, tcpsrvip) will specify the tcpsrvip variable location in the server configuration xml_client_srvcfg_settings_t XML object NT11598A Rev. 3.0 Page 39 of

40 Following are the XML objects required for handling each of the child XML tag: const GSN_XML_OBJ_T xml_client_tcpsrvip = {"tcpsrvip",xml_simple_element, XML_DT_STR,1, offsetof(xml_client_srvcfg_settings_t, tcpsrvip)}; The above object will create a XML tag as shown below: <tcpsrvip>.</tcpsrvip> const GSN_XML_OBJ_T xml_client_tcpsrvport = {"tcpsrvport",xml_simple_element, XML_DT_UINT16,1, offsetof(xml_client_srvcfg_settings_t, tcpsrvport)}; The above object will create a XML tag as shown below: <tcpsrvport>.</tcpsrvport> const GSN_XML_OBJ_T xml_client_protocol = {"protocol",xml_simple_element, XML_DT_STR,1, offsetof(xml_client_srvcfg_settings_t, protocol)}; The above object will create a XML tag as shown below: <protocol> </protocol> const GSN_XML_OBJ_T xml_client_frequency = {"frequency",xml_simple_element, XML_DT_UINT16,1, offsetof(xml_client_srvcfg_settings_t, frequency)}; The above object will create a XML tag as shown below: <frequency> </frequency> d. Create the parent XML object with child objects const GSN_XML_COMPLEX_OBJ_T xml_client_srvcfg_settings = {"srvcfg", XML_COMPLEX_ELEMENT, XML_DT_NONE, 1,offsetof(xml_client_settings_t, client_srvcfg_settings), {4, sizeof(xml_client_srvcfg_settings_t), {&xml_client_tcpsrvip, &xml_client_tcpsrvport,&xml_client_protocol,&xml_client_frequency}}}; 80560NT11598A Rev. 3.0 Page 40 of

41 The above object will create a XML tag as shown below: <srvcfg> <tcpsrvip> </tcpsrvip> <tcpsrvport> </tcpsrvport> <protocol> </protocol> <frequency> </frequency> </srvcfg> e. Add the parent object to existing XML object const GSN_XML_COMPLEX_OBJ_T xml_client_settings = {"client", XML_COMPLEX_ELEMENT, XML_DT_NONE, 1,offsetof(xml_network_settings_t, client_settings), {3, sizeof(xml_client_settings_t), {(GSN_XML_OBJ_T*)&xml_client_wireless_settings, (GSN_XML_OBJ_T*)&xml_client_ip_settings,(GSN_XML_OBJ_T*)&xml_client_srvcfg_settin gs}}}; The above object will create a XML tag as show below: <client> <wireless> </wireless> <ip> </ip> <srvcfg> <tcpsrvip> </tcpsrvip> <tcpsrvport> </tcpsrvport> <protocol> </protocol> <frequency> </frequency> </srvcfg> </client> 80560NT11598A Rev. 3.0 Page 41 of

42 STEP3: Extracting the XML data After decoding the server configuration XML object, extract data from XML elements to system configuration structure. The following example shows how to extract the data: GSN_GET_IP_STR_FROM_XML(xmlStrClientTcpSrvIP, network_settings.client_settings.client_srvcfg_settings.tcpsrvip, &sysconfig.networkconfig.clientconfig.tcpsrvip); if(network_settings.client_settings.client_srvcfg_settings.tcpsrvport) sysconfig.networkconfig.clientconfig.tcpsrvport = network_settings.client_settings.client_srvcfg_settings.tcpsrvport; GsnHttpd_SetStrFromXmlStr(&sysConfig.networkConfig.clientConfig.protocol[0], network_settings.client_settings.client_srvcfg_settings.protocol, sizeof(xmlstrclientprotocol)); if(network_settings.client_settings.client_srvcfg_settings.frequency) sysconfig.networkconfig.clientconfig.frequency= network_settings.client_settings.client_srvcfg_settings.frequency; ipaddr = sysconfig.networkconfig.clientconfig.tcpsrvip; App_DebugPrintf("\r\n Server IP = %d.%d.%d.%d, Port = %d. Protocol = %s. Frequency = %d\r\n", (ipaddr & 0xff),((ipAddr >>8) & 0xff),((ipAddr >> 16) & 0xff),((ipAddr >>24) & 0xff), sysconfig.networkconfig.clientconfig.tcpsrvport, sysconfig.networkconfig.clientconfig.protocol, sysconfig.networkconfig.clientconfig.frequency); 80560NT11598A Rev. 3.0 Page 42 of

43 80560NT11598A Rev. 3.0 Page 43 of

44