Ethernet Interfacing – Build your own web server

By Dr Eddie Insam

Copyright© 2002 Eddy Insam - email: edinsam@eix.co.uk

Published In Electronics World: October 2001

Printed Copies of this article can be obtained from Electronics World. Anne Boleyn House. 9-13 Ewell Road, Cheam Surrey SM3 8BZ UK or by email: jackie.lowe@cumulusmedia.co.uk

No part can be copied without the express authority from the author

Abstract Box

Following from the previous articles on Ethernet interfacing, Eddy Insam will show you how to implement a real web server in your own home connected to your PC via a Local Area Network. This is a very simple project that will allow you to do things like display temperature, control a heater and switch lights remotely from any web browser in the house.

I have an old house with a large basement. There is an old coal bunker there. I use this place to keep many bits of fine wood that may become useful sometime (maybe to make that rowing boat I always wanted). I need to keep the place in the right ambient temperature conditions. This means a regular walk down the steps, feel the walls for humidity, and then leave the lights or heating on for a few hours. This is not the job I can delegate to a simple room thermostat, as it would leave the heater on most of the time and waste a lot of energy in the process.

Nowadays, I don’t have to go all the way down the steps that often. I go to my PC, fire up my Internet browser and call up a website page. Up comes a screen page displaying the temperature in the room. If I want the lights or the heater on, I just click on a button on the screen.

How is it done? Well, I have an embedded web server in the basement. This “webserver” fits in a small 5”x5” box fixed to the wall, and it is connected to the Ethernet LAN connected around the rest of the house Fig1. Pushing the description to the limit, I could call this a miniature dedicated Private Internet Service Provider.

The display is not static. The contents of the web pages are changed dynamically by data read by the unit via its I/O ports. Similarly, I can control the heaters by making page requests from my web browser. I don’t need any special software on my PC. Just my standard Internet web browser to give me a two-way simple I/O control.

The trend of using an Internet browser like a “program” is gathering pace. There are certainly advantages in doing things this way, especially as any web-enabled piece of equipment can be used for controlling interfaces, including WAP phones and palmtops.

So what is inside this box?

I have chosen the SitePlayer module (www.Siteplayer.com) as the basis for this project Fig 2. This is a good example of current technology and the kind of “ready made” product available for this sort of application. SitePlayer is a 1” x 1” module built as a piggyback board. I have chosen it mainly because it already comes with a scripting web language that allows me to relate external events to internally stored web page displays, (more on this later).

Fig 3 shows the block diagram. The SitePlayer module consists of a Realtek RL1019AS Ethernet transceiver chip plus a 89C51 microcontroller. The Ethernet Transceiver chip conditions the Ethernet signals on the line and transfers the packets to the micro. The micro handles all the protocols and also supports eight general purpose I/O ports plus one serial port. (I am only using the parallel port in this project). The micro has 64k of code space, with roughly 16k of program code dedicated for TCP stack and script interpreter code, and 48k of user programmable area to hold web pages. The only external component required for this project are an external 10 BaseT line transformer, a RJ45 socket connector for the LAN, and some external standard circuitry to drive a mains controlled heater, a ceiling lamp and to sense a switch and the temperature sensor. Fig 4 shows the full circuit diagram.

The 48kbyte web area can include as much text, graphics etc as can be fitted in this space. The web pages can contain special fields that are modified with data read from the I/O ports. Page or click requests will also cause the I/O ports to output different data. The web page becomes the “user interface” Fig5.

Have you wired up your house yet?

A standard CAT network cable is used to connect to the rest of the local network around the house, which can include one or more PCs. Network cables, connectors and crimping tools are now available from most electronics and computer shops, which can make the job that much easier. Many new houses and offices are now being fitted with network connections in every room as standard.

One of the best ways to get started is to buy a network “kit”. These will include a couple of network cards for your computers (assuming you have more than one), a four or five port “hub”, and a few cables. The instructions supplied are usually very good and will explain all you need to know about networking in detail.

