Building Custom Webpages for GainSpan Modules. Application Note AN069

Transcription

1 Building Custom Webpages for GainSpan Modules Application Note AN069 Supports modules GS1011M and GS1500M Releases 2.4.x, 2.5.x, 3.4.x, and 3.5.x Publication No. GS-AN069 Version: 1.0 Date: December 11, 2013

2 GainSpan Corporate Headquarters 3590 N. First Street Suite 300 San Jose, CA Tel +1 (408) Copyright 2013 GainSpan Corporation. All rights reserved. Trademarks and registered trademarks are the property of their respective owners. GainSpan warrants performance of its modules and semiconductor products to current specifications in accordance with GainSpan s standard warranty, but reserves the right to make changes to any products and services at any time without notice. GainSpan assumes no responsibility or liability arising out of the application or use of any information, product, or service described herein except as expressly agreed to in writing by GainSpan Corporation. GainSpan customers are advised the latest version of device specifications before relying on any published information and before placing orders for products and services. GS-AN069 Page 2 of 79 Release 1.0

3 Release History Version Date Remarks Dec-11 Initial Release GS-AN069 Page 3 of 79 Release 1.0

4 Table of Contents CHAPTER 1 INTRODUCTION... 9 PURPOSE... 9 CHAPTER 2 THE WEBPAGE TO BE DISPLAYED CUSTOM WEBPAGE ELEMENTS CHAPTER 3 DOWNLOADING WEBSITE INTO GAINSPAN SOC PREPARING WEBSITE FOR DOWNLOADING MINIFYING THE JAVASCRIPT CODE COMPRESSING FILES USING GZIP Compressing Index.html File Compressing Styles.css File COMPRESSED FILES READY TO DOWNLOAD CHAPTER 4 DOWNLOADING CREATED WEBSITE TO A GS1011 OR GS1500 SYSTEM DOWNLOADING CREATED CUSTOM WEBSITE USING ALREADY EXISTING FIRMWARE Example Loading the Website into the GS1500 Evaluation Board DOWNLOADING CREATED CUSTOM WEBSITE AND CUSTOM FIRMWARE IN SDK BUILDER Create a Custom Version of Firmware Using SDK Builder Installing Custom Firmware Downloaded from SDK Builder CHAPTER 5 VIEWING YOUR CUSTOM WEBPAGES GS-AN069 Page 4 of 79 Release 1.0

5 Figures Figure 1: GainSpan Holiday Countdown Clock Example Figure 2: Website Example Index and Logo Files Figure 3: Website Example Countdown File Figure 4: Website Example CSS Directory Figure 5: Website Example ZIP File Figure 6: Website Example js Subdirectory Figure 7: Website Example "css" Subdirectory Figure 8: JavaScript Compression Tool Figure 9: Upload JavaScript Files Figure 10: Select Countdown.js File Figure 11: Countdown.js File Uploaded Figure 12: Upload Files & Compress JavaScript Figure 13: Copying Text File Into Notepad Figure 14: Saving JavaScript File in Notepad Figure 15: JS Subdirectory Output Figure 16: Deleting Countdown JS file Figure 17: Index.html File Displayed in Website Example Directory Figure 18: Compress the index.html File Figure 19: Compressed Index.html File Renamed (DOS Window) GS-AN069 Page 5 of 79 Release 1.0

6 Figure 20: Compressed Index.html.gz File Renamed Under Website Example Directory Figure 21: Style.css File Displayed in Website Example Directory Figure 22: Compressing Styles.css File (DOS Window) Figure 23: Issue the GZIP Styles.css to Compress Figure 24: Compressed styles.css.gz File Renamed Under Website Example Directory Figure 25: Countdown.min.js File Displayed in Website Example Directory Figure 26: Compressing Countdown.min.js File (DOS Window) Figure 27: Issuing the GZIP Countdown.min.js Command Figure 28: Compressed Countdown.min.js File Renamed Under Website Example Directory Figure 29: Website Example for Download into GainSpan System Figure 30: Countdown.min.js.gz Website Created Figure 31: Styles.css.gz Website Created Figure 32: Preparing the GainSpan Device for Programming Figure 33: Programming External Flash Figure 34: Programming Additional Files into Flash Figure 35: External Flash is Loaded with Selected Components Figure 36: Internal Flash Loaded with Selected Firmware and Binaries Figure 37: Created Example Zip File Used for Building SDK Firmware (Screen 1) Figure 38: Created Example Zip File Used for Building SDK Firmware (Screen 2) Figure 39: Created Example Zip File Used for Building SDK Firmware (Screen 3) Figure 40: Creating Custom Version of Firmware Using SDK Builder Figure 41: Serial-to-WiFi Binary Settings Figure 42: Included DHCP and HTTP Server to Create Custom Firmware GS-AN069 Page 6 of 79 Release 1.0

