How-To: Web Server On A Business Card (Part 2)

This mini web server is slightly smaller than a business card. There are a lot of tiny one-board servers out there, but this is probably the smallest you can etch and solder at home. Unlike many embedded web servers, files are stored on a PC-readable SD card, not in a difficult-to-write EEPROM. Read on for the web server design, or catch up on PIC 24F basics in the previous article: Web server on a business card (part 1).

Concept overview

The goal of this project is to build a web server on a business card that serves web pages and files from a FAT formatted SD card. The server is based on a PIC 24F that connects to a TCP/IP network using the ENC28J60 ethernet MAC/PHY. Network layers and low-level services, such as DNS and DHCP, are handled by the Microchip TCP/IP stack. A FAT 12/16/32 formatted SD card contains web pages and files. A very simple HTTP server ties everything together by handling page requests on port 80, searching the SD card for requested, and serving them with the correct content type.

Hardware

Microcontroller (Microchip PIC 24FJ64GA002)

The brain of the server is a 16-bit PIC 24FJ64GA002 (IC1), a 28pin microcontroller available in several hobbyist friendly packages. Check out our PIC 24F introduction for more about working with this chip.

PIC 24Fs operate between 2 and 3.8volts, which is perfect because the ethernet chip (IC2) and SD card both run at 3.3volts. This chip has 8K of RAM, plenty for the TCP/IP stack and a few K for working with a full FAT file system. The 24FJ64 has two SPI modules, so the SD card and ethernet IC each get a dedicated data bus.

The PIC processor core operates at 2.5volts, and requires a 10uF capacitor (C2) for the on-chip voltage regulator. The datasheet specifies a tantalum capacitor, but we used a low-ESR electrolytic in a prototype without incident. Every power pin needs a 0.1uF decoupling capacitor (C4,5).

The internal 8MHz oscillator provides a 32MHz clock source with the 4x PLL multiplier enabled. We’re also using an external 32.768KHz crystal (Q1) with 2 x 27pF capacitors (C17,18) to enable the real time clock calendar.

Programming connections are brought to a header (SV1). We chose to use programming pin pair three (PGx3). The master clear and reset (MCLR) function is enabled with a 2K resistor (R1) from V+ to the MCLR pin. Optionally, add a button (S1) from MCLR to ground for a manual reset switch.

Ethernet connection (ENC28J60)

An ENC28J60 (IC2) handles the network physical connection (PHY) and MAC layer. The ENC28J60 needs a number of support parts beyond the typical 0.1uF decoupling capacitors (C6,7,9,10). A 25MHz crystal (Q2) and 2 x 27pf capacitors (C15,16) provide a clock signal. The internal core voltage regulator requires a 10uF tantalum capacitor (C1), but an electrolytic capacitor also worked fine. Two LEDs (LED1,2) with 330ohm resistors (R2,3) display link and data status.

A bias resistor (R12) is required; the value will depend on the ENC28J60 version you’re using. Current chips should be B5 (PDF) or B7 (PDF), and require a 2.32K 1% resistor.

The PHY I/O portion specifies 4 x 49.9ohm 1% resistors (R8-11), and a ferrite bead (L1).

The most difficult-to-find part for the ENC28J60 is the correct RJ-45 jack with integrated magnetics (RJ1). We used a J1006F21 PulseJack from Pulse Engineering. Be sure to check the pin configuration and connections if you use a different jack, they will probably be different than ours. A Cadsoft Eagle part library for the JP1006F21 is included in the project archive. This was a $4 part, but it’s gone up to $7. If you know of other jacks that work we’ll add them here.

microSD card

We used a microSD/transflash card in this design because SD cards waste a lot of board space under the holder. microSD cards are smaller versions of SD cards with the same data interface, and most come with an adapter for use in standard SD card readers. The card needs a holder (SD1) and a 0.1uF decoupling capacitor (C8).

