Remotely Controlled Microcontroller From A Browser

2018-06-27 | By Digilent Inc.

License: See Original Project

Interface with a microcontroller from a web browser, using HTTPS and a simple Python server.

Story

I love microcontrollers. I also love controlling hardware remotely, say, from another room of my house. I also love the idea of being able to do this through a browser, like from my laptop or phone, rather than from an ssh console.

I've never worked with https or done any sort of web programming before. Luckily, I found this project that allowed me to get up and running quite quickly with an HTTPs server in Python. I was able to modify it to meet my needs for this very basic project. If you are looking to rebuild this project in any way, or just want to create your own python server, I recommend following the steps in the project linked above to create your own 'server.pem' file. I needed to add support for handling HTTP GET and POST requests. I was able to find an example project for GET and POST requests here.

As far as web programming goes, you will find that I've done only the basic css and html type scripting to create a very simple webpage. I'll leave the web development to the more experienced people out there. However, even from this very basic example, you can see how it would be quite easy to create a more complex webpage and support more behavior on the microcontroller.

Things used in this project

Hardware components

Software apps and online services

Microchip MPLAB Code Configurator

%20Controlling%20LEDS%20on%20the%20Microcontroller

Browser Page for Controlling LEDS on the Microcontroller

For hardware: I am using the Digilent BasysMX3 which is basically a handy little development board for a PIC32. It's got LEDs, an RGB LED, two Pmod ports, an in-system programmer and debugger, a 16x2 LCD screen, an integrated H-bridge, buttons, four seven segment displays, and a whole bunch of other fun things. I am only really using the LEDs and uart controllers for this project though. To connect to my python server, I am using the Pmod ESP32. This is basically Digilent's own Pmod board featuring an ESP32 from Espressif. These ESP32 chips are great. They allow for WiFi/Bluetooth 4.2/BLE connections, have a whole host of peripherals, come with free RTOS, and can do pretty much anything.

How The Project Works

The Python server (simpleServer.py) creates an HTTPS server at the IP address and port number specified by the call:

httpd = BaseHTTPServer.HTTPServer(('192.168.1.107', 4443), MyHandler)

This allows you to visit the server by typing "https://192.168.1.107:4443" in your browser. Your browser may get mad at you for attempting to visit a page hosted locally, but it should let you still visit this page.

When you visit the address in the browser, there are three buttons present on the screen. Everytime one of these buttons is pressed, a hidden file is updated on the server, and then the page is reloaded.

On the microcontroller side, the ESP32 is already connected to the wifi network, and the ESP32 repeatedly attempts to create an SSL connect at the IP address and port number specified above. Once the SSL connection is established, the ESP32 submits an HTTP GET request for the hidden file described earlier. Based on the contents of the file, the ESP32 modifies the behavior of the LEDS.

Demonstration Video of the Project Showing Button Clicks Changing Behavior of the LEDs

If You Want To Build The Project

The MPLabXIDE project files are included in the linked github repository in the 'BasysESP32.X' directory. The corresponding files for the python server are also included in the repo.

You will need to make some changes to the server files and MPlab files in order to get it to work, however. Modify the 'simpleServer.py' file so that it creates the server port on the IP address where you are hosting your server. This change will happen at line 95. For the MPlabX files, modify 'main.c' to connect the ESP32 to the IP address where you are hosting the server. This should be the same IP address that you just put in to the server code. This change occurs at line 30.

The server should look for a file called "server.pem" in the same directory as the server. I have included this in the repository, but if you want to run your own server, I recommend following the instructions shown here to create your own.pem file.

I had already connected the ESP32 to my wifi network before running the project, and so, I do not explicitly do this in software. I recommend you do the same. This way, you can test that the network connectivity is valid beforehand by pinging the device at its IP address. However, if you desire, there is an included function in the MPLabx project files that should allow you to connect the ESP32 to any wifi network. Additional utilities are provided in ESP32.c/.h.

I should also mention that I am using the AT firmware from Espressif from this project, rather than a custom application. If you buy this chip from Digilent, it comes pre-loaded with the AT firmware. Obviously, if you wanted to build this project, you would need the AT firmware on your device as well. The Pmod ESP32 comes with two buttons on the top of the chip, called SPI and BOOT. Make sure both of these buttons are in the off position when you are trying to run this project.

I have utilized another UART port on the MX3 to act as a serial console. This uart port is directly connected to the USB/UART port on the MX3, and can provide some helpful messages about the state of the ESP32 and microcontroller.

Example%20Serial%20Output%20from%20the%20Basys%20MX3

Example Serial Output from the Basys MX3

To build the project, here are the basic steps:

Modify main.c and simpleServer.py so that the server is created on the IP address currently occupied by your computer
Create your own 'server.pem' file. Instructions for this are found above
Using the AT command set and a UART controller, connect your ESP32 to your desired network. Ping the device from your connected computer to make sure that it is indeed connected to the wifi network.
Flash the MPlabX project to the BasysMX3.
From the repository directory, type python simpleServer.py
In a browser visit https://"YOUR IP ADDRESS":4443. This should load the webpage into your browser.
Run the BasysMX3 and watch the output through the USB/UART serial terminal (115200 baud, 8 data bits, 1 stop bit, no parity)
Click buttons on the webpage and watch the LEDs have different behaviors!

Schematics

Project Hookup Picture

Picture of how to connect the basys mx3 to the pmod esp32 is shown in a picture inside the 'photos' directory of the repository

Code

BasysESP32

Contains all project files, including files for the python server, and files to rebuild the project in MPLABx