View source for 39. Lektion: Webseiten für den Webserver erstellen

Wenn der Webserver effektiv genutzt werden soll, so sind entsprechende Webseiten erforderlich.<br>
Danny hat eine Webseite erstellt mit der man das Micropython Demoboard steuern kann. Hier ein Ausschnitt:
<br>
[[file:Demoboard_Control_Panel.png|800px]]
<br><br>
An diesem Beispiel wollen wir uns das Erstellen einer Webseite und den Einsatz möglicher Steuerungselemente genauer ansehen.
<br>
Hier kann eine Zipdatei herunter geladen werden, die die Dateien zur Darstellung dieser Demoseite enthält:<br>
[[media:Webserver_Demo.zip]]

== HTML Steuerelemente==

=== Knopf (button)===
So sieht z.B. ein Button aus:
<br>
[[file:Button_01.png]]
<br>
Und so wird er erzeugt:

<pre>
<form action="/control/led" method="GET">
  <input type="hidden" name="state" value="on">
  <button type="submit">LED Einschalten</button>
</form>
</pre>

Das sehen wir uns mal näher an:<br>
<pre>
<form action="/control/led" method="GET">
   ...
</form>
</pre>
Zuerst wird ein HTML-Formular erstelt. Dieses enthält 2 Attribute:
; action
: gibt an welche Funktion auf dem Server die Daten dieses Formulares verarbeiten soll.
Hier die Stelle in Serverprogramm:
<pre>
@server.route("/control/led", ["GET"])
def led(request):
</pre>
; methode
: gibt an wie die Daten zum Server übertragen werden sollen (GET oder POST).
<br>
In der 2. Zeile wird angegeben wo die Daten für dieses Formular herkommen sollen:
<pre>
  <input type="hidden" name="state" value="on">
</pre>
Dazu dient das Input-Element. Es hat keinen schließenden Tag. Dieses hat hier 3 Argumente:
; type
: gibt an wie die Daten geholt werden:
* text
* email
* url
* tel
* hidden
* checkbox
* radio
* select/option
* https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/input
<br>
Hier wird als type '''hidden''' verwendet, weil nichts eingegeben werden muss. Dieser Button liefert per Definition den Wert '''on''' zurück.
; name
: Das ist der Name der Variablen in der die Funktion auf dem Server die Daten findet.
; value
: Ist der Wert, der in '''name''' übergeben wird.
Hier wird von der Server-Funktion der Wert geholt:
<pre>
@server.route("/control/led", ["GET"])
def led(request):
    state = request.query.get("state", None)
</pre>

Nun muss noch der Button definiert werden:
<pre>
  <button type="submit">LED Einschalten</button>
</pre>
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.
<br>
Zwischen dem öffnenden und dem schließenden Tag steht die Beschriftung des Button.
<br>

=== 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.
<pre>
<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>
</pre>
Hier ist die folgende Zeile neu:
<pre>
<select name="state" onchange="this.form.submit()">
</pre>
Das ist das öffnende Select-Tag. Damit wird die Definition eines Dropdown-Menues eingeleitet.
Es enthält hier 2 Attribute:
; name
: ist wieder Name der Variablen in der der Server den Wer findet.
; onchange
: gibt an, was passieren soll, wenn die Auswahl geändert wird. Hier wird die Änderung an den Server geschickt. Dabei handelt sich um nativen JavaScript-Code, der so auch in andere Anwendungen übernommen werden kann, wenn es in dem Formular eine Änderung gegeben hat.
<br>
Nun müssen noch die Menuepunkte definiert werden. Dazu dient das option-Tag:
<pre>
    <option value="">-- Auswahl --</option>
    <option value="on">Einschalten</option>
    <option value="toggle">Toggle</option>
    <option value="off">Ausschalten</option>
    <option value="blink">Blinken</option>
</pre>
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.
<br>
Am Ende werden select und form geschlossen. Fertig ist das Dropdown-Menue.
<pre>
  </select>
</form>
</pre>

=== Eingabe Felder (text)===

[[file:Die_3_texteingabefelder.png]]
<br>
Der folgende Code zeigt wie man ein einzeiliges Texteingabefeld erstellt:
<pre>
<form action="/control/ssd1306" method="GET">
    Text 1: <input type="text" name="text1"><br>
    Text 2: <input type="text" name="text2"><br>
    Text 3: <input type="text" name="text3"><br>
    <button type="submit">Send...</button>
</form>
</pre>
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: 
<pre>
@server.route("/control/ssd1306", ["GET"])
def ssd1306(request):
    text1  = request.query.get("text1",  "")
    text2  = request.query.get("text2",  "")
    text3  = request.query.get("text3",  "")
</pre>
zum Schluß folgt der Button zum Abschicken der Texte.
<pre>
    <button type="submit">Send...</button>
</form>
</pre>

=== 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:
[[file:Input_number_01.png]] 
<br>
Der Quelltext dazu sieht so aus:
<pre>
<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>
</pre>
Zuerst wird wieder ein Formular erstellt. Das kennen wir ja schon. Dieses Mal enthält es aber mehrere Elemente.
<br>
Zuerst werden die drei Eingabefelder für Zahlen erzeugt:
<pre>
  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>
</pre>
"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 <nowiki><br></nowiki>.
<br>
Das Auswahlmenue ist uns auch schon bekannt:
<pre>
  <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>
</pre>
Jetzt fehlt nur noch der Knopf zum Abschicken der Daten. Schließlich wird die Formular-Definition beendet:
<pre>
  <button type="submit">Und los...</button>
</form>
</pre>

=== Schieberegler (slider)===
Um einen Schieberegler mit Anzeige des aktuell eingestellen Wertes zu realisieren ist Javascript erforderlich. Deshalb kann ich den hier nicht erläutern.
<br>
Mein Versuch einen Schieberegler ohne Wertanzeige zu realisieren sieht so aus:
<pre>
<!--
ws2812_range.pt
-->
<form action="/control/ws2812" method="GET">
  <input type= "hidden" id="led" name="led" value="all">
  <input type="range" id="red" name="red" value="0" min="0" max="255" />
  <input type="range" id="green" name="green" value="0" min="0" max="255" />
  <input type="range" id="blue" name="blue" value="0" min="0" max="255" />

  <button type="submit">Einstellen</button>
</form>
</pre>
Damit ist es ebenfalls möglich die WS2812-Leds einzustellen. Allerdings nur nach "Gefühl" und mit einem zusätzlichen Sende-Button.

<!--
=== Beschriftung (label)===

<pre>

</pre>

<pre>

</pre>

<pre>

</pre>
-->

== Aufbau einer Webseite==


== Stile (CSS)==
So sieht die CSS-Definition für diese Webseite in der Datei style.pt aus:
<pre>
<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>
</pre>
Dieses CSS-File wird in der HTML-Datei control.pt eingebunden:
<pre>
<!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>
</pre>
Interessant ist hier die folgende Zeile:
<pre>
    {{render_template("mywebserver/style.pt")}}
</pre>
Sie schreibt den CCS-Code in den Header der Webseite.

==Navigation==
[[Micropython_Kurs_2023_-_Teil_2|Zurück zur "Micropython Kurs 2023 Teil 2" Startseite]]<br>
[[Micropython Kurs 2023|Zurück zur "Micropython Kurs 2023" Startseite]]<br>
[[Programmieren|Zurück zur Programmieren Startseite]]<br>
[[Attraktor_Wiki|Zurück zur Wiki Startseite]]<br>