Introduction

Fetch information from a web page to control a bookcase light and display message strings without needing a web server and port forwarding via ESP8266 through TheAmplituhedron API.


Tags

Share

IoT Remote Bookcase Light and Message Panel

Advertisement:


read_later

Read Later



read_later

Read Later

Introduction

Fetch information from a web page to control a bookcase light and display message strings without needing a web server and port forwarding via ESP8266 through TheAmplituhedron API.

Tags

Share





Advertisement

Advertisement


Best VPN Service
Best VPN


    Components :
  • [1]NodeMCU [ESP-12E]
  • [1]I2C LCD Screen(16, 2)
  • [3]Mini Breadboard
  • [1]2-Way Relay
  • [1]5mm Green LED
  • [2]Female/Male Connectors
  • [1]Female/Male Jumper Wires

Description

I had been working on a web application which allows the user to send and save form information automatically without needing to perform any action after entering inputs to the form for my website, specialized for sending information to micro-controllers such as NodeMCU(ESP8266).Also, I wanted to create a simple way to read that information with the micro-controller without needing a web server hosted by ESP8266(or any other micro-controller) because creating a web server on ESP8266 to get information from a web page would be so exasperating when you try to implement AJAX or other JavaScript libraries. Most importantly, you have to use port forwarding to access your device from a server other than localhost, and it is complicated and not secure to get information from a web page, for instance, form inputs, via port forwarding especially if you are a beginner to web development or back-end programming.

Nevertheless, you do not have to think about port forwarding or web server to access your device in this project while using my web application named Data Panel because TheAmplituhedron API saves form information to your database via MySQL and sends it to your unique data panel connection path if it detects a change on the web application form which lets you send three different variables – Switch(ON/OFF), Range(integer), Message(string). Hence the fact that you will be able to fetch information from your data panel connection path by only using a WiFi client.

After finishing my web application, I decided to create a data-input-driven control panel which can turn a bookcase light and a LED on/off and display message strings from the response on an I2C LCD screen over the Internet via TheAmplituhedron API by using a NodeMCU(ESP-12E), well-explained below.

project-image
Figure - 24.1

Required Libraries:

For NodeMCU, click here.

For I2C LCD Screen, click here.

Fetch form information from a web page via NodeMCU WiFi Client through TheAmplituhedron API

First of all, to create your unique data panel connection path automatically and be able to access form information through TheAmplituhedron API, click the web application named Data Panel on your dashboard.

project-image-slide project-image-slide
Slide


Now, you have to connect your page to get your form information by using a WiFi client embedded in ESP8266 libraries as default. It is simple to use and only requires two parameters – a hostname and a port number. But, TheAmplituhedron is protected by SSL so that you need to use WiFiClientSecure instead of the default WiFiClient.

WiFiClientSecure has pretty much the same usage and syntax with WiFiClient; you only need to set an SSL fingerprint to the requested server and use 443 as the port number as depicted on the code below.

client.setFingerprint(fingerprint);

SSL FingerPrint works like an ID card; when you visit a web page that of an SSL protected website, it verifies your connection secure depending on whether you have the fingerprint or not. As a result of that, every browser has a file that contains the SSL fingerprint, mostly known as ThumbPrint.

For instance,if you are using Google Chrome as default browser on your computer, just click the lock icon on the url path to glean ThumbPrint.

Lock Icon -> Certificate -> Details -> ThumbPrint

I provided the FingerPrint in current use, but you can find it easily if it is changed by the service provider, as showed above.

Copy and paste it to the fingerprint variable in the code.

SSL FingerPrint(ThumbPrint) : 46 3c 5c 2c 67 11 cd 88 b7 e9 76 74 41 34 48 bd bc a5 b9 cf

project-image
Figure - 24.2

To get a response from your connection page including form information, send an HTTP Get Request to your data panel connection page after setting the SSL fingerprint.

project-image
Figure - 24.3

Sort form information from a web page by splitting the response string

As ESP8266 sends a request to a specific page on a server, the page responds with a string that can be read by ESP8266, including the requested page headers and content. I programmed my web application to send form information into the page content throughTheAmplituhedron API. To separate the headers and the content, use readUntilString() with ‘+’ characters. It gives you only the page content because the page header does not include any ‘+’ character.

client.readStringUntil('+');

TheAmplituhedron API separates each input variable by using a percentage character(%), which allows you to detect and save each input variable on ESP8266.

%Switch%Range%Message%

Unfortunately, there is no easy way to split a string in Arduino IDE aside from detecting each delimiter line index to glean a substring. Therefore, I detect each percentage character as a delimiter and define a substring with the former and the latter to split the response string.

delimiter_1 = readString.indexOf("%", delimiter + 1);

Switch = readString.substring(delimiter + 1, delimiter_1);

