FHEM Tablet UI #2: wie index.html anpassen/bearbeiten

In dem vorherigen Beitrag habe ich gezeigt wie du die FHEM Tablet-UI installierst. Um den Inhalt der Tablet optimierte Oberfläche anzupassen, muss man die index.html im Ordner /opt/fhem/www/tablet/ bearbeiten.

In diesem Artikel erkläre ich, wie du die index.html Datei am einfachsten anpassen kannst und welche Programme du davor benötigst. Alle Varianten funktionieren mit Windows, Mac OSX oder Linux.

Inhalt

• Methode 1: Terminal/Kommandozeile und Nano Texteditor
• Methode 2: via SFTP mit Filezilla und Atom Texteditor

Methode 1: Terminal/Kommandozeile und Nano Texteditor

• geeignet um schnell kleine Änderungen an einer Datei vorzunehmen
• keine zusätzliche Software erforderlich
• die Maus kann nicht verwendet werden
• keine Syntaxhervorhebung

2. Melde dich per SSH an dem Computer an auf dem FHEM läuft. Für Windows kannst du zum Beispiel Putty verwenden und für Mac OSX den Terminal.

   ssh xxx@zzz.zzzz.zzz.zz

   Ersetze xxx mit deinem Benutzernamen und zzz.zzzz.zzz.zz mit der IP Adresse. Bei mir sieht der Befehl so aus ssh pi@192.168.178.99

3. Navigiere zum Ordner mit der zu bearbeitenden Datei.

   cd /opt/fhem/www/tablet/

4. Öffne die Datei mit dem Nano Texteditor und verändere den Inhalt.

   nano index.html

5. Mit der Tastenkombinationctrl+o(Mac)/strg+o(Windows) kannst du die Datei Speichern. Mit ctrl+x(Mac)/strg+x(Windows) kannst du den Texteditor beenden und gegebenenfalls speichern.

Tablet-UI index.html Datei im Nano Editor (Mac Terminal) geöffnet

Methode 2: via SFTP mit Filezilla und Atom Texteditor

• einfacheres Bearbeiten da die Maus benutzt werden kann
• Vorteile des Atom Editor nutzen (Syntaxhervorhebung, Autovervollständigung)
• zusätzliche Software erforderlich

1. Lade dir Filezilla (FTP/SFTP) und Atom (Texteditor) für dein Betriebssystem herunter und installiere sie.
2. Öffne Filezilla und geh in die Einstellungen. Unter Bearbeiten von Dateien, stell den Atom Editor als Standarteditor ein und Immer Standarteditor verwenden(siehe Bild).
3. Stell eine Verbindung mit Filezille her. Ersetze die Daten in den Feldern mit deinen Daten. Der Standart SFTP/SSH Port ist 22.
4. Navigiere zum Tablet-UI Ordner /opt/fhem/www/tablet/ und mach ein Rechtsklick Ansehen/Bearbeiten auf die index.html Datei. Danach Lokale Datei verwerfen, dann Datei neu herunterladen und bearbeiten auswählen. Jetzt sollte sich die Datei im Atom Editor öffnen.
5. Wenn du jetzt die veränderte Datei im Atom Editor speicherst fragt dich Filezille, ob sie zurück auf den Server geladen werden soll. Klick auf Ja. Dies kannst du jetzt so oft wiederholen bis du die Datei im Editor schließt, oder sie lokal an einem anderen Ort speicherst.

Tablet-UI index.html Datei im Atom.io Editor geöffnet

Es kann sein das du die geänderte index.html Datei nicht speichern kannst, da du nicht die benötigten Benutzerrechte besitzt. Das kannst du ändern indem du dich als Besitzer der Datei einträgst. Navigiere in den Ordner wo sich die index.html befindet cd /opt/fhem/www/tablet und ändere den Besitzer der Datei. Ersetze Mr-T mit deinen Benutzernamen. Der Befehl whoami gibt dir deinen aktuellen Benutzernamen aus. sudo chown Mr-T index.html