[Design View / Design Solution]
Build A Real-Time Flash GUI For Embedded Network Devices
Flash is the obvious choice over HTML when it comes to real-time control and monitoring of Web pages that have rapidly changing dynamic content or animation.
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.
Article source code files (Flash and C/C++ source) can be downloaded here: http://www.netburner.com/downloads/DSnbsource.zip
Download the Adobe Flash 30-Day trial here: http://www.adobe.com/go/tryflash
The NetBurner MOD5270LC Eclipse Ethernet Development Kit (Part number: NNDK-MOD5270LC-KIT) can be purchased here: http://www.netburnerstore.com/embedded_ethernet_development_p/nndk-mod5270lc-kit.htm
To learn more about the module used in the article visit: http://www.netburner.com/products/core_modules/mod5270.html
To learn more about the development kit visit: http://www.netburner.com/products/development_kits/network_development.html
If you have any questions about the article, feel free to send me an e-mail or post your questions on this board.
Chris Uribe NetBurner, Inc.
Chris Uribe -May 30, 2008
This is the best article I have seen on the subject, and I have been doing various types of embedded real-time animation for 20 years.
NerdInDenial -May 29, 2008
This is the best article I have seen on the subject, and I have been doing various types of embedded real-time animation for 20 years.
NerdInDenial -May 29, 2008
Very informative article. Integrating Adobe flash and embedded web is something I have an interest in and wish to explore further.
rdm -May 28, 2008 (Article Rating: )
Very informative article. Integrating Adobe flash and embedded web is something I have an interest in and wish to explore further.
rdm -May 28, 2008 (Article Rating: )
Rating Only
Rating Only -May 28, 2008 (Article Rating: )
Rating Only
Rating Only -May 21, 2008 (Article Rating: )
Article source code files (Flash and C/C++ source) can be downloaded here: http://www.netburner.com/downloads/DSnbsource.zip
Download the Adobe Flash 30-Day trial here: http://www.adobe.com/go/tryflash
The NetBurner MOD5270LC Eclipse Ethernet Development Kit (Part number: NNDK-MOD5270LC-KIT) can be purchased here: http://www.netburnerstore.com/embedded_ethernet_development_p/nndk-mod5270lc-kit.htm
To learn more about the module used in the article visit: http://www.netburner.com/products/core_modules/mod5270.html
To learn more about the development kit visit: http://www.netburner.com/products/development_kits/network_development.html
If you have any questions about the article, feel free to send me an e-mail or post your questions on this board.
Chris Uribe NetBurner, Inc.
Chris Uribe -May 21, 2008 (Article Rating: )
Rating Only
Rating Only -May 21, 2008 (Article Rating: )
Your Comments:
Enter the text from the image below
Please refresh the page if you have trouble reading this text.
Search Electronic Design
Web Seminar
Sponsored By:
Title: Read Pacing: A Performance Enhancing Feature of PCI Express Gen 2 Switch Devices
Reprints
)
