Forum: Mikrocontroller und Digitale Elektronik Mehrere Website mit ESP32 Access Point


Mehrere Website mit ESP32 Access Point
von Nick (ndl04_t)

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

  


  




  

    Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: Mehrere Website mit ESP32 Access Point
  


  

    

      von
      
        Monk
        (roehrmond)
        
      
      


      
    


    

      
    

    

    

      

      

      Angehängte Dateien:


      

    

  
  


  

  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.

  


  



  

  
:
    Bearbeitet durch User
  

  


  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: Mehrere Website mit ESP32 Access Point
  


  

    

      von
      
        Εrnst B.
        (ernst)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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 &uuml; 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.

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: Mehrere Website mit ESP32 Access Point
  


  

    

      von
      
        Monk
        (roehrmond)
        
      
      


      
    


    

      
    

    

    

  
  


  

  Lesenswert?
  

  •
  
  ▲  
  

  ▼  
  		
  

  


  

      
Εrnst B. schrieb:
> Und stürzt nicht ab, wenn das RAM ausgeht.

Beim ESP8266 stößt man schon mit 5 kB Strings an das Stack Limit.

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  








    

    

       Thread beobachten

      |
         Seitenaufteilung abschalten

    

        


Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.



  Bestehender Account

  


  
  

  
    

      

        
          
        
        
          
        
      

      

        
          
        
        
          
        
      

    


    
    
    





  Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!

  Mit Google-Account einloggen
  





  Noch kein Account? Hier anmelden.