7 Figure 43: Add Custom Website Files to Provision Figure 44: Upload Custom Web Page Directory Figure 45: Select Zip File Containing Your Website Figure 46: Open Example Website Zip File Figure 47: Example Website Zip File Displayed Figure 48: Selecting Additional Firmware Features Figure 49: Naming Firmware Binary Figure 50: Submit Firmware Binary Build Figure 51: SDK Builder Compiling Firmware Figure 52: SDK Builder Download Complete Figure 53: Viewing Downloaded Custom Firmware Files Figure 54: SDK Builder Files Copied to a Temporary Directory Figure 55: Original MAC Address on Module Figure 56: Changed MAC Address on Module Figure 57: Flash Program Utility Figure 58: Preparing the GainSpan Device for Programming Figure 59: Connection Complete Figure 60: Selecting Module and Firmware Version to Program External Flash on the GainSpan Module Figure 61: Flash Configuration on the GainSpan Module is Successful Figure 62: Set Board to Run Mode Figure 63: Programming the Rest of the Images in External Flash Figure 64: Select Single Image to Download Figure 65: Programming Single Image GS-AN069 Page 7 of 79 Release 1.0

8 Figure 66: Set Board to Program Mode Message Window Figure 67: MAC Address will be Highlighted Figure 68: Download the WLAN and APP Firmware Along with Factory Defaults Files Figure 69: Programming the Internal Flash with the WLAN, APP, and Factory Default Files Figure 70: Configure the Serial Port Settings in Tera Term Figure 71: Tera Term VT Serial2WiFi APP Window Displayed Figure 72: GainSpan Node is Configured Figure 73: Obtaining an IP Address Automatically Figure 74: Connect to Wireless Network Connection Figure 75: Enter User Name and Password to Authenticate (Screen 1) Figure 76: Enter User Name and Password to Authenticate (Screen 2) Figure 77: GainSpan Holiday Countdown Webpage GS-AN069 Page 8 of 79 Release 1.0

9 Chapter 1 Introduction Purpose This document provides instructions on how to include your own custom webpages to display them from the webserver built into GainSpan GS1011M or GS1500M SoC (running 2.4.x firmware for the GS1011 or 3.4.x firmware for the GS1500). For the purpose of showing this, a simple webpage with JavaScript code and a CSS style sheet will be modified and loaded into a GainSpan module. GS-AN069 Page 9 of 79 Release 1.0

10 Chapter 2 The Webpage to be Displayed The webpage that will be displayed as an example in this document provides a couple of simple JavaScript counters that will count down to Christmas 2013 and New Year s Eve 2014 from the current time at which the webpage is loaded. Opening the webpage in a browser will display an example as shown in Figure 1. In this example the webpage was opened in Chrome on November 19, Figure 1: GainSpan Holiday Countdown Clock Example GS-AN069 Page 10 of 79 Release 1.0

11 Custom Webpage Elements The custom webpage is made up of the following elements: 1. The index.html file which includes the main HTML source code for the webpage. 2. The logo.gif file which provides the GainSpan logo located on top of the index.html webpage. 3. The countdown.jr JavaScript code used to perform the countdowns to Christmas and New Year s eve. 4. The styles.css Style sheet file used to define the style in which the index.html webpage will be displayed. The files are located as follows: 1. The index.html and logo.gif files are located in the root of the directory structure as shown in Figure 2. Figure 2: Website Example Index and Logo Files GS-AN069 Page 11 of 79 Release 1.0

