Esp8266 HTML Web Server

(Version: 129)


The Concept

Design a device to use ordinary HTML files to remotely control things over the internet.

If you don't already know how to do HTML programming, we recommend W3Schools. (try: open in new window) Or, just use the HTML files provided here and edit them for your own use.

Buttons, text boxes, pull down menus, check boxes, and radio buttons all send out data when activated in your browser. This data is sent out (along with a bunch of other stuff) back to the server as text strings in the form: NAME=VALUE. This device recovers the data and sends it out as serial data.

Here is an example of a button control -

<button type="submit" name="aux-2" value="activate switch #2">legend</button>

"submit" means send data immediately.

"aux-2" is the name string sent.

"activate switch #2" is sent after the name string and '=' sign.

legend - is the text shown on the button itself.

To make this system as generic as possible, only the VALUE string is sent out as serial data from the unit. Almost (?) any ascii or binary value can be sent out and the string can be arbitrarily long. Binary values can be included by using underscore '_' followed by 2 hexidecimal digits. Underscores themselves can be sent by using two underscores in a row.

Example: value="open__file#1_0D_00"

Sends out the string "open_file#1" followed by a carriage return and a null.

Text boxes will send out whatever you put in the box immediately after you hit the ENTER key. Putting just one of these on the page allows you to 'try out' command strings live before you code them into one of the buttons.

Other controls also work, but they require a SUBMIT button to actually send the data. Also, if multiple commands are done at the same time, each one will be processed in turn.



As shown in the SCHEMATIC, this is a very 'bare bones' design. The PIC16F1615 interfaces with the ESP8266 wifi controller, the 24LC512 eeprom, an RS-232 serial interface to a computer, and a TTL interface to send control signals. The PIC runs of 5 volts, and 3.3 volts is provided for the 8266.

Here is the BOARD LAYOUT along with the PARTS PLACEMENT, the hex OBJECT FILE, and the SOURCE FILE.

Web pages are loaded using a terminal program via the RS-232 port. Here is an example WEBPAGE. To download it without losing all the cr/lf codes, view THIS FILE then cut and paste the entire file into Notepad. You can view the webpage in your computer by double clicking to see it in your browser, or can modify it with any plain old text editor. (right click on desktop icon, 'open with', notepad) After that, rename the file to HTM.


The Design

The PIC16F1615 was chosen for its 1k of linear ram allowing for larger data blocks to be sent (speeding up page loads). The hardware USART is used to do the high speed communication with the ESP8266 at 115,200 baud. Software bit-banging is used for the 9600 baud rs-232 port to the computer and also for the variable speed TTL port used to send out control data.

A 24LC512 provides 64k of eeprom for holding the web page itself. (gee, thats how much memory my first computer had altogether). Since html files themselves do not actually contain any graphics, thats one rather large web page.

Any response data sent back via the TTL serial port can be shown on the web page.

There are several options for the serial communication. These are placed in a custom 'tag' in the web page file itself. All tags in html files are invisible on the screen but may create things (like buttons) that show up and operate on the screen. Tags all begin with '<' and end with '>'.

Our custom tag looks something like this -


It places text on the page in whatever location the tag is. Each letter has a specific function. Any or all may be used. Upper case is required here.

T - send/receive control data using TTL port instead of rs-232 port.

R - wait for serial data response. (data is always transmitted)

E - echo response onto webpage at the tag's location.

N - send carriage return (ascii-13) at end of each string.

L - send linefeed (ascii-10) at end of each string.

B - set baud rate according to number that follows.

1 - 1200, 2 - 2400, 3 - 4800, 4 - 9600, 5 -19200, 6 -31250 (midi)

X - send out raw data as 'name=value' stings including escape sequences.


Initial Setup

Connect a terminal program at 9600 baud to the RS-232 (db9) connector. Power up the device. You should see a lot of data as it sends out the following sequence of commands to the 8266:

AT+RST (reset device)

AT+CIPMUX=1 (enable multiple users for server mode)

AT+CWMODE=3 (enable server and access point modes)

AT+CIPSERVER=1,80 (set standard server port)

AT+CWDHCP=2,1 (needed for Access Point mode)

After you see the 'OK!', hit the ESC key to get the terminal mode command prompt, then enter the following (everything is case sensitive)...

AT+CWLAP (you get an OK followed by a list of local access points)

Log into your access point (router) with the following...

AT+CWJAP="<your ssid>","<your password>"

Now find you assigned IP address. Both the Station and Access Point addresses will be listed.

AT+CIFSR ---- to see your assigned address (write it down)

You will now be automatically logged in to your router every time the device powers up.


Getting Loaded

This device works with a standard web page file in HTML format. You can preview the file just by double clicking it and viewing it in your browser. It gets loaded via the RS-232 port using a terminal program. We use TERM232 the from Industologic.

Make sure you are in terminal mode, full duplex, 9600 baud (see the NNN> command prompt), if not, hit ESC to get there. Now type *L<enter> and see the device echo '!'.

There are 2 ways to load in a file...

Have the terminal program wait about 20 milliseconds after sending each line.

- or -

Have the terminal program wait for a '!' before sending the next line.

In either case, you will see one '!' on the screen for each line sent. When they stop coming, hit ESC to get back to the device's terminal mode. Now hit *1<enter> to go to normal operation. Or power the unit down and back up. All of your log-in and the HTML file itself are saved.




This is what you do each time you power up the unit.

Wait for the start up sequence to complete --- 'OK!' You do not need the computer connected, just wait about 20 seconds and you should be running.

Now, open your browser and enter the address (something like 192.168.0.nn) and you should see the webpage load.

You are now 'live', any control you activate will result in its 'value' parameter string being sent out as serial data. You can put the device into Terminal Mode at any time by hitting the ESC key. You should see a prompt with the version number.


From here you can enter any commands directly into the 8266. If the browser tries to load a page at this time, you will see several lines of text that constitute a GET command for the page, but the device is not processing it, so the page will not be sent.

You have 3 options to return to normal operation:

*1<enter> goes back to normal operation

*2<enter> same as '1' but outputs trace information (see source code for meaning).

*3<enter> nornal operation with all text echoed via RS-232 port. You see all of the transactions between this device and the web browser. This can be very educational but does slow up the operation.



* * * * * * * *





Home network: Feed data into our home network. Data is sent directly to individual modules via a TTL to Xnet interface. Here is the HTML file. To download it without losing all the normal cr/lf markers, view THIS FILE and cut and paste the contents into a text editor (Notepad). After that, rename the file to HTM.


If you find a nifty use for this device, you can send us a short description along with the webpage (html file) and we will include it here.

You comments and questions are welcomed --- <>