Remote Control Using an ESP8266 Wireless Module

This instructable explains how to control an object using your web browser and an ESP8266 wireless module.

MicroPython is used to configure the ESP8266 as a webserver.

The ESP8266 node MCU supports two server modes. Both modes are demonstrated :

AP mode (access point), which does not require an internet connection, and
Station mode.

The graphics display on your browser has five "buttons" suitable for controlling a model car.

All graphics reside on the server and the state of the object is reported back to your browser in real-time.

The demonstration code can be adapted to other projects ... just replace the led.on() and led.off() functions with your own code.

A knowledge of MicroPython, HTML (Hypertext Markup Language), and CSS (Cascading Style Sheets) is not required to complete this project but is required should you wish to make changes to the code.

A "drag-and-drop" editor is used for this project. A feature of this editor is that it allows you to install MicroPython onto your ESP8266 wireless module without the need to have a full version of Python installed on your computer.

The estimated cost of materials is less than $5.00

Images

The "cover" photo shows the ESP8266 server and the matching HTML web controls.
Photo 2 shows the simple web interface. The colors, shapes, and positions of the controls may be changed by editing a small HTML web page on the server.
Photo 3 shows the ESP8266 wireless module.
The video shows the web interface in action.

Supplies

The following parts were obtained from https://www.aliexpress.com/

1 only ESP8266 NodeMCU LUA CH340 ESP-12E Development Board (photo 2)
1 only micro USB cable

Step 1: Over View

The ESP8266 development board ( photo 1) is compatible with both Arduino code and MicroPython.

For this project I have chosen MicroPython.

The following files must be installed on your ESP8266 module before this project will run:

MicroPython
boot.py
config.py
five_buttons.py
five_buttons_ap.py
five_buttons.html

Each of these files will be installed in Step 5 using the Mu drag-and-drop editor from https://codewith.mu/en/download

But before we can do this we need to make our Windows desktop computer recognise the ESP8266 development board.

We do this by installing a CH341 USB-to-UART driver from https://electropeak.com/learn/download/ch341ser-zip/

Let’s begin …

Step 2: Installing the Windows USB Driver

Depending on the age of your Windows computer it may, or may not, have the correct USB-to-serial UART driver file installed.

A simple way to find out … connect your ESP8266 module to your PC using the micro-USB cable and type “device” (without the quotes) into the Windows 10 search bar at the bottom left of your screen.

Select the “Device Manager” option … and a screen similar to photo 1 will appear.

If you don’t see the red highlighted entry then you need to install a CH341 USB-to-serial UART driver file available from https://electropeak.com/learn/download/ch341ser-zip/

Unzip this file and click “SETUP.EXE” … a screen similar to photo 2 will appear.

Now click the “INSTALL” button.

Reboot your PC once the driver is installed … all going well you should see a USB Serial COM port entry appear in “Device Manager” (as shown in photo 1) when you plug in your ESP8266.

Step 3: Installing the Mu Editor

This project uses the “Mu” editor from https://codewith.mu/en/download.

A feature of this drag-and-drop editor is that it enables you to install MicroPython onto your ESP8266 module without the need to have the full version of Python installed on your computer.

The Mu editor enables you to:

write, save, and load code.
inspect the files on your ESP8266.
inspect the files on your PC.
drag and drop files between your PC and the ESP8266.
run your programs before loading them into your ESP8266.
run your programs on the ESP8266.
check your code for errors prior to running.

It also allows you to install the correct version of MicroPython onto your ESP8266.

Steps

Download the Mu Windows installer from https://codewith.mu/en/download (photo 1)
Click the Windows Installer options and a file will appear in your “downloads” folder(see lower left in photo 1)
Now click the “Instructions” tab and follow the instructions (photo 2)

Step 4: Installing MicroPython

Steps

Launch the Mu editor (photo 1)
Click the lower-right icon …. a “Mu Administration” screen will appear (photo 2)
Click the download firmware link … a photo montage of the possible ESP8266 modules will appear (photo 3) [1]
Click “esp8266” in the first line of red text labelled “Filter by: Port”
Select the middle icon at the bottom of the screen (photo 4)
Select the “(latest)” firmware release (photo 5)
Exit the download website and return to your Mu editor.
Click the Mu “Browse” button and select the MicroPython file in your download folder (photo 6)
Finally ... click the “Erase & write firmware” button.
Click the “Files” tab when the upload is complete. You should see the following screen (photo 7)
Done …. in the next step we will install the web server files.

Notes

[1]

There are many ESP8266 development boards on the market, each of which requires a custom version of MicroPython due to the differences in installed chip sets.