12 2. The countdown.js is located in the js subdirectory as shown in Figure 3. Figure 3: Website Example Countdown File 3. The styles.css is located in the css subdirectory as shown in Figure 4. Figure 4: Website Example CSS Directory The source code for this website can be obtained from GainSpan and will be provided as a zip file named AN069_Website_example.zip (see Figure 5). Your gzip-compatible software may be different than the one presented in this document. Throughout this document the instructions use GZIP. GS-AN069 Page 12 of 79 Release 1.0

13 Figure 5: Website Example ZIP File GS-AN069 Page 13 of 79 Release 1.0

14 The js subdirectory is shown in Figure 6. Figure 6: Website Example js Subdirectory GS-AN069 Page 14 of 79 Release 1.0

15 The css subdirectory is shown in Figure 7. Figure 7: Website Example "css" Subdirectory GS-AN069 Page 15 of 79 Release 1.0

16 Chapter 3 Downloading Website into GainSpan SoC Preparing Website for Downloading In order to prepare the website so that it can be downloaded into a GainSpan GS1011M or GS1500M system, perform the following steps: 1. The JavaScript code needs to be minified (All *.js JavaScript code files need to be minified). 2. The minified JavaScript code file(s), all HTML source code files (*.html), and CSS style sheet files (*.css) need to be compressed with gzip or a gzip compatible program. Your website should first be placed in a directory structure as follows: 1. The HTML and graphic files for the website are placed at the root of the directory tree. 2. The JavaScript source code files for the website are placed in a subdirectory named js that lies directly under the website s root directory. 3. The CSS style sheet files for the website are placed in a subdirectory named css that lies directly under the website s root directory. After placing your website files as described above, follow the next sections to prepare your website for downloading into a GainSpan GS1011M or GS1500 SoC. GS-AN069 Page 16 of 79 Release 1.0

17 Minifying the JavaScript Code To minify your JavaScript code, you should be free to use any JavaScript minifier of your choice, when you do so, simply make sure that the resultant minified JavaScript code works properly before continuing with the remaining portions of the process below. For this example, we will use the online JavaScript minifier located at jscompress.com. To use it, perform the following: 1. Open a web browser and type in the following URL: The following screen will display (see Figure 8). Figure 8: JavaScript Compression Tool GS-AN069 Page 17 of 79 Release 1.0

18 2. Select the Upload JavaScript Files tab as shown in Figure 9. Figure 9: Upload JavaScript Files 3. Click on the Choose File button and select the countdown.js file under the website example folder (see Figure 10). Click Open. Figure 10: Select Countdown.js File GS-AN069 Page 18 of 79 Release 1.0

19 4. The Online JavaScript Compression Tool screen will display with the uploaded countdown.js file (see Figure 11). Figure 11: Countdown.js File Uploaded GS-AN069 Page 19 of 79 Release 1.0

20 5. Select the Upload Files & Compress JavaScript button. This will return the following output as shown in Figure 12. Figure 12: Upload Files & Compress JavaScript 6. Copy the complete text include in the window under Compressed JavaScript Output into a text file using Notepad (see Figure 13). Figure 13: Copying Text File Into Notepad GS-AN069 Page 20 of 79 Release 1.0

21 7. Save the file in Notepad as countdown.min.js (see Figure 14). Figure 14: Saving JavaScript File in Notepad GS-AN069 Page 21 of 79 Release 1.0

22 8. The result of the js subdirectory will display as shown in Figure 15. Figure 15: JS Subdirectory Output 9. Delete the original countdown.js file from the js subdirectory. Once deleted the countdown.min.js should be the only file listed (see Figure 16). Figure 16: Deleting Countdown JS file 10. You have now completed minifying the JavaScript code for the website. GS-AN069 Page 22 of 79 Release 1.0

