ESP 01 a webserver

Odpovědět
Cermy
Příspěvky: 15
Registrován: 01 úno 2019, 11:23

ESP 01 a webserver

Příspěvek od Cermy » 20 zář 2019, 12:04

Ahoj pomůže mi někdo zjistit jak z ESP odeslat hodnotu s 2 desetinnými místy? A jak udělat aby se hodnoty v prohlížeči automaticky aktualizovaly?
Na web mi to odesílá hezky ale pouze celá čísla bez desetin a neobnovují se sami.
Všem moc děkuji za pomoc

Kód: Vybrat vše

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"

// Uncomment one of the lines below for whatever DHT sensor type you're using!
//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

/*Put your SSID & Password*/
const char* ssid = "Barca";  // Enter SSID here
const char* password = "xxxxxxxx";  //Enter Password here

ESP8266WebServer server(80);

// DHT Sensor
uint8_t DHTPin = 2; 
               
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);                

float Temperature;
float Humidity;

 
void setup() {
  Serial.begin(115200);
  delay(10);
  
  pinMode(DHTPin, INPUT);

  dht.begin();              

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

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

void handle_OnConnect() {

 Temperature = dht.readTemperature(); // Gets the values of the temperature
  Humidity = dht.readHumidity(); // Gets the values of the humidity 
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float temperature,float humidity){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP8266 Weather Station</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP8266 Weather Station</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
//  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
 // ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}
Přílohy
ESP.PNG

MartinL
Příspěvky: 143
Registrován: 24 úno 2013, 14:13
Kontaktovat uživatele:

Re: ESP 01 a webserver

Příspěvek od MartinL » 20 zář 2019, 12:50

Pokud tam chceš desettinná místa, tak nesmíš přetypovávat proměnné, ve kterých máš hodnoty na int (celé číslo). Viz.:

Kód: Vybrat vše

ptr +=(int)temperature;
Automatické obnovování hodnot na webové stránce lze nejjednodušeji zařídit javascriptem, který bude po nějakém čase "reloadovat" stránku. Jde to i elegantněji, ale vzhledem k tomu "strašnému" kódu, bych toho asi moc nevrtal.

Cermy
Příspěvky: 15
Registrován: 01 úno 2019, 11:23

Re: ESP 01 a webserver

Příspěvek od Cermy » 21 zář 2019, 09:23

Takže jen vymažu (int)? Nebo to je složitější?
A jawascript udělám jak aby se hodnoty obnovovaly třeba po 1/2s?
Lze taky nějak udělat nějaký Řádek na korekci teploty?
Poradíš mi prosím jak to přesně upravit v tom zdrojáku?
Teprve s takovým zkoumáním začínám tak se učím :D

AlesH
Příspěvky: 323
Registrován: 25 úno 2013, 09:18

Re: ESP 01 a webserver

Příspěvek od AlesH » 21 zář 2019, 10:46

Ahoj. Ano, mělo by stačit jen vymazat to (int), protože proměnná "temperature" je už dříve definovaná jako "float" (tedy s desetinnými místy). Nejsem si ale jist, na kolik desetinných míst se to opravdu vypíše.

Automatické obnovování stránky je možno zajistit javasriptem, ale také např. meta tagem "refresh" v "SendHTML" třeba nějak takto:

Kód: Vybrat vše

...
  ptr +="<title>ESP8266 Weather Station</title>";
  ptr +="<meta http-equiv='refresh' content='5'>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
...
Takto se bude stránka automaticky obnovovat každých 5 sekund (lze to samozřejmě změnit, ale fungovat zřejmě budou jen celá čísla). V tomto provedení to ale možná bude v prohlížeči trochu problikávat (jak se bude stránka opakovaně načítat a překreslovat).

Ohledně případné korekce teploty nevím, jak je to myšleno, ale do řádku "ptr += temperature;" můžeš samozřejmě natvrdo napsat jakýkoliv matematický výraz a vypisovanou teplotu tak změnit. Např. "ptr += (temperature + 3.1);" .

Cermy
Příspěvky: 15
Registrován: 01 úno 2019, 11:23

Re: ESP 01 a webserver

Příspěvek od Cermy » 21 zář 2019, 16:46

Super děkuji vyzkouším.
A ještě takový blbý dotaz. V arduinu nahraji projekt do ESP v pohodě ale když bych chtěl vědět co je v něm nahrané nechá se to z něj i nějak vyčíst? Nebo jen znovu přehrát?

DavidO
Příspěvky: 759
Registrován: 01 kvě 2013, 21:27

Re: ESP 01 a webserver

Příspěvek od DavidO » 22 zář 2019, 09:33

Vyrábět z necelých čísel řetězce s daným počtem desetinných míst je jednoduché. Třída String má konstruktor, který v případě float a double má druhý parametr počet desetinných míst, stejně tak metoda print/println třídy Serial:
float x=1.234567;
String mojecislo = String(x,3); // v mojecislo bude "1.234"
Serial.print(x,2); // vypíše 1.23
Serial.print(x,0); // vypíše 1

samozřejmě můžeš dát rovnou číslo:
String mojecislo = String(5.6789, 2); // v mojecislo bude "5.67"
Serial.print(7.8901,2); // vypíše 7.89

DavidO
Příspěvky: 759
Registrován: 01 kvě 2013, 21:27

Re: ESP 01 a webserver

Příspěvek od DavidO » 22 zář 2019, 09:43

Cermy píše:
21 zář 2019, 16:46
Super děkuji vyzkouším.
A ještě takový blbý dotaz. V arduinu nahraji projekt do ESP v pohodě ale když bych chtěl vědět co je v něm nahrané nechá se to z něj i nějak vyčíst? Nebo jen znovu přehrát?
A proč bys to dělal?
Nicméně, i kdyby to šlo vyčíst, tak lidsky zdroják pro Arduino to nebude, vyčetl bys binárku, stroják, a tomu bys stejně nerozuměl.

Cermy
Příspěvky: 15
Registrován: 01 úno 2019, 11:23

Re: ESP 01 a webserver

Příspěvek od Cermy » 22 zář 2019, 10:05

Super díky moc ;) zase jsem o maličko chytřejší. Jak se tohle všechno naučím abych se nemusel na vše ptát? Není nějaká dobrá chytrá kniha kde bych tohle všechno zjistil?

Uživatelský avatar
fulda
Příspěvky: 830
Registrován: 04 led 2016, 17:18

Re: ESP 01 a webserver

Příspěvek od fulda » 22 zář 2019, 16:47

DavidO píše:
22 zář 2019, 09:43
Cermy píše:
21 zář 2019, 16:46
Super děkuji vyzkouším.
A ještě takový blbý dotaz. V arduinu nahraji projekt do ESP v pohodě ale když bych chtěl vědět co je v něm nahrané nechá se to z něj i nějak vyčíst? Nebo jen znovu přehrát?
A proč bys to dělal?
Nicméně, i kdyby to šlo vyčíst, tak lidsky zdroják pro Arduino to nebude, vyčetl bys binárku, stroják, a tomu bys stejně nerozuměl.
... Ale vyčíst to jde. Jen platí Davidovo: Proč by jsi to dělal?
A pokud by jsi chtěl opravdu číst ten stroják, tak je jednodušší si ho vzít v nějaké fázi překladu, kde budeš ještě schopen mu porozumět.
Za pravopisné chyby v této zprávě může moje učitelka češtiny.

Odpovědět

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 0 hostů