ESP32 jako webový server

Všetko čo sa týka mikropočítačov + Sekcia Arduino

Moderátori: psichac, Moderátori

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

ESP32 jako webový server

Príspevok od používateľa Tommyk » 09 Mar 2019, 20:28

Ahoj, v programování ESP a arduina jsem sice začátečník, ale už jsem si pár funkčních prográmků napsal takže prosím mějte trpělivost :D .

Chtěl bych si udělat z ESPčka meteostanici a webový server.
Mělo by to fungovat asi takto:
K ESP bych připojil čidla na měření teploty, tlaku, vlhkosti, srážek a podobně. Zde problém není.
Teď, ale ta složitější část. Data bych chtěl zapisovat do webové stránky uložené v ESP (ulozit do flash pameti jako html soubor).

Vytvořil jsem si web se 3mi stránkami a po nakopírování do ESP se mi vždy zobrazí jen hlavní strana. Pokud kliknu na odkaz pro zobrazení další strany tak se mi zobrazí jen prázdná stránka v prohlížeči. Už nad tím sedím pár dní, poradí někdo jak dál?

Všem díky za pomoc
0
Když nepomůže hrubá síla, pomůže ještě hrubší.

Používateľov profilový obrázok
AlbiDartanan
Ultimate člen
Ultimate člen
Príspevky: 1899
Dátum registrácie: 09 Júl 2009, 00:00
Vek: 39

Re: ESP32 jako webový server

Príspevok od používateľa AlbiDartanan » 09 Mar 2019, 21:42

Skúšal si to všetko dať na hlavnú stránku ?
Môže byť viac chýb , od nejakej chyby v programe, cez chybu v odosielaní , prijímaní na stránke alebo rovno aj toho kódu na stránke ....
0
"Possible is that which can be done immediately, impossible that which takes a little longer..."
intitle:"index of " XXX YYY -html -htm -php -asp -cf -gsp
Mamont. Largest FTP Search Engine = http://www.mmnt.ru/int/
http://www.mmnt.net/

Používateľov profilový obrázok
jenda23
Ultimate člen
Ultimate člen
Príspevky: 5779
Dátum registrácie: 27 Jún 2008, 00:00
Bydlisko: Česká Třebová
Vek: 33
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa jenda23 » 10 Mar 2019, 00:05

zkus zobrazit v konzoli prohlížeče zdrojový data, jestli server vůbec něco pošle. Pak nezbejvá než po seriový lince vypisovat data co lifruje program do rutiny pro odesílání ze serveru do prohlížeče.
0
Lokomotiva je jako žena.Je jich stovky typů a každej z nich je jinej,každá z nich je svým způsobem krásná.Když jí chceš aspoň trochu poznat jsou to stovky hodin času.Nejde s ní být aniž bys jí bezmezně miloval,je nemožný jí znát do poslední skulinky

Používateľov profilový obrázok
roboulbricht
Stály člen
Stály člen
Príspevky: 156
Dátum registrácie: 07 Jan 2015, 12:01
Bydlisko: Banská Bystrica
Vek: 54
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa roboulbricht » 10 Mar 2019, 07:22

Pre ESP32 aj pre ESP8266 sa HTTP požiadavky spracúvajú prakticky identicky. V HTML sa hyperlinky robia ako
<a href="/">root</a>
<a href="/teplota">teplota</a>
<a href="/tlak">tlak</a>
A v kóde musí byť vždy spracovanie požiadavky urobené takto.
server.on("/", handleRoot);
server.on("/teplota", handleTeplota);
server.on("/tlak", handleTlak);
Mierne som to upravil podľa vzorového príkladu pre ESP8266.
https://github.com/RoboUlbricht/arduino ... 6_good.ino
0

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa Tommyk » 10 Mar 2019, 21:26

Děkuji za pomoc, chybka byla trošku někde jinde ale povedlo se :))
0
Když nepomůže hrubá síla, pomůže ještě hrubší.

Používateľov profilový obrázok
jirka.jirka.
Ultimate člen
Ultimate člen
Príspevky: 1537
Dátum registrácie: 17 Okt 2008, 00:00
Bydlisko: Uherské Hradiště
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa jirka.jirka. » 10 Mar 2019, 21:30

Určitě bys ohledně chyby mohl být sdílnější. Někdo třeba bude hledat zrovna to tvoje esp32 web server a uvidí jenom, nejde a pak jde bez popisu co tomu bylo.
0

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa Tommyk » 10 Mar 2019, 21:38

jirka.jirka. napísal:Určitě bys ohledně chyby mohl být sdílnější. Někdo třeba bude hledat zrovna to tvoje esp32 web server a uvidí jenom, nejde a pak jde bez popisu co tomu bylo.
server.on("/teplota.html", HTTP_GET,[](AsyncWebServerRequest *request){
request->send(SPIFFS, "/teplota.html", String(), false);

vždy je potřeba v tomto příkazu mít zadanou i příponu jak v prvním řádku tak i v druhém
0
Když nepomůže hrubá síla, pomůže ještě hrubší.

lacosebosik
Nový člen
Nový člen
Príspevky: 78
Dátum registrácie: 13 Aug 2017, 10:21
Bydlisko: Revúca

Re: ESP32 jako webový server

Príspevok od používateľa lacosebosik » 10 Mar 2019, 23:04

tu je to vyriešené ako posielat dáta na web
0

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa Tommyk » 13 Mar 2019, 19:49

Tak webové stránky jsem rozchodil, ale ted trochu bojuji s výpisem dat do webové stránky.. Zkouším do ní vypsat teplotu z DHTčka.. Prohledal jsem XY různých webů ale nemůžu to rozchodit, napadá někoho něco? :pain:
Přikládám program a jednoduchou webovou stránku.. nelekněte se úpravy je to vše rozpracované a v začátcích.

Kód: Vybrať všetko

#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <WiFi.h>
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h"
#include <dht11.h>

dht11 cidlo;

int dht11pin = 4;
int teplota;

const char* ssid = "TP-LINK";
const char* password = "31553155aa";
const char* host = "ESP32Meteo";

AsyncWebServer server(80);

void setup(){

    Serial.begin(115200);
    WiFi.begin(ssid, password);
   
    Serial.println();
    Serial.println();
    Serial.println();
    
  while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.println(".");
    }   

    Serial.println("Pripojeno");
    Serial.println();
    Serial.print("SSID:");
    Serial.println(WiFi.SSID());
    Serial.print("Sila signalu:");
    Serial.println(WiFi.RSSI());
    Serial.print("Status:");
    Serial.println(WiFi.status());
    Serial.print("IP:");
    Serial.println(WiFi.localIP());
    Serial.print("Maska:");
    Serial.println(WiFi.subnetMask());
    Serial.print("Brana:");
    Serial.println(WiFi.gatewayIP());
    Serial.print("MAC:");
    Serial.println(WiFi.macAddress());

if(!SPIFFS.begin(true)){
    Serial.println("Chyba SPIFFS");
    return;
  }

   // Route for root
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/", String(), false);
  Serial.println("root");
  });

 // Route for index
  server.on("/index.html", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/index.html", String(), false);
  Serial.println("click index");
  });

  // Route for teploty
  server.on("/teplota.html", HTTP_GET,[](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/teplota.html", String(), false);
    Serial.println("click teplota");
  });

  // Route for tlak
  server.on("/tlak.html", HTTP_GET,[](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/tlak.html", String(), false);
    Serial.println("click tlak");
  });

    // Route for info
  server.on("/info.html", HTTP_GET,[](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/info.html", String(), false);
    Serial.println("click info");
  });

    // Route for style.css
  server.on("/style.css", HTTP_GET,[](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/style.css", "text/css");
   
  });  

   // Start server
  server.begin();
  
}

void loop(){

cidlo.read(dht11pin);
teplota = cidlo.temperature;
Serial.print(teplota);

  delay(5000);
 
}

Kód: Vybrať všetko

<!DOCTYPE html>
<html>
<head>
  <title>ESP32 Meteostanice</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

  <body>
<table width="760" align="center" border="1" cellspacing="0" cellpadding="7" style="border-collapse: collapse">
 <tr>
  <td valign="top" colspan="3">
 <center><h1>Meteostanice</h1></center>
  <br>
  <br>
  </td>
 </tr>
 <tr>
  <td valign="top" rowspan="2" width="150">
  <center><h3>Menu</h3></center>
  <br>   <a href="index.html">Domu</a>
  <br>   <a href="teplota.html"">Teplota</a>
  <br>   <a href="tlak.html"">Tlak</a>
  <br>   <a href="info.html"">Informace</a>
  <br>
  </td>
  <td valign="top" width="500">
  Content
  <br>
  <br>                <center><h1>Stranka teplota</h1></center>
  <br>                          %teplota%°C
  </td>
  <td valign="top" rowspan="2" width="110">
  Pravy sloupec
  <br>
  <br>
  <br>
  <br>
  <br>
  </td>
 </tr>
  <tr>
  <td valign="top">
  Spodek
  <br>
  </td>
 </tr>
