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
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.
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.
Step 6: Videos
This video show the demonstration of the ESP8266 Fan Control from Webserver.