To ensure that you install the correct version of MicroPython for your ESP8266, click on a photo that matches your board after which you simply follow the on-screen instructions.

Once MicroPython has been installed you should be able to run any program written for an ESP8266 regardless of which board-type is being used.

Step 5: Installing the Application Files

When the Mu editor is installed it creates a C:\Users\”your-name"\mu_code folder.

Steps

Download each of the attached files and copy them to your “...\mu-code” folder.
Convert the"five_buttons.pdf" file to a text document using an on-line pdf-to-txt converter such as https://pdftotext.com/
Rename the text file to "five_buttons.html" [1]
Delete the pdf file ... your mu_code folder should look like this (photo 1)
Click the “Load” button and select the “config.py” file (photo 2)
Replace the text between the “ ….” quotes with the SSID and password for your LAN then click the “Save” tag.[2]
Click the “Files” tab and drag-and-drop each the files from the right-hand window into the left-hand ESP window. (photo 3)

We are now ready to test the code.

Notes

[1]

File conversion is necessary as HTML file uploads are not supported.

[2]

This is necessary as every LAN ssid and password is different.

Step 6: Testing the ESP8266 Web Server

There are several ways to test your code … the following method is the simplest.

Steps

Click the REPL button [1] … the following screen should appear (photo 1)
Type “import five_buttons” then press the “enter” key to start the server. The server will respond with the address on which it is listening (photo 2)
If REPL reports an error, press CTRL-D to perform a soft reboot, and retype the command.

We are now ready to connect to the server.

Notes

[1]

REPL is a computer environment where user inputs are read and evaluated, after which the results are returned to the user.

REPL stands for “Read-Eval-Print Loop”.

Step 7: Connecting to the Server

Steps

Open your browser and type the URL shown in the REPL window. In this example it is 192.168.1.6

The screenshot shown in photo 1 should appear. Note the URL in the browser window ... it changes whenever we click a button.

Click one of the rectangular buttons and the following things will happen:

the web page URL has changed indicating a new page.
the onboard LED (light-emitting diode) will start glowing to indicate that the car or robot is moving forwards.
the web page contents reflect the state of the onboard LED.

Things to try

Click the stop button:

the LED will stop glowing
the URL will change
the page contents will change

Instead of clicking a button, type 192.168.1.6/forward in your browser window

the LED will start glowing
the URL will stay the same indicating the server has found that web page
the page contents will change. (photo 2)

This concludes the installation and testing.

Let’s examine the code ...

Step 8: The Server Code

The file “five_buttons.py” contains the server code.

The code has four distinct sections

Section 1

This section comprises the following headings:

# get libraries
# configure on-board LED
# get LAN security details from config.py
# connect to your wireless LAN
# wait fror the ESP8266 to connect
# get ESP8266 address
# start listening

Do NOT change this code … it is valid for all of your projects.

Section 2

This section comprises the following headings:

# main loop
# accept client
# process text string

Do NOT change this code … it is valid for all of your projects.

Section 3

This section comprises the following headings:

# action client button pushes
# get HTML page
# replace text in web page
# send modified web page to client

The code in this section can be changed to suit your needs.

The code line if request_url.find('/forward') != -1:

is a conditional statement as it ends with a colon.
the conditional statement looks for the text string /forward from the client
the led.off() can be replaced with your task
button = 'FORWARD' is used to replace a "place-holder" within the HTML web page that is sent to your controller.
LED = 'ON' is also used to replace a "place-holder" within the same HTML web page.

Notice that each code line within the conditional statement is indented four spaces (or 1 tab)

This pattern of conditional statements is repeated for each of these HTML buttons

/forward
/left
/stop
/right
/reverse

Section 4

Do NOT change the following lines ... they are valid for all of your projects

client.send('HTTP/1.1 200 OK\n'): This line sends an HTTP response header indicating that the request was successful. The status code "200 OK" signifies that the server has processed the request and is returning the requested resource.
client.send('Content-Type: text/html\n'): This line specifies the content type of the response, indicating that the data being sent is in HTML format.
client.send('Connection: close\n\n'): This line indicates that the server will close the connection after sending the response. The double newline character ("\n\n") signifies the end of the headers and the start of the actual content.
client.sendall(html): This line sends the actual "html" file content to your browser.
client.close(): This line closes the connection with your browser, terminating the communication.

Step 9: The HTML Code

Overview

The file “five_buttons.html” containing the HTML code is stored on the server.

A (modified) copy of this file is sent to your browser when a request is received by the server.

Within the file are two ”place-holders” (shown below in bold highlight)

<p>You pressed the <strong>button_label</strong> button</p>
<p>The LED is <strong>led_state</strong></p>

