39. Lektion: Webseiten für den Webserver erstellen: Unterschied zwischen den VersionenAus Attraktor Wiki
Version vom 12. Februar 2024, 10:21 UhrWenn der Webserver effektiv genutzt werden soll, so sind entsprechende Webseiten erforderlich. InhaltsverzeichnisHTML SteuerelementeKnopf (button)So sieht z.B. ein Button aus:
<form action="/control/led" method="GET"> <input type="hidden" name="state" value="on"> <button type="submit">LED Einschalten</button> </form> Das sehen wir uns mal näher an: <form action="/control/led" method="GET"> ... </form> Zuerst wird ein HTML-Formular erstelt. Dieses enthält 2 Attribute:
Hier die Stelle in Serverprogramm: @server.route("/control/led", ["GET"]) def led(request):
<input type="hidden" name="state" value="on"> Dazu dient das Input-Element. Es hat keinen schließenden Tag. Dieses hat hier 3 Argumente:
Hier wird von der Server-Funktion der Wert geholt: @server.route("/control/led", ["GET"]) def led(request): state = request.query.get("state", None) Nun muss noch der Button definiert werden: <button type="submit">LED Einschalten</button> Das Button-Tag hat das Argument type mit dem Wert submit. Das bedeutet, das beim Anklicken des Button die Werte des Formulars zum Server geschickt werden.
Dropdown-Menue - (select/option)Das Dropdown- oder Auswahl-Menue enthält eine Liste aus der eine Möglichkeit ausgewählt werden kann. Das Menue wird durch Anklicken aufgemacht. <form action="/control/led" method="GET"> <select name="state" onchange="this.form.submit()"> <option value="">-- Auswahl --</option> <option value="on">Einschalten</option> <option value="toggle">Toggle</option> <option value="off">Ausschalten</option> <option value="blink">Blinken</option> </select> </form> Hier ist die folgende Zeile neu: <select name="state" onchange="this.form.submit()"> Das ist das öffnende Select-Tag. Damit wird die Definition eines Dropdown-Menues eingeleitet. Es enthält hier 2 Attribute:
<option value="">-- Auswahl --</option> <option value="on">Einschalten</option> <option value="toggle">Toggle</option> <option value="off">Ausschalten</option> <option value="blink">Blinken</option> Zu jeder Option wird im öffnenden Tag der zurück zu gebende Wert angegeben. Dann folgt der Anzeige-Text der Option und schließlich das schließende Tag.
</select> </form> Eingabe Felder (text)
<form action="/control/ssd1306" method="GET"> Text 1: <input type="text" name="text1" id="text1"><br> Text 2: <input type="text" name="text2" id="text2"><br> Text 3: <input type="text" name="text3" id="text3"><br> <button type="submit">Send...</button> </form> Es wird wieder ein Formular erstellt. Darin werden die drei Input-Tags eingefügt. Als type wird hier text verwendet. Die drei eigegebenen Texte weden in den Variablen text1, text2 und text3 übergeben: @server.route("/control/ssd1306", ["GET"]) def ssd1306(request): text1 = request.query.get("text1", "") text2 = request.query.get("text2", "") text3 = request.query.get("text3", "") zum Schluß folgt der Button zum Abschicken der Texte. <button type="submit">Send...</button> </form> Eingabe von Zahlen (number)Hier haben wir ein Beispiel das für die Eingabe von Zahlen vorgesehen ist, kombiniert mit einem Dropdown-Menue und einen Button:
<form action="/control/ws2812" method="GET"> Rot: <input type="number" value="0" name="red" min="0" max="255" /> Grün: <input type="number" value="0" name="green" min="0" max="255" /> Blau: <input type="number" value="0" name="blue" min="0" max="255" /> <br> <select name="led"> <option value="0">LED 1</option> <option value="1">LED 2</option> <option value="2">LED 3</option> <option value="3">LED 4</option> <option value="4">LED 5</option> <option value="all">Alle LEDs</option> </select> <button type="submit">Und los...</button> </form> Zuerst wird wieder ein Formular erstellt. Das kennen wir ja schon. Dieses Mal enthält es aber mehrere Elemente.
Rot: <input type="number" value="0" name="red" min="0" max="255" /> Grün: <input type="number" value="0" name="green" min="0" max="255" /> Blau: <input type="number" value="0" name="blue" min="0" max="255" /> <br> "Rot:", "Grün:" und ""Blau: sind die Texte, die vor den Feldern erscheinen. Da HTML Zeilenwechsel ignoriert, werden die drei Felder nebeneinander angezeigt. Die Felder selbst werden duch den Input-Tag erzeugt. Sie werden auf den Wert "0" eingestellt. Dann folgt der Name der Variablen in der entsprechende Wert übergeben wird. Schließlich werden die Grenzwerte festgelegt. Fertig sind die Eingabefelder für Zahlen! Es folgt noch ein Wechsel in die nächste Zeile mit <br>.
<select name="led"> <option value="0">LED 1</option> <option value="1">LED 2</option> <option value="2">LED 3</option> <option value="3">LED 4</option> <option value="4">LED 5</option> <option value="all">Alle LEDs</option> </select> Jetzt fehlt nur noch der Knopf zum Abschicken der Daten. Schließlich wird die Formular-Definition beendet: <button type="submit">Und los...</button> </form> Schieberegler (slider)Beschriftung (label)Aufbau einer WebseiteStile (CSS)So sieht die CSS-Definition für diese Webseite in der Datei style.pt aus: <style> body { font-family: Helvetica, Arial; margin: 0; } main { padding: 50px 30px; } a { text-decoration: none; color: #000; } button, select, input { margin: 5px 10px 5px 0px; padding: 10px 10px; border-radius: 6px; } th, td { padding: 5px; } tr:nth-child(2n+1) { background-color: #e0eeee; } #clean-table tr { background-color: transparent; } .site-header { border-bottom: 1px solid #ccc; padding: .5em 1em; display: flex; justify-content: space-between; background-color: #67b8dc; } .site-identity h1 { font-size: 1.5em; margin: .6em 0; display: inline-block; } .site-navigation ul, .site-navigation li { margin: 0; padding: 0; } .site-navigation li { display: inline-block; margin: 1.4em 1em 1em 1em; } .nowrap { display: inline-flex; white-space: nowrap; } </style> Dieses CSS-File wird in der HTML-Datei control.pt eingebunden: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Control Panel</title> {{render_template("mywebserver/style.pt")}} </head> <body> {{render_template("mywebserver/header.pt")}} {{render_template("mywebserver/content.pt")}} </body> </html> Interessant ist hier die folgende Zeile: {{render_template("mywebserver/style.pt")}} Sie schreibt den CCS-Code in den Header der Webseite. Zurück zur "Micropython Kurs 2023 Teil 2" Startseite |