Mehrere Website mit ESP32 Access Point

Nick OP #7671459
Lesenswert?
• ▲
▼

Guten Tag, ich arbeite an einem Projekt, welches eine Anwesenheitsliste von verschiedenen Schulklassen anzeigen soll (Ist eine Erweiterung).

Ich arbeite mit dem NodeMCU-32S als Access Point und der Arduino IDE.

Grundsätzlich soll man sich mit dem ESP32 verbinden können und dann im Webbrowser auf die Seiten zugreifen können (URL = MeineSchule). Auf dieser Seite sind 4 "Buttons" welche für jede klasse stehen. Sollte man nun auf den "Button" der Klasse 1 klicken soll man auf eine neue Seite gelangen, welche die Anwesenheit Liste anzeigt (URL = MeineSchule/Klasse1).

Die "Hauptseite" funktioniert schon und auch die "Buttons" leiten einen zu der jeweiligen Seite weiter. Ich scheitere im Moment dran eine zweite Website zu programmieren. Wie kann ich sagen dass, wenn dieser "Button" geklickt wird / diese URL aktiv ist, die Anwesenheitsliste der Klasse angezeigt wird. Im Moment wird nur "Not Found" angezeigt.

Hier noch der Code für die Hauptseite, die Seite der Klasse1 und die Funktionen. Die Übergabe-Variablen werden im Moment nicht benutzt, sind aber noch drin falls ich sie doch wieder brauche. ! "href" wird als Spam gewertet, deswegen steht statt dessen * h *

1
 
void handle_OnConnect() {

2
 
  server.send(200, "text/html", SendHTML(true, "none")); 

3
 
}

4
 


5
 
void handle_ready() {

6
 
  if (server.hasArg("name")) {

7
 
    String className = server.arg("name");

8
 
    server.send(200, "text/html", SendHTML(true, className));  

9
 
  } else {

10
 
    server.send(400, "text/html", "Missing class name parameter");

11
 
  }

12
 
}

13
 


14
 
void handle_NotFound(){

15
 
  server.send(404, "text/plain", "Not found");

16
 
}

17
 


18
 