23 Compressing Files Using GZIP The following instructions use GZIP. However, you can use any gzip-compatible program. Now that we have minified the JavaScript code of our website, the next step in the process is to compress all (minified) JavaScript, HTML and CSS files in the website directory tree using GZIP, this section will show you how this is done with the example website. To use the GZIP utility to compress your files, please first download the proper GZIP executable for your operating system from the following website: After installing GZIP on your computer, use it to compress the HTML, CSS and minified JavaScript files making up your website. The following steps outlined below are performed on a Windows 7 computer. For the following examples, the GZIP utility was installed on a Windows 7 64-bit computer. Please make sure that you follow the instructions for usage of GZIP, or whatever GZIP compatible utility you will use to GZIP the website files. In the case of the current incarnation of GZIP, for example, it was needed to add the path at which the GZIP utility was located at within the Windows machine in use so that it would be found from any directory from which it is used. Other GZIP releases and other compression utilities supporting GZIP compression may impose other, different needs to the user and they will not be covered by this document, please simply make sure that you follow the instructions for such tool to be able to perform GZIP compression on the files needed to follow the example provided by this document or your own custom webpages once you are doing so. For the purposes of the example herein enclosed, GZIP downloaded from the above link was used and the path on which it was placed was included on the PC being used for this purpose). GS-AN069 Page 23 of 79 Release 1.0

24 Compressing Index.html File To compress the index.html file, perform the following: 1. To compress the index.html file, open a DOS command line window to the c:\website_example directory where the directory tree was placed on your computer. The index.html file is displayed (see Figure 17). Figure 17: Index.html File Displayed in Website Example Directory GS-AN069 Page 24 of 79 Release 1.0

25 2. In the DOS window, issue the command gzip index.html to compress the index.html file (see Figure 18). Figure 18: Compress the index.html File GS-AN069 Page 25 of 79 Release 1.0

26 3. The compressed file is now named index.html.gz (see Figure 19 and Figure 20). Figure 19: Compressed Index.html File Renamed (DOS Window) Figure 20: Compressed Index.html.gz File Renamed Under Website Example Directory GS-AN069 Page 26 of 79 Release 1.0

27 Compressing Styles.css File To compress the styles.css file, perform the following: 1. Open the directory where the styles.css file resides (see Figure 21). Figure 21: Style.css File Displayed in Website Example Directory GS-AN069 Page 27 of 79 Release 1.0

28 2. To compress the styles.css file, open a DOS command line window to the c:\website_example\css directory on your computer. The styles.css file is displayed (see Figure 22). Figure 22: Compressing Styles.css File (DOS Window) GS-AN069 Page 28 of 79 Release 1.0

29 3. In the DOS window, issue the command gzip styles.css to compress the index.html file (see Figure 23). Figure 23: Issue the GZIP Styles.css to Compress 4. The compressed file is now named styles.css.gz (see Figure 24). Figure 24: Compressed styles.css.gz File Renamed Under Website Example Directory GS-AN069 Page 29 of 79 Release 1.0

30 Compressing Minified Countdown File To compress minified countdown.min.js file, perform the following: 1. Open the directory where the countdown.min.js file resides (see Figure 25). Figure 25: Countdown.min.js File Displayed in Website Example Directory GS-AN069 Page 30 of 79 Release 1.0

31 2. To compress the countdown.min.js file, open a DOS command line window to the c:\website_example\js directory on your computer. The index.html file is displayed (see Figure 26). Figure 26: Compressing Countdown.min.js File (DOS Window) GS-AN069 Page 31 of 79 Release 1.0

32 3. In the DOS window, issue the command gzip countdown.min.js to compress the index.html file (see Figure 27). Figure 27: Issuing the GZIP Countdown.min.js Command GS-AN069 Page 32 of 79 Release 1.0

33 4. The compressed file is now named countdown.min.js.gz (see Error! Reference source not found. and Figure 28). Figure 28: Compressed Countdown.min.js File Renamed Under Website Example Directory GS-AN069 Page 33 of 79 Release 1.0

34 Compressed Files Ready to Download The website directory tree and all files are now prepared to be used to download to a GainSpan GS1011 or GS1500 SoC. If you would like to obtain a copy of the website files after being modified for downloading into a GainSpan GS1011 or GS1500 system as described in this section, contact GainSpan for the AN069_Website_example_for_download_into_GainSpan_System.zip file. Preparing a zip file similar to the AN069_Website_example_for_download_into_GainSpan_System.zip file that includes a complete website after modification for downloading into a GainSpan GS1011 or GS1500 system is recommended. A zip file is recommended if you are planning on using the online SDK Builder available in the GainSapn website to create custom firmware that includes your custom website. Figure 29, Figure 30, and Figure 31 shows an example of a created website. Figure 29: Website Example for Download into GainSpan System GS-AN069 Page 34 of 79 Release 1.0

35 Figure 30: Countdown.min.js.gz Website Created GS-AN069 Page 35 of 79 Release 1.0

36 Figure 31: Styles.css.gz Website Created GS-AN069 Page 36 of 79 Release 1.0

37 Chapter 4 Downloading Created Website to a GS1011 or GS1500 System The prepared files in your website can be downloaded into a GainSpan GS1011 or GS1500 system. There are two approaches that can be followed: 1. Downloading created custom website using already existing firmware. An already existent version of firmware (either obtained from a GainSpan EVK or a custom version of firmware created by you using a GainSpan SDK) can be loaded into the GainSpan GS1011 or GS1500 system in question along with your custom webpages 2. Downloading created custom website with custom firmware created in SDK Builder. A custom set of Serial-to-WiFi firmware binaries can be created in the GainSpan online SDK Builder tool that will include your custom website and will later be downloaded to your GainSpan GS1011 or GS1500 system. Downloading Created Custom Website Using Already Existing Firmware To download your created custom website into a GainSpan GS1011 or GS1500 system, you will use the gs_flashprogram programming tool. This section will show you examples of how to load a standard set of GainSpan firmware (Serial to Wi-Fi App firmware and WLAN firmware) along with the custom website prepared for download in the example given in this document. To download the firmware and website into your GainSpan system (GS1011 or GS1500), perform the following: 1. Firmware will be loaded into the internal flash of the GainSpan SoC in question. 2. The custom website will be downloaded (along with any other possible components, such as factory backup firmware images, sf_info memory map and macblock.bin n module firmware) into the external flash of the GainSpan system you are working on. Before downloading the code and website into your GainSpan SoC, please make sure that your website s total directory tree does not use any more than 64 kilobytes of memory, as the standard sf_info memory GS-AN069 Page 37 of 79 Release 1.0

38 map used to define the external flash s memory space has reserved only 64 kilobytes of external flash memory space for webpage storage. If you need more space than this for your custom website, please contact GainSpan so that we can help you create an external flash memory map that allocates the required memory space for your website. For more information on additional programming of the GainSpan GS1011 and GS1500 modules, refer to the GainSpan Module Programming Guidelines document. GS-AN069 Page 38 of 79 Release 1.0

39 Example Loading the Website into the GS1500 Evaluation Board To load the created website into the GainSpan GS1500 evaluation board using the standard 3.4.x firmware, perform the following: 1. Prepare the GainSpan device for programming. Open the gs_flashprogram tool to connect to the GS1500 system. The Preparing the GainSpan Device for Programming screen will display (see Figure 32). 2. Select the Interface, UART Port, select the Module (e.g., GS1500M), and select GEPS version. Check the Program External Flash box and click the Check Connection button (see Figure 32). Figure 32: Preparing the GainSpan Device for Programming GS-AN069 Page 39 of 79 Release 1.0

40 3. When programming external flash, the WEB dir option will be selected and will point to the root of the website tree. This is after preparing the website for downloading into the GainSpan system as described in this document. (see Figure 33). Figure 33: Programming External Flash GS-AN069 Page 40 of 79 Release 1.0

41 4. Select the remaining components needed to download to external flash (e.g., sf_info, macblock, etc.) (see Figure 34). Figure 34: Programming Additional Files into Flash GS-AN069 Page 41 of 79 Release 1.0

42 5. External flash is loaded with the selected components (see Figure 35). Figure 35: External Flash is Loaded with Selected Components GS-AN069 Page 42 of 79 Release 1.0

