Connecting Quad Seven segment and DHT11 via WiFi

UPDATED @2020-11-22: Added API to AakSensor and Visualise the data.

Created By Ammar Alnahhas , [e-mail]

tags: Quad Seven segment DHT11 ESP32 MCU Traffic light

• Connecting Quad Seven segment and DHT11 via WiFi
• How is it connected?
  • Step 1: The componentes:
  • Step 2: WIRING
    • Quad Seven Segment :
    • Connecting DHT11 the Temperature and Humidity Sensor :
    • IoT and The Chart from AskSensor
  • Step 3: sharing is Caring!
• How it gonna Work :
• DSNA22 OTHER Projects :
• Thanks :
• FYR. ESP32 DEVKIT V1 30 Pins

Nothing better than controling these dummies via WI-FI

How is it connected?

Step 1: The componentes:

• ESP32 -WROOM32 MCU - ESP32 DEVKIT V1 30 Pins, See Reference by end of this tutorial
• Quad Seven segments - Common Cathod
• DHT11 - Temp och Humidity Sensor
• 1K Ohm for Common Cathod of Quad Seven segments
• Connections cables.

Step 2: WIRING

Using resistors is very important on Common cathod Quad Seven Segment. use min 330ohm I use 1KOhm here!

The connection picture as :

Not Clear Enough but I'll gonna explan it step By Step :

Quad Seven Segment :

As we can see in the picture and in the code, we connect the pins and common cathod pins of Quad seven segment to ESP 32 as :

Once Connected , we exchange HTTP Headers into the Local server that we create into the ESP32 and we get the IP adress of it into Serial Monitor. Via this server we have 4 Commands / Buttons :

• Write 8888 and that for testing the Quad Segments Leds.
• Write 1.000 and that to show controling of Numbers and DP
• Write DSNA and that for testing of Char writing on Seven segment.
• Write Temperature That we read from DHT11.

The next Pictures show more :

Connecting DHT11 the Temperature and Humidity Sensor :

It's pretty easy to connect it as :

• Vcc to Vcc from ESP MCU. see pi (Red Wire)
• G to G of ESP MCU (Black Wire)
• Signal / Data : to Port 23. ( White Wire)

Ps. My Sensor has built in Resistor and only 3 Pins :

IoT and The Chart from AskSensor

AskSensor is 90 days Foc IoT platform that has it's library into Arduino IDE.
we can download it Here

To Use it into your Arduino IDE or we can use this tutorial.

Once data collected successfully we can visualise it like this dashboard and chart :

Step 3: sharing is Caring!

Here Come the code with detailes descreptions and Explainations :

// File Name : Quad Seven segment Over Wifi
// Creator : Ammar Alnahhas - DSNA22 -  [e-mail]
// About Project : 
// As connecting the ESP 32 MCU to Wifi , and build our own Website -as it will 
// act like a server - in it! 
// With right connecting of Quad Seven segments we managed to pass 4 Different commands 
// to it via SevSeg.h Library! 
// Check the Doc on for connecting : https://hackmd.io/@DSNA22/4_Seven_segment_and_DHT11_via_WiFi
//---------------------------------------------------------------------------------
// Programmed by : Ammar alnahhas
// date : 2020-11-21
//--------------------------------------------------------------------------//---------------------------------------------------------------------------------
// Updat : 2020-11-22
// Connect the Tempreture sensor to AskSensore IoT 
// according to guid : https://www.instructables.com/How-to-Connect-an-ESP32-to-the-IoT-Cloud/
// So I can Visualise this data Now! 

#include <WiFi.h>
#include <SevSeg.h>
#include "DHTesp.h" 
#define DHTPIN 23     // Connect Temp to Pin 34
#define DHTTYPE DHT11 // Define the Sensor Type

#include <HTTPClient.h>

HTTPClient ask;

/*Put your SSID & Password*/
const char* ssid     = "?????"; // Your Home Network
const char* password = "???????"; // Your Home Network Password
const unsigned int writeInterval = 600000; // write interval (in ms)
const char* apiKeyIn = "4d0??????????VO0AXYzWGw";      // API KEY IN

