39. Lektion: Webseiten für den Webserver erstellen: Unterschied zwischen den VersionenAus Attraktor Wiki
Version vom 8. Februar 2024, 15:47 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 als type hidden verwendet, weil nichts eingegeben werden muss. Dieser Button liefert per Definition den Wert on zurück.
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)
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: Der Quelltext dazu sieht so aus: <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 WebseiteZurück zur "Micropython Kurs 2023 Teil 2" Startseite |