43 6. The internal flash is loaded with the selected WLAN and APP firmware files. In this example, WLAN firmware and Web Provisioning UART Serial-to-WiFi App firmware binaries (see Figure 36). Figure 36: Internal Flash Loaded with Selected Firmware and Binaries GS-AN069 Page 43 of 79 Release 1.0

44 Downloading Created Custom Website and Custom Firmware in SDK Builder In order to create a custom version of firmware on the online SDK builder tool available on the GainSpan website that includes your custom website, you will first need to create a zip file that includes your website after having modified it for download into a GainSpan system (that is, after having minified your JavaScript code and compressed your files with Gzip as described previously). Figure 37, Figure 38, and Figure 39 shows an example zip file used to create a custom SDK firmware. Figure 37: Created Example Zip File Used for Building SDK Firmware (Screen 1) GS-AN069 Page 44 of 79 Release 1.0

45 Figure 38: Created Example Zip File Used for Building SDK Firmware (Screen 2) GS-AN069 Page 45 of 79 Release 1.0

46 Figure 39: Created Example Zip File Used for Building SDK Firmware (Screen 3) GS-AN069 Page 46 of 79 Release 1.0

47 Create a Custom Version of Firmware Using SDK Builder A custom website that is created using the SDK Builder cannot exceed 50 kilobytes in size. If you require a larger website than the custom version of firmware created by SDK Builder, contact GainSpan Technical Support for additional instructions. After making sure that the zip file with your website looks similar to the one shown, you can now create a custom version of firmware using the online SDK Builder tool or related documents refer to GainSpan website: To create a custom version of firmware using SDK Builder, perform the following: 1. For example, select the GS1500M version 2.2 module along with GEPS firmware and 2 megabytes of external flash memory to create a custom Serial-to-WiFi firmware (see Figure 40). Figure 40: Creating Custom Version of Firmware Using SDK Builder GS-AN069 Page 47 of 79 Release 1.0

48 2. The default UART settings were left in place for the custom Serial-to-WiFi binary (see Figure 41). Figure 41: Serial-to-WiFi Binary Settings 3. The DHCP Server, HTTP Server and Network Connection Manager Capabilities were selected to be included into the created custom firmware (see Figure 42). Figure 42: Included DHCP and HTTP Server to Create Custom Firmware GS-AN069 Page 48 of 79 Release 1.0

49 4. Add the custom website files, Web Provisioning and Custom Web Pages (see Figure 43). Figure 43: Add Custom Website Files to Provision GS-AN069 Page 49 of 79 Release 1.0

50 5. Select the checkbox Upload Custom Web Page Directory (see Figure 44). Figure 44: Upload Custom Web Page Directory GS-AN069 Page 50 of 79 Release 1.0

51 6. Select the zip file containing your website (after modifying its files by minifying your JavaScript code and compressing HTML, CSS and minified JavaScript files using GZIP) (see Figure 45). Figure 45: Select Zip File Containing Your Website GS-AN069 Page 51 of 79 Release 1.0

52 7. The zip file will be AN069_Website_example_for_download_into_GainSpan.zip. See Figure 46 and Figure 47. Figure 46: Open Example Website Zip File Figure 47: Example Website Zip File Displayed GS-AN069 Page 52 of 79 Release 1.0

53 8. Select additional features for your custom firmware and name your custom firmware (see Figure 48). In this example no other features were added. Figure 48: Selecting Additional Firmware Features GS-AN069 Page 53 of 79 Release 1.0

54 9. Enter the firmware binary name. In this example we are naming the firmware binary, AN069_sample_firmware (see Figure 49). Figure 49: Naming Firmware Binary GS-AN069 Page 54 of 79 Release 1.0

55 8. Submit your custom build configuration by clicking on the Submit button (see Figure 50). Figure 50: Submit Firmware Binary Build GS-AN069 Page 55 of 79 Release 1.0

56 9. Select Build History tabe in the SDk Builder to see the status of your custom Serial-to-WiFi firmware build is Pending. The SDK builder will compile and build your firmware (see Figure 51). Figure 51: SDK Builder Compiling Firmware 10. After the SDK Builder completes building your custom Serial-to-WiFi firmware build, you will see the status as Download (see Figure 52). Figure 52: SDK Builder Download Complete GS-AN069 Page 56 of 79 Release 1.0

