ledmatrix content update

This commit is contained in:
2026-08-14 14:15:43 +02:00
parent a9dda1e2a5
commit 41b6db3172
+140 -126
View File
@@ -9,7 +9,7 @@ description: "WiFi-controlled LED display solution with REST API, DHT22 sensor,
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ description }}"> <meta name="description" content="{{ description }}">
<meta name="author" content="Stefan Kölle"> <meta name="author" content="Stefan Kölle">
<title>{{ title }} - ESP32 Projekt</title> <title>{{ title }} - ESP32 Project</title>
<link rel="stylesheet" href="assets/style.css"> <link rel="stylesheet" href="assets/style.css">
</head> </head>
<body> <body>
@@ -18,6 +18,8 @@ description: "WiFi-controlled LED display solution with REST API, DHT22 sensor,
<a href="#" class="logo">🔌 LED Matrix WebServer</a> <a href="#" class="logo">🔌 LED Matrix WebServer</a>
<ul class="nav-menu"> <ul class="nav-menu">
<li><a href="#overview">Overview</a></li> <li><a href="#overview">Overview</a></li>
<li><a href="#usecases">Use Cases</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#features">Features</a></li> <li><a href="#features">Features</a></li>
<li><a href="#hardware">Hardware</a></li> <li><a href="#hardware">Hardware</a></li>
<li><a href="#api">API</a></li> <li><a href="#api">API</a></li>
@@ -33,7 +35,7 @@ description: "WiFi-controlled LED display solution with REST API, DHT22 sensor,
<p>WiFi-controlled LED display solution with REST API, DHT22 sensor, and OTA updates for your home network.</p> <p>WiFi-controlled LED display solution with REST API, DHT22 sensor, and OTA updates for your home network.</p>
<div class="cta-buttons"> <div class="cta-buttons">
<a href="#overview" class="btn btn-primary">Project</a> <a href="#overview" class="btn btn-primary">Project</a>
<a href="#api" class="btn btn-secondary">API Dokumentation</a> <a href="#api" class="btn btn-secondary">API Documentation</a>
</div> </div>
</div> </div>
<div class="hero-image"> <div class="hero-image">
@@ -49,6 +51,7 @@ description: "WiFi-controlled LED display solution with REST API, DHT22 sensor,
The LED Matrix WebServer system is a fully configurable LED display solution for home networks. The LED Matrix WebServer system is a fully configurable LED display solution for home networks.
It is based on the NodeMCU-32S ESP32 with up to 12 cascaded MAX7219 8x8 LED modules. It is based on the NodeMCU-32S ESP32 with up to 12 cascaded MAX7219 8x8 LED modules.
Using a simple REST API, messages can be displayed, animations controlled, and sensor data queried. Using a simple REST API, messages can be displayed, animations controlled, and sensor data queried.
Six units are deployed across the apartment, each serving as an information display in its room.
</p> </p>
<div class="cards-grid"> <div class="cards-grid">
@@ -85,88 +88,58 @@ description: "WiFi-controlled LED display solution with REST API, DHT22 sensor,
</div> </div>
</section> </section>
<section class="section" id="hardware"> <section class="section" id="usecases">
<h2 class="section-title">Hardware Components</h2> <h2 class="section-title">Use Cases</h2>
<p style="font-size: 1.1rem; margin-bottom: 2rem;">
The LED Matrix is a receiver — what you send to it is entirely up to you.
Here are some examples of how I use the displays across the apartment.
</p>
<div class="specs-table"> <div class="features">
<table> <div class="feature">
<thead> <div class="feature-icon">🕐</div>
<tr> <div class="feature-text">
<th>Component</th> <h3>Date &amp; Time</h3>
<th>Model / Type</th> <p>Always-on clock and date display in each room</p>
<th>Features</th> </div>
</tr> </div>
</thead> <div class="feature">
<tbody> <div class="feature-icon">🌤️</div>
<tr> <div class="feature-text">
<td><strong>Microcontroller</strong></td> <h3>Weather Data</h3>
<td>NodeMCU-32S ESP32</td> <p>Current temperature and conditions from indoor sensors</p>
<td>32-Bit Dual-Core 240MHz, WiFi + Bluetooth</td> </div>
</tr> </div>
<tr> <div class="feature">
<td><strong>LED Display</strong></td> <div class="feature-icon">📊</div>
<td>12× MAX7219 8x8 Module</td> <div class="feature-text">
<td>cascaded</td> <h3>Sensor Readings</h3>
</tr> <p>Live temperature and humidity from the on-board DHT22 sensor</p>
<tr> </div>
<td><strong>Sensor</strong></td> </div>
<td>DHT22 (AM2302)</td> <div class="feature">
<td>Temperature ±0.5°C, Humidity ±2%</td> <div class="feature-icon">🔔</div>
</tr> <div class="feature-text">
<tr> <h3>Status Messages</h3>
<td><strong>Buzzer</strong></td> <p>Notifications like "washing machine done" triggered via MQTT</p>
<td>Passive Buzzer</td> </div>
<td>GPIO 16 PWM controlled via NPN transistor</td> </div>
</tr> <div class="feature">
<tr> <div class="feature-icon">🌐</div>
<td><strong>Power Supply</strong></td> <div class="feature-text">
<td>USB-C oder externe 5V PSU</td> <h3>Custom Messages</h3>
<td>5V for MAX7219, 3.3V internal for logic</td> <p>Any text or scrolling message via the REST API</p>
</tr> </div>
</tbody> </div>
</table>
</div>
<h3 style="margin-top: 2rem; margin-bottom: 1rem; color: var(--color-primary);">Pin Configuration</h3>
<div class="code-block">
<div class="code-label">GPIO Pin Assignment</div>
<pre>LedMatrix Software V1.08
NodeMCU-32S ESP32 (USB powered)
POWER SUPPLY:
Micro USB ──→ ESP32 (5V regulator generates 3.3V internal)
SPI SIGNALS (MAX7219):
VIN 5V ──→ MAX7219 VCC
GND ──→ MAX7219 GND
GPIO 5 ──→ MAX7219 CS (Chip Select)
GPIO 18 ──→ MAX7219 CLK (Clock)
GPIO 23 ──→ MAX7219 DIN (Data In)
Modul 1 DOUT → Modul 2 DIN → Modul 3 DIN
DHT22 SENSOR:
GPIO 27 ──→ DHT22 Data
3V3 ──→ DHT22 VCC
GND ──→ DHT22 GND
BUZZER:
GPIO 16 ──→ Buzzer Control (via transistor)
GPIO 16 ──1kΩ── NPN Transistor BASE
NPN Transistor COLLECTOR ──→ Buzzer +
NPN Transistor EMITTER ──→ GND
Buzzer - ──→ GND (ESP32)
ANALOG INPUTS (optional):
GPIO 34 ──→ Analog Sensor 1
GPIO 35 ──→ Analog Sensor 2
GPIO 36 ──→ Analog Sensor 3</pre>
</div> </div>
</section> </section>
<section class="section" id="installation"> <section class="section" id="installation">
<h2 class="section-title">Installation &amp; Setup</h2> <h2 class="section-title">Installation</h2>
<p style="margin-bottom: 2rem;"> <p style="font-size: 1.1rem; margin-bottom: 2rem;">
Here are photos of various LED Matrix installations in the home network. The systems show different colors and configurations. Six LED Matrix units are deployed across the apartment, each mounted in its respective room.
Every unit consists of an ESP32 board with cascaded MAX7219 LED modules and a DHT22 sensor,
connected via SPI. The displays are powered through micro-USB or directly via the 5V pins.
</p> </p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem;"> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem;">
@@ -269,6 +242,85 @@ ANALOG INPUTS (optional):
</div> </div>
</section> </section>
<section class="section" id="hardware">
<h2 class="section-title">Hardware Components</h2>
<div class="specs-table">
<table>
<thead>
<tr>
<th>Component</th>
<th>Model / Type</th>
<th>Features</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Microcontroller</strong></td>
<td>NodeMCU-32S ESP32</td>
<td>32-Bit Dual-Core 240MHz, WiFi + Bluetooth</td>
</tr>
<tr>
<td><strong>LED Display</strong></td>
<td>12× MAX7219 8x8 Module</td>
<td>cascaded</td>
</tr>
<tr>
<td><strong>Sensor</strong></td>
<td>DHT22 (AM2302)</td>
<td>Temperature ±0.5°C, Humidity ±2%</td>
</tr>
<tr>
<td><strong>Buzzer</strong></td>
<td>Passive Buzzer</td>
<td>GPIO 16 PWM controlled via NPN transistor</td>
</tr>
<tr>
<td><strong>Power Supply</strong></td>
<td>Micro USB or direct 5V pin</td>
<td>5V for MAX7219, 3.3V internal for logic</td>
</tr>
</tbody>
</table>
</div>
<h3 style="margin-top: 2rem; margin-bottom: 1rem; color: var(--color-primary);">Pin Configuration</h3>
<div class="code-block">
<div class="code-label">GPIO Pin Assignment</div>
<pre>LedMatrix Software V1.08
NodeMCU-32S ESP32 (USB powered)
POWER SUPPLY:
Micro USB ──→ ESP32 (5V regulator generates 3.3V internal)
or: 5V Pin ──→ ESP32 5V (bypassing USB regulator)
SPI SIGNALS (MAX7219):
VIN 5V ──→ MAX7219 VCC
GND ──→ MAX7219 GND
GPIO 5 ──→ MAX7219 CS (Chip Select)
GPIO 18 ──→ MAX7219 CLK (Clock)
GPIO 23 ──→ MAX7219 DIN (Data In)
Modul 1 DOUT → Modul 2 DIN → Modul 3 DIN
DHT22 SENSOR:
GPIO 27 ──→ DHT22 Data
3V3 ──→ DHT22 VCC
GND ──→ DHT22 GND
BUZZER:
GPIO 16 ──→ Buzzer Control (via transistor)
GPIO 16 ──1kΩ── NPN Transistor BASE
NPN Transistor COLLECTOR ──→ Buzzer +
NPN Transistor EMITTER ──→ GND
Buzzer - ──→ GND (ESP32)
ANALOG INPUTS (optional):
GPIO 34 ──→ Analog Sensor 1
GPIO 35 ──→ Analog Sensor 2
GPIO 36 ──→ Analog Sensor 3</pre>
</div>
</section>
<section class="section" id="api"> <section class="section" id="api">
<h2 class="section-title">REST API Documentation</h2> <h2 class="section-title">REST API Documentation</h2>
@@ -285,7 +337,7 @@ Response: HTML Welcome Page with menu</pre>
</div> </div>
<div class="code-block"> <div class="code-block">
<div class="code-label">Firmware-Version</div> <div class="code-label">Firmware Version</div>
<pre>GET /version <pre>GET /version
Response: v1.08 (dht)</pre> Response: v1.08 (dht)</pre>
</div> </div>
@@ -351,13 +403,13 @@ Response: "1234,2345,3456" (comma-separated values)</pre>
<h3 style="margin-top: 2rem; margin-bottom: 1rem; color: var(--color-primary);">Sounds &amp; Buzzer</h3> <h3 style="margin-top: 2rem; margin-bottom: 1rem; color: var(--color-primary);">Sounds &amp; Buzzer</h3>
<div class="code-block"> <div class="code-block">
<div class="code-label">Success melody (Done)</div> <div class="code-label">Done melody</div>
<pre>GET /sound/erledigt <pre>GET /sound/erledigt
Plays positive tone sequence</pre> Plays positive tone sequence</pre>
</div> </div>
<div class="code-block"> <div class="code-block">
<div class="code-label">Warnings melody</div> <div class="code-label">Warning melody</div>
<pre>GET /sound/warnung <pre>GET /sound/warnung
Plays warning tone sequence</pre> Plays warning tone sequence</pre>
</div> </div>
@@ -371,7 +423,7 @@ Plays error tone sequence</pre>
<div class="code-block"> <div class="code-block">
<div class="code-label">Completed melody</div> <div class="code-label">Completed melody</div>
<pre>GET /sound/abgeschlossen <pre>GET /sound/abgeschlossen
Plays success tone sequence</pre> Plays completed tone sequence</pre>
</div> </div>
<h3 style="margin-top: 2rem; margin-bottom: 1rem; color: var(--color-primary);">Control &amp; System</h3> <h3 style="margin-top: 2rem; margin-bottom: 1rem; color: var(--color-primary);">Control &amp; System</h3>
@@ -430,7 +482,7 @@ ESP32 will be restarted (with display shutdown)</pre>
</tr> </tr>
<tr> <tr>
<td>Power Supply</td> <td>Power Supply</td>
<td>USB-C 5V</td> <td>Micro USB 5V or direct 5V pin</td>
<td>~500mA for logic</td> <td>~500mA for logic</td>
</tr> </tr>
<tr> <tr>
@@ -467,61 +519,23 @@ ESP32 will be restarted (with display shutdown)</pre>
</table> </table>
</div> </div>
</section> </section>
<section class="section">
<h2 class="section-title">Code Quality</h2>
<p style="margin-bottom: 1.5rem;">
The code has been thoroughly reviewed and classified as production-ready.
</p>
<div class="cards-grid">
<div class="card">
<div class="card-title">✅ Strengths</div>
<div class="card-content">
<ul style="list-style-position: inside; margin-top: 0.5rem;">
<li>Robust WiFi management</li>
<li>Non-blocking Async-WebServer</li>
<li>Error handling for DHT</li>
<li>OTA updates implemented</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-title">⚠️ Potential for Improvement</div>
<div class="card-content">
<ul style="list-style-position: inside; margin-top: 0.5rem;">
<li>Hard-coded SSID/password</li>
<li>Expand input validation</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-title">📊 Evaluation</div>
<div class="card-content">
<div style="margin-top: 1rem;">
<strong>Grade: A-</strong><br>
Production ready<br>
Uptime: 30-45 days normal
</div>
</div>
</div>
</div>
</section>
</main> </main>
<footer> <footer>
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h4>Projekt</h4> <h4>Project</h4>
<ul> <ul>
<li><a href="#overview">Overview</a></li> <li><a href="#overview">Overview</a></li>
<li><a href="#usecases">Use Cases</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#features">Features</a></li> <li><a href="#features">Features</a></li>
<li><a href="#hardware">Hardware</a></li> <li><a href="#hardware">Hardware</a></li>
<li><a href="#api">API</a></li> <li><a href="#api">API</a></li>
</ul> </ul>
</div> </div>
<div class="footer-section"> <div class="footer-section">
<h4>Technologie</h4> <h4>Technology</h4>
<ul> <ul>
<li>ESP32 NodeMCU-32S</li> <li>ESP32 NodeMCU-32S</li>
<li>Arduino IDE</li> <li>Arduino IDE</li>