ESP32: website Buttons um-designen

HaWe · 21.06.2020, 10:44

danke für die Antwort!
Habe es erst nicht verstanden, aber jetzt durch rumprobieren doch hingekriegt mit je 2 Buttons:

Code:

 //----------------------------------------------------------
String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;        color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";

  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
  ptr +="<h3>Using Station(STA) Mode</h3>\n";

  ptr+="<p>";
  if(led1stat) {ptr +="LED1 Status:  ON ";}  
  else         {ptr +=" LED1 Status: OFF ";}  
  {ptr +="<a class=\"button button-off\" href=\"/led1off\">OFF</a>";}
  {ptr +="<a class=\"button button-on\" href=\"/led1on\">ON</a>";}
  ptr+="</p>";

  ptr+="<p>";
  if(led2stat) {ptr +="LED2 Status:  ON ";}  
  else         {ptr +=" LED2 Status: OFF";}   
  {ptr +="<a class=\"button button-off\" href=\"/led2off\">OFF</a>";}
  {ptr +="<a class=\"button button-on\" href=\"/led2on\">ON</a>";}
  ptr+="</p>";
  
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

seltsamerweise schreibt er jetzt aber immer noch alles in einzelne Zeilen untereinander -
wie kriegt man pro LED jeweils den Status-String und die beiden Buttons in 1 Zeile?

HaWe · 02.07.2020, 11:29

warum werden denn nun die Buttons oben samt Textstring immer paarweise untereinander gemalt und nicht nebeneinander? Es ist doch kein Zeilenumbruch dazwischen, und jeweils 2 werden samt Textstring immer durch <p>...</p> zusammengefasst, dann müssten sie doch nebeneinander stehen...?

**Moppi** · 02.07.2020, 20:07

Im Absatz dürfen Zeilen umgebrochen werden, warum denn nicht? Deshalb nehme ich für so etwas gerne Tabellen nach dem Schema: Tabelle->Zeile->Zellen
Wenn dann noch die Breite für die Zeile und/oder die Zellen festgelegt wird, wird es nicht mehr umgebrochen.
Allerdings kann man zwei Buttons auch in einen Container packen (<div>..</div>) und den mit einer festen Breite versehen, so dass die Buttons nebeneinander stehen bleiben.

MfG

HaWe · 02.07.2020, 20:42

Ich verstehe es nicht:

warum wird denn hier

ptr+="<p>";
if(led1stat) {ptr +="LED1 Status: ON ";}
else {ptr +=" LED1 Status: OFF ";}
{ptr +="<a class="button button-off" href="/led1off">OFF</a>";}
{ptr +="<a class="button button-on" href="/led1on">ON</a>";}
ptr+="</p>";

jetzt alles untereinander gesetzt und nicht nebeneinander?

**Moppi** · 03.07.2020, 05:54

Bei HTML orientiert sich alles immer am Endgerät, also am Display. Deshalb ist die erste Frage, ob die Buttons nebeneinander auf dem Display angezeigt werden können. Wenn das theoretisch gerade so passt, dass die beiden Buttons genau so breit sind, wie das Display, dann wird zu 99.9% umgebrochen und der zweite Button rutscht eine Zeile tiefer. Dazu muss man sich mehr mit HTML auseinandersetzen. Zu den HTML-Elementen gehören noch innere und äußere Rahmen, die zur Breite des Elements addiert werden. Wenn das nicht zur Displaybreite passt, wird umgebrochen. So ungefähr kann man sich das vorstellen.

Probeweise kann das "<p>" ersetzt werden durch "<div>" und das "</p>" durch "</div>".
"<div>" gibst Du eine feste Breite, versuchsweise mit: "<div style='width:1000px'>".

Das ist noch keine Endlösung, aber irgendwie musst Du Dich da heran tasten.

MfG

HaWe · 03.07.2020, 08:59

vom Platz her passt es dicke, es gäbe also überhaupt keinen Anlass, dass html hier selbstständig Zeilenumbrüche einfügt.
Lade das Programm doch mal bitte selber hoch und gucke, was bei dir dargestellt wird.

PS,
die url habe ich im (riesigen) Windows-Browser aufgerufen

**jcrypter** · 03.07.2020, 09:40

Wie sieht denn der Quelltext der HTML-Seite im Browser aus?

edit: wenn das css aus deinem ursprünglichen posts noch immer drin ist: display:block sorgt dafür, dass jeder "button", eigenlich ja nur ein Link, als block Element interpretiert wird. Und die ziehen sich über die ganze Seite und erzeugen einen Zeilenumbruch.