A critical concern for any embedded device is the
user interface. Embedded network devices hold
a tremendous advantage for creating an intuitive
user interface by using a Web browser. Traditionally,
this has been accomplished by using an embedded
Web server on the embedded device and creating Web
pages written in Hypertext Markup Language (HTML).
HTML is very easy to understand and implement for static
Web pages, but it’s a very poor option for rapidly changing
dynamic content or animation.
Along with a brief overview of various Web-based user
interface platforms, this article offers a detailed implementation
of a platform created in Adobe Flash. Flash can be
used to create an amazing look and feel. If you can imagine
it, you can probably create it in Flash, whether you want
animated controls or a simple interface without the flicker
of HTML page updates. We will build a graphical user
interface (GUI) that will control and monitor an embedded
network device.
Our example uses the NetBurner MOD5270LC Eclipse
Ethernet Development Kit (available at www.netburner.com for $99), but the ideas and code can be used with
other embedded network devices as well. The project was
created with a 30-day evaluation of the Adobe Flash development
environment, which you can download at Adobe’s
Web site. Thirty days is more than enough time to acquire
enough knowledge of Flash to create a complete solution.
WHAT ABOUT JAVA, AJAX, AND DYNAMIC HTML?
Before we get to the code, lets take a quick detour and
address why we don’t build our GUI using Ajax, Java,
or a simple dynamic Web page.
Dynamic Web pages are great if
you just want a simple configuration
page or a device status
snapshot. If, however, you want
this page to give you real-time
feedback, you’re out of luck.
The best you can do is set the
page to refresh every second or
so. However, you end up with a
page-flickering resource hog. By
continually refreshing a page, the
entire page is reloaded, which
means bandwidth and system
resources are used.
One idea would be to use
Ajax to cleverly update only the
portions of the page that need updating. The problem,
though, is it would still require continuous polling of the
network device server to check for updates.
A Java applet would solve this problem by providing an
interface with a persistent TCP connection. We wouldn’t
have to serve the entire page. The Java applet is a program
that runs in the Web browser. It can create a persistent
TCP connection back to the embedded device and obtain
continuous device status information. The Java applet
updates the display in the Web browser, so there’s no page
reloading or flicker, which is the case with HTML. The problem
with Java, JavaScript, and Ajax is that their functionality
may be disabled, or they can look or run differently with
different platforms and versions.
As a result, Flash becomes a very interesting option with
significant advantages for the presentation of a user interface:
You can easily open a persistent TCP connection, the
application will look the same on any platform it runs on, it
excels at animation and graphics, and it comes installed on
almost everyone’s browser.
APPLICATION OVERVIEW
Figure 1 shows the Web-based
user interface we will create in
this article. When the user rolls
the mouse pointer over LEDs,
the LED lights up immediately
on both the NetBurner and the
Web page. The update is so
fast that it feels instantaneous
to the user. When a dip switch is
changed on the NetBurner, the
image of the switch smoothly
transitions from one position to
the other as an animation, rather
than just showing up in the new
position as is done with two on/
off images.
There is a status window
in the upper right corner that
verifies an active connection
with the NetBurner. In addition,
a blinking heartbeat light
flickers each time a heartbeat
response is received from the
NetBurner device.
There’s no programming
required on the client/Web
browser side (e.g., a Windows PC). The
Flash application is stored in the Net-
Burner embedded Web server, and it is
served to the host Web browser when a
connection is made.
The application consists of the following
components running on the Net-
Burner device:
- Web server to serve the Flash application
on the initial request.
- TCP server task that waits for the
incoming TCP data connection from
the Flash application.
- Flash application that runs in the
host’s Web browser and opens a new
TCP data connection back to the Net-
Burner device.
THE NETBURNER WEB SERVER
At the highest level, we have a PC
running a Web browser like Firefox or
Internet Explorer that connects to the
NetBurner Web server. The Web server
sends the requested information: the
HTML page and Flash application. The
Web browser then runs the Flash application,
which creates a TCP connection
back to the NetBurner device (Fig. 2).
On a much lower level, the process
begins when you enter a URL in the
Web browser: for example, www.myurl.
com. Next, the TCP/IP stack on the PC
executes a Domain Name Server (DNS)
lookup to convert the name into an IP
address. A TCP connection is then
established with the Web server on port
80, the “well known port number” for a
Web server.
If you look in the URL address line
of your Web browser, you will normally
see the URL begin with “http://”. This
tells the Web browser to use the Hypertext
Transfer Protocol (HTTP). HTTP is a
protocol that defines the rules for Web
pages. It defines commands such as
“GET” to tell the Web server which Web
page it wants and “POST” to send data
to the Web server in a HTML form.
Continue to page 2