</table>

  </body>
</html>
0
Naposledy upravil/-a Tommyk v 13 Mar 2019, 20:19, upravené celkom 1 krát.
Když nepomůže hrubá síla, pomůže ještě hrubší.

dan21
Ultimate člen
Ultimate člen
Príspevky: 3016
Dátum registrácie: 11 Apr 2007, 00:00
Bydlisko: ZA

Re: ESP32 jako webový server

Príspevok od používateľa dan21 » 13 Mar 2019, 19:58

Skus si pozriet tento projekt
https://github.com/Edzelf/Esp-radio
0

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa Tommyk » 14 Mar 2019, 06:35

dan:21 koukal jsem se ale asi nic co by mi pomohlo :thanks:
0
Když nepomůže hrubá síla, pomůže ještě hrubší.

dan21
Ultimate člen
Ultimate člen
Príspevky: 3016
Dátum registrácie: 11 Apr 2007, 00:00
Bydlisko: ZA

Re: ESP32 jako webový server

Príspevok od používateľa dan21 » 14 Mar 2019, 08:11

Pozri si funkcie analyzeCmd a handleCmd. To by ti mohlo pomoct
0

pocitujlasku
Ultimate člen
Ultimate člen
Príspevky: 6200
Dátum registrácie: 20 Júl 2007, 00:00
Vek: 41

Re: ESP32 jako webový server

Príspevok od používateľa pocitujlasku » 14 Mar 2019, 08:53

prva vec, ktora sa mi nepaci je ten delay v loope - ono to zasekne aj stranku.
lepsie je pouzit

Kód: Vybrať všetko

time_t t=now(); //nastav t= aktualny datum cas

void loop() {
  server.handleClient(); 
  if ((t+5)<now()) { //ak t+5 sekund <aktualny - teda preslo viac ako 5 sec.
    t=now(); //aktualizuj premennu
    cidlo.read(dht11pin);
    teplota = cidlo.temperature;
    Serial.print(teplota); //odmeraj, vypis teplotu
  }
  delay(10);
}
takto mozes riesit pocas tych 5 sekund aj ine veci (napr. obsluhovat web server) a nebude program blokovany cakanim. a meranie bude kazdych 5 sec

samotny vypis bud urobis replace %teplota% na aktualnu hodnotu, alebo ako to robim ja:

Kód: Vybrať všetko

void setup() {
        server.on("/", handleGenericWeb);
	server.on("/config", handleConfigWeb);
	server.on("/api", handleApiWeb);
	server.begin();
}

void handleConfigWeb() {
	String webPage ="<!DOCTYPE html><html><head>";
	webPage+=" <style>";
	webPage+=" body {}";
	webPage+=" table { border-collapse: collapse; border: 1px solid black; }";
	webPage+=" input { border: 0px; border-bottom: 1px solid black; }";
	webPage+=" th { background-color: black; color: white; }";
	webPage+=" td { padding: 3px; border: 0px; }";
	webPage+=" .r { text-align: right; }";
	webPage+=" .btn { width: 100%; height: 30px; background-color: red; color: white; font-weight: bold; border: 0px;}";
	webPage+=" </style>";
	webPage+=" <meta charset='utf-8' /><title>Main Config</title></head>";
	webPage+=" <body><form action='' method='post'><table>";
	webPage+=" <tr><th colspan='2'>Global Settings</th></tr>";
	webPage+=" <tr><td class='r'>SSID</td><td><input type='text' maxlength='20' name='fssid' value='"+(String)fssid+"'></td></tr>";
	webPage+=" <tr><td>Password</td><td><input type='password' maxlength='20' name='fpassword' value=''></td></tr>";
	webPage+=" <tr><td colspan='2'><input class='btn' type='submit' name='fsavedata' value='Save Config'></td></tr>";
	webPage+=" </table></form></body></html>";

	if (server.hasArg("fsavedata")) {
		server.arg("fssid");
		server.arg("fpassword");
		server.send(200, “text/html”, webPageSaved);
	} else {
		server.send(200, “text/html”, webPage);
	}
}
skladam stranku priamo s hodnotou
fssid: to je moja premenna s nazvom wifi siete
fpassword: heslo na wifi
fsavedata: - tlacidlo, ktore hovori, ze chce ulozit zmeny

