INTERNET APPLICATION CATEGORY WINNERS

To qualify in the Internet Application category, contestants had to create the most unique, sophisticated or well-engineered Internet application that uses a PICmicro MCU. How the connection was made was inconsequential and entrants could use the provided Microchip app note, static IP (write RS-232 program on a PICmicro MCU) via emWare, or any other implementation.

Edward Cheung
Mitchellville, MD

The graphical capabilities of the web provide a good way to present continuously varying data in the form of a chart. Examples of sites that provide data of this type are stock brockerages and weather stations [1]. Instead of a large desktop computer, the PIC Web Chart Recorder provides this capability with a PIC processor. Analog data is gathered by the PIC’s A/D converter, which is served up graphically by the integral web server using a standard Ethernet card as the network interface.

Photo 1—The yellow board (viewed edge-on) is the custom board containing the PIC processor, the green board in the back is the NE2000 Ethernet card. The analog voltage is sampled via the black & red alligator leads in the foreground. They plug into the RJ11 connector on the right of the server.

A significant difference from previous PIC based Web Servers [2] is the Ethernet interface, making this the first direct Internet connected PIC known to the author. 

One of the personal goals achieved in this project was to see if an Ethernet web server could be written from scratch using only electronic documents from the web. The completed project is not only a fully functional Ethernet web server, but also generates GIF images on-the-fly.

After the Chart Recorder is connected to the local network, a user can communicate with it by entering the URL: http://IP_ADDRESS where "IP_ADDRESS" is the preselected IP Address of the PIC. The resulting display is shown in Photo 2.

Photo 2—From the control panel the user can select the sweep speed of the chart. Possible options are: stopped, 10 seconds, 1 minute, 15 minutes, and 1 hour/division.

The graphical data is packaged as a GIF image that is generated on-the-fly by the PIC processor. For simplicity, it is split into five 255 x 52 GIFs that are assembled at the web browser. Since they are all the same width, they stack seamlessly. The display is automatically refreshed once per minute. At each refresh the graph is shifted from right to left to make room for new data.

The core C code that generates the GIF file is a heavily modified version of the one published in Circuit Cellar Ink #107. Modifications include changing it to a RAM limited 8-bit environment, and for streaming output into the Ethernet card.

For better readability of the graph, horizontal and vertical dotted lines are added during the creation of the GIF. In addition, where the data jumps by greater than one count from one sample to the next, vertical lines are added to connect the graph in a continuous manner. Each column of pixels in the image represents one sample of the A/D converter of the PIC, while each vertical row represents the data value. As a result, the GIF is 256 pixels in height (representing the one byte data range), and 255 pixels wide (representing the 255 samples that are stored). 

Photo 3—The chart is presented in the form of a GIF that is generated on-the-fly in the PIC Web Server. Note: a) the data is the solid line, b) division markers are dotted lines, c) moving over the GIF updates the mouse coordinates at the bottom of the web page (here: 181,23), d) clicking on the image puts a dashed crosshair showing the value of the chart at the x-coordinate of the click; its voltage is at the bottom (here: 2.7V).

The chart is defined as an HTML image map, causing the coordinates of the mouse cursor to be continuously displayed at the bottom of the web page. This may be useful to the user in reading data values of the chart. If the user clicks on the GIF, a dashed crosshair will appear indicating the x coordinate of the mouse click and the y coordinate of the data value. In addition, the display underneath the GIF is updated with the voltage value of the sample.

The PIC Web Chart Recorder is a useful addition to any system where analog data needs to be gathered in a graphical form. The unit can not only gather the data, but also serves it up in a web-friendly format. Real-time generation of gif images, normally accomplished by desktop-class computers, is being done here by a PIC.

REFERENCES

[1] Real-time weather graphs, http://www.aws.com/nbc/wrc

[2] Serial-line PIC web server, http://www-ccs.cs.umass.edu/~shri/iPic.html