// ASKSENSORS API host config
const char* host = "api.asksensors.com";  // API host name
const int httpPort = 80;      // port


// Initialize Local server on default port 80
WiFiServer server(80); 
// Initialize DHT sensor for normal 16mhz Arduino
 DHTesp  dht;

// My Website in HTML
String My_Website(){
String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>DSNA :  4 Seven segment with WIFI ESP 32</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
  ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>DSNA :  4 Seven segment with WIFI ESP 32</h1>\n";
  ptr+= "<button onclick=";
  ptr+= "window.location.href='/H';";
  //ptr+=";"
  ptr+=">";
  ptr+="Write 8888";
  ptr+= "</button>";
  // You can use the below for just a link instead of Button
  //ptr +="Click <a href=\"/H\">here</a> to Write 8888 on.<br>";
  ptr+="\n";
  // the other button
  ptr+= "<button onclick=";
  ptr+= "window.location.href='/L';";
  //ptr+=";"
  ptr+=">";
  ptr+="Write 100.0";
  ptr+= "</button>";
  // You can use the below for just a link instead of Button
  //ptr +="Click <a href=\"/L\">here</a> to write 100.0on.<br>";
  ptr+="\n";

  // THE TExT DSNA
  ptr+= "<button onclick=";
  ptr+= "window.location.href='/DSNA';";
  //ptr+=";"
  ptr+=">";
  ptr+="Show  DSNA";
  ptr+= "</button>";
  // You can use the below for just a link instead of Button
  //ptr +="Click <a href=\"/DSNA\">here</a> to write DSNA <br>" ;
  
  // Temperature button
   ptr+= "<button onclick=";
  ptr+= "window.location.href='/TEM';";
  //ptr+=";"
  ptr+=">";
  ptr+="Show Temperture";
  ptr+= "</button>";
  //ptr +="Click <a href=\"/TEM\">here</a> to write the Tempreture on.<br>";
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";

return ptr;}

String Website= My_Website();

// SevenSegment
SevSeg sevseg; 

// Controling Bit
bool selected;

// Controling Update to Cloud
int counter=0;

void setup(){
  // Quad  SevenSegments
  byte numDigits = 4; // 4 Seven Segment screens 
  //See doc on :https://hackmd.io/@DSNA22/4_Seven_segment_and_DHT11_via_WiFi
  byte digitPins[] = {15, 2, 4, 5}; // Order as (D4,D3,D2,D1)  
  byte segmentPins[] = {13,14,26, 33,19,12,27, 25}; //( A,B,C,D,E,F,dp)
  bool resistorsOnSegments = true; 
  byte hardwareConfig = COMMON_CATHODE; 
  sevseg.begin(hardwareConfig, numDigits, digitPins, segmentPins, resistorsOnSegments);
  sevseg.setBrightness(90);

  // Serial or Terminal
  Serial.begin(115200);
   delay(10); 
   // We start by connecting to a 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.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());
    
    // Starting the Server
    server.begin();
    // Inti. the Controling bit
    bool selected = false;

    // intil. our Temperatur sensor DHT11
    dht.setup(DHTPIN, DHTesp::DHT11);
    pinMode(DHTPIN,INPUT);
    
    
}