ak fsavedata nie je prazdne - server.arg(...) tak viem, ze dal odoslat data. hodnoty z webu su v tych premennych server.arg("fssid")
ja to mam tak, ze to spracujem a zobrazim stranku s textom ulozene a automatickym presmerovanim na uvod (webPageSaved).
0
Jedním z největších projevů nedůvěry v Boha je hromosvod na kostele.

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa Tommyk » 14 Mar 2019, 18:45

díky za odpověď... o tom delay vím, je to tam schválně, protože jsem to psal rychle a na zkoušku, aby mi to nezasíralo konzoli xy krát za sekundu ale jen jednou za 5 sekund..

no a k tomu replace %teplota% se právě potřebuji nějak dostat.. chci se vyhnout těm šíleným webovým stránkám v samotném kódu a mít web bud ve flash paměti nebo na SD kartě a pořád se mi to nějak nedaří, jak čumím do těch kódů tak jsem z toho už blbej
0
Když nepomůže hrubá síla, pomůže ještě hrubší.

dan21
Ultimate člen
Ultimate člen
Príspevky: 3016
Dátum registrácie: 11 Apr 2007, 00:00
Bydlisko: ZA

Re: ESP32 jako webový server

Príspevok od používateľa dan21 » 14 Mar 2019, 19:31

Presne takto (kody web stranok v h suboroch) pouziva ten projekt co som dal linku. Cez Ajax posiela request a dostava response.....
0

pocitujlasku
Ultimate člen
Ultimate člen
Príspevky: 6200
Dátum registrácie: 20 Júl 2007, 00:00
Vek: 41

Re: ESP32 jako webový server

Príspevok od používateľa pocitujlasku » 15 Mar 2019, 06:53

alebo tie stranky urobit cez ajax, kde si bude js doslova pytat co chce a odpoved zobrazi v prislusnom okienku.
Lenze to by som pouzil cisty ajax, ale arduinista tam hodi jquery :-) osobne pri takychto primitivnych strankach nenavidim js, a este ked tam niekto pribali jquery, alebo nebodaj vacsi framework aby zobrazil teplotu, tak ma ide porazit.
PS: a zbytocne to vytazuje ten mcu. ja idem cestou normalny webserver (tam nech je aj wordpress) a modul by nemal web, ale len api, cez ktore vracia udaje webu, pripadne by na pozadi bezal cron a synchronizoval raz za cas, aby sa nepytal pri kazdom requeste.
lenze to je uz o navrhu celeho zariadenia. web v mcu mam len na nudzove nastavenie, pripadne na manualnu kontrolu ci zije a ci funguje tak ako ma.
0
Jedním z největších projevů nedůvěry v Boha je hromosvod na kostele.

Používateľov profilový obrázok
roboulbricht
Stály člen
Stály člen
Príspevky: 156
Dátum registrácie: 07 Jan 2015, 12:01
Bydlisko: Banská Bystrica
Vek: 54
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa roboulbricht » 15 Mar 2019, 13:01

Tommyk, pre teba by mohlo byť riešenie presunúť celú logiku zobrazenia do javascriptu. Dnes sa to dá pomerne jednoducho riešiť a pre prehliadač v počítači alebo mobile to nepredstavuje žiadnu záťaž. V ESP32 si necháš v SPIFFS tú HTML stránku a pridáš tam ešte jeden javascript s logikou. A pridáš si ešte jeden endpoint na svoj HTTP server v ESP32, ktorý bude dodávať iba výsledok samotnej teploty (ideálne ako JSON, ale pokojne môžeš v tomto prípade posielať obyčajný text). Nič iné tam mať nebudeš a všetky ostatné javascripty a CSS potiahneš priamo z Internetu.

Napríklad takto by sa to dalo spraviť pomocou AngularJS a Bootstrap, čo ti vyrieši všetky problémy so zobrazovaním na hocijakom zariadení a nakóduješ to pomerne ľahko. Príklad je síce s backendom v NodeJS, ale princíp je stále rovnaký.