Before sending the web page to the client, the above “place-holders” are replaced with appropriate text using the following server code lines:

html = html.replace('button_label', button)
html = html.replace('led_state', LED)

The web page is styled using a “style” sheet in the <head> … </head> section of the HTML file.

The <head> ... </head> section

The following HTML elements and meta tags provide information and settings for the HTML page.

<title>ESP8266 Web Server</title>: This line defines the title of the HTML page. The text "ESP8266 Web Server" is displayed as the title in the browser's title bar or tab.
<meta name="viewport" content="width=device-width, initial-scale=1">: This line specifies the viewport settings for the page. The viewport meta tag is used to control how the webpage is displayed on different devices with varying screen sizes. In this case, it sets the width of the viewport to the device's width and the initial zoom level to 1.
<link rel="icon" href="data:,">: This line specifies the icon (favicon) for the webpage. The link tag with rel="icon" indicates that the referenced resource is the favicon. The href attribute provides the location of the favicon. In this case, the data:, URL scheme is used, which signifies that the favicon data is embedded directly in the HTML code itself. However, in this specific code, the favicon data is empty (data:,), meaning there is no favicon associated with the webpage.

The Stop Button

The code lines in this <style> … <style> sheet are self explanatory except for the round “Stop” button

All buttons start off as a rectangle with rounded corners with this .button definition:

width: 160px;
height: 80px;
border-radius: 20px;

The height of the “Stop” button is increased from 80pxto 160px in .button3 with this code

height: 160px
border-radius: 80px;

Inceasing the button height to 160px makes the button square ... and increasing the border-radius to 50% makes the button round.

The horizontal buttons

The “Left”, “Stop”, and “Right” buttons appear in a horizontal line.

To achieve this we surround the three code lines that define the buttons with <div> … </div> tags as shown below:

<div>

<a href="/right"><button class="button button4">Right</button></a>

</div>

Since each button has been defined as “display: inline-block;” they behave like single text characters and appear in a straight line.

Hypertext

Hypertext <a href=” ...”> … <a> tags are used to define each button.

Clicking a button causes a /forward, /left, /stop, /right, or /reverse URL to be sent to the server.

The server uses this URL to locate the task it is to perform before adding it to its own IP address when sending the modified web page back to your browser.

Button Colors

The web page buttons can be set to any color in the rainbow by substituting the background-color style for one of these values:

red
orange
yellow
green
blue
purple
indigo
violet

Other common colors are listed here:

https://www.w3schools.com/colors/colors_names.asp

Notes

The following web site has an excellent series of CSS and HTML tutorials

https://www.w3schools.com/html/

Step 10: Creating Your Own Apps

Pin numbering

The pin numbers for an ESP8266 are shown in photo 1.

This pin numbering can be confusing ... especially If you come from an Arduino background.

If you examine your ESP8266 development board you will see that it comprises two circuit boards … one on top of the other.

The GPIO (General Purpose Input Output) numbers refer to the pin numbers on the small board on top. Each of these pins are in turn connected to the A0, D0 .. D8, S2 .. S3 numbers on the larger board below

The A0, D0 .. D8, S2 .. S3 numbers on the larger board (unfortunately) look like those on an Arduino UNO.

DO NOT USE these Arduino numbers… always use the GPIO numbers as you can purchase the top boards separately and using the GPIO numbers ensures compatibility between all development boards.

Example

Let’s connect an LED in series with a 330 ohm current limiting resistor between pin D6 and ground.

To turn this LED "ON" we would use the following code:

led2 = Pin(12, Pin.OUT)
led2.on()

Since pin D6 is connected to GPIO12 we use 12 when defining led2 in the first code line.

Notes

(1)

In some boards, led2.on() will actually turn the LED off due to the way the board is wired. If this is the case use led2.off() to turn the LED on.

(2)

The following website has an excellent series of tutorials on programming the ESP8266

https://docs.micropython.org/en/latest/esp8266/tutorial/index.html

(3)

Once you are happy with your program, you can make it automatically run at startup by right-clicking your python file and selecting Write to main.py on device”

(4)

To delete main.py from the ESP8266, right click “main.py” and select “Delete”.

(5)

Enter CTRL-C to stop a program.

(6)

Enter CTRL-D to perform a "soft boot".

This is necessary if you have stopped your program and wish to restart it. The ESP8266 always runs the first time you start a program but requires a "soft reboot" if you wish to run it again.

Step 11: Access Point and Station Modes

Some terminology

Access Points are devices that provide wireless connectivity. They are useful in situations where there there is no internet access.

Stations are a device that connect to a network wirelessly. This mode supports internet connectivity.

Clients are devices that are connected to the network and can communicate with other devices on the network

