Nodemcu Led With Browser

Introduction to Physical Computing

13 Oct 2018

Today, I wanted to take a break from working on P5Serial. Last year I got a bunch of NodeMCU ESP8266 boards and I haven’t really utilized them yet. I set out to do a simple entry task.. turn off and on an LED with a browser.

First thing I have to is set up my programming environment for the NodeMCU. I am using vscode as my editor for arduino, and while the arduino extension recognizes the nodemcu, uploading wasn’t working. So I opened the arduino ide and installed via the ide as well. Open up preferences and add the official url: http://arduino.esp8266.com/stable/package_esp8266com_index.json. Next install NodeMCU with the board manager and we’re grooving.

Next build a simple led circuit. It’s worth noting the pinout for the board: NODEMCU pinout image

The code:

void setup(){
    pinMode(13, OUTPUT); // pin d7
}
void loop(){
    digitalWrite(13, HIGH);
}

Sweet! We are interfacing with the NODEMCU. Now lets interface with it with the browser. 🍰

I found this handy tut to help me out

First things first is to connect the board to wifi. Here at ITP we have WPA Enterprise making it quite difficult to connect to the internet. Fortunately there is a network that I can use for my IoT devices. However I have to register my device using the MAC address. To find the board’s mac address I have to use the ESP8266 WiFi Library. Make sure you are using the correct baud rate for the serial monitor and your upload speed. In my case 9600.

The code:

#include <ESP8266WiFi.h> // include the wifi header file
 
void setup(){
 
   Serial.begin(9600); // my device manufacturer says to use 9600 Baud Rate
   delay(500);
 
   Serial.println();
   Serial.print("MAC: ");
   Serial.println(WiFi.macAddress());
 
}
 
void loop(){}

Registered my device and got the password from the shop staff then…Wifi! 🌐

Next step is to code the board. I’m starting a webserver on my board and connecting via my computer to turn off and on the led.

Here is the commented code:

// include the wifi library 
#include <ESP8266WiFi.h>
 
const char* ssid = "wifi_name";
const char* password = "wifi_passkey";
 
int ledPin = 13; // GPIO13 con
WiFiServer server(80); // start server
 
void setup() {
  Serial.begin(9600); // start serial monitor
  delay(10);
 
  pinMode(ledPin, 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("/");
 
}
 
void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  // When i access the provided IP i get these messages
  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
 
  int value = LOW;
  if (request.indexOf("/LED=ON") != -1)  {
    digitalWrite(ledPin, HIGH);
    value = HIGH;
  }
  if (request.indexOf("/LED=OFF") != -1)  {
    digitalWrite(ledPin, LOW);
    value = LOW;
  }
 
// Set ledPin according to the request
//digitalWrite(ledPin, value);
 // creat the HTML page

  // 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("<!DOCT HTML>");
  client.println("<html>");
 
  client.print("Led pin is now: ");
 
  if(value == HIGH) {
    client.print("On");
  } else {
    client.print("Off");
  }
  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("</html>");
 
  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
 
}

The interface looks like: Web interface for LED Sweet! :hand:

Lessons learned…

Questions

Bonus

I attached a servo to my micro controller and can control it via browser as well.