String SendHTML(bool checkstat, String className){

19
 
  Serial.println("IP address: ");

20
 
  Serial.println(WiFi.softAPIP());

21
 


22
 
  String ptr = "<!DOCTYPE html> <html>\n";

23
 
  ptr +="<head><meta charset=\"UTF-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";

24
 
  ptr +="<title>MeineSchule</title>\n";

25
 
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

26
 
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";

27
 
  ptr += ".button{border: none;color: white;padding: 13px 24px;text-align: center;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px; text-align: center;}";

28
 
  ptr += ".buttonON {background-color: #3498DB;}";

29
 
  ptr += ".buttonON:hover {background-color: #2980B9;}";

30
 
  ptr += ".buttonOFF {background-color: #34495E;}";

31
 
  ptr += ".buttonOFF:hover {background-color: #41607F;}";

32
 
  ptr += ".buttonOFF:active {background-color: #41607F;}";

33
 
  ptr +="table, th, td {border: 1px solid black; border-collapse: collapse;}";

34
 
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

35
 
  ptr +="</style>\n";

36
 
  ptr +="</head>\n";

37
 
  ptr +="<body>\n";

38
 
  ptr +="<h1>Meine Klasse</h1>\n";

39
 
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

40
 


41
 
  ptr +="<p>Dr&uumlcken f&uumlr die Anwesenheit der Sch&uumller zu pr&uumlfen</p>";

42
 


43
 
  ptr += "<a *h*=\"Klasse1\"><button class=\"button buttonOFF\">Klasse1</button></a>";

44
 
  ptr += "<a *h*=\"Klasse2\"><button class=\"button buttonOFF\">Klasse2</button></a>";

45
 
  ptr += "<a *h*=\"Klasse3\"><button class=\"button buttonOFF\">Klasse3</button></a>";

46
 
  ptr += "<a *h*=\"Klasse4\"><button class=\"button buttonOFF\">Klasse4</button></a>";

47
 
  ptr +="</body>\n";

48
 
  ptr +="</html>\n";

49
 


50
 
ptr +="<head><meta charset=\"UTF-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";

51
 
  ptr +="<title>192.168.1.1/ET2020B</title>\n";

52
 
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

53
 
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";

54
 
  ptr += ".button{border: none;color: white;padding: 13px 24px;text-align: center;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px; text-align: center;}";

55
 
  ptr += ".buttonON {background-color: #3498DB;}";

56
 
  ptr += ".buttonON:hover {background-color: #2980B9;}";

57
 
  ptr += ".buttonOFF {background-color: #34495E;}";

58
 
  ptr += ".buttonOFF:hover {background-color: #41607F;}";

59
 
  ptr += ".buttonOFF:active {background-color: #41607F;}";

60
 
  ptr +="table, th, td {border: 1px solid black; border-collapse: collapse;}";

61
 
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

62
 
  ptr +="</style>\n";

63
 
  ptr +="</head>\n";

64
 
  ptr +="<body>\n";

65
 
  ptr +="<h1>Digitale Sitzplatzordnung 2.0</h1>\n";

66
 
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

67
 


68
 
  ptr +="<p>Dr&uumlcken f&uumlr die Anwesenheit der Sch&uumller zu pr&uumlfen</p>";

69
 


70
 
  ptr += "<a *h*=\"Klasse1\"><button class=\"button buttonON\">Klasse1</button></a>";

71
 
  ptr += "<a *h*=\"Klasse2\"><button class=\"button buttonOFF\">Klasse2</button></a>";

72
 
  ptr += "<a *h*=\"Klasse3\"><button class=\"button buttonOFF\">Klasse3</button></a>";

73
 
  ptr += "<a *h*=\"Klasse4\"><button class=\"button buttonOFF\">Klasse4</button></a>";

74
 


75
 
  ptr += "<a *h*=\"Klasse1\"><button class=\"button buttonON\">Aktualisieren</button></a>";

76
 


77
 
//Hier ist der Code der die Tabelle erzeugt, da dieser Funktioniert habe ich ihn rausgenommen.

78
 


79
 
  ptr +="</body>\n";

80
 
  ptr +="</html>\n";

81
 


82
 


83
 
  return ptr;

84
 
}//End SendHTML

Ich möchte anmerken, dass ich nur eine Laie bin, was HTML angeht.

Vielen Dank für die Hilfe.

Freundliche Grüsse

Nick

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Monk Gast #7671518
Lesenswert?
• ▲
▼

Bevor du die Webseite programmierst...

Ich hoffe, das Projekt hat ein wasserdichtes Datenschutz-Konzept.

Da hiermit persönlichen Daten von Kindern gearbeitet wird, gelten ganz besonders hohe Datenschutz-Anforderungen. Ich würde an deiner Stelle nur an dem Projekt mitarbeiten, wenn die Haftungsfrage geklärt ist, dass du ganz sicher nicht Schuld sein kannst.

So große statische HTML Dateien legt man besser im Filesystem (ggf. als Template) ab. Eingebettet im Quelltext ist das mühsam zu pflegen.

Ich habe dir ein Beispiel angehängt.

Also Anleitung kann ich https://wiki.selfhtml.org/ wärmstens empfehlen.

Angehängte Dateien:
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Εrnst B. #7671530
Lesenswert?
• ▲
▼

Ich würde dir ganz dringend zu einem Webserver-Framework wie dem ESPAsyncWebServer raten. Das Zusammenbauen von riesigen Strings, die dann mehrfach im RAM hin und herkopiert werden wie in deinem Beispiel fällt dir irgendwann auf die Füße.

Pack HTML, Bilder, JS-Dateien, CSS Files usw. auf's Dateisystem vom ESP. Vorteil: Du kannst das Zeug mit einem ganz normalen HTML/Webseiten-Editor bearbeiten, ohne dass da immer ein ptr+= davor muss. Auf ü usw. kannst du dann auch verzichten.

Benutze server.serveStatic usw., um die Dateien via HTTP erreichbar zu machen. Vorteil: Schneller. Viel Schneller. Und kann mehrere Zugriffe gleichzeitig. Und stürzt nicht ab, wenn das RAM ausgeht.

Benutze den TemplateProcessor Hook, um dynamisch Daten im HTML usw. einzusetzen.

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren