Skocz do zawartości

ESP32 i polskie ogonki ?


PowerTGS440

Pomocna odpowiedź

Ktoś wie jak rozwiązać problem z ogonkami na stronie WWW ?
urządzenie to ESP32-VROOM DEV KIT (nie mam możliwości przeniesienia strony z pamięci programu) bo project jest duży i muszę korzystać z modelu HUGE

tak wyglądają polskie ogonki na stronie i kod :

 

#include "structure.h"

extern String  Przekaznik[8];

String getPage()
{
  String page = "<html lang='pl'><head><meta http-equiv='refresh' content='60' name='viewport' content='width=device-width, initial-scale=1'/>";
  page += "<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/3.1.1/jquery.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>";
  page += "<title>E-Home Monitoring System</title></head><body>";
  page += "<div class='container-fluid'>";
  page +=   "<div class='row'>";
  page +=     "<div class='col-md-12'>";
  page +=       "<h1>E-Home Web Server</h1>";
  page +=       "<h3>Stacja pogodowa</h3>";
  page +=       "<ul class='nav nav-pills'>";
  
  page +=         "<li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           pogoda.temperatura;
  page +=           "</span> Temperatura</a>";
  
  page +=         "</li><li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           pogoda.wilgotnosc;
  page +=           "</span> Wilgotnosc</a>";
  
  page +=         "</li><li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           pogoda.cisnienie;
  page +=           "</span> Cisnienie atmosferyczne</a></li>";

  page +=         "</li><li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           pogoda.wiatr;
  page +=           "</span> Predkosc wiatru</a></li>";

  page +=         "</li><li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           pogoda.zachmurzenie;
  page +=           "</span> Zachmurzenie</a></li>";

  page +=         "</li><li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           czas.wschod_slonca;
  page +=           "</span> Wschod slonca</a></li>";

  page +=         "</li><li class='active'>";
  page +=           "<a href='#'> <span class='badge pull-right'>";
  page +=           czas.zachod_slonca;
  page +=           "</span> Zachod slonca</a></li>";
  
  page +=       "</ul>";
  
  page +=       "<table class='table'>";  
  page +=         "<thead><tr><th>Dostawca</th><th>Pomiar</th><th>Wartość</th><th>Poprzednia wartość</th></tr></thead>"; 
  page +=         "<tbody>";  
  page +=           "<tr><td>openwearhermap.org</td><td>Temperatura</td><td>"; // temperatura
  page +=             pogoda.temperatura;
  page +=             "&deg;C</td><td>";
  page +=             "-</td></tr>";
  page +=           "<tr class='active'><td>NET</td><td>Wilgotnosc</td><td>"; //wilgotnosc
  page +=             pogoda.wilgotnosc;
  page +=             "%</td><td>";
  page +=             "-</td></tr>";
  page +=           "<tr><td>NET</td><td>Cisnienie atmosferyczne</td><td>"; // cisnienie
  page +=             pogoda.cisnienie;
  page +=             "mbar</td><td>";
  page +=             "-</td></tr>";
  page +=       "</tbody></table>";
  
  page +=       "<h3>PRZEKAZNIKI</h3>";
  
  page +=       "<div class='row'>";
  
  page +=         "<div class='col-md-4'><h4 class ='text-left'>D0 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[0];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D0' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D0' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";
  
  page +=         "<div class='col-md-4'><h4 class ='text-left'>D1 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[1];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D1' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D1' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";
  
  page +=         "<div class='col-md-4'><h4 class ='text-left'>D2 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[2];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D2' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D2' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";
  
  page +=         "<div class='col-md-4'><h4 class ='text-left'>D3 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[3];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D3' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D3' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";

  page +=         "<div class='col-md-4'><h4 class ='text-left'>D4 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[4];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D4' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D4' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";

  page +=         "<div class='col-md-4'><h4 class ='text-left'>D5 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[5];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D5' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D5' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";

  page +=         "<div class='col-md-4'><h4 class ='text-left'>D6 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[6];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D6' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D6' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";

  page +=         "<div class='col-md-4'><h4 class ='text-left'>D7 ";
  page +=           "<span class='badge'>";
  page +=           Przekaznik[7];
  page +=         "</span></h4></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D7' value='1' class='btn btn-success btn-lg'>ON</button></form></div>";
  page +=         "<div class='col-md-4'><form action='/' method='POST'><button type='button submit' name='D7' value='0' class='btn btn-danger btn-lg'>OFF</button></form></div>";
  
  page +=       "</div>";
  page +=     "<br><p><a href='https://arudino-code.blogspot.com/</p>";
  page += "</div></div></div>";
  page += "</body></html>";
  return page;
}

 

Bez tytułu.png

Edytowano przez PowerTGS440
Link do komentarza
Share on other sites

Nie wiem jakiego softu używasz (serwer WWW, jest ich kilka), ale każdy pozwala zadeklarować prawidłowy content-type:

 text/html; charset=UTF-8

Albo w sekcji head umieścisz:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

lub po prostu:

 <meta charset="UTF-8">

Poza tym bez doctype to masz HTML3, a chciałbyś pewnie HTML-5, prawda?

A więc na samym początku strony zadeklaruj:

<!DOCTYPE html>

Inna sprawa, że robienie tego w ten sposób (składanie stringów) to bardzo zły pomysł...

  • Lubię! 1
Link do komentarza
Share on other sites

(edytowany)
1 godzinę temu, bjrk napisał:

Zadeklaruj stronę kodową w nagłówku strony WWW. Poza tym, raz piszesz z ogonkami, a raz bez. Bądź konsekwentny.

Raz piszę raz nie, bo nie działało - w celu testu kombinowałem. Pierdół się nie czepiajmy 🙂 już działa. <meta charset='utf-8'> 

 

1 godzinę temu, ethanak napisał:

Nie wiem jakiego softu używasz (serwer WWW, jest ich kilka), ale każdy pozwala zadeklarować prawidłowy content-type:



 text/html; charset=UTF-8

Albo w sekcji head umieścisz:



<meta http-equiv="content-type" content="text/html; charset=UTF-8">

lub po prostu:



 <meta charset="UTF-8">

Poza tym bez doctype to masz HTML3, a chciałbyś pewnie HTML-5, prawda?

A więc na samym początku strony zadeklaruj:



<!DOCTYPE html>

Inna sprawa, że robienie tego w ten sposób (składanie stringów) to bardzo zły pomysł...

Nie mam pojęcia o web, pierwszy raz coś na ESP32 ukleciłem by się wyświetliło - wodotryski mi nie potrzebne bo wolę konsolę tekstową ale skoro i tak serwer WWW musiałem wrzucić to sobie poćwiczyłem z ciekawości. Skupiam się na C i C++ dlatego zapytałem. Mi tam lotto czy to HTML3 czy HTML5. Zrobiłem jak napisałeś, dopisałem tylko to : <meta charset='utf-8'> i jest OK. Dzięki

Edytowano przez PowerTGS440
Link do komentarza
Share on other sites

Zarejestruj się lub zaloguj, aby ukryć tę reklamę.
Zarejestruj się lub zaloguj, aby ukryć tę reklamę.

jlcpcb.jpg

jlcpcb.jpg

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

6 minut temu, PowerTGS440 napisał:

Mi tam lotto czy to HTML3 czy HTML5

Ale przeglądarce niekoniecznie - bo jak potraktuje Twój kod jako html-3 to jest duża szansa że coś się nie wyświetli. A dodanie jednej linijki na początku nie boli - nawet jeśli nie masz zielonego pojęcia o webie to zapamiętaj jedno: kod strony zaczyna się od DOCTYPE a nie od <html>. Więcej nie musisz, a to niestety dość ważne.

  • Lubię! 1
Link do komentarza
Share on other sites

(edytowany)
2 godziny temu, ethanak napisał:

Ale przeglądarce niekoniecznie - bo jak potraktuje Twój kod jako html-3 to jest duża szansa że coś się nie wyświetli. A dodanie jednej linijki na początku nie boli - nawet jeśli nie masz zielonego pojęcia o webie to zapamiętaj jedno: kod strony zaczyna się od DOCTYPE a nie od <html>. Więcej nie musisz, a to niestety dość ważne.

To nie będzie żadna stacja pogody, co innego ma wyświetlać, chciałem tylko ogonki, już mam. Stację zrobiłem na przykład, by zapytać tylko.
To bardziej przemysłowe rzeczy - transport logistyka. STM'a jeszcze nie ogarniam, prościej mi na ESP32, kod jest duży, nie liczyłem linijek ale spory. Piszę dla siebie, więc sporo oszczędzam, a mi nie problem rozumieć co i jak wyświetla czy jest zapisywane na SD - ja mam to rozumieć nikt inny 🙂

Składanie STRINGÓW niekiedy jest koniecznością. Nie mogę w tym projekcie tworzyć tradycyjnych stron, bo napisałem na wstępie: że korzystam z modelu pamięci HUGE, bez systemu plików. 
Niestety projekt jest olbrzymi i potrzebuję 3Mb dla niego. W innym przypadku bym się w to nie bawił i stronę stworzył w jakim kreatorze i wgrał gdzie indziej.

Ja wiem, że można inaczej, prościej 🙂 Akurat ten ESP ma przerypane... podłączone są do niego 2 płytki Arduino-DUE, 2 inne ESP32, robi co robi, służy w sumie dla wszystkich - jako magazyn danych - kupa napisów które trzeba gdzieś wyświetlić (to je wykopuje, parsuje i wysyła) jak nie do komórki to gdzieś tam jak ktoś inny chce, jako skomplikowany parser, jako dataloger na 2 kartach SD - czasami trzeba to przerobić i też gdzieś wysłać no i jeszcze jako serwer, bo potem będzie miał jeszcze co innego 🙂 . Dla nie których takie rozwiązanie jest w ogóle nie do pojęcia, dla mnie ma, tak ma być 🙂 

Ale dzięki za radę.

 

Edytowano przez PowerTGS440
Link do komentarza
Share on other sites

11 minut temu, PowerTGS440 napisał:

Nie mogę w tym projekcie tworzyć tradycyjnych stron, bo napisałem na wstępie: że korzystam z modelu pamięci HUGE, bez systemu plików. 

A co to ma do rzeczy?

Przecież treści mogą sobie siedzieć w PROGMEM, a jeśli używasz ESPAsyncWebServer to po prostu printujesz sobie fragmenty przez response->print czy wygodniej przez response->printf.

Przy okazji: nie musisz dodawać każdej linijki do stringa, możesz np.:
 

data += "pierwsza linia\n"
	"druga linia\n"
	"trzecia linia\n";

albo w ogóle użyć raw string:
 

data += R"UNIQ(
pierwsza linia
druga linia
trzecia linia
)UNIQ";

ESP ma co prawda dość dużo pamięci, ale przy takiej dzikiej fragmentacji w pewnym momencie może jej zabraknąć.

Poza tym w Twoim przypadku te linijki siedzą sobie w ramie zamiast grzecznie czekać na flashu i też trochę zajmują.

No, ale to Twoja aplikacja, ja tylko podsuwam delikatną sugestię gdzie szukać, jak się wykrzaczy bez powodu.

 

Link do komentarza
Share on other sites

(edytowany)

Ja już to przerobiłem, bo wkurzały mnie te dodatki do przeglądarki które miały odświeżać, jedna odświeżała samą siebie, drugą tylko interesowała moja historia, kolejna działała ale nie usuwała cache.  Jedna nocka i nie mam strony w programie, zrobiłem ją normalnie w pamięci SPIFFS z bootsrap, tylko dane do aktualizacji wysyłam i hula. Pug'a sobie zrobiłem, jak coś dodać to parę linijek, generator i jest jak powinno.

Edytowano przez PowerTGS440
Link do komentarza
Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Jeśli masz już konto to zaloguj się teraz, aby opublikować wiadomość jako Ty. Możesz też napisać teraz i zarejestrować się później.
Uwaga: wgrywanie zdjęć i załączników dostępne jest po zalogowaniu!

Anonim
Dołącz do dyskusji! Kliknij i zacznij pisać...

×   Wklejony jako tekst z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.

×
×
  • Utwórz nowe...

Ważne informacje

Ta strona używa ciasteczek (cookies), dzięki którym może działać lepiej. Więcej na ten temat znajdziesz w Polityce Prywatności.