Najprv úprava HTML stránky. Hlavičky odkazujú na externé zdroje z Internetu. Iba posledný javascript máš na zariadení.
https://github.com/RoboUlbricht/arduino ... index.html

Kód: Vybrať všetko

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="sladkovic.js"></script>
V tele stránky sa premenné zapisujú v takomto formáte.

Kód: Vybrať všetko

<div class="row">
  <div class="col-sm-12">
    <p>Verš {{verse}}/{{maxverse}}</p>
    <pre>{{text}}</pre>
  </div>
</div>
K tomu je logika v javascripte. Nedám to sem celé, iba časť, kde sa robí HTTP požiadavka smerom na tvoje zariadenie.
https://github.com/RoboUlbricht/arduino ... adkovic.js

Kód: Vybrať všetko

  function updateText() {
    $http.get('/marina?verse=' + $scope.verse)
      .then(function(response) {
        console.log(response);
        $scope.text = response.data;
      }, function(error) {
        console.log(error);
      });
  }
A v ESP32 musíš obslúžiť iba tieto požiadavky.
  • / - Dodáš zo SPIFFS to čo je tvoja HTML stránka
  • /javascript k HTML - Dodáš zo SPIFFS. Tam si upravíš AngularJS aplikáciu podľa tvojich potrieb
  • /teplota - Dodáš odpoveď s konkrétnou teplotou
A to je všetko, o zvyšok sa postará AngularJS. Výhoda je aj v tom, že sa to ľahko ladí, lebo to môžeš ladiť mimo ESP32 len tak, že si v prehliadači otvoríš tú stránku z adresára, kde si to programuješ.

https://github.com/RoboUlbricht/arduino ... kovic_demo
0

Tommyk
Stály člen
Stály člen
Príspevky: 174
Dátum registrácie: 26 Jan 2011, 00:00
Bydlisko: Troubky
Vek: 30
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa Tommyk » 15 Mar 2019, 19:38

děkuji vám pánové za snahu, ale zjišťuji, že skoro nikdo neumí odpovědět na otázku a každý jen přemýšlí jak by to šlo nebo jak se mu to líbí...
Defakto mi pro mé účely stačí jen tohle....
Dosadit do webové stránky hodnotu a nazdar...

Kód: Vybrať všetko

String processor(const String& var){
 if(var == "teplota"){
cidlo.read(dht11pin);
teplota = cidlo.temperature;
  return teplota;
  }
  return String();
}
0
Když nepomůže hrubá síla, pomůže ještě hrubší.

Používateľov profilový obrázok
roboulbricht
Stály člen
Stály člen
Príspevky: 156
Dátum registrácie: 07 Jan 2015, 12:01
Bydlisko: Banská Bystrica
Vek: 54
Kontaktovať používateľa:

Re: ESP32 jako webový server

Príspevok od používateľa roboulbricht » 15 Mar 2019, 21:45

Ono to z tvojich otázok nie je úplne jasné. Chceš načítať súbor zo SPIFFS do stringu, tam urobiť replace a to poslať ako odpoveď? Takto nejako by sa to malo písať. Napísal som ti to len z hlavy, takže tam môže byť nejaká chybička.

Kód: Vybrať všetko

File f = SPIFFS.open("/xxx.html", "r");
if(f) {
  String s = f.readString();
  f.close();
}

Kód: Vybrať všetko

String sres = s.replace("%teplota%", "15.45");
0

pocitujlasku
Ultimate člen
Ultimate člen
Príspevky: 6200
Dátum registrácie: 20 Júl 2007, 00:00
Vek: 41

Re: ESP32 jako webový server

Príspevok od používateľa pocitujlasku » 16 Mar 2019, 05:58

ide o to, ze ti chceme naznacit, ze obycajny replace nie je najlepsie riesenie. a tak, ako to mas teraz aj s tym delay je to nie velmi stastne riesenie. Radsej to uz od zaciatku urob dobre, ako potom patrat preco ti to blbne. Ja svoje projekty tiez x-krat prerobim, pripadne zahodim a skusim nanovo. o tom je vyvoj.
PS: pocitas s tym, ze ked si teraz dvaja daju zobrazit stranku sucasne, tak sa ti to moze seknut na zistovani teploty?
0
Jedním z největších projevů nedůvěry v Boha je hromosvod na kostele.

Napísať odpoveď
  • Podobné témy
    Odpovedí
    Zobrazení
    Posledný príspevok