Differences
This shows you the differences between two versions of the page.
|
iothings:proiecte:2022sric:weather-station [2023/05/29 22:18] george.bukkosi [Software] |
iothings:proiecte:2022sric:weather-station [2023/05/29 22:21] (current) george.bukkosi |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| This project is meant to show the implementation of a simple Weather Station that outputs the data to a local webserver created using the Arduino <WiFi.h> library. | This project is meant to show the implementation of a simple Weather Station that outputs the data to a local webserver created using the Arduino <WiFi.h> library. | ||
| - | ==== Hardware ==== | + | ===== Hardware ===== |
| The components used for the project were the following: | The components used for the project were the following: | ||
| Line 125: | Line 125: | ||
| currentTime = millis(); | currentTime = millis(); | ||
| if (client.available()) { | if (client.available()) { | ||
| - | char c = client.read(); | + | ** wall of text for HTML page construction ** |
| - | Serial.write(c); | + | |
| - | header += c; | + | |
| - | if (c == '\n') { | + | |
| - | if (currentLine.length() == 0) { | + | |
| - | client.println("HTTP/1.1 200 OK"); | + | |
| - | client.println("Content-type:text/html"); | + | |
| - | client.println("Connection: close"); | + | |
| - | client.println(); | + | |
| - | client.println("<!DOCTYPE html><html>"); | + | |
| - | client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"); | + | |
| - | client.println("<link rel=\"icon\" href=\"data:,\">"); | + | |
| - | client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}"); | + | |
| - | client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }"); | + | |
| - | client.println("th { padding: 12px; background-color: #0043af; color: white; }"); | + | |
| - | client.println("tr { border: 1px solid #ddd; padding: 12px; }"); | + | |
| - | client.println("tr:hover { background-color: #bcbcbc; }"); | + | |
| - | client.println("td { border: none; padding: 12px; }"); | + | |
| - | client.println(".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }"); | + | |
| - | client.println("</style></head><body><h1>Weather station with BME280</h1>"); | + | |
| - | client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>"); | + | |
| - | client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">"); | + | |
| - | client.println(temperature_celsius); | + | |
| - | client.println(" *C</span></td></tr>"); | + | |
| - | client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">"); | + | |
| - | client.println(temperature_fahrenheit); | + | |
| - | client.println(" *F</span></td></tr>"); | + | |
| - | client.println("<tr><td>Pressure</td><td><span class=\"sensor\">"); | + | |
| - | client.println(pressure); | + | |
| - | client.println(" hPa</span></td></tr>"); | + | |
| - | client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">"); | + | |
| - | client.println(altitude); | + | |
| - | client.println(" m</span></td></tr>"); | + | |
| - | client.println(); | + | |
| - | + | ||
| - | break; | + | |
| - | } else { | + | |
| - | currentLine = ""; | + | |
| - | } | + | |
| - | } else if (c != '\r') { | + | |
| - | currentLine += c; | + | |
| - | } | + | |
| } | } | ||
| } | } | ||
