Tutorial for Fan Control by Using ESP8266 Module From WebServer

This tutorial is going to teach you some basics on using ESP8266 NodemCU Lua WiFi to build a simple WebServer which can controls the fan.

Before you are getting started, make sure you have all the materials needed

ESP8266 NodeMCU Lua WiFi Controller Board V3
Single Channel 5V Relay Module
Brushless DC Fan
Battery 12V
Jumpers
Breadboard

Step 1: Pin Definition

Step 2: Hardware Installation

Set up the conncetion as referred in the figure above

Arduino ESP8266 NodeMcu Lua WIFI Controller Board V3 to the Relay

D7 (GPIO13) to IN (OR you can change it to any GPIOs pin)
G to GND
3V to VCC

Then connect +ve terminal of battery to the Common (C) of Relay, -ve terminal of battery connect to the fan's black wire and Normally Open (NO) of the relay connect to fan's red wire.

Before program the Arduino ESP8266 NodeMcu Lua WIFI Controller Board V3, user is required to install a driver. Please get the driver from here.

*NOTE : Using Micro USB to connect the Arduino ESP8266 NodeMcu Lua WIFI Controller Board V3 with your Laptop as shown in the image above

Step 3: Sample Source Code

Download the sample source code and open it with Arduino IDE. Make sure you has successfully install ESP8266 into your Arduino IDE so you can connect your ESP8266 into your Arduino IDE and select the correct board and port into Arduino IDE.

Click here on how to install ESP8266 into your Arduino IDE

*Note : Change the ssid and password to your own WiFi Name and password.

fancontrol.rar
Download

Step 4: Result

After power up the controller, open "Serial Monitor" and it will show:

Connected to xxxxxxxxxxx

IP address: xxx.xxx.x.x

MDNS responder started

HTTP server started

The IP address shown in the serial monitor screen is the address of your ESP8266 webserver. You can use it to connect your ESP8266 webserver by putting the ip address to the address bar.

Step 5: HTML Coding

You can design your own webserver using this HTML coding. Thus, here is a basic modification for your webserver body.

To refresh your webserver
- click here. Change the number into the amount of second you want it take to refresh your webserver.
To set your webserver tittle
- ESP8266 Demo <\tittle>
- go to here to see how to set tittle using HTML
To Design your Header
- Go to here . Click inser > insert image and paste you image's link. Refer image above to see how its done.