Connecting Microcontroller to HTML Page
http://www.instructables.com/id/Quick-Start-to-Nodemcu-ESP8266-on-Arduino-IDE/
Basic setup plus samples
Things you should know understand how the nodeMCU works.
HTML
Arduino
Adding new boards to arduino
Understanding the pins are different than normal arduinos
Things you should have
Modem/ wireless network that you have full access to
Usage
This is wifi initialization, all you need to make sure to do
Set up code
#include <ESP8266WiFi.h>
const char* ssid = "Wifi Name";
const char* password = "Wifi Password";
//initialize whatever ports you may need
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
//setting up all of the ports
pinMode(ledPin, OUTPUT);
pinMode(motorPin, OUTPUT);
digitalWrite(ledPin, LOW);
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
Running the code from a browser
Open the SerialPort and read the address it says to open in a browser
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
//these are checking the current value of the URL and changing the code to work with it
int value1 = LOW;
int value2 = LOW;
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, HIGH);
value1 = HIGH;
}
if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(ledPin, LOW);
value1 = LOW;
}
if (request.indexOf("/MOTOR=ON") != -1) {
digitalWrite(motorPin, HIGH);
value2 = HIGH;
}
if (request.indexOf("/MOTOR=OFF") != -1) {
digitalWrite(motorPin, LOW);
value2 = LOW;
}
//knowing HTML is important for understanding how this code is constructed.
//looking at a basic HTML tutorial should get you started
// Set ledPin according to the request
//digitalWrite(ledPin, value);
// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.print("Led pin is now: ");
if(value1 == HIGH) {
client.print("On");
} else {
client.print("Off");
}
client.print("</br >");
client.print("Motor pin is now: ");
if(value2 == HIGH) {
client.print("On");
} else {
client.print("Off");
}
//these are the buttons for people to interact with
client.println("<br><br>");
client.println("<a href=\"/LED=ON\"\"><button>Turn On </button></a>");
client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a><br />");
client.println("<a href=\"/MOTOR=ON\"\"><button>Turn On </button></a>");
client.println("<a href=\"/MOTOR=OFF\"\"><button>Turn Off </button></a><br />");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
UNDERSTANDING THE CODE
1.
This creates a button using href-- which changes the URL
client.println("<a href=\"/MOTOR=OFF\"\"><button>Turn Off </button></a><br />");
2.
This reads the current URL to activate code from within the nodeMCU.
if (request.indexOf("/MOTOR=ON") != -1) {
digitalWrite(motorPin, HIGH);
value2 = HIGH;
}
if (request.indexOf("/MOTOR=OFF") != -1) {
digitalWrite(motorPin, LOW);
value2 = LOW;
}