Display text on OLED from WebServer

Send text from a WebServer to your Esp8266 and display it on a OLED screen

Aug 12, 2025

•

1874 views

•

5 respects

•

GPL3+

Arduino User Group

Internet Of Things

Communication

Devices & Components

NodeMCU ESP8266

Software & Tools

Arduino IDE

Project description

Code

The code

cpp

Remember to change both the WiFi SSID and Password

1#include <ESP8266WiFi.h>
2#include <ESP8266WebServer.h>
3#include <Wire.h>
4#include <Adafruit_GFX.h>
5#include <Adafruit_SSD1306.h>
6
7// Wi-Fi settings
8const char* ssid = "Wi-Fi Name/ssid";
9const char* password = "Wi-Fi Password";
10
11// OLED settings
12#define SCREEN_WIDTH 128
13#define SCREEN_HEIGHT 64
14Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
15
16// WebServer
17ESP8266WebServer server(80);
18
19// Current text to display
20String displayText = "Hello!";
21
22// Webpage HTML
23const char webpage[] PROGMEM = R"rawliteral(
24<!DOCTYPE html>
25<html>
26<head>
27<title>ESP8266 OLED Control</title>
28<style>
29body { font-family: Arial; text-align: center; background: #222; color: white; }
30input { width: 200px; }
31</style>
32</head>
33<body>
34<h1>ESP8266 OLED Control</h1>
35<p>Enter text to display on OLED:</p>
36<input type="text" id="textInput" value="Hello!">
37<button onclick="sendText()">Update</button>
38<script>
39function sendText() {
40    let txt = document.getElementById('textInput').value;
41    fetch("/update?text=" + encodeURIComponent(txt))
42    .then(response => response.text())
43    .then(alert);
44}
45</script>
46</body>
47</html>
48)rawliteral";
49
50// Serve main webpage
51void handleRoot() {
52  server.send_P(200, "text/html", webpage);
53}
54
55// Handle text update
56void handleUpdate() {
57  if (server.hasArg("text")) {
58    displayText = server.arg("text");
59    display.clearDisplay();
60    display.setTextSize(1);
61    display.setTextColor(SSD1306_WHITE);
62    display.setCursor(0,0);
63    display.println(displayText);
64    display.display();
65    server.send(200, "text/plain", "Text updated!");
66  } else {
67    server.send(400, "text/plain", "No text provided!");
68  }
69}
70
71void setup() {
72  Serial.begin(115200);
73  Wire.begin(14, 12); // D5=SDA, D6=SCL
74
75  // Initialize OLED
76  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
77    Serial.println("OLED not found");
78    while(1);
79  }
80
81  display.clearDisplay();
82  display.setTextSize(1);
83  display.setTextColor(SSD1306_WHITE);
84  display.setCursor(0,0);
85  display.println("Connecting WiFi...");
86  display.display();
87
88  // Connect to Wi-Fi
89  WiFi.begin(ssid, password);
90  while (WiFi.status() != WL_CONNECTED) {
91    delay(500);
92    Serial.print(".");
93  }
94
95  String ipStr = WiFi.localIP().toString();
96  Serial.println("IP address: " + ipStr);
97
98  display.clearDisplay();
99  display.setCursor(0,0);
100  display.println("Connected!");
101  display.println("IP:");
102  display.println(ipStr);
103  display.display();
104
105  // Start server
106  server.on("/", handleRoot);
107  server.on("/update", handleUpdate);
108  server.begin();
109}
110
111void loop() {
112  server.handleClient();
113}

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

// Wi-Fi settings
const char* ssid = "Wi-Fi Name/ssid";
const char* password = "Wi-Fi Password";

// OLED settings
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

// WebServer
ESP8266WebServer server(80);

// Current text to display
String displayText = "Hello!";

// Webpage HTML
const char webpage[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 OLED Control</title>
<style>
body { font-family: Arial; text-align: center; background: #222; color: white; }
input { width: 200px; }
</style>
</head>
<body>
<h1>ESP8266 OLED Control</h1>
<p>Enter text to display on OLED:</p>
<input type="text" id="textInput" value="Hello!">
<button onclick="sendText()">Update</button>
<script>
function sendText() {
    let txt = document.getElementById('textInput').value;
    fetch("/update?text=" + encodeURIComponent(txt))
    .then(response => response.text())
    .then(alert);
}
</script>
</body>
</html>
)rawliteral";

// Serve main webpage
void handleRoot() {
  server.send_P(200, "text/html", webpage);
}

// Handle text update
void handleUpdate() {
  if (server.hasArg("text")) {
    displayText = server.arg("text");
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0,0);
    display.println(displayText);
    display.display();
    server.send(200, "text/plain", "Text updated!");
  } else {
    server.send(400, "text/plain", "No text provided!");
  }
}

void setup() {
  Serial.begin(115200);
  Wire.begin(14, 12); // D5=SDA, D6=SCL

  // Initialize OLED
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println("OLED not found");
    while(1);
  }

  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0,0);
  display.println("Connecting WiFi...");
  display.display();

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  String ipStr = WiFi.localIP().toString();
  Serial.println("IP address: " + ipStr);

  display.clearDisplay();
  display.setCursor(0,0);
  display.println("Connected!");
  display.println("IP:");
  display.println(ipStr);
  display.display();

  // Start server
  server.on("/", handleRoot);
  server.on("/update", handleUpdate);
  server.begin();
}

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

Downloadable files

Website Layout

The Layout of the Website

Skärmbild 2025-08-13 153304.png

Comments

Only logged in users can leave comments

sweden_duck

0 Followers

•

0 Projects

Intro

Trademarks & CopyrightsWhistleblowingDigital Services ActTerms of ServicePrivacy PolicySecurityCookie Settings

Report content