Note that if you are only using one computer for this project (i.e. no hub) you will need to use a special “twisted” cable to connect the computer to the module.

How does it all work?

In order to understand the basics, we must first go back and see how things function from the PCs point of view.

When you fire up your Internet browser and request a web page, a number of events will take place. At the lowest level, a full TCP connection is established between the PC and the remote server. For the purposes of this article, think of TCP like a telephone call; something that you start by dialling a number, and that results in a fixed connection between the two points until one of the handsets is put down. When the connection is live, bytes are exchanged in a way not too different from a plain RS232 wired link.

A few steps may need to precede this, such as obtaining the numeric address of the remote site. You can’t phone anybody unless you know their telephone number. These numbers or “IP addresses” are usually stored in local tables, but they can also be found by making a separate call to a “directory enquiries” server on the network or on the Internet. Of course, we all know that everybody connected to the World Wide Web has to have a different address. Newcomers must be allocated their “name and number”, and in theory this should include my basement device. However, as I am running my own local network with no access to the outside world, I can cheat a little and allocate almost any numbers or web names I like to my interfaces, hence my project is called “mybasement.com” and is associated with the address 192.168.1.250, which happens to be the default IP address of the SitePlayer module.

Once the TCP link is established, the browser and server can exchange bytes. The protocol used for web access is called HTTP. To request a page, the browser sends a “GET” command string in plain text, usually followed by a file name and maybe a few other parameters, also in plain text. Commands are terminated with double line feeds.

The server simply replies with the contents of the requested file. Web pages are made of plain text, and use a formatting language known as HTML, which allows for the inclusion of commands such as font and colour changes by the use of predefined bracketed “tags” within the text. If no filename is supplied, a default name such as “Welcome.html” or “Index.htm” is substituted instead. When the file has been fully transmitted, the server closes the TCP connection, and that is the end.

To get another page, the browser must open another TCP connection, and send another GET command with the name of the new file.

A typical web site contains many HTML files. There is usually one main file called “Welcome.html” or “Index.html” and various other support files including bitmap images, java applets etc. In a standard page request, the browser will first request (and display) the main page. Then it will scan through the contents of this page looking for links to other files. For each link it finds, it will make further GET requests for each, one at a time. Each of these requests involves the opening and closing of a new TCP connection. As the files arrive, they are presented to the user. If they are bitmaps for example, they are displayed at their correct location on the screen.

Text files are very short and can display very quickly. Images, even compressed ones, are bigger and can take more time to download. The HTTP/HTML scheme allows the various parts of a file to be displayed in any order, and give an impression of speed. Following this logic you can now understand why some web pages can load and display very quickly (text only) and why some pages display a blank rectangle while the image that goes within it is still being downloaded.

It should also be clear how straightforward it could be to implement a web server using a small end microprocessor. The server only needs to wait for GET requests, and then return a string of pre-stored characters. The only limitation is the availability of enough ROM or RAM space to hold all the HTML files and data.

Of course I have simplified the argument, and we are talking about the simplest of HTTP protocols, but this is all we need to know at this stage.

And now for the clever bit

The SitePlayer module has an internal flash memory big enough to hold up to 48k of web page data, including text, images, sounds, animations and anything else that can fit in that space. Tools supplied with the module allow you to edit the HTML pages in the normal way on a PC and download them into the module’s memory in compiled form.

This is not all; the module has a feature known as scripting. This links fields on its stored web page with internal variables in the microcontroller and also with external events such as I/O port data. The module will replace the tags with the actual values that are dynamically updated at display time. In order to do this, some non standard codes need to be added to the standard HTML text.

For example, assume there is a register variable inside the micro which has been given the name port1 in the script, which happens to contain the decimal value 57. If the original HTML page contained the text: The value is ^port1 It will be displayed (i.e. sent to the browser) as The value is 57.

This scripting can be used in many ways, for example the source text <a: img srce “led^n.gif”> can be used to display one of a number of pre-stored bitmaps depending on the value of n. (i.e. led1.gif, led2.gif..). This could be used to emulate a seven segment numeric display for example.

Similarly, codes sent back from the browser can activate outputs in SitePlayer. Clicking on a web page button can cause an I/O output pin to change. The scripting language is relatively simple, and can be learnt in an hour or so. Fig5 shows my crude attempts at web design, more can be achieved with the imaginative use of graphics, buttons and java scripts.

The hardware

Fig4 shows the full circuit. The parallel port signals are standard 8051 “PORT1” type ports. These can be set as output only or as bi-directional input-output. I have used two pins as outputs to drive two mains controlled devices, a fan heater and a ceiling lamp. One input bit is used to sense a door latch, and the remaining 5 bits are used to read the output of an A/D converter using a LM335 diode temperature sensor. You can use any combination of input/output in your own project. All the definitions are done in the software anyway.

The line connection requires a 10BaseT transformer and RJ45 socket. It may be worth salvaging these from an old Ethernet PC card, as they can be difficult and expensive to obtain singly. I have used the LF1S022 LAN-MATE combined unit, which consists of a transformer and connector integrated in a single container. See the references for websites where these parts can be obtained.

Fig 4b shows the A/D circuit I used to sense local temperature. It uses a National ADC0804 chip in self-run mode. A Schmitt trigger inverter (part of a 74HCT14) is used as a free running oscillator to start a new A/D conversion every few seconds or so. Only the five most significant output data bits are used and are connected to the lower five I/O pins of the SitePlayer module. One nice thing about the ADC0804 is that you can set the analogue conversion endpoints to cover almost any two voltage limits. The two 10k variable resistors are used to trim the minimum and maximum end points so that the desired temperature range spans the full digital range of 00hex to FFhex. The LM335 diode gives a steady 10mV change per degree C around its defined output level of 2.98 volts at 25 degrees. I have set my pots to give a temperature span of 5 to 37 degrees C. This is convenient as it corresponds to a resolution of one degree per bit, making life easy when computing the display assignments on the HTML web page.

Fig 4C shows the circuit I used to drive the ceiling lamp and the heater. I opted for ready-made solid-state relays; these can cost a bit more than using separate triac circuits, but they have other advantages such as encapsulation and environment proofing. The models I used (Crydom MP or CX series, available from Farnell and others) take TTL level signals and can switch mains voltages at between 2 to 10 amps depending on model. If you use a different type, ensure they use zero voltage switching. Note that I have driven the relay modules via the spare hex inverters. This is not strictly necessary, but I added them here just in case something goes wrong. I’d rather have the 74HCT14 blow up rather than my expensive Ethernet biscuit.

Fig 4D shows the remaining input used to read the door latch. I use a simple burglar alarm magnetic reed switch, also connected via one of the spare hex inverters, again in case something goes wrong.

The whole thing is powered by a single regulated 5v supply (not shown). Current consumption is around 60mA.

What’s next?

Once the electronics have been wired up, the rest of the job needs to be done in the software. Not at the module end, but at the PC end.

You will need to connect the unit to your network. If you have a hub, connect the unit to the hub via a standard CAT5 network cable. If you connect the module directly to your PC, i.e. if there are no other devices on the network, do not forget to use a twisted LAN cable.

The first stage is to get the module to act as a web server only, i.e. without any of the scripting facilities, which can be added later on. This makes life a bit easier to start with.

You will also need the following files from the SitePlayer CD (these can also be downloaded from their website): “sitelinker.exe”, “siteplayerpc.exe” and “siteplayerserialdemo.exe”. You will also need the various jpg image files.

I have included detailed step-by-step instructions, as the SitePlayer module manual can be a bit Spartan in places. It may also be useful to go through, or print, the various SitePlayer documentation files supplied as pdf files.

The stages involved are as follows:

1- Create a new directory “c:\SitePlayer” (or similar) in your PC. This is where all the program files are going to reside, copy all the above SitePlayer files here. Create a new directory “c:\SitePlayer\web\”. This is where all the web files in your project are going to reside.

2- Design a simple web page using a normal web or plain text editor. Start with something simple, you can always change it later. Feel free to add one or two simple images, but keep them small. If using a commercial web editor, remove any unnecessary HTML fields. Many web editors add many extra non-display fields, which are of no use here. Remember that you have a 48k total limit. Name your web file “Index.htm”, and place it in your “web” directory. Ensure all image files you used are also in this same directory.

3- Using a text editor, create a new file named “myproj.spd”, place it in your base directory. This will be your Definition file. Copy the text from Fig6 to it. If you files are in different directories, ensure the entry named $SitePath points at the directory where you keep your web files, and that the other entries point at your base directory. Entry $InitialIP defines the target IP address to be used for the download from the PC. This must be the same as your SitePlayer module; the default is 192.168.1.250 unless you have changed it. More on this later.

4- Run “SiteLinker.exe”. Use the Menu option File/Open to select and open your definition file “myproj.spd”. Nothing will be shown on the screen (if this is the first time you run this program, take the opportunity to use the Menu option Configure/Editor to select Notepad as your choice editor). Next, use the Menu option Download/Make Config file to compile the source. The generated file will be called “myproj.spb” (this name was taken from the $Sitefile entry in the description file). This is a compiled version of all your source data, and it is the file that will be downloaded to the Siteplayer module. Now, use the Menu option Download/Download SitePlayer to send the compiled file to the flash EPROM in the SitePlayer module via the Ethernet. Ignore the “no password” message.

5- Run the Internet Browser in your PC (e.g. Internet Explorer). Type “http::/192.168.1.250” on the address line and click the GO button. You should see your web page, which is now coming from your SitePlayer module.

Call yourself lucky if all this happened smoothly and you got a result first time. The first problem you may encounter is compilation errors. These are mainly due to commands in the definition file not pointing at the right directories, so these should be easy to fix. There may also be entries in your HTML web page file the compiler may not understand, keep your HTML file simple to start with.

Your main problem will be addressing errors. It may be that your network is not able to access the SitePlayer default address for various reasons (usually subnet masking). One way around this is to change SitePlayer’s IP address to be accepted by the masks in your machine.

In my case, the Ethernet address of my machine is 192.168.0.1, and the subnet mask is 255.255.255.0. When I first started using SitePlayer, I could not access it as it had a default address of 192.168.1.250. I had the choice of either changing my subnet masking to something like 255.255.0.0 (easy to do, but not such a good idea if your PC is also used in other networks), or change SitePlayer’s own IP address to something like 192.168.0.2.

You can change SitePlayers IP address using the supplied utility “SitePlayerSendDemo.exe”. This program communicates with SitePlayer via the serial port, not vie the Ethernet. You will need to add some extra hardware and voltage level conversion circuitry to connect the serial port in the module to the serial port in your PC. See the SitePlayer documentation for more information.

Alternatively, if your PC supports DHCP, it can assign an IP address to SitePlayer automatically. Ensure there is a $DHCP on entry in your “myproj.spd” descriptor file.

Adding Scripting

Once you have your server operational, you can now add scripting facilities. Try the following steps to enable simple scripting and to allow the browser to read the I/O data pins on the micro:

1- Open a text editor on your web file “Index.htm”. Somewhere near the bottom of the page, add the line <H3>BIT 5 OF PORT1 IS ^io5</H3>. The H3 is only there to make the text look bigger, ^io5 is the variable denoting bit 5 of port1. You can see that some of these variables have been pre-defined in the descriptor file “myproj.spd”.

2- Compile and download the new generated spb file to SitePlayer, by repeating items 4 and 5 in the previous section. The browser will now display the extra line of text “BIT 1 OF PORT1 is 0”. Now press the switch connected to pin 5 in Fig4d (assuming you have wired one already). Now click on the “refresh” button on your PC browser. The following line of text will now be displayed: BIT 5 OF PORT1 IS 1”. The web page reflects the change in the micro’s data port.

3- As an extended demonstration of the above: copy bitmap files “0_blk.jpg” and “1_blk.jpg” to our web directory (these files contain image bitmaps of seven segment LED indicators). Now add the following line anywhere in our “Index.htm” web file: <img src="^io5:1_blk.jpg" width=”40” height=”60”>. Repeat step 4 above. The resulting display will now show a seven segment bitmap showing either a “1” or a “0” reflecting the data value on the port. The entry ^io5:1 returns the first digit of the numeric variable as a single character which defines which of the two jpg files is to be displayed. A full list of commands available and more examples can be found in the SitePlayer manual.

4- The full port can also be read as one byte by using the variable “p1” (also defined in the definition file). Ensure all the ten LED jpg files are in the web directory. Add the following text to our “Index.htm” file: <img src="^p1:3_blk.jpg" width="40" height="60"> <img src="^p1:2_blk.jpg" width="40" height="60"> <img src="^p1:1_blk.jpg" width="40" height="60">. Recompile and reload as described above. The display will now show a three digit number reflecting the binary data pattern in port1, changing from “000” to “255”

So much for reading data FROM SitePlayer. Sending data TO SitePlayer is a little bit more complex:

1- Create a new text file “myproj.spi” in the web directory. You want three text lines in this file. You must ensure the third line contains no text, i.e. the file ends with two new lines.

HTTP/1.0 302 Found

Location: /Index.htm

<third line should have no text>

2- Edit our “Index.htm” web file. Add a new line: <H3><a href="myproj.spi?io6=^io6~1">port 6 = ^io6</a></H3>. The command “io6=^io6~1” is used to read bit 6, invert it, and place it back (toggle). The reference to myproj.spi causes a link to what is basically another HTML file, which does nothing but cause a link back to our index page, whilst at the same time updating the variable, including the I/O port bit on the micro.

3- Compile and download the file as already described. Run the browser and click on the port 6 link, see how the output of this pin toggles on every press (use an oscilloscope, or connect a LED to it). Also note how the seven segment displays change. This is because the full port is read/write.

The above is just a summary of what can be done. Many possibilities are possible, especially when used in conjunction with more powerful languages like javascript, and also when used with the serial port option.

You don’t need to purchase the SitePlayer device to see all this in action. There is a free simulator for the PC available on the SitePlayer website, you can devise and test your own pages using this emulator.

To end

I wonder if the PC of the future is going to be nothing more than a sophisticated web browser, with all computing power done externally across the Internet, or within the peripherals units around it. It will be interesting to see what will happen to all the various operating systems. After all, every browser should work the same way. Maybe it will also mark the end of dedicated, platform specific software.

Technology is fast catching up. New products such as Bluetooth will dispense the need for running wires around the house. A few manufacturers are already working on combined Bluetooth/network appliance interfaces.

Obtaining the parts

The SitePlayer module can be imported directly from the manufacturers. The one off retail cost is $49.95. The support software is separately available as a CD for $9.95, or it can be downloaded for free. Please note that shipping, VAT and handling can easily add another 50-60% to these costs. For information on obtaining Ethernet transformers see the web sites below. An integrated RJ45 transformer can be also obtained from the SitePlayer web sales site. The author has a small stock of modules and transformers. Please contact him for more details.

The Author

Dr Eddy Insam is a consultant in innovative applications of telecommunications and specialises in graphics and signal processing. He can be reached on edinsam@eix.co.uk.

For More Information

PC Interfacing Via Ethernet, Eddy Insam, Electronics World, May and June 2001. A description and general introduction to TCP/IP in embedded systems.

www.eix.co.uk/Ethernet for more detailed information on the above.

www.SitePlayer.com The website of the module. Demonstration programs can be downloaded from here.

www.haloelectronics.com and www.pulseeng.com Suppliers of 10BaseT transformers

{CAPTIONS}

Fig 1 {fig1.ai house diagram}

A typical Ethernet network will have the various computers in the house or office connected to a central hub via standard network cable. The embedded controller connects to a spare slot in the hub and acts like a web server, accessible by all computers with a web browser by simply entering the right IP address.

Fig 2 {fig2.jpg photo of module}

This one square inch module can hold up to 48k of web page material, which can include text and images. Dynamic scripts are used to replace display fields with values read from the I/O ports. Similarly, sending form or request commands from the browser can set data outputs. The module also provides for eight parallel data bits plus one serial port for external control.

Fig 3 {fig3.ai block diagram}

Each of the eight available I/O ports can be defined as output or as bi-directional input/outputs. In this project, two outputs are used to drive a heater and a lamp vial solid state relays. Five input bits are used to read an A/D converted fed from a room temperature sensor, and the last bit reads a door opening latch. The serial port, not used in this project, could be used with a separate microprocessor to add more flexibility to the unit.

Fig 4 {fig4.ai circuit diagram}

The SitePlayer module itself is mounted on a socketed 18 pin piggyback module and only needs a transformer as an external network component. The LED will flash when there is relevant activity on the Ethernet bus. The A/D converter is self-running; only 5 bits are used to give a temperature span of 5-37 degrees with a one degree resolution. The range can be changed to other settings by adjusting the two 10k pots. The zero crossing solid state relays can switch up to 6A each from a TTL level input.

Fig 5 {fig5.png image of webpage}.

Minimalist user interface. Much more realism can be obtained by the imaginative use of colours, bitmaps, buttons and javascript.

Fig 6 {text enclosed at end of this doc}

Sample Definition file. Please copy this file to your base directory and name it myproj.spd. Ensure that all paths point to the directories where you keep your own files.

Fig 7 {text enclosed at end of this doc}

A minimal sample web page. Copy this file to your web directory. Ensure that all the named image files are also present in the same directory.

Fig 6

; Sample Myproj.spd Definitione file

;

; Lines with a semicolon in first column are comments and ignored by the compiler

;

; Compile this file with “SiteLink.exe” which takes this file, and the contents

; of your web directory, and creates a new compiled file “myproj.spb” which is

; then downloaded to the SitePlayer module.

;

; Sets the name or description of the device

$Devicename "Electronics World Demonstration heater controller"

; Sets SitePlayer to find its IP address from a DHCP server

; if your PC is enabled to do so)

$DHCP on

; Sets password for downloading web pages and firmware, do’t need any to start with

$DownloadPassword ""

; Sets password for browsing web pages, don’t need any to start with

$SitePassword ""

; Sets SitePlayer’s IP address to use if no DHCP server is available

$InitialIP "192.168.1.255"

; Sets the binary image compiled filename that will be created, enter the full path

$Sitefile "C:\SitePlayer\myproj.spb"

; Sets the root path were your web pages are

$Sitepath "C:\SitePlayer\WEB"

; Definitions for SitePlayer standalone direct port I/O

; We need these definitions so that they can be viewed with a ^objectname replacement

; in your web HTML files. They can also be input by making an object of the same name in a form

org 0ff00h

p1 ds 1 ; Port 1 all 8 bits

org 0ff11h

io0 ds 1 ; Port 1 Bit number 0

io1 ds 1 ; Port 1 Bit number 1

io2 ds 1 ; Port 1 Bit number 2

io3 ds 1 ; Port 1 Bit number 3

io4 ds 1 ; Port 1 Bit number 4

io5 ds 1 ; Port 1 Bit number 5

io6 ds 1 ; Port 1 Bit number 6

io7 ds 1 ; Port 1 Bit number 7

Fig 7

<html>

<b><H1>You have successfully connected to the Basement Web Server!</H1>

<H3> BIT 6 OF PORT1 IS ^io6</H3>.

<H3> BIT 7 OF PORT1 IS ^io7</H3>.

<H3><a href="ww-web.spi?io5=^io5~1">CLICK TO TOGGLE PORT 5 = ^io5</a></H3>

<H3> THE FULL DATA BYTE IS

</H3>

</body>

</html>