If you want to use a full-size SD card, take a look at our version one prototype in the project archive. We used Alps SD card holder #SCDA1A0901. Unfortunately, this part is has been discontinued and we’ve yet to find a suitable replacement. Don’t try #SCDA5A0201, that’s for sure. If you have a favorite, we’ll add it here. Sparkfun has one, and a matching Cadsoft Eagle part library.

Power supply

An adjustable LM317 voltage regulator (IC3) is set to 3.3volts using a 390ohm (R6) and 240ohm (R7) resistor. We considered several 3.3volt regulators, but nothing was cheaper than a LM317 and two resistors. There’s a 0.1uF decoupling capacitor (C13,14) and a 10uF capacitor (C3,19) on both sides to help support the power hungry Ethernet transceiver. The LM317 will output 3.3volts from an input of 5 to 20volts+, but it gets really hot with greater than 9volts supply. The specified input capacitor is only rated 16volts, so consider an upgrade if you plan to use a supply greater than about 9volts.

For the first time ever, we incorporated a power jack (J1) into a design. A jack with a 2.1mm diameter internal pin seems to be the most common DC connector. We used a cheap through-hole DC power jack, like SparkFun #PRT-00119 or Mouser #163-7620-E. It mates with a plug like Mouser #1710-0721.

Circuit board

The PCB (full size placement .png) was designed in Cadsoft Eagle 5.0. Freeware versions are available for all major platforms. Renderings were done with Eagle3D, beta version. Schematic and board files are included in the project archive (ZIP).

We designed the project with large SOIC chips and 0805 surface mount (SMD) parts, but haters can rest assured that chips are available in a through-hole package. We prefer to use SMD parts because the resulting circuit boards are smaller, cheaper, and faster to produce. 0805 parts are dirt cheap, and easy to solder with a normal iron. Don’t expect this project to work on a breadboard, there’s probably too much capacitance for this circuit.

We took full advantage of the PIC’s programmable pin placement to get the simplest trace routings possible. Just four jumper wires are needed on an otherwise single-sided board.

The traces are large and clean, DIY toner transfer boards should be easy. We made our PCB using an inkjet printer transparency mask over an UV sensitive circuit board.

In addition to the final design, the project archive contains our v1 prototype design. The prototype uses a full size SD card (SCDA1A0901) and all electrolytic 10uF capacitors. We also put the RJ45 Ethernet jack on a daughterboard to better accommodate different pinouts.

Partslist

# Count Part Size Mouser#
IC1 1 PIC 24FJ64GA002-SO SOIC-28 579-PIC24FJ64GA002SO
IC2 1 ENC28J60 SOIC-28 579-ENC28J60-I/SO
IC3 1 LM317 voltage regulator D2Pack 511-LM317D2T-TR
C1-3 3 10uF tantalum capacitor A case 74-293D106X96R3A2TE3
C4-14 11 0.1uF capacitor 0805 80-C0805C104M5R
C15-18 4 27pF capacitor 0805 140-CC501N270J-RC
C19 1 10uF capacitor 0805 647-UWF1C100MCL1GB
R1 1 2K0ohm resistor 0805 292-2.0K-RC
R2-6 5 390ohm resistor 0805 71-CRCW0805-390
R7 1 240ohm resistor 0805 71-CRCW0805-240
R8-11 4 49.9ohm 1% resistor 0805 71-CRCW0805-49.9-E3
R12 1 2K32ohm 1% resistor 0805 71-CRCW0805-2.32K-E3
L1 1 Ferrite bead 0805 81-BLM21BB600SN1D
LED1-4 4 LED 0805 645-598-8110-107F
Q1 1 32.768KHz crystal SMD 695-CM200S-327KF-U
Q2 1 25MHz crystal HC49 815-ABLS-25-B2
RJ1 1 Pulse J1006F21 673-J1006F21
S1 1 Tactile switch DTS-6 101-0164-EV
SV1,2 11 .1″ male pin header 571-41033290
J1 1 Power jack 163-7620-E
SD1 1 microSD card holder SparkFun: PRT-00127

Firmware