project-image
Figure - 24.4

By taking these explicit steps, you can save input variables individually and view on the serial monitor as depicted below.

project-image
Figure - 24.5

Use I2C LCD Screen with NodeMCU

NodeMCU does not have much GPIO pins to spare so using I2C LCD Screen is the best option to display message strings.

Include LiquidCrystal_I2C and Wire libraries to initialize the LCD Screen by associating I2C address.

Define SDA and SCL pins and connect I2C LCD Screen.

project-image
Figure - 24.6

Connections

Connect all components as explained on the code.

project-image
Figure - 24.7

As depicted on the fritzing file, I used the VV pin to feed components with 5V because NodeMCU has 3.3V output as default. But, you can use the VIN pin or another 5V source instead.

For I2C LCD Screen, connect the SCL pin to D1 and the SDA pin to D2.

project-image-slide project-image-slide project-image-slide
Slide


To control the bookcase light, I combine a female connector with a male connector by using a 2-Way Relay.

project-image
Figure - 24.8


project-image
Figure - 24.9

As the skeleton of the control panel, I used a wooden thick flat stick and attached all components on it by using a hot glue gun and adjustable plastic clamps.

project-image-slide project-image-slide project-image-slide project-image-slide project-image-slide
Slide


After testing whether it is executing the code properly or not, I fastened the control panel to the bookcase.

project-image
Figure - 24.10


project-image-slide project-image-slide project-image-slide
Slide


Features

You can get three different variables from TheAmplituhedron Data Panel – Switch, Range and Message. Switch is a pre-defined button, which can be ON or OFF. Range is an integer from 0 to 255, which you can use as limit or PWM input. Message is a string up to 100 characters, which you can print as a message, scan for commands or use to create new substrings with the percentage character.

1 - ) Control the bookcase light by using Switch(ON or OFF).

project-image-slide project-image-slide
Slide


2 - ) If Range is bigger than 135, open the control led, else close the control led. To convert Range to integer, use .toInt() method.

project-image-slide project-image-slide
Slide


3 - ) Display Message on I2C LCD Screen almost instantly.

project-image-slide project-image-slide
Slide


4 -) Interact with this project over the Internet through TheAmplituhedron API on both mobile and web.

project-image-slide project-image-slide project-image-slide
Slide


project-image
Figure - 24.11

Videos

Fetch and Sort Form Information from Web w/ ESP8266

Interact with NodeMCU through TheAmplituhedron API

Project Demonstration Only


Code

Source Code

Download



         ////////////////////////////////////////////////////  
        //   IoT Remote Bookcase Light and Message        //
       //                   Panel                        //
      //          -------------------------             //
     //              NodeMCU (ESP-12E)                 //           
    //               by Kutluhan Aktar                // 
   //                                                //
  ////////////////////////////////////////////////////

// By only subscribing to TheAmplituhedron, you can send data packets to NodeMCU without creating a web server, or any other micro-controller, from your Data Panel on your account page.
// TheAmplituhedron Data Panel is a web application(available system) for TheAmplituhedron subscribers only,which is designed for sending information to micro-controllers automatically.
// Follow the steps down below to create your data panel connection path on which you will be able to send data packets to NodeMCU.
// 1) Go to your Dashboard.
// 2) Click Data Panel under Available Systems.
// 3) Read the given instructions to better comprehend the application.
// 4) Just enter inputs to send information.
// As TheAmplituhedron API creates your connection path, you can get data packets from web by entering your WiFi settings and required information down below.
//
// As a reminder, my website has SSL protection so that you need to identify your NodeMCU connection by entering TheAmplituhedron FingerPrint or ThumbPrint.
// You can learn about it more from the link below.
// https://www.theamplituhedron.com/projects/IoT-Remote-Bookcase-Light-and-Message-Panel/
//
// Connections
// NodeMCU (ESP-12E) :           
//                                LCD Screen I2C
// D1  --------------------------- SCL
// D2  --------------------------- SDA
//                                Control Led
// D7  --------------------------- 
//                                2-Way Relay
// D4  --------------------------- IN_1


// Include required libraries to get data from your data panel connection page.
#include <ESP8266WiFi.h>
#include <WiFiClientSecure.h> 
#include <ESP8266WebServer.h>
#include <ESP8266HTTPClient.h>

// include LiquidCrystal_I2C and Wire libraries to run I2C module.
#include <LiquidCrystal_I2C.h>
#include <Wire.h>

// initialize the library by associating I2C address for NodeMCU
LiquidCrystal_I2C lcd(0x27, 16, 2);

// Define your WiFi settings.
const char *ssid = "SSID";
const char *password = "password";
// Connect TheAmplituhedron.com with the current fingerprint.
const char *host = "www.theamplituhedron.com"; 
const char fingerprint[] PROGMEM = "46 3c 5c 2c 67 11 cd 88 b7 e9 76 74 41 34 48 bd bc a5 b9 cf";
const int httpsPort = 443;

// Create data holders to get data packets.
String connectionPath, URL, HEDRON, readString;
String Switch, Range, Message;

// Define 2-Way Relay Pin
#define relay D4

// Define led.
#define led D7

void setup() {
  pinMode(relay, OUTPUT);
  pinMode(led, OUTPUT);

  // Wait until connected.
  Serial.begin(115200);
  // Initialize I2C lcd screen.
  Wire.begin(D2, D1);
  lcd.begin(16, 2);
 
  // It is just for assuring that if the connection is alive.
  WiFi.mode(WIFI_OFF);
  delay(1000);
  // This mode allows NodeMCU to connect any WiFi directly.
  WiFi.mode(WIFI_STA);        
  // Connect NodeMCU to your WiFi.
  WiFi.begin(ssid, password);
  
  Serial.print("\n\n");
  Serial.print("Try to connect to WiFi. Please wait! ");
  Serial.print("\n\n");
  // Halt the code until connected to WiFi.
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("*");
  }
 
  // If connection is successful, write WiFi SSID to serial monitor along with assigned IPAddress.
  Serial.print("\n\n");
  Serial.print("-------------------------------------");
  Serial.print("\n\n");
  Serial.print("Connection is successful!");
  Serial.print("\n\n");
  Serial.print("Connected WiFi SSID : ");
  Serial.print(ssid);
  Serial.print("\n\n");
  Serial.println("Connected IPAddress : ");
  //Serial.println(WiFi.localIP());
  Serial.print("\n\n");

  // Give time to ESP8266 for rebooting properly.
  delay(3000);

  // Turn off 2-Way Relay.
  digitalWrite(relay, HIGH);

}

void loop() {
  
  // Define your data panel connection path.
  URL = "/dashboard/Data-Panel/";
  HEDRON = "your account hedron";
  connectionPath = URL + HEDRON + ".php"; 
  
  // Create a WiFi Client to get form information.
  WiFiClientSecure client;
  // Set the fingerprint to connect TheAmplituhedron API.
  client.setFingerprint(fingerprint);
  // If the host is not responding,return.
  if(!client.connect(host, httpsPort)){
    Serial.println("Connection Failed!");
    return;
  }
  
  // Send a GET request to the connection path ro receive variables.
  client.print(String("GET ") + connectionPath + " HTTP/1.1\r\n" + "Host: " + host + "\r\n" + "Connection: close\r\n\r\n");
  // Detect whether client is responding properly or not.
  unsigned long timeout = millis();
  while (client.available() == 0) {
    if (millis() - timeout > 5000) {
       Serial.println(">>> Client Timeout !");
       client.stop();
       return;
    }
  }  
             
  // Save variables from the connecion path form inputs.
  while(client.available()){
      // By using the plus character, get whole response without dealing with the headers.
      readString = client.readStringUntil('+');
      // Split the response by a pre-defined delimiter in a simple way. '%'(percentage) is defined as the delimiter by TheAmplituhedron API for this project.
      int delimiter, delimiter_1, delimiter_2, delimiter_3;
      delimiter = readString.indexOf("%");
      delimiter_1 = readString.indexOf("%", delimiter + 1);
      delimiter_2 = readString.indexOf("%", delimiter_1 +1);
      delimiter_3 = readString.indexOf("%", delimiter_2 +1);
      // Define variables to be executed on the code later.
      Switch = readString.substring(delimiter + 1, delimiter_1);
      Range = readString.substring(delimiter_1 + 1, delimiter_2);
      Message = readString.substring(delimiter_2 + 1, delimiter_3);
  }

  // View the received form inputs on the serial monitor.
  Serial.println(Switch + '\n' + Range + '\n' + Message + "\n--------------------\n");
  // Depending on Switch, open the relay.
  if(Switch == "ON"){
    digitalWrite(relay, LOW);
    }else if(Switch == "OFF"){
      digitalWrite(relay,HIGH);
      }

  // Turn the control led on if the range is bigger or equal to 135.
  if(Range.toInt() >= 135 && Range != ""){
   digitalWrite(led, HIGH);
   }else{
     digitalWrite(led, LOW);
     }
  // Print the message from the webpage on the lcd display.
  if(Message != ""){
     // Turn on the blacklight and print a message.
    lcd.backlight();
    lcd.setCursor(0, 0);
    lcd.print(Message);
    // Show whole message string.
    //lcd.autoscroll();

    }

  // Wait for the next request.
  delay(1000);
}



Schematics

project-image
Schematic - 24.1

Downloads

Fritzing File

Download