ESP32 Programming for the Internet of Things: JavaScript, AJAX, MQTT and WebSockets Solutions

Part I. IoT Communications using classic HTML & JavaScript technologies

1. General presentation of the book and hardware modules

1.1.      General objectives of the book

This paper presents some simple and practical solutions for the realization of automatic data communication between devices coupled to the Internet. These are placed in the category of Internet of Things (IoT) and Machine-to-Machine (M2M), whose scope is continuously expanding and raises an increasing interest in both industry and consumer goods.

It aims at detailing complete applications, starting from intermediate level knowledge such as C programming (on environments such as Arduino IDE and ESP-IDF), HTML / CSS and JavaScript, which are complemented by modern technologies like Ajax, MQTT, Node.js, AngularJS, and WebSockets, presented appropriately for these applications.

The communications between the Internet devices exemplified below will be accomplished between a process interface device and a command/monitor device.

The interface device receives input data from sensors/transducers and generates output data to execution elements/actuators. For this purpose, we will use ESP32 or ESP8266 modules with WiFi connection possibilities, which have several advantages:

• Low volume (Figure 1.1, Figure 1.4, Figure 1.7);

• Low consumption, with sleep and even battery performance;

• Low price;

• Sufficient number of digital and analog input and output channels;

• Simple programming options using the Arduino IDE environment.

Other modules can also be used, running programs with identical algorithms to those presented here.

In the first part of the paper, using classic web technologies, the interface device generally acts as a server, so he is the one who generates the web page and responds to the requests of client applications.

In the second part of the paper, using MQTT technologies, a dedicated server runs a program for the reception and distribution of messages with various topics and content (payload), so that it can create a much more complex network, with equivalent clients, each with flexible functions, with or without human intervention.

In the last part of the paper are presented examples of implementation of the WebSockets technology, which provide high-speed client-server bidirectional links.

The command/monitor device can be a PC, a tablet, or even a smartphone, running a dedicated application or the web page created by the server. Examples of graphical interfaces are presented in the following pictures, with various complexities and technologies (Figures 1.1-1.6).

Figure 1.1. Digital Output command (HTML) webpage

Figure 1.2. MIT App Inventor command for a digital output command (HTML)

Figure 1.3. Web page for controlling outputs and monitoring inputs (HTML / JS / AJAX)

Figure 1.4. HelloIoT application for controlling and monitoring of outputs/inputs

Figure 1.5. Web site for control and monitoring of outputs/inputs (MQTT /Node-Red / AngularJS)

Figure 1.6. Web site for command and monitoring of WebSockets outputs/inputs

1.2.      Structure and method of using the paper

From a didactic point of view, the work is structured by following a learning curve with long-term persistence of knowledge. If this is the goal of the reader, it is advisable to go through it with all the experiments presented, even if some have only the role of training some skills and general discipline in the field.

On the other hand, the work has a pronounced practical character, trying to provide concrete, exemplary and functional solutions for the class of problems contained in the objectives described above. If the reader believes that he has a sufficient amount of prior knowledge and some of the notions presented for accessibility are already familiar, one can choose to implement some of the final solutions.

In this case, several implementation choices will have to be made; however, they have some dependencies and a certain organization, the stages presented in the paper being according to the scheme in Figure 1.7. There are other possible ways of implementation, but here have been chosen some that present a reasonable compromise between the didactic and the practical side.

Figure 1.7. Scheme of abbreviated use of the paper

1.3.      Hardware implementation. Coupling the inputs and outputs of the ESP32 module

In general, the ESP module inputs are connected to analog or digital sensors or transducers, or binary digital ones. It is possible, however, to use complex sensors that transmit digital information in another format like I2C, SPI, one-wire, etc. In the following, two binary digital sensors will be simulated by two switches coupled to the module on the GPIO12 and GPIO13 (Figure 1.8). They can be pulled up by external kilo-ohm resistors, or the internal pull-up resistors of the GPIO pins can be used. If the contact is normally open, press it to enter 0, and release it to enter 1.

The ESP32 also has Touch inputs, which normally have a numeric value between 70 and 90, and at the touch, they give a numeric value between 10 and 40. Here, two metal terminals are coupled to the GPIO14 and GPIO27 pins, the conversion in binary being made by software comparing the value with a threshold one, for example, 50.

The analog signal is simulated by a potentiometer, with the cursor coupled to the ADC1 CH0 input, and the other terminals coupled to 3v3 (Vcc) and GND on the 36-pin ESP32 DevKit V1 board.

Two LEDs were coupled on the outputs through resistors of the order of hundreds of ohms, the third led being the blue one on the board.

Figure 1.8. Schematic diagram of input and output simulation elements

A quick solution for displaying two Leds on a DOIT DEVKIT board is to use the red Led that signals the power. A small diode (1N4148 or other with a glass case) can be soldered with the anode on it, and the cahode (the terminal with a line) on the pin D4, as in figure 1.9.

Blue LED

Red LED

Cathode line

Figure 1.9. Soldering a diode to command the red LED with D4

In concrete applications, the outputs are typically coupled to various execution elements via electromagnetic or electronic relays, switching amplifiers, and other power systems designed according to industrial electronics.

1.4.      Examples of boards with ESP microcontrollers

The ESP8266-01 (Figure 1.10) is the simplest version of the system implementation with the ESP8266 microcontroller.

The main features of the ESP8266 microcontroller are the following

• Protocol 802.11 b / g / n

• 2.4 GHz Wi-Fi with WPA / WPA2 support

• Reduced dimensions (11.5mm x 11.5mm)

• 16 GPIO pins

• Integrated 10-bit ADC

• + 20dBm output power in 802.11b mode

• 32-bit microcontroller

• SDIO 2.0, SPI, UART, I2C

The ESP8266-01 module contains, besides the microcontroller (with limited access to pins, as in Figure 1.11), a 1 MB Flash memory but does not have a programming interface. Programming can be done with a USB-serial adapter dedicated to ESP8266-01 (Figure 1.12).

Figure 1.10. The ESP8266-01 board

Figure 1.11. Pins configuration for the ESP8266-01 board (top view)

Figure 1.12. USB-serial converter for programming the ESP8266-01 board

Programming the ESP8266-01 board is done with the GPIO pin at the ground followed by a reset.

In Arduino IDE choose Tools-> Board Generic ESP8266 Module, set serial port and speed, then compile and program with Load.

After switching off the programmer, the CH_PD pin (0-> Power Down, 1 -> Power Up) must be coupled to VCC for normal operation.

Although the microcontroller is powerful enough for a variety of simple applications, it is advisable to use it as a WiFi interface for a more complex module with multiple peripheral blocks and a sufficient number of pins (for example, Arduino or STM32F4 Discovery).

The NodeMCU 1.0 ESP8266-12E board (Figure 1.13) is an advanced version of system implementation with the ESP8266 microcontroller.

Figure 1.13. The ESP8266-12 NodeMCU 1.0 board

Besides the 4 MB ROM, the module also contains the micro-USB programming interface and the voltage regulator that supplies the 3.3V voltage. Also, virtually all microcontroller pins are accessible (Figures 1.14 and 1.15), which gives it possibilities for independent operation for a wider range of applications.

Figure 1.14. Pin configuration for the ESP8266-12 NodeMCU 1.0 board

Figure 1.15. Pin functionality for the ESP8266-12 NodeMCU 1.0 board

The ESP32 board DOIT DEVKIT has an ESP32 microcontroller, Flash memory, USB-serial converter for programming, and 3.3V voltage regulator (5V supply and communication with the PC is achieved via a micro USB connector).

The ESP32 family of microcontrollers has the following features:

• Xtensa® single- / dual-core 32-bit microprocessor LX6 (s), up to 600 MIPS (200 MIPS for ESP32-S0WD, 400MIPS for ESP32-D2WD)

• 448 KB ROM 520 KB SRAM • •

• RTC

• 16 KB SRAM QSPI supports the multi-flash / SRAM chips

• Operating Voltage: 3.3V

• Internal 8 MHz RC oscillator with oscillator calibration with calibration

• Internal Clock Speed: 240 MHz

•2 MHz-60 MHz External Crystal Oscillator (40 MHz only for Wi-Fi / BT functionality)

• External 32 kHz crystal oscillator for RTC with calibration

• Two timer groups, including 2 x 64-bit timers and 1 x main watchdog in each group

• One RTC timer

• RTC watchdog

• 34 programmable GPIOs

• 12-bit SAR ADC up to 18 channels

• 2 x 8-bit DAC

• 10 x touch sensors

• 4 x SPI

• 2 x I2S

• 2 x I2C

• 3 x UART

• 1 host (SD / eMMC / SDIO)

• 1 slave (SDIO / SPI)

• Ethernet MAC with dedicated DMA interface and IEEE 1588 port

• Wi-Fi: IEEE 802.11 b / g / n / e / i:

• CAN 2.0

• IR (TX / RX)

• PWM for motors drivers

• PWM for general use, up to 16 channels

• Hall sensor

There are many variants to implement modules containing the ESP32 microcontroller, from various manufacturers. DOIT Devkit ESP32 has a 30-pin version (figure 1.16) and, more recently, a 36-pin version (Figure 1.17). Using the additional 6 pins in the second variant may cause some side effects, so they need special attention.

The board is equipped with a red LED that indicates the presence of voltage and a blue LED on the GPIO2 user pin. There is a reset button (EN) and a boot one (only necessary in case of failure to load the program). In the following, the examples will use the ESP32 microcontroller, which is the best (about $ 10), but the programs shown may be adjusted using minor changes for ESP8266 microcontroller (below 5 dollars). Mainly, it would be necessary to replace terms such as ESP32 ...