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>
<body bgcolor="#CCCCCC">
<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> BIT 6 OF PORT1 IS <img src="^io6:1_blk.jpg"
width=”40” height=”60”>
<H3><a href="ww-web.spi?io5=^io5~1">CLICK TO
TOGGLE PORT 5 = ^io5</a></H3>
<H3> THE FULL DATA BYTE IS
<img src="^p1:1_blk.jpg" width=”40” height=”60”
align="absmiddle">
<img src="^p1:2_blk.jpg" width=”40” height=”60”
align="absmiddle">
<img src="^p1:3_blk.jpg" width=”40” height=”60”
align="absmiddle">
</H3>
</body>
</html>