Three firmware examples are included in the project archive [zip]. The examples compile with Microchip’s demonstration C30 compiler. Learn more about working with the PIC 24F in our previous article: Web server on a business card (part 1). MPLAB isn’t great about project portability, you may need to locate all the project files again if your path doesn’t match the ‘c:wsbc’ format that we used.

FAT12/16/32 disk library

Our first step was to get the FAT library reading from a SD card. FAT 12/16/32 are simple disk storage formats that work with PCs, MACs, digital cameras, music players, and other electronics. Here’s our favorite FAT tutorial/teardown (PDF).

Microchip’s FAT 12/16/32 library gives us simple functions for working with SD cards. The included demo application creates some files and directories to demonstrate each function. Here’s how we configured it to work on our custom hardware, you can find these changes by searching for the tag ‘HACKADAY’ in the code:

  • HardwareProfile.h assigns actual PIC hardware to generic references in the code library. For the SD card this is an SPI interface, and pins for chip select and card detect. First, we deleted all the unused hardware profiles to make the code more manageable. Next, we configured the FAT library to communicate with the SD card using an SPI module (line 132). Finally, we defined the SPI pin assignments (line 152). Pin setup is shown in the table below.
    Pin Port
    Chip select B0
    SD card detect A2
    SPI clock B2
    SPI MOSI B1
    SPI MISO B3
  • Demonstration.c. On line 48 we set a custom oscillator fuse configuration, as described in our PIC 24F introduction. This is also the logical place to configure pin assignments with peripheral pin select (line 63).
  • FSConfig.h. This file enables various components of file system library, affecting the amount of memory and program space used. A read-only library is very small, a full write configuration is bigger. We didn’t have to make any changes for the demonstration, but this is an important file to note.

At first, the library failed to recognize our SD card. It only supports disks with a master boot record (MBR). Windows XP formats SD cards as a DOS disk: a single partition with no MBR. To verify this, open a Windows-formatted disk with a utility like HxD and inspect sector 0 of the physical disk. Byte 446 should be the location of the first MBR partition entry, but instead it’s the NTLDR executable code.

To format the disk in the ‘correct’ FAT format, use a digital camera’s format function or a utility like Panasonic’s SD card formatter. We also considered using a different FAT library that reads DOS disks, like DOSFS, or adding similar features to the Microchip firmware.

TCP/IP stack

Microchip’s free TCP/IP stack performs the convoluted configuration and networking functions needed to run a web server. You can read all about the stack in various application notes and documentation. Wikipedia is our favorite TCP/IP learning resource; we wrote our first TCP/IP stack using only Wikipedia.

Microchip’s TCP/IP stack used to be messy and confusing. Now it’s just confusing. The last few versions of have improved considerably in code clarity and structure. Here’s what we did to to configure the base TCP/IP stack example for our hardware, you can find these changes by searching for the tag ‘HACKADAY’ in the code:

  • HardwareProfile.h assigns actual PIC hardware resources to generic references in the code library. We added our custom oscillator configuration (line 68), and configured the server status LED to use the LED attached to PORTB7 (line 83).  We defined the SPI interface to the ENC28J60 as follows (line 116):
    Pin Port
    Reset B8
    Chip select B9
    SPI clock B10
    SPI MOSI B11
    SPI MISO B12
    Wake on lan B13
    Interrupt B14
  • MainDemo.c. We eliminated a bunch of unused code, and added the peripheral pin select configuration code to the InitializeBoard() function (line 332).
  • TCPIPConfig.h defines the TCPIP stack components included in a compile. We’ve enabled DNS, DHCP, the IP announcer, and the ping server (line 56):
#define STACK_USE_DNS            // Domain Name Service Client
#define STACK_USE_DHCP_CLIENT    // Get DNS automagically
#define STACK_USE_ANNOUNCE       // Microchip Ethernet Device Discoverer
#define STACK_USE_ICMP_SERVER    // Enable the PING server

