Go Down

Topic: Html web page displayed from sd card with arduino and ESP-01  (Read 146 times) previous topic - next topic

bogdanys

Hi everyone. I want to send an html page that is on an SD Card through an ESP-01 module and an Arduino Uno pad, and periodically display temperature. The idea is that I don't know how to do this exactly with the ESP-01 module. Can you help me? Below is the code.
Code: [Select]
#include <SoftwareSerial.h>   //Software Serial library
SoftwareSerial espSerial(2, 3);   //Pin 2 and 3 act as RX and TX. Connect them to TX and RX of ESP8266     
#include <dht.h>
#include <SPI.h>
#include <SD.h>
#define DEBUG true
const String mySSID = "Senzor";       // WiFi SSID
const String myPWD = "ABCDEFGHJ"; // WiFi Password
dht DHT;
int temperatura=0;
int chk=0;
//const String sendData1 ="<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"refresh\" content=\"20\">\n</head>\n<br><br><br><br><br><br><br><br>\n<body>\n<center>\n<b><i><font size=\"6\" face=\"sans-serif\" color=\"red\">VALOARE TEMPERATURA:</b></i></font><br><br>" ;
//const String sendData2 ="<form action=\"/down.php\" class=\"f2\">\n <b><i><font size=\"6\" face=\"sans-serif\" color=\"blue\"><br>DESCARCARE LOG<br><br></font><center>\n  <input type=\"submit\" class=\"botun\" value=\"DESCARCARE\"></center>\n</form></center> \n</body>\n</html>";
File webPage;
#define DHT11_PIN 7
void setup()
{
  Serial.begin(2000000);
  espSerial.begin(115200);
  //int chk = DHT.read11(DHT11_PIN);
  //temperatura=DHT.temperature;
  //delay(1000);
 
  espData("AT+RST", 1000, DEBUG);                      //Reset the ESP8266 module
  //delay(10000);
  espData("AT+CWMODE=1", 1000, DEBUG);                 //Set the ESP mode as station mode
  //delay(1000);
  //espData("AT+CWJAP=\""+ mySSID +"\",\""+ myPWD +"\"", 1000, DEBUG);   //Connect to WiFi network
  //delay(4000);
  espData("AT+CIPMUX=1", 1000, DEBUG);
  //delay(3000);
  String IpAdress = "93.190.144.28";
  espData("AT+CIPSNTPCFG=1,3,\""+ IpAdress +"\"", 1000, DEBUG);
  //delay(4000);
  espData("AT+CIPSNTPTIME?", 1000, DEBUG);

  Serial.print("Initializing SD card...");

  if (!SD.begin(4)) {
    Serial.println("initialization failed!");
    while (1);
  }
  Serial.println("initialization done.");
  delay(1000);
 
}

  void loop()
  { int chk = DHT.read11(DHT11_PIN);
    temperatura=DHT.temperature;
    delay(1000);

  espData("AT+CIPSERVER=1,80",1000, DEBUG);
  espData("AT+CIFSR", 1000, DEBUG);
  delay(6000);
 
  webPage = SD.open("index.txt");
  if (webPage) {
    // read from the file until there's nothing else in it:
    while (webPage.available()) {
      espData("AT+CIPSEND=0,1",0,DEBUG);
      espSerial.find(">");
      espSerial.println(webPage.read());
      //Serial.write(webPage.read());
    }
    // close the file:
    webPage.close();
  } else {
    // if the file didn't open, print an error:
    Serial.println("error opening index.txt");
  }

  }
  String espData(String command, const int timeout, boolean debug)
{
  Serial.print("AT Command ==> ");
  Serial.print(command);
  Serial.println("     ");
 
  String response;
  espSerial.println(command);
  long int time = millis();
  while ( (time + timeout) > millis())
  {
    while (espSerial.available())
    {
      char c = espSerial.read();
      response += c;
    }
  }
  if (debug)
  {
    Serial.print(response);
    delay(5000);
  }
  return response;
}
 
 


And here is the html page. I wish that when I find the smiley face to replace it with temperature.
Code: [Select]
<!DOCTYPE html>
<html>
<head>
    <title>Arduino Uno Temperature Logger! ☺</title>
    <style>
        * {
            box-sizing: border-box;
        }
    div {
            padding: 20px;
            background-color: #f6f6f6;
            overflow: hidden;
        }
    input[type=text], textarea, select {
            font: 17px Arial;
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type=button]{
            font: 17px Arial;
            width: auto;
            float: right;
            cursor: pointer;
            padding: 7px;
        }
    </style>
    <meta charset="utf-8">
</head>
<body>

    <div>
       
        <!--Add few elements to the form-->

        <div>
            <input type="text" id="txtName" placeholder="Current temperature is: 39°☺" />
        </div>
 
        <div>
            <input type="button" id="bt" value="Save temperature log" onclick="saveFile()" />
        </div>

    </div>
</body>
<script>
charset="utf-8";
let today = new Date();
let date = today.getFullYear()+''+(today.getMonth()+1)+''+today.getDate();
let time = today.getHours() + '' + today.getMinutes() + '' + today.getSeconds();
let dateTime = date+''+time;
   
    let saveFile = () => {
   
        // This variable stores all the data that is to be written to a file.
        let data ='☻ It is hot!!! Blah! ☼';
       
        // Convert the text to BLOB.
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = dateTime+'_TemperatureLog.txt';    // The file to save the data.

        let newLink = document.createElement("a");
        newLink.download = sFileName;

        if (window.webkitURL != null) {
            newLink.href = window.webkitURL.createObjectURL(textToBLOB);
        }
        else {
            newLink.href = window.URL.createObjectURL(textToBLOB);
            newLink.style.display = "none";
            document.body.appendChild(newLink);
        }

        newLink.click();
    }
</script>
</html>

Go Up