HomeWeatherNet

ESP32 + AHT10

May 3, 2025

•

1052 views

•

3 respects

•

GPL3+

Data Collection

Home Automation

Internet Of Things

Environmental Sensing

Devices & Components

AHT10 - Humidity Sensor

PLA Filament

ESP32

Hardware & Tools

Friend with a 3D printer

Soldering kit

Software & Tools

Blender

Arduino IDE

Project description

Code

code

weathernet

1#include <WiFi.h>
2#include <WebServer.h>
3#include <Adafruit_AHT10.h>
4
5// ========== ΡΥΘΜΙΣΕΙΣ ΔΙΚΤΥΟΥ ========== //
6const char* ssid = "name";       // Αντικαταστήστε με το SSID σας
7const char* password = "code"; // Αντικαταστήστε με τον κωδικό σας
8
9// Προαιρετικά: Στατική IP (comment αν θέλετε DHCP)
10IPAddress local_ip(192, 168, 1, 100);  // Επιλέξτε μια ελεύθερη IP
11IPAddress gateway(192, 168, 1, 1);     // Gateway του δικτύου σας
12IPAddress subnet(255, 255, 255, 0);    // Subnet mask
13
14// ========== ΟΡΙΣΜΟΣ ΑΝΤΙΚΕΙΜΕΝΩΝ ========== //
15WebServer server(80);
16Adafruit_AHT10 aht;
17
18// ========== HTML & CSS ========== //
19const char* htmlContent = R"rawliteral(
20<!DOCTYPE html>
21<html lang="el">
22<head>
23  <meta charset="UTF-8">
24  <meta name="viewport" content="width=device-width, initial-scale=1.0">
25  <title>HomeWeatherNet</title>
26  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
27  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
28  <style>
29    :root {
30      --primary: #3498db;
31      --secondary: #2980b9;
32      --accent: #e74c3c;
33      --text-dark: #2c3e50;
34      --text-light: #ecf0f1;
35      --card-bg: rgba(255, 255, 255, 0.15);
36    }
37    
38    body {
39      background: linear-gradient(135deg, var(--primary), var(--secondary));
40      font-family: 'Poppins', sans-serif;
41      min-height: 100vh;
42      color: var(--text-light);
43      padding: 20px;
44      transition: all 0.4s ease;
45    }
46    
47    .container {
48      max-width: 1200px;
49      margin: 0 auto;
50      padding: 20px;
51    }
52    
53    header {
54      display: flex;
55      justify-content: space-between;
56      align-items: center;
57      margin-bottom: 40px;
58      animation: fadeIn 1s ease;
59    }
60    
61    .logo {
62      display: flex;
63      align-items: center;
64      gap: 15px;
65    }
66    
67    .logo i {
68      font-size: 2.5rem;
69      color: var(--accent);
70    }
71    
72    .logo-text h1 {
73      font-size: 2.2rem;
74      font-weight: 700;
75      line-height: 1.2;
76    }
77    
78    .logo-text p {
79      font-size: 0.9rem;
80      opacity: 0.8;
81    }
82    
83    .dashboard {
84      display: grid;
85      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
86      gap: 25px;
87      margin-bottom: 30px;
88    }
89    
90    .card {
91      background: var(--card-bg);
92      backdrop-filter: blur(10px);
93      border-radius: 20px;
94      padding: 30px;
95      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
96      transition: transform 0.3s ease;
97    }
98    
99    .card:hover {
100      transform: translateY(-5px);
101    }
102    
103    .card-header {
104      display: flex;
105      align-items: center;
106      margin-bottom: 20px;
107    }
108    
109    .card-icon {
110      width: 60px;
111      height: 60px;
112      background: rgba(255, 255, 255, 0.2);
113      border-radius: 50%;
114      display: flex;
115      align-items: center;
116      justify-content: center;
117      margin-right: 20px;
118    }
119    
120    .card-icon i {
121      font-size: 1.8rem;
122      color: white;
123    }
124    
125    .card-title {
126      font-size: 1.1rem;
127      font-weight: 600;
128      margin-bottom: 5px;
129    }
130    
131    .card-subtitle {
132      font-size: 0.9rem;
133      opacity: 0.8;
134    }
135    
136    .card-value {
137      font-size: 3rem;
138      font-weight: 700;
139      margin: 15px 0;
140      color: white;
141    }
142    
143    .card-footer {
144      display: flex;
145      justify-content: space-between;
146      font-size: 0.9rem;
147      opacity: 0.9;
148    }
149    
150    .network-info {
151      text-align: center;
152      font-size: 0.9rem;
153      opacity: 0.7;
154      margin-top: 30px;
155      background: rgba(0, 0, 0, 0.2);
156      padding: 15px;
157      border-radius: 10px;
158    }
159    
160    @keyframes fadeIn {
161      from { opacity: 0; }
162      to { opacity: 1; }
163    }
164    
165    @keyframes slideUp {
166      from { 
167        opacity: 0;
168        transform: translateY(20px);
169      }
170      to { 
171        opacity: 1;
172        transform: translateY(0);
173      }
174    }
175    
176    @media (max-width: 768px) {
177      header {
178        flex-direction: column;
179        text-align: center;
180        gap: 20px;
181      }
182      
183      .logo {
184        flex-direction: column;
185      }
186      
187      .card {
188        padding: 25px;
189      }
190      
191      .card-value {
192        font-size: 2.5rem;
193      }
194    }
195  </style>
196</head>
197<body>
198  <div class="container">
199    <header>
200      <div class="logo">
201        <i class="fas fa-home"></i>
202        <div class="logo-text">
203          <h1>HomeWeatherNet</h1>
204          <p>Real-time Environmental Monitoring</p>
205        </div>
206      </div>
207    </header>
208    
209    <div class="dashboard">
210      <div class="card" style="animation: slideUp 0.8s ease;">
211        <div class="card-header">
212          <div class="card-icon">
213            <i class="fas fa-temperature-high"></i>
214          </div>
215          <div>
216            <div class="card-title">Temperature</div>
217            <div class="card-subtitle">Current reading</div>
218          </div>
219        </div>
220        <div class="card-value" id="temperature">--</div>
221        <div class="card-footer">
222          <span>Last update: <span id="temp-time">--:--</span></span>
223          <span>°C</span>
224        </div>
225      </div>
226      
227      <div class="card" style="animation: slideUp 0.8s ease 0.2s;">
228        <div class="card-header">
229          <div class="card-icon">
230            <i class="fas fa-tint"></i>
231          </div>
232          <div>
233            <div class="card-title">Humidity</div>
234            <div class="card-subtitle">Relative humidity</div>
235          </div>
236        </div>
237        <div class="card-value" id="humidity">--</div>
238        <div class="card-footer">
239          <span>Last update: <span id="humidity-time">--:--</span></span>
240          <span>%</span>
241        </div>
242      </div>
243    </div>
244    
245    <div class="network-info">
246      <p><i class="fas fa-network-wired"></i> Connected to: %NETWORK_SSID%</p>
247      <p><i class="fas fa-wifi"></i> Signal Strength: %RSSI% dBm</p>
248      <p><i class="fas fa-link"></i> Access this dashboard from any device in your network using: <strong>%DEVICE_IP%</strong></p>
249    </div>
250  </div>
251  
252  <script>
253    function updateTime() {
254      const now = new Date();
255      return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
256    }
257    
258    async function fetchData() {
259      try {
260        const response = await fetch('/data');
261        const data = await response.json();
262        
263        document.getElementById('temperature').textContent = data.temperature.toFixed(1);
264        document.getElementById('humidity').textContent = data.humidity.toFixed(1);
265        
266        const time = updateTime();
267        document.getElementById('temp-time').textContent = time;
268        document.getElementById('humidity-time').textContent = time;
269      } catch (error) {
270        console.error('Error fetching data:', error);
271      }
272    }
273    
274    // Fetch data every 3 seconds
275    setInterval(fetchData, 3000);
276    
277    // Initial fetch
278    fetchData();
279  </script>
280</body>
281</html>
282)rawliteral";
283
284// ========== ΔΙΚΤΥΟ & WEB SERVER ========== //
285void handleRoot() {
286  String html = htmlContent;
287  
288  // Αντικατάσταση δυναμικών τιμών
289  html.replace("%NETWORK_SSID%", WiFi.SSID());
290  html.replace("%RSSI%", String(WiFi.RSSI()));
291  html.replace("%DEVICE_IP%", WiFi.localIP().toString());
292  
293  server.send(200, "text/html", html);
294}
295
296void handleData() {
297  sensors_event_t humidity, temp;
298  aht.getEvent(&humidity, &temp);
299
300  String json = "{";
301  json += "\"temperature\": " + String(temp.temperature) + ",";
302  json += "\"humidity\": " + String(humidity.relative_humidity);
303  json += "}";
304
305  server.send(200, "application/json", json);
306}
307
308// ========== SETUP & LOOP ========== //
309void setup() {
310  Serial.begin(115200);
311  delay(1000);
312
313  // 1. Σύνδεση στο WiFi
314  Serial.println("\nConnecting to WiFi...");
315  WiFi.begin(ssid, password);
316  
317  // Προαιρετικό: Ορισμός στατικής IP
318  // WiFi.config(local_ip, gateway, subnet);
319  
320  while (WiFi.status() != WL_CONNECTED) {
321    delay(500);
322    Serial.print(".");
323  }
324  
325  // 2. Εκτύπωση πληροφοριών σύνδεσης
326  Serial.println("\nConnected to WiFi!");
327  Serial.println("Network Information:");
328  Serial.print("SSID: "); Serial.println(WiFi.SSID());
329  Serial.print("IP Address: "); Serial.println(WiFi.localIP());
330  Serial.print("Subnet Mask: "); Serial.println(WiFi.subnetMask());
331  Serial.print("Gateway: "); Serial.println(WiFi.gatewayIP());
332  Serial.print("RSSI: "); Serial.print(WiFi.RSSI()); Serial.println(" dBm");
333
334  // 3. Αρχικοποίηση αισθητήρα
335  if (!aht.begin()) {
336    Serial.println("Failed to initialize AHT10 sensor!");
337    while (1) delay(1000);
338  }
339  Serial.println("AHT10 sensor initialized");
340
341  // 4. Ρύθμιση Web Server
342  server.on("/", handleRoot);
343  server.on("/data", handleData);
344  server.begin();
345  Serial.println("HTTP server started");
346  Serial.println("Access the dashboard at: http://" + WiFi.localIP().toString());
347}
348
349void loop() {
350  server.handleClient();
351  delay(2);
352}

