Connecting Microcontroller to HTML Page

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.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>");