After loading this firmware, we’re ready to connect the server to a network for the first time. During initialization, the TCP/IP stack negotiates with the network router for an IP address using DHCP. We need to know this address to communicate with the device. If the device had a screen we could display the IP address, but instead we use the MCHPDetect.exe utility from Microchip.

When the TCP/IP stack finishes initializing, it broadcasts an announcement packet to port 30303 of all locally connected computers. MCHPDetect extracts the IP address from these packets. A new announce packet is sent on every PIC reset.

It’s also possible to read the IP address directly from memory with a debugger. The address is stored in the AppConfig.MyIPAddr variable, the .byte form follows the standard x.x.x.x IP notation.

Once we have the IP address, we can ping the server and test its responsiveness.

If ping shows high latency or malformed packets, you can use Wireshark to inspect network traffic at the byte level. Unless you’re in Germany, because it might be criminal.

Building the custom HTTP server

The custom web server looks for requested files on the SD card, and sends them with the correct content type. We used the Microchip HTTP example server v1 (HTTP.c) as a base for our FAT file server (FATHTTP.c).

Microchip’s HTTP server used a simple file system called MPFS to index web pages on an EEPROM chip. We replaced calls to MPFS functions with calls to functions in the FAT library (see the HTTPProcess and Sendfile functions in FATHTTP.c). Our changes demonstrate the concept as simply as possible, without adding confusing pointers and other handy C obfuscations. The code leaves a ton of room for improvements, have at it. File writes are disabled in the default compilation, but there’s enough program space to enable them if you want to write to the SD card (see FSConfig.h).

It’s necessary to registered our custom FATHTTP server with the rest of the TCP/IP stack. We did a search and replace for the original HTTP server components, and added calls to our new FATHTTP server as needed. That turned out to be these places:

  • TCPIPConfig.h. First we inserted some definitions that enable the FATHTTP server (line 70), and added a TCP socket for the FATHTTP server (line 248).
  • TCPIP.h. Next, we added FATHTTP to the list of services that require the TCP/IP stack (line 170) and then included the necessary headers (line 351).
  • StackTSK.c. We added the FATHTTP server initialization (line 138) and processing (line 340) functions to the list of TCP/IP stack tasks.
  • Helpers.c. We also needed to include a few helper functions for working with URLs (line 259).

At long last, it’s time to put some files on an SD card and test this thing. Make sure your files follow the 8.3 file name format. The project archive contains a sample website with a test image and zip file.

After grabbing the server’s IP address with MCHPDetect, we pointed a browser at it. The IP address entered alone will redirect the browser to index.htm, whether or not it exists. Web pages and images stored on the SD card display in the browser, but unknown binary types trigger a download prompt.

Taking it further

We see a lot of potential projects using this tiny web platform.

  • Add hooks in the FATHTTP.c source for special URLs that trigger events or configure pins.
  • Build a remotely accessible data logger. Use the extra pins to read sensors and log data to the SD card. Logs are retrievable from a web browser, or directly from the FAT readable SD card.
  • Get remote access to an ancient serial terminal or BBS, optionally log the console output. Use two external pins as a serial port, and forward commands from the Internet using Microchip’s Telnet server and Ethernet-to-serial bridge examples.
  • Your suggestions?

Next time, we’ll use the mini server to make an Internet connected, electronic indoor graffiti wall. This will be an interactive project where everyone can contribute graffiti and animations on-line.

Schematic, board, and firmware files are included in the project archive (ZIP). Use the freeware version of Cadsoft Eagle to view the schematic and PCB. The firmware is written in C, and compiled with the Microchip demonstration C30 compiler.

