В предыдущей статье был рассмотрен вариант создания Web-сервера на ESP8266. В этой заметке-дополнении описан тот же сервер, но с некоторыми «украшательствами» странички…

Для «украшения» использованы приемы Google Charts уже рассмотренные ранее.

Для украшения Web-сервера, в дополнение к описанным ранее «ключам», добавлен ключик «/g«. При обращении к серверу с таким параметром вместо текстовой информации о температуре и влажности выдается графическое изображение термометра и гигрометра с текущими значениями температуры и влажности.
Для достижения «красоты» используются скрипты с https://www.google.com/jsapi. Поэтому скетч будет работать только в сети, где есть доступ к интернету. Использована функция визуализации Gauge.

Схема «Web-сервера» прежняя:
Текст скетча — ниже:

/* DHTServer - ESP8266 Webserver with a DHT sensor as an input
   Based on ESP8266Webserver, DHTexample, and BlinkWithoutDelay (thank you)
   Version 1.0  5/3/2014  Version 1.0   Mike Barela for Adafruit Industries
   ну и Пахомов А.В. руку приложил...
*/
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
#define DHTTYPE DHT11
#define DHTPIN  2
 
const char* ssid     = "TP-LINK_POCKET_3020_DDE1A4";  //сеть должна быть Ваша
const char* password = "12345678";                    //тут тоже Ваш ключ

ESP8266WebServer server(80);
 
// Initialize DHT sensor 
// This is for the ESP8266 processor on ESP-01 
DHT dht(DHTPIN, DHTTYPE, 11); // 11 works fine for ESP8266
 
float humidity, temp_f;  // Values read from sensor
String webString="";     // String to display
// Generally, you should use "unsigned long" for variables that hold time
unsigned long previousMillis = 0;        // will store last temp was read
const long interval = 2000;              // interval at which to read sensor
 
void handle_root() {
  server.send(200, "text/html", "Hello from the weather esp8266, read from /temp or /humidity");
  delay(100);
}

void gettemperature() {
  // Wait at least 2 seconds seconds between measurements.
  // if the difference between the current time and last time you read
  // the sensor is bigger than the interval you set, read the sensor
  // Works better than delay for things happening elsewhere also
  unsigned long currentMillis = millis();
 
  if(currentMillis - previousMillis >= interval) {
    // save the last time you read the sensor 
    previousMillis = currentMillis;   
 
    // Reading temperature for humidity takes about 250 milliseconds!
    // Sensor readings may also be up to 2 seconds 'old' (it's a very slow sensor)
    humidity = dht.readHumidity();          // Read humidity (percent)
 //   temp_f = dht.readTemperature(true);     // Read temperature as Fahrenheit
    temp_f = dht.readTemperature(false);     // Read temperature as Celcius
    // Check if any reads failed and exit early (to try again).
    if (isnan(humidity) || isnan(temp_f)) {
      Serial.println("Failed to read from DHT sensor!");
      return;
    }
  }
}

void setstringtoweb() {
  webString = ""; 
  webString += "<!DOCTYPE HTML> \n";
//  webString += "HTTP/1.1 200 OK \n";
//  webString += "Content-Type: text/html \n";
//  webString += "Connection: close \n";  // the connection will be closed after completion of the response
//  webString += "Refresh: 10 \n";  // refresh the page automatically every 10 sec
//  webString += "<!DOCTYPE HTML> \n";

webString += "<html><head> \n";
webString += "<script src='https://www.google.com/jsapi'></script><script> \n";
webString += "google.load('visualization','1',{packages:['gauge']});\n";
webString += "google.setOnLoadCallback(drawChart);\n";
webString += "google.setOnLoadCallback(drawChart2);\n";
webString += "function drawChart() {\n";
webString += "var data = google.visualization.arrayToDataTable([";
webString += "['Label','Value']"; 
webString += ",['Temperature, C',"+String((int)temp_f)+"]]); \n";
webString += "var options = {max:40,width:800,height:240,redFrom:35,redTo:40,";
webString += "yellowFrom:28,yellowTo:35,greenFrom:18,greenTo:28,minorTicks:5}; \n";
webString += "var chart = new google.visualization.Gauge(document.getElementById('oil')); \n";
webString += "chart.draw(data,options);}\n";

webString += "function drawChart2() {\n";
webString += "var data = google.visualization.arrayToDataTable([";
webString += "['Label','Value']"; 
webString += ",['Humidity, %',"+String((int)humidity)+"]]); \n";
webString += "var options = {width:800,height:240,redFrom:0,redTo:15,";
webString += "yellowFrom:15,yellowTo:30,greenFrom:30,greenTo:60,minorTicks:5}; \n";
webString += "var chart = new google.visualization.Gauge(document.getElementById('oil2')); \n";
webString += "chart.draw(data,options);} \n </script></head><body> \n";
webString += "<div id='oil' style='width:800px;height:240px;'></div>\n";
webString += "<div id='oil2' style='width:800px;height:240px;'></div></body></html>\n";

server.send(200, "text/html", webString);            // send to someones browser when asked
}
 
void setup(void)
{
  // You can open the Arduino IDE Serial Monitor window to see what the code is doing
  Serial.begin(115200);  // Serial connection from ESP-01 via 3.3v console cable
  dht.begin();           // initialize temperature sensor
 
  // Connect to WiFi network
  WiFi.begin(ssid, password);
  Serial.print("\n\r \n\rWorking to connect");
 
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("DHT Weather Reading Server");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
   
  server.on("/", handle_root);
  
  server.on("/temp", [](){  // if you add this subdirectory to your webserver call, you get text below :)
    gettemperature();       // read sensor
    webString="Temperature: "+String((int)temp_f)+" C";   // Arduino has a hard time with float to string
    server.send(200, "text/html", webString);            // send to someones browser when asked
  });
 
  server.on("/p", [](){  // if you add this subdirectory to your webserver call, you get text below :)
    gettemperature();       // read sensor
    webString = "Temperature: "+String((int)temp_f)+" C";   // Arduino has a hard time with float to string
    webString += "       Humidity: "+String((int)humidity)+"%";
    server.send(200, "text/html", webString);            // send to someones browser when asked
  });
 
  server.on("/g", [](){  // ключик для вывода графической информации
    gettemperature();       // read sensor
    setstringtoweb();       //выводим картинку
  });
 
  server.on("/humidity", [](){  // if you add this subdirectory to your webserver call, you get text below :)
    gettemperature();           // read sensor
    webString="Humidity: "+String((int)humidity)+"%";
    server.send(200, "text/html", webString);               // send to someones browser when asked
  });
  
  server.begin();
  Serial.println("HTTP server started");
}
 
void loop(void)
{
  server.handleClient();
} 
 

Пример картинки, получаемой с Web-сервера:

… интересное дополнение: только Internet Explorer смог изобразить картинку(!), Google Chrome — «не понимает» полученную информацию и отображает принятое как текст 🙁  (из-за указания   server.send(200, «text/plain», webString);).

PS. Текст скетча по совету  iura исправлен, теперь и Chrome должен рисовать нормально…