PIC Wi-Fi Interface 2

One of my favorite phrases is “It’s easy if you know how.”  I’m not sure if I picked that up somewhere long ago or coined it myself but there is a lot of truth in it.  That’s kind of what happened when I went looking for a way to expand on what I did in a previous project with the ESP8266 Wi-Fi module.  In that project I had only gotten to the point of being able to get the ESP8266 to report information when pinged.  But I also wanted to be able to send control commands to the PIC via the ESP8266.  The bottom line is that I spent a lot of time and energy trying to find a simple HTML example that would let me accomplish that. In the end it was easy once I knew how.  As a disclaimer I need to say that I still know very little about HTML but, hey, Edison probably didn’t know much about electricity when he started.


PIC WiFi Interface1

The schematic shown here is exactly the same as what was presented in Episode 18 except that I added LEDs on a couple of PIC GPIOs in order to demo the ability to toggle control lines.  As for the actual prototype module I built for the first Wi-Fi project,  all I added was a pin header in order to access the PIC GPIOs.


The demo text files for generating HTML are included below.  There are three files, with two of them (Control1 and Control2) being the pages that can get selected from file ESP8266 Controls.  I set it up this way so that it is easy to add more ESP8266 nodes to the network.  Just copy one of the Control files, modify it for the new application, and make sure that you change the port number in the code.  Then add a new line of code to the ESP8266 Controls file to point to the new Controlx file.  It really is that simple.

HTML Files

When you open and modify the text files you should use a basic text editor like NotePad instead of a formatting editor like WordPad.  Before they can be used to create a webpage, the text files need to be converted to HTML files.  In order to do that, simply open the text file, select “Save As”, change “File Type” to “All Files”, and add “.htm” to the end of the file name (without the quotes).  That’s all there is to it.

ESP8266 Controls

Ok, so let’s take a look at the files.  The first one, shown in the screen shot above, is ESP8266 Controls.htm.  The DOCTYPE and the opening/closing HTML directives are standard stuff for every webpage.  The TITLE line allows us to display whatever text we want on the tab at the top of the webpage.  The opening/closing BODY directives are meant to contain the code lines but that doesn’t appear to be a hard and fast requirement.  Just call it a good programming practice.  The HREF commands add clickable links to the webpage (with the names “Temperature” and “Sprinklers”) and route to the specified link.  If you read the HTML manual the link can be an HTML file (like we have here), a web address (like yahoo.com) or an IP address (like



The second and third screen shots are of Control1.htm and Control2.htm files.  The basic content of each is a FORM construct which allows us to add things like radio buttons, checklists, text boxes, etc.  The form can then be submitted to another location via IP address or webpage.  That destination is specified on the FORM ACTION line.  In this case we point to the IP address and port number we have assigned to the ESP8266.  The METHOD specified can be either GET or POST but only the POST method seemed to work for this application.  In order to allow access to multiple ESP8266 modules we need to assign them different IP addresses.  In our example all we did was change the port number but that is enough.

The INPUT commands are where we can specify the different aspects of the form (i.e.: the button or text box types).  If you specify something like a radio button or text box then you need to also specify a SUBMIT button.  That is, the user fills in the data on the form and then has to separately click a button to send the data to the destination.  Given that our application is basically geared toward on/off or data request actions we can skip the other button types and do everything with just SUBMIT buttons.  That way when you select and click on a button it will automatically send the data.  What gets sent is specified in the INPUT command line.  For instance, if we click on the button that is labeled “Back Yard”, the results sent to the ESP8266 will look like this: QQQ2=Back+Yard.  The basic thing to remember is that what is specified in the NAME attribute will show up before the “=” sign and what is specified in the VALUE attribute will show up after the equal sign.  Apparently spaces (like that between “Back” and “Yard”) are filled with a “+” in the data sent by the webpage.  The VALUE attribute also defines the label on the webpage button.

Web Connection Testing

Main Page

Temperature Page

Sprinkler Page

The setup detailed in the first Wi-Fi project is also valid for this project.  There are no changes to how we set up the ESP8266 with the terminal program because we are differentiating between multiple ESP8266 modules with a change in the port number.  The setting of the port number is done in the PIC software.  The screen shots shown above illustrate what you should see on the various web pages.  You don’t even need the ESP8266 or the terminal program in order to verify the correct format and switching between pages.

Terminal Results

There is also a screen shot above that shows a typical response when you connect the ESP8266 and the terminal program without the PIC.  Remember from the first Wi-Fi project that you need to send the CIPMUX and CIPSERVER commands from the terminal in order to make the ESP8266 ready to connect to the webpage.  Each time you press a button you should see that the ESP8266 connects and then receives the appropriate data.  Remember that you should only see these responses for button presses that are sending data to the port number you specified with the CIPSERVER command from the terminal.  In the example here that means that only the buttons on the “Sprinkler” page are valid for the included PIC software.

In the first Wi-Fi project we saw how to send data to the webpage.  In this expanded application that method doesn’t change.  In fact, what we will normally do with the PIC is to receive the command from the webpage, take the requested action, and then send some sort of response back to the webpage.  When the webpage receives the data the buttons will disappear but you can get the buttons to reappear by clicking the “Back” button in the web browser.  The “Back” button can also be used to get back to the original page where we select which ESP8266 node we want to talk to (i.e.: Temperature or Sprinklers).


The software link is listed below.  While it is targeted for the 16F688, it is easily ported to other versions of the PIC.  Just make sure that you choose one that has the asynchronous serial port capability.  You will also need to change the line that identifies the PIC version (LIST=) and the INCLUDE file but those are intuitive changes.  The __CONFIG line may also need tweaking just because one or two of the labels used are spelled differently in some of the INCLUDE files.

The software builds on what we used in the first Wi-Fi project and replaces the canned “Message” that we sent to the webpage with a call to a routine that decodes the request from the webpage, takes action, and then sends a response.  Just as we did in previously, we wait for an incoming connect request from the webpage so that logic is the same.  After that we look for the specific command identifier.  Because it is easy to control what string is sent from the HTML code, I made it a string with an extremely low probability of occurrence.  The start of the string is “QQQ” so I look for that in the code.  When I get the third “Q” I read one more character and that is the single digit numeric value for the command.  At this point I don’t anticipate having more than 10 control buttons per page so that makes life easy when parsing the command.  In this example I set up the code to respond to port 40100 so that means the commands on the “Sprinkler” page.  At this point all it does when either the “Front Yard” or Back Yard” buttons are clicked is to toggle that PIC GPIO pin and then send back the current status of both ports.  The third button on that page simply retrieves the status of the GPIO outputs.  That’s it for this post.  Check out my other electronics projects.