By Don Moskaluk
February 22, 2006
Open
Sourced Wireless Mesh Access Points are more flexible and take advantage
of new business opportunities than proprietary systems.
They provide a unique architecture and topology that can readily
provide many inexpensive nodes as the first and last mile service.
Controlling the first page or captive portal of any web browser brings
tremendous opportunity especially to Internet advertisement. The captive portal technique forces an HTTP client on a network to see a
splash web page (usually for authentication purposes) before surfing the
Internet. To
control the first page using Locustworld’s OS requires advanced
Splash Page Customization.
Locustworld captive
portal and splash page is first page
on the Mesh node’s website that the user sees before being given the
option to continue to either another site or access the Internet. Primary
use of the captive portal and splash pages are to login in and or used to
promote a company, service or product. Often a splash page will consist of
text or graphics that entice the user into exploring the rest of the Web
site. Splash pages are
intended to entice the visitor into a site and often use Flash and graphic
animation. Using WIANA to
administrate the splash page is restricted to simple HTTP text and linked
graphics.
The splash page typically
is a static page that can be customized simply by adding HTTP text in
WIANA Manage settings, as seen below:
As one can see in the
HTML insert form, the amount of HTML code is restricted in length to 256
characters. The splash page can be customized
as per Locustworld’s
wiki. Scripts
also can be customized to provide additional content beyond the
256-character limit. However,
serious content providers and advertiser need true Flash and Video to be
hosted on the MeshAP. They
also require pass through of content through the captive portal using a
walled garden.
A
walled
garden controls the
information and Web sites the user is able to access HTML
text and graphics; as a result, the user can pass through to the splash
page prior to login access. A
walled garden, with regards to splash page, refers to a closed exclusive
set of website that users can view on the splash page with out login into
mesh node. This is in contrast to providing user’s access to the open
Internet for content and e-commerce; however, restricting the user from
exploring the Internet until user logins into access server. The term is
often used to describe offerings from advertiser of web, television or
digital media operators, which provide custom content, and not simply
common carrier functions.
Implementing
a walled
garden is as easy as adding an IP address or IP address range is
simple procedures in WIANA see below.
To access site beyond the splash page one simple has to determine
the IP address of the web service and add the IP address into WIANA.
To provide advance splash
page setup one must go beyond WIANA.
The following is a description on how to provide flash and video
animation to the web site by using the MeshAP as the first
and last mile. It uses a
combination of customized splash page customization, walled garden and
various flash and video techniques.
Advertiser will require
additional web services. For
this document a standard mesh installation is required with additional
host website outside the Mesh zone, see illustration below for topology.
Each MeshAP or mesh node
can host a splash page. Adding
advance customization will bring animation or even video to the last mile.
As a result each MeshAP will require to be customized to bring high
quality, jitter free, video or animation to the end user. The result means
that MeshAP will require additional processing and storage capabilities.
The processing power of a
MeshAP can be as low as 266 MHz however with additional graphics and video
1 GHz processor is recommended such as either Moskaluk Prototype’s Outdoor
MeshAP or Indoor MeshAP. Also
the amount of RAM and storage space also need to significantly larger to
host the animation or movie. Example
the 64 megs of RAM that is required to run the mesh would easily be bumped
up to 256 Megs and the CF-Flash card or DOM can range anywhere from 64
megs up to 2 Gigs.
When you have sufficient
processing power and capacity you can add additional functionality like
video and animation to your MeshAP. The
procedure for adding flash animation or movies to a MeshAP is as follows:
- Create
and develop streaming Video
- Convert
movie to Flash and create HTML code
- Copy
a splash.html.master to YOUROWN website
- Modify
the splash.html.master with the flash HTML code
- Copy
the Flash SWF to YOUROWN website
- Create
a script to import the custom splash page and flash file by adding a
symbolic links, change permission of flash file and rebuild splash
page.
Create and develop
streaming Video
The video Get
Connected that
I created was develop using:
This video
is a short description of what was used and how it was all put together.
Convert movie to flash and
create HTML code
Take MPEG and create
flash file and HTML with setting Geovid.com flash converter software was
used and can easily be download on windows operating system.
Using Pinnacle Studio Plus I was able to save in various formats
including Mpeg4. Converting
it from AVI or MPEG4 has different final results in size of file.
If you are concern about the amount of streaming video that you are
doing starting from MPEG4 has its benefits. The Geovid software is easy to
use and will also provide you with HTML code as shown below.
Cut HTML code to add to
master
Once Geovid creates the
html code play it to ensure that it works.
Once working to your satisfaction you simply have to cut the HTML
from the file that is generate. Only
cut the following code:
<!-- URL's used in the movie -->
<!-- text used in the movie-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="352" HEIGHT="240" id="yourvideofile.swf"
ALIGN="">
<PARAM NAME=movie VALUE=" yourvideofile.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=LOOP VALUE="true"><PARAM NAME=bgcolor
VALUE=#ffffff>
<EMBED src=" yourvideofile.swf" quality=high bgcolor=#ffffff
WIDTH="352" HEIGHT="240" NAME=" yourvideofile.swf"
ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
Paste this code into
master.splash.page as described below.
You will notice that “yourvideofile.swf” will be difference
depending on the name that you gave your video file.
Copy splash.html.master to
YOUROWN website
Copy splash.html.master
and make backup copy. The
location to copy this file is recommended to be on YourOwn web site.
The reason for this is there will be scripts that will
automatically update these files for you.
In addition a backup copy of the original splash.html.master pager
may be required. Once you made a copy and back up copy you can start
modifying the master.splash.page .
Modify the
master.splash.page with the flash HTML code
The video
“get connected” has two elements, one being the flash video and the
second is the “get connected” button.
The video will be added to MeshAP directories while the “get
connected” button will be on my yourown web site.
The reason for this is that yourown web site can track and provide
statistics on how many time the button was pushed.
Most web sites have their own statistical package for tracking
Internet activities.
Modify the splashpage by
adding the above Geovid HTML code. You
will notice that I have also change the “head” to reflect the name of
service that I providing. After
the “table border” line I insert the flash code.
After the /Object line I
also ad the “get connected” button reference.
As you can see it linked to yourown web site.
Further modifications are
to the alignment of the captive portal form.
You may notice that the “align” has change from “center” to
“right” on the login line, password line, and login button.
Please note that
structure of this page will require to be maintained.
In other words if you change the setting below the captive portal
many not function properly.
<html>
<head><title>Welcome to the Wireless Mobile
Network!</title></head>
<body bgcolor=#FFFFFF text=000000>
<form method="POST" action="$action?redirect=$redirect">
<table border=0 cellpadding=5 cellspacing=0>
<!-- URL's used in the movie -->
<!-- text used in the movie-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="352" HEIGHT="240" id=" yourvideofile.swf"
ALIGN="">
<PARAM NAME=movie VALUE=" yourvideofile.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=LOOP VALUE="false"><PARAM NAME=bgcolor
VALUE=#ffffff>
<EMBED src=" yourvideofile.swf" quality=high bgcolor=#ffffff
WIDTH="352" HEIGHT="240" NAME=" yourvideofile.swf"
ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
<p align="right">
<a href="http://www.yourown.com/landing.htm"><img
border="0" src="getconnected.gif"
align="right" width="223"
height="36"></a>
</p>
<p align="right"> </p>
<p>
<tr>
<td
align=right height="23">Login: <input
type="text" name="user"></td>
</tr>
<tr>
<td
align=right height="23">Password: <input
type="password" name="pass"></td>
</tr>
<tr>
<td
align=right height="23"><input type="image"
name="mode_login" src="images/login.gif"
width="55" height="17"
border="0"></td>
</tr>
</table>
<input
type="hidden" name="redirect"
value="$redirect">
</form>
Once you have complete
the modification save and test the splash page prior to importing.
Copy the Flash SWF to
YOUROWN website
Once you have completed
the splash.html.master modification transfer the flash file ending with
swf and the splash.html.master to yourown web site.
Create a script to import
the custom splash page and flash file
Next you want to SSH into
the MeshAP and create a script that will bring the modified
splash.html.master and the Flash file.
This is achieved by writing a script.
Change directories to /htdocs and create a filenamescript. The
sample script below can be easily copied and pasted into your
filenamescript. Please change
any name of yourown web site and the yourvideofile.swf file name.
The following is a sample
script. Please note two files will be download from yourown web site
root file directory yourvideofile.swf
and splash.html.master .
#!/bin/bash
# This script copies and customizes the splash page
#
PATH="/bin:/sbin:/usr/bin:/hj:/htdocs:/drv2:/usr/sbin:/usr/local/bin"
#Download the master html file and copy it to the appropriate directory on
the MeshAP
curl http://www.yourown.com/splash.html.master > /htdocs/splash.html.master
#
#Download the necessary flash movie file
curl http://www.yourown.com/yourvideofile.swf > /drv2/yourvideofile.swf
#
#Create a symbolic link from /htdocs to /drv2
#Also changes permission of the file
ln -s /drv2/yourvideofile.swf /htdocs/yourvideofile.swf
chmod +x /drv2/yourvideofile.swf
#
#
#Execute the script to rebuild the captive portal
/hj/rebuildsplashhtml
This script can be simply
copy pasted into the /htdocs directory of the MeshAP.
Once you created the directory do not forget to create chmod +x
filenamescript to change the
permissions. You many execute
the script by ./filenamescript and if there is correct you should see
downloading of the information.
