NodeMCU Tutorial Series Part II: NodeMCU Server Control Over Local Area Network
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.
NodeMCU Setup with Webpage Control on iPhone.
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 will serve as the PWM-controlled component from the WiFi server.
Seeed Studio Electromagnet - $8.90 [Seeed Studio]
NodeMCU ESP8266 Board - $12.00 [Our Store]
3.3V to 5V Boost Converter - $5.09 (5 pcs) [Amazon]
LED - $9.95 (600 pcs) [Amazon]
Breadboard - $7.99 (3 pcs) [Amazon]
Jumper Wires - $1.20 (8 pcs) [Our Store]
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).
NodeMCU v1.0 Board Pinout [Image courtesy of: https://www.teachmemicro.com/nodemcu-pinout/]
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:
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:
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.
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.
This tutorial continued the discussion and implementation around the NodeMCU framework within Arduino. During the article, I outlined several methods on the Arduino end and server-side for controlling the NodeMCU microcontroller. I used PWM to modulate the strength of an electromagnet while also using a simple switch to turn an LED on and off. I only briefly discussed the HTML and programming methods involved in server communication, but introduced enough so that the user can edit and alter Arduino and HTML code to produce their desired effect. This tutorial was the second in a series of tutorials where I explore the power and capabilities of the NodeMCU framework, and this tutorial was focused on WiFi server control methods. One may desire to alter the controls used here to fit their own needs whether it be in robotics, or home automation - the applications are limitless. The primary objective was to create a communicating framework with live-updating web inputs to control the microcontroller, which we were able to do with a little knowledge of Arduino, HTML, and some javascript.
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!
Setup showing electromagnet, NodeMCU, and LED used in this tutorial for server-side control of the NodeMCU Arduino WiFi board.
See More in NodeMCU and IoT: