Hallo zusammen
Da meine Steuerungsseite anscheinend einigen gefallen hat hier mal der Versuch einer Erklärung was dahinter ist.
Vorweg aber der Hinweis das es einige Programme / Apps / Fhem Module gibt die genutzt werden können! Mir waren die aber zu aufwendig und vor allem zu lahm. Deshalb meine Variante mit einem (hoffentlich) sauberen Html Code und dem dazu gehörenden CSS Formatierungsfile.
Die hier gezeigte Variante ist stark abgespeckt da der gesamte Code wohl den Rahmen hier sprengen würde. Wie alles ist er gewachsen und gewachsen und .....!
Wer sich in die Materie einarbeiten will kann mich gerne anschreiben um die von mir empfohlenen Websites zwecks nachlesen von Funktionen als Link zu bekommen.
Ich arbeite durchweg mit http Verbindung über VPN, schicke also keine Kommando unverschlüsselt über das Internet. Ich nutze eine FritzBox 7560 und eine Anleitung zur Einrichtung eines VPNs findet ihr hier: https://avm.de/service/vpn/ti…-vpn-verbinden/
Ein MyFritz Konto ist von Vorteil, es geht aber auch jeder andere DDNS Anbieter, denn was man unbedingt braucht ist eine dynamische IP Adresse.
Aber darum geht es hier nicht - wer Hilfe braucht -> s.o.
Fhem kann man ganz einfach mit http Befehlen steuern! Um das zu veranschaulichen hier, wie oben angesprochen, ein Quellcode:
Die Eingaben die ich nicht preisgeben möchte sind gelb hinterlegt und müssen angepasst werden.
In Zeile 5 steht der Name der Seite
In Zeile 7 eine genauere Beschreibung
In Zeile 8 die Einbindung der CSS Formatierungsdatei (s.u.)
Meine Formatierungsmöglichkeiten (Fachjargon:DIV Tags):
Allübergreifend body (Hintergrundfarbe)
Jede waagerechte Zeile (unterzeilen)
Jeden Button in den Zeilen (button / buttonaussen)
Die Überschriften (in <p></p>)
Das wichtigste sind aber die Link (a Tags) hinter den angepassten Bildern (img) Der wird jetzt mal aufgeschlüsselt:
<a
a Tag-, und Linköffnung
href=
hypertext reference - auf gut deutsch Zieladresse
http://
Hypertext Transfer Protocol - Protokoll Standard Client - Webserver
!!IP Raspberry!!:!!Port!!
Die entweder automatisch über DHCP oder Statische Adresse des Raspberry auf dem Fhem läuft gefolgt vom Fhem WEB Port (bei mir nie Standard 8083)
Hier wird deutlich das ich mehrere Fhem Server über eine Website steuern
kann! Einfach die Ip und den Port anpassen.
/fhem?cmd=set
Kommandobefehl an den entsprechenden Server.
%20
ist ein Platzhalter in http Befehlen für das Leerzeichen! Taucht mehrmals auf.
Dielenlampe o.ä.
Das Fhem Geräte (oder neudeutsch Device) dem der Befehl gilt.
on off
Der Befehl. Alle im Fhem Frontend möglichen Befehle sind auch hier möglich.
&XHR=1
Der Browser startet normalerweise die Fhem Oberfläche bei Ausführung des Befehls. Das wird hiermit unterbunden, aber es geht ein neuer Tab auf - deshalb gehen bei mir neue Tabs im Hintergund auf!
(Einstellungssache im Browser)
Nicht vergessen - der ganze Link steht in " "!
>
schließt den a Tag
Das <br> das ab und an auftaucht im Text ist das html Umbruchzeichen und erzeugt eine neue Zeile. Deswegen sind die OFF Schalter in "SCHALTER AUSSEN" unter den ON Schaltern. Ein kleiner Trick das "float" zu umgehen. (s.u.)
Schon sind wir beim Bild das durch anklicken/antippen den Link losschickt. Alternativ kann man auch einfach einen Text setzen!
<img
Öffnet den img Tag
src=
Abkürzung für source - Quelle
images/Dan.png o. ä.
Pfad und Name zur Grafik
alt=
Alternative Anzeige wen die Grafik gelöscht wurde oder so.
width= und height=
Breite und Höhe der Grafik.
Wo die " " hinkommen seht ihr im Quellcode.
>
schließt den img Tag.
</a>
schließt den Link.
Die Ordnerstruktur: Die Html Datei liegt als index.html direkt im Hauptordner und für die CSS und Grafikdateien gibt es Unterordner im Hauptordner namens css und images.
Das CSS:
Ihr seht jeder Tag im Html Dokument taucht hier auf.
Immer Angabe der Klasse ( body, p, h1 usw.) oder des DIV Tags mit einleitender # (#button, #buttonaussen usw.)
Werte in geschweifte Klammer { } (AltGr - 7 bzw. 9)
Ein bisserl Englisch Kenntnisse sind von Vorteil!
Jedes formatierende Element mit ; schließen.
background-color:
Hintergrundfarbe in html code. Grund wie Rot Blau Grün gehen auch direkt z.B. red, blue, green usw.
font-size:
Schriftgröße
color:
Schriftfarbe. Hier weiss, normalerweise #ffffff (6 Ziffern bei html Angaben),
es wird aber auch die Abkürzung erkannt bei Schwarz und Weiss.
text-align: center;
Ich möchte meinen Text in der Mitte des Feldes.
Möglich auch andere wie left oder right.
float: left;
Oh ich hasse es! Normalerweise werden alle Tag einer Html Seite untereinander angezeigt! Möchte ich sie nebeneinander haben so muss ich dieses extra mitteilen. Hier kommt float ins Spiel! Möchte ich z.B. zulassen das alle a Tags im DIV Tag "button" nebeneinander stehe so muss ich es wie
gezeigt formatieren. So wird die folgenden Grafiken in der Zeile mit dem DIV Tag "button" (Achtung jetzt kommts) rechts (ja ist so) neben dem ersten gesetzt.
margin:
Abstandsregelung rund um die Grafik.
Hier 1% der Zeilenhöhe nach oben, 0 nach links, 0 nach unten
und 1% nach links. Also im Uhrzeigersinn angeben.
border:
Die Umrandung mit ihrer Form (dotted=Punkte), Größe (width),
Farbe (color) und Radius der Ecken (radius).
Einfach ein bisschen rumprobieren bis es schön aussieht.
clear: left;
Dies ist die Aufhebeung des Befehls "float: left;".
Sie taucht bei jeder neuen Zeile auf sonst würden alle
Zeilen nebeneinander stehen und eure Html Seite wäre enorm
breit aber nur eine Zeile hoch. Durch den DIV Tag "button" werden alle
Grafiken in dieser neuen Zeile aber auch nebeneinander angeordnet.
Übrigens: Der Wert "width" alleine im Zeilen DIV Tag setzt die maximale Breite der Zeile auf 99% fest. Dies verhindert eine hässlichen Scrollbalken am unteren Bildschirmrand.
So fetisch! Wer Fragen hat kann sich gerne an mich wenden! Im I-Net gibt es aber auch tolle Tutorials. Achtet darauf immer die neuesten zu nutzen, den ein Beitrag aus dem Jahr
2010 muss nicht unbedingt bei html5 oder CSS3 (die neuen Standards) passen.
Ich habe mir den Hauptordner mit allem Inhalt auf jedes Gerät kopiert und aktualisiere diesen über meine Synology Cloud Station Drive bzw. bei Android mit DS Cloud. Dies hat den Vorteil der pfeilschnellen Seitenöffnung bei immer aktuellen Dateien.
Viel Spaß
ReinP
Das nenn' ich mal prompte Lieferung. 