57 11. Once download is complete, click on the Download link to download a zip file including your custom firmware, which will include a list of files similar to what is shown in Figure 53. Figure 53: Viewing Downloaded Custom Firmware Files GS-AN069 Page 57 of 79 Release 1.0

58 Installing Custom Firmware Downloaded from SDK Builder The downloaded custom firmware files from the SDK Builder will include your custom webpages. To install the custom firmware that was downloaded from the SDK Builder, perform the following: 1. Place the files included within the zip file downloaded from the SDK Builder into a directory on your PC. For example, the files were placed in the C:\Temp directory (see Figure 54). Figure 54: SDK Builder Files Copied to a Temporary Directory GS-AN069 Page 58 of 79 Release 1.0

59 2. Edit the facdef.txt file so that its first line reflects the MAC address that is printed on the sticker of your module (GS1011 or GS1500). In this example, it was changed to the MAC address 00:1d:c9:07:15:56. The original facdef.txt file as downloaded from the SDK Builder displays; 001dc9d070cc (see Figure 55). Figure 55: Original MAC Address on Module The edited MAC address is 001dc (see Figure 56). Save the file. Figure 56: Changed MAC Address on Module GS-AN069 Page 59 of 79 Release 1.0

60 3. After editing the facdet.txt file, power off the GainSpan GS1500 module and select the Program mode. Power the board back on and then connect it via a serial connection to your PC (either via a USB or UART cable or through a DB9 RS-232 serial connection. 4. Open the gs_flashprogram utility on your PC (see Figure 57). Figure 57: Flash Program Utility GS-AN069 Page 60 of 79 Release 1.0

61 5. Select the Single UART interface, UART port (in this example, COM4) (see Figure 58). Figure 58: Preparing the GainSpan Device for Programming GS-AN069 Page 61 of 79 Release 1.0

62 6. Click the Check Connection button to verify that the connection to the GainSpan module is established. A Green check will appear indicating that the connection is complete (see Figure 59). Figure 59: Connection Complete GS-AN069 Page 62 of 79 Release 1.0

63 7. Select Module type and GEPS firmware version. In this example GS1500M was selected for Module, and GEPS 3.5 was selected for GEPS version. Check the Program External Flash box (see Figure 60). Figure 60: Selecting Module and Firmware Version to Program External Flash on the GainSpan Module GS-AN069 Page 63 of 79 Release 1.0

64 8. Click on the Next button. The GainSpan module will start the flash configuration process. Once complete a message will display indicating that the configuration is successful (see Figure 61). Figure 61: Flash Configuration on the GainSpan Module is Successful GS-AN069 Page 64 of 79 Release 1.0

65 9. Clcik the Next button the following window in Figure 62 will display. Figure 62: Set Board to Run Mode GS-AN069 Page 65 of 79 Release 1.0

66 10. Turn off the GainSpan module, and turn the Program/Run switch to RUN mode. Turn the On/Off switch to the ON position. After doing so, click on the OK button on the Set board to Run mode window that popped up on your PC (see Figure 63). Figure 63: Programming the Rest of the Images in External Flash GS-AN069 Page 66 of 79 Release 1.0

67 11. Select the Single Image option and select the ExternalFlash.bin file that was included in the zip file download from the SDK Builder from your custom firmware (see Figure 64). Figure 64: Select Single Image to Download GS-AN069 Page 67 of 79 Release 1.0

68 12. Click on the Program Single Image button and wait until the programming of the external flash is over. A message will display indicating that the external flash image file has been successfully programmed. This will take several minutes (see Figure 65). Figure 65: Programming Single Image GS-AN069 Page 68 of 79 Release 1.0

69 13. Once complete, click the Next button. The following window will display (see Figure 66). Figure 66: Set Board to Program Mode Message Window 14. Turn off the GainSpan module and turn the Program/Run switch to Program mode. Turn the On/Off switch to the ON position. GS-AN069 Page 69 of 79 Release 1.0

70 15. Click the OK button and the following screen will display with the highlighted MAC address (see Figure 67). Figure 67: MAC Address will be Highlighted GS-AN069 Page 70 of 79 Release 1.0

71 16. Select the WLAN firmware and APP firmware files that were provided in the zip file downloaded from the SDK Builder and the facdef.txt file you downloaded and the edited GainSpan module MAC address (see Figure 68). Figure 68: Download the WLAN and APP Firmware Along with Factory Defaults Files GS-AN069 Page 71 of 79 Release 1.0

72 17. After selecting the WLAN, APP, and Factory Default files as shown in the previous step, click on the Program Flash button and wait until the internal flash programming is complete (see Figure 69). The GainSpan system will have both your custom firmware and webpages loaded into it. Figure 69: Programming the Internal Flash with the WLAN, APP, and Factory Default Files GS-AN069 Page 72 of 79 Release 1.0

73 18. Turn the On/Off power switch to the OFF position. Turn the Run/Program switch to the RUN mode. Turn the On/Off power switch back to the ON position. You can now view the custom webpages. GS-AN069 Page 73 of 79 Release 1.0

74 Chapter 5 Viewing Your Custom Webpages Once you have loaded firmware and your custom webpages as described in this document, you should now be able to view your custom webpages. In this section, an example of configuring your GainSpan module as a limited access point and have its webserver provide the custom webpages to a PC that will associate to it will be given. To do so, follow the steps detailed below: 1. Connect to your GainSpan module via a serial connection from a PC using a terminal program like Tera Term. Configure the serial port settings (see Figure 70). Figure 70: Configure the Serial Port Settings in Tera Term GS-AN069 Page 74 of 79 Release 1.0

75 2. Click the OK button. After configuring Tera Term s serial port as shown above, and having your GainSpan module connected to your PC, power your GainSpan module ON. The Tera Term VT window will display with the Serial2WiFi APP message (see Figure 71). Figure 71: Tera Term VT Serial2WiFi APP Window Displayed 3. Enter the following commands. AT+NSET= , , AT+WM=2 AT+DHCPSRVR=1 AT+WEBPROV=admin,admin,0,2,,1 AT+WA=GainSpanCustom,,11 The above commands will perform the following: Set the module to use a fixed IP address of , a subnet mask of and a gateway IP address of (with the command AT+NSET= , , ). Set the module to operate as a limited Access Point (with the command AT+WM=2 ). Enable the DHCP server on the GainSpan module so that it can provide an IP address to a PC associating to it (through the AT+DHCPSRVR=1 command). Enable the webserver by enabling web provisioning and configure it to use admin for both its username and password (with the AT+WEBPROV=admin,admin,0,2,,1 command). GS-AN069 Page 75 of 79 Release 1.0

76 Start the Limited Access Point service with SSID = GainSpanCustom on channel 11 (with the command AT+WA=GainSpanCustom,,11 ) 4. The GainSpan node is configured to operate as a limited access point and to serve your custom webpages. Figure 72 will display with the entered commands. Figure 72: GainSpan Node is Configured GS-AN069 Page 76 of 79 Release 1.0

77 5. Connect to the GainSpan module to a PC to observe the custom webpage. Make sure that your wireless adapter is configured to obtain an IP address automatically (DHCP) (see Figure 73). Figure 73: Obtaining an IP Address Automatically GS-AN069 Page 77 of 79 Release 1.0

78 6. Associate your PC wireless adapter to the network as shown in Figure 74. Figure 74: Connect to Wireless Network Connection GS-AN069 Page 78 of 79 Release 1.0

79 7. Open your PC web browswer and enter the following address: /index.html. 8. Enter the User Name and Password to authenticate (see Figure 75). Enter admin for both (see Figure 76). Figure 75: Enter User Name and Password to Authenticate (Screen 1) Figure 76: Enter User Name and Password to Authenticate (Screen 2) 9. Click the Log In button. The GainSpan Holiday Countdown screen will display (see Figure 77). Figure 77: GainSpan Holiday Countdown Webpage GS-AN069 Page 79 of 79 Release 1.0