Need Help?

Skip to Content

CCA Portal

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

 }