#include <WiFi.h>
#include <WebServer.h>
#include <Adafruit_AHT10.h>

// ========== ΡΥΘΜΙΣΕΙΣ ΔΙΚΤΥΟΥ ========== //
const char* ssid = "name";       // Αντικαταστήστε με το SSID σας
const char* password = "code"; // Αντικαταστήστε με τον κωδικό σας

// Προαιρετικά: Στατική IP (comment αν θέλετε DHCP)
IPAddress local_ip(192, 168, 1, 100);  // Επιλέξτε μια ελεύθερη IP
IPAddress gateway(192, 168, 1, 1);     // Gateway του δικτύου σας
IPAddress subnet(255, 255, 255, 0);    // Subnet mask

// ========== ΟΡΙΣΜΟΣ ΑΝΤΙΚΕΙΜΕΝΩΝ ========== //
WebServer server(80);
Adafruit_AHT10 aht;

// ========== HTML & CSS ========== //
const char* htmlContent = R"rawliteral(
<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HomeWeatherNet</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #3498db;
      --secondary: #2980b9;
      --accent: #e74c3c;
      --text-dark: #2c3e50;
      --text-light: #ecf0f1;
      --card-bg: rgba(255, 255, 255, 0.15);
    }
    
    body {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      font-family: 'Poppins', sans-serif;
      min-height: 100vh;
      color: var(--text-light);
      padding: 20px;
      transition: all 0.4s ease;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      animation: fadeIn 1s ease;
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .logo i {
      font-size: 2.5rem;
      color: var(--accent);
    }
    
    .logo-text h1 {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.2;
    }
    
    .logo-text p {
      font-size: 0.9rem;
      opacity: 0.8;
    }
    
    .dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-bottom: 30px;
    }
    
    .card {
      background: var(--card-bg);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-5px);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .card-icon {
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
    }
    
    .card-icon i {
      font-size: 1.8rem;
      color: white;
    }
    
    .card-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .card-subtitle {
      font-size: 0.9rem;
      opacity: 0.8;
    }
    
    .card-value {
      font-size: 3rem;
      font-weight: 700;
      margin: 15px 0;
      color: white;
    }
    
    .card-footer {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      opacity: 0.9;
    }
    
    .network-info {
      text-align: center;
      font-size: 0.9rem;
      opacity: 0.7;
      margin-top: 30px;
      background: rgba(0, 0, 0, 0.2);
      padding: 15px;
      border-radius: 10px;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { 
        opacity: 0;
        transform: translateY(20px);
      }
      to { 
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
      }
      
      .logo {
        flex-direction: column;
      }
      
      .card {
        padding: 25px;
      }
      
      .card-value {
        font-size: 2.5rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">
        <i class="fas fa-home"></i>
        <div class="logo-text">
          <h1>HomeWeatherNet</h1>
          <p>Real-time Environmental Monitoring</p>
        </div>
      </div>
    </header>
    
    <div class="dashboard">
      <div class="card" style="animation: slideUp 0.8s ease;">
        <div class="card-header">
          <div class="card-icon">
            <i class="fas fa-temperature-high"></i>
          </div>
          <div>
            <div class="card-title">Temperature</div>
            <div class="card-subtitle">Current reading</div>
          </div>
        </div>
        <div class="card-value" id="temperature">--</div>
        <div class="card-footer">
          <span>Last update: <span id="temp-time">--:--</span></span>
          <span>°C</span>
        </div>
      </div>
      
      <div class="card" style="animation: slideUp 0.8s ease 0.2s;">
        <div class="card-header">
          <div class="card-icon">
            <i class="fas fa-tint"></i>
          </div>
          <div>
            <div class="card-title">Humidity</div>
            <div class="card-subtitle">Relative humidity</div>
          </div>
        </div>
        <div class="card-value" id="humidity">--</div>
        <div class="card-footer">
          <span>Last update: <span id="humidity-time">--:--</span></span>
          <span>%</span>
        </div>
      </div>
    </div>
    
    <div class="network-info">
      <p><i class="fas fa-network-wired"></i> Connected to: %NETWORK_SSID%</p>
      <p><i class="fas fa-wifi"></i> Signal Strength: %RSSI% dBm</p>
      <p><i class="fas fa-link"></i> Access this dashboard from any device in your network using: <strong>%DEVICE_IP%</strong></p>
    </div>
  </div>
  
  <script>
    function updateTime() {
      const now = new Date();
      return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    
    async function fetchData() {
      try {
        const response = await fetch('/data');
        const data = await response.json();
        
        document.getElementById('temperature').textContent = data.temperature.toFixed(1);
        document.getElementById('humidity').textContent = data.humidity.toFixed(1);
        
        const time = updateTime();
        document.getElementById('temp-time').textContent = time;
        document.getElementById('humidity-time').textContent = time;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
    
    // Fetch data every 3 seconds
    setInterval(fetchData, 3000);
    
    // Initial fetch
    fetchData();
  </script>
</body>
</html>
)rawliteral";

// ========== ΔΙΚΤΥΟ & WEB SERVER ========== //
void handleRoot() {
  String html = htmlContent;
  
  // Αντικατάσταση δυναμικών τιμών
  html.replace("%NETWORK_SSID%", WiFi.SSID());
  html.replace("%RSSI%", String(WiFi.RSSI()));
  html.replace("%DEVICE_IP%", WiFi.localIP().toString());
  
  server.send(200, "text/html", html);
}

void handleData() {
  sensors_event_t humidity, temp;
  aht.getEvent(&humidity, &temp);

  String json = "{";
  json += "\"temperature\": " + String(temp.temperature) + ",";
  json += "\"humidity\": " + String(humidity.relative_humidity);
  json += "}";

  server.send(200, "application/json", json);
}

// ========== SETUP & LOOP ========== //
void setup() {
  Serial.begin(115200);
  delay(1000);

  // 1. Σύνδεση στο WiFi
  Serial.println("\nConnecting to WiFi...");
  WiFi.begin(ssid, password);
  
  // Προαιρετικό: Ορισμός στατικής IP
  // WiFi.config(local_ip, gateway, subnet);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  // 2. Εκτύπωση πληροφοριών σύνδεσης
  Serial.println("\nConnected to WiFi!");
  Serial.println("Network Information:");
  Serial.print("SSID: "); Serial.println(WiFi.SSID());
  Serial.print("IP Address: "); Serial.println(WiFi.localIP());
  Serial.print("Subnet Mask: "); Serial.println(WiFi.subnetMask());
  Serial.print("Gateway: "); Serial.println(WiFi.gatewayIP());
  Serial.print("RSSI: "); Serial.print(WiFi.RSSI()); Serial.println(" dBm");

  // 3. Αρχικοποίηση αισθητήρα
  if (!aht.begin()) {
    Serial.println("Failed to initialize AHT10 sensor!");
    while (1) delay(1000);
  }
  Serial.println("AHT10 sensor initialized");

  // 4. Ρύθμιση Web Server
  server.on("/", handleRoot);
  server.on("/data", handleData);
  server.begin();
  Serial.println("HTTP server started");
  Serial.println("Access the dashboard at: http://" + WiFi.localIP().toString());
}

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

Comments

Only logged in users can leave comments

petros_mpla

0 Followers

•

0 Projects

Intro

Trademarks & CopyrightsWhistleblowingDigital Services ActTerms of ServicePrivacy PolicySecurityCookie Settings

Report content