IoT Project with ESP32 | WebPage Design For Data Display on 0.96 Inch OLED Full Video (हिंदी में)

IoT Project with ESP32 | WebPage Design For Data Display on 0.96 Inch OLED Full Video (हिंदी में)





Full Video Link- https://www.youtube.com/watch?v=BhuSoOyJLy4

Complete Code:

#include <Wire.h>
#include <WiFi.h>
#include <U8g2lib.h>
#include <WebServer.h>

// Replace with your network credentials
const char* ssid = "SSID";
const char* password = "PASSWORD";

// Create an instance of the server
WebServer server(80);

// Initialize the OLED display (SH1106, 128x64, I2C)
U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE, /* clock=*/ SCL, /* data=*/ SDA);

String contentToDisplay = "Welcome!";

void setup() {
  Serial.begin(115200);

  // Initialize the OLED display
  u8g2.begin();
  u8g2.clearBuffer();
  u8g2.setFont(u8g2_font_ncenB08_tr);
  u8g2.sendBuffer();

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Web server route to handle root "/"
  server.on("/", HTTP_GET, [](){
    server.send(200, "text/html",
    "<html>\
      <head>\
        <title>ESP32 OLED Display</title>\
        <style>\
          body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }\
          form { display: inline-block; }\
          input[type=text] { width: 300px; padding: 10px; font-size: 16px; }\
          input[type=submit] { padding: 10px 20px; font-size: 16px; }\
        </style>\
      </head>\
      <body>\
        <h1>ESP32 OLED Display</h1>\
        <form action=\"/submit\" method=\"POST\">\
          <input type=\"text\" name=\"text\" placeholder=\"Enter text to display\">\
          <input type=\"submit\" value=\"Submit\">\
        </form>\
      </body>\
    </html>");
  });

  // Web server route to handle form submission "/submit"
  server.on("/submit", HTTP_POST, [](){
    String text = "";
    if (server.hasArg("text")) {
      text = server.arg("text");
      contentToDisplay = text;
      displayContent(contentToDisplay);
    }
    server.send(200, "text/html",
    "<html>\
      <head>\
        <title>ESP32 OLED Display</title>\
      </head>\
      <body>\
        <h1>Text Updated!</h1>\
        <p>" + text + "</p>\
        <a href=\"/\">Go back</a>\
      </body>\
    </html>");
  });

  // Start server
  server.begin();
}

void loop() {
  server.handleClient();
}

void displayContent(String content) {
  u8g2.clearBuffer();
 
  int len = content.length();
  int charPerLine = 21; // Approximate number of characters per line

  for (int i = 0; i < len; i += charPerLine) {
    u8g2.setCursor(0, (i / charPerLine) * 10 + 12); // Adjust Y coordinate based on font size
    String line = content.substring(i, i + charPerLine);
    u8g2.print(line);
  }

  u8g2.sendBuffer();
}

Comments

Post a Comment

Popular Posts