void loop(){
    if (selected){ sevseg.refreshDisplay();} // Show the results 
    else selected=false; // Otherwise it is Not selected yet! 
    counter++; // To calculate running times
    
    float t = dht.getTemperature(); // Reading the Temp.
    // Debuging info once needed 
    //Serial.print("The Counter is : ");
    //Serial.print(counter); 
    
    if (counter > writeInterval  )
    {
    Send_Data_to_Cloud(t); // Send data every "writeInterval"
    counter =0; // Reset the counter
    }
    
     WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             // if you get a client,
    Serial.println("New Client.");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            
            client.print(Website); // Call our Website

            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
        
        
        // Check to see if the client request was "GET /H" or "GET /L" or GET/DSNA , GET/TEM :
        // GET /H turns the Sev Segment for 8888
        if (currentLine.endsWith("GET /H")) {
               sevseg.setNumber(8888);
               selected = true;           
          }
        // GET /L turns the Sev Segment for 1.000
        else if (currentLine.endsWith("GET /L")) {
                sevseg.setNumber(1000,3);
                selected= true;
                               
               
        }
         // GET /DSNA turns the Sev Segment for "DSNA" 
        else if (currentLine.endsWith("GET /DSNA")) { 
                sevseg.setChars("DSNA");
                selected = true;
                             
               
        }
        // GET /TEM turns the Sev Segment Writing the read Temperature
        else if (currentLine.endsWith("GET /TEM")) {
                
                // Writing it on Serial 
                Serial.print("The Temprature is : ");
                Serial.println(t);
                delay(20);
                // The writing on Quad  Seven Segment 
                int X=t*100; // to dropp the dp
                 sevseg.setNumber(X,2);
                selected = true;                        

               
               
        }
      }
    }
    
    //close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }

 
}

///////Sending Data Function////////////////

void Send_Data_to_Cloud(float myTemperature )
{
  WiFiClient client;
  
  // Create a URL for the request
   String url = "http://api.asksensors.com/write/";
  url += apiKeyIn;
  url += "?module1=";
  url += myTemperature;
  // Confirming transmistion on Serial
  Serial.print("********** requesting URL: ");
  Serial.println(url);

  
         ask.begin(url); //Send info 
          int httpCode = ask.GET(); // get response from ask.         
 
    if (httpCode > 0) {  // Transmission success 
         // Writing to Serial( Terminal)
        String payload = ask.getString();
        Serial.println(httpCode);
        Serial.println(payload);
      } else { // Once Failed
      Serial.println("Error on HTTP request");
    }
 
    ask.end(); //End 
    Serial.println("********** End ");
    Serial.println("*****************************************************");
        
  }

How it gonna Work :

Here come a guid of using this program:
After we got the uniqu IP address of our server from local router on the Serial monitor, you can write it down into your URL web program ( Chrome ,Mozzilla , etc) then you can watch this Youtube testing guide.
Filmed by DSNA!
https://youtu.be/tRQaKUK84s0

DSNA22 OTHER Projects :

• My Morse Code.
• Traffic Lights Controler with IR Remote.
• Math Trainig with Arduino , LCD,and 4X4 Keypad.
• Rock,Scissors or Paper game.
• Connecting Quad Seven segment and DHT11 via WiFi and API.
• YouTube Channel : Or you can visit my YouTube channel Here.
• Or my Linkedin here.

Thanks :

Thanks for Thomas Berggren for all knowledge and experience that looks clearly in backscenes of this project!

FYR. ESP32 DEVKIT V1 30 Pins

Introduction to ESP32 chip

• ESP32-WROOM-32 is a very popular chip used for the internet of things applications. The main part of this module is ESP32-D0WDQ6 chip.
• It has 48 pins but all pins are not available to use in devkit. You will see more information about it in the later part of this tutorial.
• It consists of an on-chipWiFi module, Bluetooth low energy module, and Bluetooth module. So if you are working on an embedded systems project, where you need all these modules, you can simply use this board instead of using off the shelf all components one by one. Due to these features, it can be used for many embedded systems applications.
• It is a very low-cost board and can be purchased around 10-15$.
• It consists of two cores and each core can be controlled separately.
• It can operate at the variablefrequency range from 80 MHz to 240 MHz.
• It has a special ultra-low power co-processor. A user can power off processors and can use a low power coprocessor to monitor peripherals at low power like GPIO pins.

for more info Download this Complete Datasheet

And so looks mine after once connected to 2 small size Bredboard :

In Arduino IDE : we can add it by adding this Link :
https://dl.espressif.com/dl/package_esp32_index.json
Ps. use ',' if you have other boars as well!
Under :
FILE > Preferences Ctrl+Comma

After adding it we need to choose it under tools the write board and then the right port: