Embedded Web Flash
This is an TCP/IP - HTTP (webserver) demo for the LPC-2378-STK board, using IAR Systems software (EWARM 5.2 and PowerPac 5.2). While IAR already has a webserver demo, this one might be a bit more compelling from a usability point of view. Central idea is to use a (Adobe/Macromedia) Flash interface to visualize information from the embedded webserver by periodic requests of XML formatted data.
Introduction
This article covers a demonstration of a design idea for embedded webservers, namely the application of Adobe (previously Macromedia) Flash to create richer web interfaces for embedded devices. This partical project was done with IAR Systems software (EWARM 5.2 and PowerPac 5.2) on the LPC-2378-STK board from Olimex as distributed by IAR in their starterkit with the same name. It was initially created with EWARM 5.11 and associated PowerPac during the Summer of 2008, fairly close after the partical LPC2378 board came out, and brought up to date for the latest IAR versions in December 2008.
You can download a ZIP of the project here. You can regard it as a reference design for an embedded webserver with IAR PowerPac TCP/IP. There are in fact three aspects here for which this code may be useful, as it contains:
- A Webserver with XML output (to work in conjuction with the Flash interface);
- A new utility WRG for the automatic generation of a RO filesystem;
- A new compact library for the Nokia 6610 display on a LPC23xx/lpc24xx
All sources are included except those (the .fla) of the Flash movie itself. Please drop me a note in case you are interested in this.
Flash as a User Interface
The use of a Flash movie for interaction with possible complex data allows a far more advanced User Interface than plain HTML (possibly spiced up with javascripting) while still using a standard web browser. Graphics and animations can be taken to a much higher level, interactivity can have complex logic and this functionality can be concentrated in one single place (the Flash itself) and can be designed and written using state-of-the-art tools. Careful action scripting within Flash can give impressive results with a very small movie file size. The use of XML formatted data helps desigers to think about the structure of the data to convey and to separate content from presentation while again using a compact, flexible and generic format.
The picture above shows the LPC-2378-STK board (Rev B). The black square in the middle may appear a bit odd but it is how the Nokia 6610 graphical LCD actually looks like when entirely shut off. The board contains a slew of connectors (among which of course the Ethernet connector at the top left) and some other stuff to 'play with'. There are two push buttons and one 5 state joystick between them, a trimpot (as usable for e.g. the USB/audio demo's), two LEDs (one associated with SD card power) and a nice 3-axis accelerometer. The processor is of course NXP's LPC2378.
The picture below is actually the Flash movie (less than 30kB) as created for this demo. On the web page that you are now reading the Flash is working like a dummy. It normally interacts with (and is being served by) the embedded webserver from the demo project and it's purpose is to represent the state of the board and to provide some interactivity. The 'state' of the board is interrogated by the Flash by cyclic GET requests of an XLM file over HTTP. This small XML file is dynamically generated by the embedded webserver. The equivalent used here in this article is generated by PHP on my ISP's webserver; click here to see it's dummy contents.
Use and Operation
After download and extraction of the demo project to a directory of choice, you should be able to compile and build with EWARM 5.2 provided you also have PowerPac Base and PowerPac TCP/IP V5.2 fully installed. Use the 'Release_Flash' Configuration. No warnings or errors should appear. Use 'Download and Debug' to program the board and start the application when done.
The demo assumes the presence of a DHCP Server in your network. When the board starts up, the display will briefly show a colored graphical test screen, followed by a text screen. After a short while, the third line will show the IP nummer of the board as acquired by DHCP (or a static IP nummer in case DHCP fails; this static IP number is defined in code and can be changed if you wish). Start up your web browser and browse to the IP number of the board. The HTML content in the demo borrows a couple of pages from the standard web server demo and adds one with the embedded web flash. From the IAR index page, navigate to the Embedded Web Flash demo.
The flash movie shows a representation of the the top view of the board. In this view, the display, the two LEDs and the position of the trimpot are updated once per 2 seconds. You can increase the update speed to once per second by clicking on the EWF logo and then clicking the 'period' button on the resulting 'about dialog' to cycle between varous fetch period values. Click 'close' on the 'about dialog' to get rid of it.
You may click the trimpot symbol to zoom it in or out. If you zoom it in you can better observe that it follows the movement of the actual trimpot on the board (try this). Click the display symbol to zoom it. You will better see that it also updates and reflects the test on the physical display. This shows various information, including the state of the two buttons, the 'joystick', and a read-out of the on-board accelerometer. When zoomed-out, the 'virtual display' of the flash image has a small button bar below it. Hit 'Edit' and you can change the text on the virtual display; type something on an empty line and then press 'Send'. The actual display will get the text you typed (note: several lines, notably the bottom 4 and the 'I'm alive' line will be overwritten periodically by the embedded system so these lines are no good candidates for 'writing back'). Similarly, you can change the state of the two LEDs. Zoom these in the Flash display, hit the associated 'edit' button, then click the led to cycle between 'on', 'flashing' and 'off', then hit 'send'.
WebRom Generator (WRG)
The PowerPac TCP/IP add-on lacks a useful utility to produce code from HTML content for a ROM file system. The distribution includes a basic tool, but that requires all kinds of manual intervention. To ammend this, I created a separate tool for good integration into IAR's build environment. I call it the WebRom Generator (WRG). It current resides as $PROJ_DIR$\WebRom\Tool\wrg.exe. What is does is that it takes *all* files in it's sister directory ..\HTML and generates a file WebRom.c for that in another sister directory ..\Code. There, it is included in slightly modified ROM Filesystem file FS_RO.c and that's it. That last file is now a complete rom file system containing all files that are present in the HTML dir. It even takes automatic case of subdirectories there!
The sources of WRG are included in the directory of the tool itself. It can be built with the free Borland C++ Builder 5 Command Line tools. You can download this compiler from the Codegear web site. I'm giving away these sources as subsequent versions of PowerPac may alter details of the read-only file system associated with the webserver. In that case you may need to update WRG too.
Display
The project contains a new library for the Nokia 6610 Display on the board (132x132 pixels, 4096 colors, with backlight, Epson S1D15G10 Controller). This code is derived from the work of James Lynch of SparkFun for the same LCD on a SAM7 Olimex board; see his tutorial. The LCD.C module is rewritten to be virtually completely self-contained. It has 3 embedded font sizes for text display and supports some basic graphic primitives (lines, circles, rectangles). The display is written to serially by SPI. It's therefore not blazingly fast. Neither can it be read over the serial interface.
I have added an additional layer DISPLAY.C that makes the display usable as a primitive but convenient 'text device' (fixed font, fixed fore- and background colors). This is used in the current application. As the display is written to from separate tasks (we have separate webserver and embedded-app tasks), the display gets a wrapper in the main code that 'protects' it by a resource semaphore.
Accelerometer etc
The accelerometer (plus the LEDs, the buttons and the joystick) are handled in a separate module BOARD.C. Though the interface to the accelerometer is simple, I had trouble getting consistent data from it. I finally found that one capacitor in the RC networks on one of the outputs of my particular board (C52 on the Y-axis) was defective (resistive) and I had to pull that one out. I've applied a simple software integrator over the AD converted result an then a range and clip function, but I think some more attention would be needed to make this nice device really shine. The Flash could give e.g. a graphical rendering of the board's postion (relative to 1g earth's gravity). I left this to be an idea only and decided just to show the read-out. The ADC, by the way, reads out the Trimpot and the three Accelerometer Axis values in BURST mode. The LEDs of the 'interface' are those associated with the USB-Link and the MMC-Power. They can be switched on / off or be toggled periodically by the application. This can be changed from within the Flash. 'Hover' action over the tiny LED images is assisted by a Halo. You can click too zoom, click to edit, click to cycle through 3 states and then send the new state.
home
mail
print
back
forwd