Configuring

The ESP8266 can be configured either as an Access Point or as a Station

The "five_numbers.py" file configures the ESP8266 as a Station
The file "five_numbers_ap.py" file configures the ESP8266 as an Access Point.

Code Differences

The main loop is the same for both methods and both methods share the same HTML file ... all of the changes are in the first few lines of code..

Let's compare the first few code lines in both methods.

Access Point method

import network
import socket
ssid = 'ESP8266_AP'
password = '12345678'
ap = network.WLAN(network.AP_IF)
ap.config(essid=ssid, password=password)
ap.active(True)
while not ap.active():
pass
status = ap.ifconfig()
esp8266_ip = status[0]
addr = (esp8266_ip, 80)
s = socket.socket()
s.bind(addr)
s.listen(1)
print('listening on', addr)

Station Mode method

import network
import socket
ssid = config.SSID
password = config.PASSWORD
sta = network.WLAN(network.STA_IF)
sta.connect(ssid, password)
sta.active(True)
while not sta.isconnected():
pass
status = sta.ifconfig()
esp8266_ip = status[0]
addr = (esp8266_ip, 80)
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(addr)
s.listen(1)
print('listening on', addr)

When we examine the code we see there are only three changes (shown in bold highlight)

For clarity all comments ,and non-related code, have been removed.

Code lines 3,4 also deserve some explanation:

in the Access Point method the "ssid" and "password" can be anything your like
in the Station method the "ssid" and "password" MUST be what's written on your router.

The reason I get you to edit the "ssid" and "password" in the "config.py" file is that every LAN ssid and password is different.

Step 12: Connecting to an Access Point

Starting the ESP8266 access point server

Click the Mu "Files" tab

Drag-and-drop the file "five_buttons_ap.py" into the ESP8266 window.

Click the "Files" tab to exit viewing the files

Click the "REPL" tab and type "import five_buttons_ap" (without the quotes) ... the ESP8266 will respond with an ip-address (photo1)

Connecting to the Access Point

Access the "Settings" menu in your cellphone or tablet and click the WiFi option

Select ESP8266_AP (photo 2)

Enter the password 12345678 (photo 3)

You may or may not get a screen similar to photo 4 ... if you do just pick the first option. The screen should now show that you are connected. Note that the internet is not available. (photo 5)

Open your browser and type the ip-address that the server is listening on ... in this example the ip-address is 192.168.4.1 ... yours may be different. All going well a web page should appear (photo 6)

Click the forward button ... the URL in the browser should change and the ESP8266 LED should glow (photo 7)

Congratulations ... you are now in Access Point mode.

Step 13: Summary

This instructable explains how to control an object using your web browser and an ESP8266 wireless module.

MicroPython is used to configure the ESP8266 as a webserver.

The ESP8266 node MCU supports two server modes. Both modes are demonstrated :

AP mode (access point), which does not require an internet connection, and
Station mode.

The graphics display on your browser has five "buttons" suitable for controlling a model car.

All graphics reside on the server and the state of the object is reported back to your browser in real-time.

The demonstration code can be adapted to other projects ... just replace the led.on() and led.off() functions with your own code.

A knowledge of MicroPython, HTML (Hypertext Markup Language), and CSS (Cascading Style Sheets) is not required to complete this project but is required should you wish to make changes to the code.

The following website has an excellent series of tutorials on programming the ESP8266

https://docs.micropython.org/en/latest/esp8266/tutorial/index.html

The following web site has an excellent series of CSS and HTML tutorials

https://www.w3schools.com/html/

The estimated cost of materials is less than $5.00

Click here to view my other instructables.

Introduction: Remote Control Using an ESP8266 Wireless Module

Images

Supplies

Step 1: Over View

Step 2: Installing the Windows USB Driver

Step 3: Installing the Mu Editor

Step 4: Installing MicroPython

Steps

Notes

Step 5: Installing the Application Files

Steps

Attachments

Step 6: Testing the ESP8266 Web Server

Steps

Notes

Step 7: Connecting to the Server

Steps

Step 8: The Server Code

Section 1

Section 2

Section 3

Section 4

Step 9: The HTML Code

Overview

The <head> ... </head> section

The Stop Button

The horizontal buttons

Hypertext

Button Colors

Notes

Step 10: Creating Your Own Apps

Pin numbering

Example

Notes

Step 11: Access Point and Station Modes

Some terminology

Configuring

Code Differences

Step 12: Connecting to an Access Point

Starting the ESP8266 access point server

Step 13: Summary

Recommendations

Made with AI - Autodesk Design & Make - Student Contest

For the Home Contest

Build-A-Tool Contest