NodeMCU Tutorial Series Part II: NodeMCU Server Control Over Local Area Network
Blog Post Index:
In the previous entry of this tutorial series I introduced the NodeMCU framework and demonstrated how to program one of its microcontrollers using the Arduino IDE [tutorial link here]. In this tutorial, I assume the user has a basic understanding of the NodeMCU v1.0 board and how to program it using the ESP8266 library in the Arduino IDE. This tutorial picks up where the previous left off, taking full advantage of the ESP8266 WiFi chip by serving a local webpage to control the general purpose input and output (GPIO) pins on a NodeMCU microcontroller.
Some basic HTML and CSS programming methods will be utilized to create a stylish webpage that is both asynchronous (AJAX) and input-driven - this will give the user the ability to control the pins on the microcontroller. For the current example, an electromagnet and LED will be controlled using pulse width modulation (PWM) and simple high/low logic, respectively. The PWM control allows the user to change the voltage to the component, altering the magnetic field of the electromagnet. For the LED, the traditional digitalWrite() method will turn the LED on and off.
A great deal of this tutorial will focus on the implementation of HTML methods in the NodeMCU webpage. Some exploration and knowledge of HTML and web development is recommended, but not needed for developing this project, however, a strong background in Arduino in programming is required.
The electromagnet is a relatively inexpensive and available component from electronics sources like Seeed Studio, Adafruit, and Amazon. The PWM control on the NodeMCU board has 10-bit resolution (2 bits higher than the standard Arduino PWM resolution), giving us range from 0-1023. There is one caveat to the NodeMCU, and that’s its voltage limitation at 3.3V. And since the electromagnets are almost always 5V or higher, we will use a buck converter to go from 3.3V to 5V. Along with the control components, I have listed a breadboard, jumper wires, and a resistor - standard components for LED control and prototyping. The full parts list is below:
Seeed Studio Electromagnet - $8.90 [Seeed Studio]
NodeMCU - $12.99 (for 2) [Amazon]
LED - $9.95 (600 pcs) [Amazon]
Breadboard - $7.99 (3 pcs) [Amazon]
Jumper Wires - $6.98 (120 pcs) [Amazon]
100-1k Ohm Resistor - $10.86 (525 pcs) [Amazon]
After gathering the required parts, we need to decide which pins we can and want to use for the control sequences. Since the project requires the use of PWM, we are restricted to GPIO pins 4, 12, 13, 14, 15. Other pins may be capable of handling PWM depending on board version, but I will stick to the pinout which corresponds to the board I’ll be using (shown below).
I have arbitrarily used GPIO4 as the PWM pin and GPIO 15 as the output pin for the LED switch. The wiring is shown below:
Wiring for NodeMCU Server Control
In the next section I will introduce the full code for controlling both the electromagnet (via PWM) and the LED. The codes are fairly involved in both NodeMCU jargon and HTML code, so I recommend copying and pasting as is, then altering after verifying that everything functions as expected. A large portion of the difficulty of working with NodeMCU is understanding the WiFi and HTML side of things, not the microcontroller side.
The code below should be uploaded to the NodeMCU board via the Arduino IDE. Be sure that the ESP8266 library is downloaded and the correct options are selected under the board parameters in the IDE.
The majority of the Arduino code is formality with the traditional library imports, preallocations, and setup() and loop() functions. Beyond the standard code, there is an instantiation of the ESP8266 called ‘server’ - and this is where the majority of the handling is done. The server houses the interactivity between the webpage and the NodeMCU microcontroller. Thus, it is the most important and pivotal part of working with the NodeMCU board.
For example, the following lines of code setup three separate pages for handling data and interactivity with the server:
In practice, on the PWM page ("/setPWM"), we look to its corresponding function handle_pwm() to listen for a change in variable called "PWMval", which is changed when the PWM slider is changed on the web page. In the code below we are taking the new value of the PWM slider, and using 'analogWrite()' to update the PWM pin on the NodeMCU microcontroller, consequently changing the value of the electromagnet's magnetic field:
This is the method that should be used for any desired control from a NodeMCU web page. In the next section, I will discuss the server-side HTML, which creates the interaction and updates seen by the human interacting with the web page.
A large portion of the HTML code in the web page contains style lines that are not particularly necessary for understanding the communication between the web page and microcontroller. The full code is below:
The primary functionality occurs in the <body> of the HTML file, where the headers and <div> lines occur. In our case, we use an input range slider from 0-1023 (to match the 10-bit resolution) for the electromagnet and a simple checkbox switch for turning the LED on and off. Below is the code series in the HTML <body> where the interactive controls exist. Notice the classes involved with each component in the code.
Let's inspect the following line:
The code waits for the user's input and calls the function state_change(element). The function is as follows:
At this point, I have demonstrated the wiring, programming, and functionality of the NodeMCU server for PWM and simple digitalWrite() processes. After uploading the Arduino code to the NodeMCU board and ensure everything was successful, we must test that the code and board are functioning properly and as expected. We can do this by first opening the serial port on the Arduino IDE and identifying the IP address of the NodeMCU ESP8266 WiFi server. You should see a printout that looks similar to the text below:
This lets the user know several things:
Which WiFi network the ESP8266 is connected to
The IP address on the network
Whether the server has started or not
Now the user can open a device on the WiFi network and type in the server IP address above. The page loaded should be identical to the one shown below:
After verifying the visual layout, the user should test the server for functionality with some LEDs to be certain both the PWM and on/off are operating properly. Below is a demo video of the server with an iPhone over a local area network. It shows the LED turning on and off with the GPIO 15 switch, and it also shows the PWM working for the electromagnet, which is able to pick up certain objects with differing amount of modulation off the PWM slider.
In the next entry, we will explore data acquisition and visualization methods, which essentially inverts the methods shown here by reading in data from the NodeMCU microcontroller and updates a web page using that data. For the first entry into the series, see the link below!
See More in NodeMCU and IoT: