GS2K Custom Webpage Build Procedure Application Note
80560NT11598A Rev. 4.0 – 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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.
80560NT11598A Rev. 4.0 Page 2 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 fault- tolerant 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.
80560NT11598A Rev. 4.0 Page 3 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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.
80560NT11598A Rev. 4.0 Page 4 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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
4.0 May, 2018 Updated the following sections:
3.1 Installing Java.
3.2 Installing Apache Ant
3.3 Installing Ant-Contrib
80560NT11598A Rev. 4.0 Page 5 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
Table of Contents
NOTICE……… ...... 2
COPYRIGHTS...... 2
COMPUTER SOFTWARE COPYRIGHTS ...... 2
USAGE AND DISCLOSURE RESTRICTIONS ...... 3
APPLICABILITY TABLE ...... 4
INTRODUCTION ...... 9
1.1 PURPOSE AND SCOPE ...... 9 1.2 TERMINOLOGY ...... 9 PREREQUISITES ...... 10
TOOLS INSTALLATION ...... 11
3.1 INSTALLING JAVA ...... 11 3.2 INSTALLING APACHE ANT ...... 19 3.3 INSTALLING ANT-CONTRIB ...... 22 3.4 INSTALLING CLOSURE COMPILER ...... 22 3.5 INSTALLING CSSTIDY ...... 24 GENERIC ARCHITECTURE ...... 25
4.1 BUILDING BLOCK FOR GSLINK PROVISIONING WEB APPLICATIONS ...... 25 4.2 TYPICAL REQUEST FLOW ...... 25 4.3 ELEMENTS OF GSLINK APPLICATION SOURCE CODE ...... 27 4.3.1 HTML Pages ...... 27 4.3.2 Style Sheets ...... 28 4.3.3 JavaScript ...... 28 4.3.4 Build Process ...... 29 WEBPAGE BUILD PROCEDURE ...... 32
5.1 CONFIGURING THE BUILD ...... 32 5.2 BUILDING THE WEBPAGE ...... 32 5.3 MAKING CHANGES IN WEB APPLICATIONS ...... 34 APPENDIX A ADDING AND PROCESSING CUSTOM ELEMENTS IN WEBPAGES ...... 35
A.1 CUSTOMIZING THE WEBPAGE SOURCE CODE ...... 35 A.2 CUSTOMIZING THE EMBEDDED SOURCE CODE ...... 41
80560NT11598A Rev. 4.0 Page 6 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
List of Figures
Figure 1: GSLink Provisioning Web Application-Architecture ...... 25
Figure 2: Webpage Client Settings ...... 35
Figure 3: Client Settings Summary Information ...... 36
Figure 4: XML Data ...... 36
80560NT11598A Rev. 4.0 Page 7 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
List of Tables
Table 1: Glossary of Terms ...... 9
80560NT11598A Rev. 4.0 Page 8 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 Explanation
API Application Program Interface
SoC System on Chip
HTML Hyper Text Markup Language
CSS Cascading Style Sheet
GZIP GNU ZIP
80560NT11598A Rev. 4.0 Page 9 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. 4.0 Page 10 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
Tools Installation
3.1 INSTALLING JAVA Java is a programming language that developers use to create applications on your computer. Perform the following steps to download and install Java JDK.
Note: Java JDK is required to run the tool, as the application does not run correctly with Java JRE. 1. In the browser, go to the link http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
80560NT11598A Rev. 4.0 Page 11 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
2. Under Java Se Development Kit 8u172, select Accept License Agreement.
3. Under the Download menu, click the download link that corresponds to the .exe for your versions of window. For example, for windows version Windows x64, download the jdk-8u172-windows- x64.exe file as shown below.
Note: Program files (x64) is meant for 64-bit program and program files (x86) is meant for 32-bit program. 4. Run the downloaded installer jdk-8u172-windows-x64.exe. By default, the JDK is installed in the following directory. C:\Program Files\ jdk-8u172-windows-x64.exe
80560NT11598A Rev. 4.0 Page 12 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
5. After download is complete, the User Account Control window is displayed. Click Yes, to start the installation wizard Java SE Development Kit 8 update 172 (64-bit) - Setup.
6. Click Next.
80560NT11598A Rev. 4.0 Page 13 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
7. Select the optional features to be installed in Java SE Development Kit 8 Update 172 (64- bit) – Custom Setup, and click Next.
8. By default, the JDK is installed in the following directory, C:\Program Files\Java\jre1.8.0_172
To install Java to a different folder, click Change to assign path. For example, C:\Program Files (x86)\JAVA and then click Next.
80560NT11598A Rev. 4.0 Page 14 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
9. Java Setup – Progress window displays the installation status.
10. Once installation is successfully completed, Java SE Development Kit 8 Update 172 (64- bit) – Complete window displays the successful installation message as shown in the following figure. Click Close.
80560NT11598A Rev. 4.0 Page 15 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
11. Type sysdm.cpl in Run window and click OK to open System Properties.
12. Go to Advanced tab and click Environment Variables.
80560NT11598A Rev. 4.0 Page 16 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
13. In the Environment Variables window, under System variables, click New.
14. Variable name as JAVA_HOME and Variable value which is the path in C:\ drive (where Java is installed), and click OK.
15. 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.
80560NT11598A Rev. 4.0 Page 17 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
16. Add %JAVA_HOME%; in the beginning of the path mentioned for Variable value and click OK.
17. To check whether Java is installed properly or not, open the Command Prompt, issue Java version command. The following result is displayed.
80560NT11598A Rev. 4.0 Page 18 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 http://ant.apache.org/bindownload.cgi. In the Home tab, under Binary Distributions, select and download the latest Ant binary zip file. For example, apache- ant-1.9.11-bin.zip
2. Extract the zip file and save in C:\ drive.
80560NT11598A Rev. 4.0 Page 19 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
3. Type sysdm.cpl in Run window and click OK to open System Properties.
4. Go to Advanced tab and click Environment Variables.
80560NT11598A Rev. 4.0 Page 20 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
5. In the Environment Variables window, under System variables, click New.
6. Enter Variable name as ANT_HOME and Variable value located in C:\ drive (where Apache Ant is installed). Click OK.
7. ANT_HOME displays 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.
80560NT11598A Rev. 4.0 Page 21 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 http://sourceforge.net/projects/ant-contrib/files/ant-contrib/1.0b3/ant- contrib-1.0b3-bin.zip/download, download Ant-Contrib form, and unzip it into a directory (C:\ant-contrib).
2. Copy ant-contrib-1.0b3.jar file from the C:\ant-contrib directory into C:\apache-ant- 1.9.6\lib; where ANT_HOME is the folder where Apache Ant was installed (refer section 3.2 Installing Apache Ant)
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 http://dl.google.com/closure-compiler/compiler-latest.zip to download Closure compiler, and extract it into a directory (C:\closure-compiler)
80560NT11598A Rev. 4.0 Page 22 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
80560NT11598A Rev. 4.0 Page 23 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 http://csstidy.sourceforge.net/download.php and download CSSTidy.
2. Extract the .exe file into a location (For example, C:\csstidy).
80560NT11598A Rev. 4.0 Page 24 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 Server (GS2K web server) Browser)
Request One- Static time HTML page fetch Response (HTML, CSS, JS)
Screen navigation by DOM manipulation
AJAX Calls Driven by AJAX JavaScript Response (XML) 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) Type the page address in the browser (for example 192.168.240.1/gsprov.html)
2) The Embedded web server serves the gsprov.html page (in a zipped format).
80560NT11598A Rev. 4.0 Page 25 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 un- compresses 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/
|-- gs.min.js.gz
css/
|-- styles.css.gz
gsprov.html.gz
gsclient.html.gz
gsap.html.gz
…
…
80560NT11598A Rev. 4.0 Page 26 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. 4.3.1 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):
Device Setup
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. 4.3.2 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. 4.3.3 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
80560NT11598A Rev. 4.0 Page 28 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
This file contains functions for communicating with the server. It contains generic AJAX functions and also XML-related functions. 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 4.3.4 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.
80560NT11598A Rev. 4.0 Page 29 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
• 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.
• 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, located in the root of the project directory ("..\SDK\Embedded\tools\fs_image_creater\websource"). 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 + gsprov_ap_tls TLS Data application
gsbuild-client Client Mode Only Provisioning Application gsprov_client
gsbuild-client-ap Individual Provisioning Applications – gsprov_client_ap Limited AP Only mode and Client Only mode. This is not the same as the Pro version.
gsbuild-pro The PRO version of the Provisioning App. gsprov_pro
gsbuild-pro-tls The PRO version of the Provisioning App + gsprov_pro_tls the TLS data application
gsbuild-pro-client-ap-tls The Master application which has gsprov_pro_client_ap_tls “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.
gsbuild-pro-smartplug The PRO version of the provisioning app + gsprov_pro_smartplug the Smartplug application
80560NT11598A Rev. 4.0 Page 30 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
gsbuild-all Builds all of the targets mentioned above. Each of the folders mentioned above is generated.
80560NT11598A Rev. 4.0 Page 31 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
Webpage Build Procedure
5.1 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. Find
3. Find
5.2 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. "..\SDK\Embedded\tools\fs_image_creater\websource"
3. Execute ant -f gsbuild_ext.xml command to start the build procedure.
80560NT11598A Rev. 4.0 Page 32 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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”.
80560NT11598A Rev. 4.0 Page 33 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
5.3 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).
80560NT11598A Rev. 4.0 Page 34 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. Figure 2 and Figure 3 give an example of the final webpage build.
Figure 2: Webpage Client Settings
1. To add new HTML elements as shown in Figure 2, update the 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. 4.0 Page 35 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. 4.0 Page 36 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. 4.0 Page 37 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 : ', tcpSrvPort);
addSummaryRow(divSum, 'Protocol : ', protocol);
addSummaryRow(divSum, 'Frequency : ', frequency);
• In “gs.client.js” file create a new “div” element and add four text boxes in “dispStaSummaryScreen()”
80560NT11598A Rev. 4.0 Page 38 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. 4.0 Page 39 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
80560NT11598A Rev. 4.0 Page 40 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 Figure 4Error! 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. 4.0 Page 41 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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 Figure 4.
The following section details the source code modification:
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. 4.0 Page 42 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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.
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,
80560NT11598A Rev. 4.0 Page 43 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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:
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:
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:
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:
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. 4.0 Page 44 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
The above object will create a XML tag as shown below:
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:
80560NT11598A Rev. 4.0 Page 45 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
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. 4.0 Page 46 of 48 2018-05-31
GS2K Custom Webpage Build Procedure Application Note
80560NT11598A Rev. 4.0 Page 47 of 48 2018-05-31