140 thoughts on “How-To: Web Server On A Business Card (Part 2)

  1. I was wondering the same thing. If this was for sale I would definitely have to purchase. I am intrigued by its wonders and magical powers of smallness. hehe. The business card server is amazing you could literally put it anywhere!!

  2. I’d be interested in a business card webserver too, depending on the price. My iPod does the same stuff now, so it might not be all that much different. The main advantage of your design is the ethernet connection instead of wireless.

    Would you please put a link to the second part on the end of the first part so that you can read it through all the way? Thanks.

  3. How about using the extra pins to read the doorbell button outside your front door. Couple that with some simple XML and you have a doorbell that tweets. Doorbell -> Biz Card Server -> Twitter -> iPhone. The circle of life is complete!

  4. for a reasonable price i would purchase a ready-made biz card webserver too. Seems to be a great gadget to connect own tiny projects to the internet.
    If you plan to sell a complete “read-to-work”-version of it, let me know.

  5. Great article. Sparkfun sells finished cards based on user-submitted designs; this seems like a good candidate.

    Beware the ENC28J60 runs really hot ‘n hungry; it uses over 200ma even just sitting idle. Don’t expect to run it off of AA batteries for very long…

  6. THIS IS GREAT !!!

    I really would like to see some “benchmarks”.
    How fast does your example site load and how big is it?
    Much much time needs e.g. a 500k Photo to download?
    And what are the features of the Webserver?

  7. jared, i could handle the soldering but getting the components isn’t such a simple task and having to order from multiple online (overseas?!) vendors the mailing in cost would be quite limiting for quite a few of us… :/

  8. Maybe you shouldn’t have spent all your bucks on your ipods then. :)

    Admittedly the getting of the parts is a pain, but still, this is what hacking your own hardware together is all about…either learn to enjoy the pain (and really, is it THAT expensive?) or I guess don’t worry about it at all and move along.

  9. I was wondering if this same application could be used for a “proxy on a business card”?

    I would like to create one of these myself and maybe grab some open source web based proxy code and see if I couldn’t get a hardware privoxy style appliance that could fit in a shirt pocket.

  10. <<>>

    The problem with the iPod is going to be the filenames. George_Bush_Sings_The_Blues.MP3 isn’t going to fit.

    George_B.MP3

    See:

    –“Make sure your files follow the 8.3 file name –format. The project archive contains a sample –website with a test image and zip file.”

    Hello and welcome to Microsoft DOS.

    That’s what kills it for me. I want to produce a very simple, not necessarily small web server at home as a backup for my ISP. I use my own web site constantly and it’s really annoying when they have problems. My example is the administration web server inside my WiFi Hub with bigger memory.

    Aggressively simple.

    I’ve been known to put an old Mac 8500 OS 8.7 Personal Web Server on line to do this. It works perfectly, but that too is dramatic overkill.

    And yes I have several soldering irons and a very nice temperature controlled soldering station.

    Watch it. I have a pocket protector, and I know how to *use* it!

    Koz

  11. I’m just playing with arduino (almost a business card footprint) + ethershield, which basically does the same thing (without SD by default) at ~20 GBP in parts and saves a lot of time.

    Still, good to see more mini web server hacks, esp from scratch :)

    For the other poster, POE wouldn’t be a problem.

  12. Cool. For those asking for prebuilt kits, check out this ready to use dev kit

    http://netburner.com/products/development_kits/network_development.html

    Dev in c or c++, UC/OS real time multitasking OS, fast ethernet, HTTP server, TCP/UDP, DNS, FTP, SMTP etc. Plus you get GPIO, A/D, 147MHz coldfire CPU. Eclipse for dev and graphical multithreaded debugging. The core is $69, core + dev board = $99.

    My only association with netburner is that I use their stuff. Also their support rocks, they make their developers answer their help tickets (and they use RT3).

  13. I’d like to see a version which dropped the RJ45 and DC power for WiFi/Bluetooth and a very flat battery, laminated into an actual business card. Put it near any wireless-equipped PC/WAP/PDA and it acts like a new peripheral/server/connection.

    I wonder what it would cost to incorporate a miniature solar cell and/or kinetic power source into the card, thus extending the battery life…

  14. Would it be possible to add an audio circuit, load urls into the sd card, maybe an lcd display and turn this into an internet radio tuner? is there an d/a convertor on the microcontroller?

Leave a Reply to beastmasterCancel reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.