ESP8266 Output sensor data on website

 

Yesterday we showed how easy our ESP8266 works with the MAX6675 temperator sensor.

Today we want to extend the Sketch a little to take advantage of the WiFi capability of the module.

For this purpose, we include the library "ESP8266WiFi". This takes over the login to an existing WLAN and takes over the sending and receiving of the data to the client.

Using "WiFiServer server(80);" we start a server that runs on port 80.

 

 

#include <ESP8266WiFi.H>
#include <max6675.H>
Const Char* Ssid = "Wlan Name (SSID)";
Const Char* Password = "Wlan Key";

Int thermoDO = 12;
Int thermoCS = 13;
Int thermoCLK = 14;

WiFiServer Server(80); We set up the web server on port 80

MAX6675 thermocouple(thermoCLK, thermoCS, thermoDO); We set up the temperature sensor 

Void Setup()
{   Serial.Begin(115200);   Serial.println();   Serial.Printf("Connect to %s ", Ssid);   Wifi.Begin(Ssid, Password); Attempts to connect name and key with Wi-Fi   while (Wifi.Status() != WL_CONNECTED)   {     Delay(500);     Serial.Print(".");   }   Serial.println("Connected");   Server.Begin();   Serial.Printf("Web server started, open %s in a web browser", Wifi.localIP().Tostring().c_str());
}

Generate the contents of the female page
String prepareHtmlPage()
{   String Htmlpage =      String("HTTP/1.1 200 OK"") +             "Content-Type: text/html +             "Connection: close-r-n" +  The connection is closed after the transfer             "Refresh: 5-r"n" +  Automatically reload every 5 seconds             "A.R." +             "<! DOCTYPE HTML>" +             "<html>" +             "Temperature in &deg; C: " + String(thermocouple.readCelsius()) + Output of temperature             "</html>" +             "A.R.";   Return Htmlpage;
}

Void Loop()
{   WiFiClient Client = Server.available();   waiting for connection from the client (web browser)   If (Client)   {     Serial.println("[Client Has Connected]");     while (Client.Connected())     {       Read in line what the client (web browser) asks for       If (Client.available())       {         String Line = Client.readStringUntil('A'r');         Serial.Print(Line);         wait until the end of the request (=empty line)         If (Line.length() == 1 && Line[0] == 'n')         {           Client.println(prepareHtmlPage()); Output response           Break;         }       }     }     Delay(1000); give the browser time to receive the response     Close the connection:     Client.Stop();     Serial.println("[Client Disconnected]");     Serial.Print("C = ");      Serial.println(thermocouple.readCelsius());     Delay(10);   }
}

 

The output of the temperature in the serial monitor is only for troubleshooting. On the Serial Monitor we now see:

Serial output

 

The output in the browser then looks like this:

 Browser View

 

If you're a little concerned with the basics of HTML (I recommend looking at https://selfhtml.org/), you can customize the look and content of the page in the prepareHtmlPage() section. 

Then multiple sensor data can also be output on one page.

The ESP8266 can act as a web server as well as from a client. The microcontroller thus offers many new solutions and enables exciting new projects at a reasonable price.

 

 

Esp-8266Projekte für fortgeschritteneSensorsSmart home

10 comments

Dimitrj Dirkes

Dimitrj Dirkes

Wie kann ich die temperatrur in einer anderen farbe und Größe ausgeben auf meinem webserver

rolf

rolf

Wie lege ich die IP Adresse des Webservers fest?

Weblint

Weblint

Gibt es eine reconnect Prozedur? Wenn ich den esp32 in einer anderen WiFi Umgebung einsetzen möchte soll sich der Bereich des neuen WLAN neu einrichten lassen. Gibt es schon so eine Routine?

Vielen Dank und frohes Fest

albin

albin

Sie schreiben “Gestern haben wir gezeigt wie einfach unser ESP8266 mit dem MAX6675-Temperatorsensor zusammenarbeitet.” Finde leider den ersten Teil von Gestern nicht auf Ihrer Page. Bitte um Link.

Ulrich Klaas

Ulrich Klaas

Hallo,
das ist doch echt nett hier das in diesem Block Programmierbeispiele gezeigt werden.
Aber programmieren Lernen sollte man schon selber oder sich in einschlägigen
Foren Rat holen.

C oder C++ lernen ist wirklich keine Zauberei.
Heute muss immer alles vorgekocht werden.
Ulli

4711engel

4711engel

Ich betreibe in Berlin eine von vielen Feinstaub-Sensor-Messstationene des “ESP-OK-LAB”.
Diese Station misst die Feinstaub-Belastung und liefert die Daten ins Internet, wo sie von einem Anbieter statistisch aufbereitet zur Verfügung gestellt wird.
Z.B. URL: http://www.madavi.de/sensor/graph.php?sensor=esp8266-306639-sds011

Da ich nicht immer mein Handy nutzen will, um mir die Auswertung zu laden, würde ich die Daten gerne mittels ESP8266 und einem ILI9341 TFT auf dem TFT automatisch alle Minute anzeigen lassen.
Z.B. die Grafik: http://www.madavi.de/sensor/images/sensor-esp8266-306639-sds011-1-day.png

Wie kann ich dieses realisieren? Ich bin leider kein großer Programmierer.

Bernd

Bernd

Hi,
habe den Quelltext unverändert in die Arduino IDE eingefügt und mit der ESP8266 Einstellung in den ESP geladen. Die Ausgaben im seriellen Monitor sind fast genauso wie oben gezeigt. Nur die Reihung ist verändert. Auch die Temperatur wird angezeigt. Rufe ich aber die im seriellen Monitor aufgeführte Adresse mit einem Explorer auf, erhalte ich eine Fehlermeldung. Die Adresse stimmt, denn im Router sehe ich den ESP genau unter dieser Adresse. Ich habe die Seite mit Firefox, Edge und dem alten Internetexplorer aufgerufen. Alle 3 können die Seite nicht aufbauen. Woran kann das liegen?

Hoschy

Hoschy

In Zeile 28 steht: " öffnen Sie %s in einem Webbrowser\n", WiFi.localIP "
das %s bezieht sich auf das Wifi.localIP, das ist die IP des webservers, des arduinos / mcu oder ähnliches wo die Webseite zum anzeigen drauf läuft.

Klaus

Klaus

Moin,
ein Anfänger sucht in selfhtml.org den Abschnit prepareHtmlPage – wünsche ein wenig mehr Hilfe.

michael

michael

Bin leider noch Anfänger:
Was bedeutet das Zeichen “%s” in der Zeile 28?

Mit was für einer Adresse rufe ich im Broser die Seite auf?

Leave a comment

All comments are moderated before being published

Recommended blog posts

  1. Install ESP32 now from the board manager
  2. Lüftersteuerung Raspberry Pi
  3. Arduino IDE - Programmieren für Einsteiger - Teil 1
  4. ESP32 - das Multitalent
  5. OTA - Over the Air - ESP programming via WLAN