GS2K Custom Webpage Build Procedure...GS2K Custom Webpage Build Procedure Application Note...

GS2K Custom Webpage Build Procedure Application Note

80560NT11598A Rev. 4.0 – 2018-05-31


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

APPLICABILITY TABLE

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.

PRODUCT

GS2K based Modules


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

List of Tables Table 1: Glossary of Terms ....................................................................................................... 9


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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.

http://ant.apache.org/bindownload.cgi


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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)

http://sourceforge.net/projects/ant-contrib/files/ant-contrib/1.0b3/ant-contrib-1.0b3-bin.zip/download

http://sourceforge.net/projects/ant-contrib/files/ant-contrib/1.0b3/ant-contrib-1.0b3-bin.zip/download

http://dl.google.com/closure-compiler/compiler-latest.zip


80560NT11598A Rev. 4.0 of 48 2018-05-31


80560NT11598A Rev. 4.0 of 48 2018-05-31

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).

http://csstidy.sourceforge.net/download.php


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 (GS2K web server)

Static HTML page

AJAX API’s

Request

Response (HTML, CSS, JS)

AJAX Calls

Driven by JavaScript

Response (XML)

Screen navigation by DOM manipulation

GSLink web-app: Block Diagram

One-time fetch

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 of 48 2018-05-31

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 of 48 2018-05-31

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):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"

/>

<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>



<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>


80560NT11598A Rev. 4.0 of 48 2018-05-31

<![endif]-->

</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.

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 of 48 2018-05-31

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 of 48 2018-05-31

• 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 + 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


80560NT11598A Rev. 4.0 of 48 2018-05-31

gsbuild-all Builds all of the targets mentioned above. Each of the folders mentioned above is generated.


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 <property name="ClosureCompiler.dir" value="C:/closure-compiler" /> and

replace the value with the path where Closure compiler is installed.

3. Find <property name="csstidy.dir" value="C:/csstidy" /> and replace the value with

the path where CSSTidy is installed.

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-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. 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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31

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 of 48 2018-05-31


80560NT11598A Rev. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

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:

<network>

<client>

<wireless>……</wireless>

<ip>……</ip>

<srvcfg>

<tcpsrvip>192.168.19.15</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. 4.0 of 48 2018-05-31

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>192.168.19.15</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 1.

5. 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.


80560NT11598A Rev. 4.0 of 48 2018-05-31

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. 4.0 of 48 2018-05-31

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. 4.0 of 48 2018-05-31

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 of 48 2018-05-31

GS2K Custom Webpage Build Procedure...GS2K Custom Webpage Build Procedure Application Note...

Documents

Transcript of GS2K Custom Webpage Build Procedure...GS2K Custom Webpage Build Procedure Application Note...