ESP32: website Buttons um-designen

**Moppi** · 21.06.2020, 06:36

Hallo!

Ich versuche mal etwas auf die Sprünge zu helfen:

Code:

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

Dass Du nur den einen oder anderen Button bekommst, liegt hier an "IF ... ELSE ...". #
Je nach Status "led1stat" bekommst Du dadurch den Button "button button-off" oder "button button-on".
Wenn Du "IF" und "ELSE" entfernst bekommst Du beide Buttons dargestellt.

Außerdem werden Absätze zur Formatierung eingesetzt: "<p>....</p>"

So wird "LED1 Status: ON" in einem Absatz geschrieben, der dazugehörige Link, der als Button formatiert wird, aber nicht:

"<p>...</p>"
"Button-Link"
"<p>...</p>"
"Button-Link"

Etwas merkwürdige Strukturierung, aber .. na ja .... Normal würde man einen Text und den dazugehörigen Link in einen Absatz setzen:

"<p>Linktext: <a class=".." href="...">...</a></p>"

Um die als Buttons getarnten Links, nach dem Schema, oben nebeneinander zu bekommen:

"<p>Linktext: <a class=".." href="...">...</a>  Linktext: <a class=".." href="...">...</a></p>"

Die beiden " " sind Platzhalter.

Oder so auch eine Möglichkeit:

"<p>Linktext: <a class=".." href="...">...</a><a class=".." href="...">...</a></p>"
Einen Text und dann beide Buttons nebeneinander.
Allerdings kann es sein, dass die Zeile im Browser umgebrochen wird, dann würden die Buttons untereinander rutschen.

Den Autor kontaktieren, um ein anderes Layout bereit zu stellen oder selber umfrickeln.

MfG

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