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

  • geeignet um schnell kleine Änderungen an einer Datei vorzunehmen
  • keine zusätzliche Software erforderlich
  • die Maus kann nicht verwendet werden
  • keine Syntaxhervorhebung
  1. 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

  2. Navigiere zum Ordner mit der zu bearbeitenden Datei.
    cd /opt/fhem/www/tablet/
  3. Öffne die Datei mit dem Nano Texteditor und verändere den Inhalt.
    nano index.html
  4. 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.
FHEM Tablet UI index.html nano editor
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).
    Atom Editor als Standart Editor für Filezilla Einstellungen
  3. Stell eine Verbindung mit Filezille her.
    Ersetze die Daten in den Feldern mit deinen Daten. Der Standart SFTP/SSH Port ist 22.
    filezilla Verbindung via SFTP herstellen
  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.
    Filezilla "Ansehen/Bearbeiten"
  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.
    Filezilla Datei wurde geändert
fhem tablet-ui atom editor index.html
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

Gib deine Stimme ab!

33 Likes
Upvote Downvote

Total votes: 28

Upvotes: 27

Upvotes percentage: 96.428571%

Downvotes: 1

Downvotes percentage: 3.571429%

Geschrieben von Ben

#Blogger #Designer #RaspeberryFan #Self-Employed #Developer #Javascript
TwitterGithubThingiverse

4 Kommentare

Kommentar verfassen
  1. Ich habe soweit alles was ich in fhem habe als Tablet UI eingerichtet.
    Wie geht es jetzt weiter mit dem Android Tablet und Vollbild sowie Daueranzeige des Displays?
    Wie richtet ma so etwa ein?

  2. Hallo Ben,
    Ich bedanke mich für die Anleitung hinsichtlich Tablettansicht. Geht das auf dem selben Weg auch auf einem normalen PC? Ich habe noch kein Tablett und sehe in naher Zukunft auch keinen Bedarf.
    Was ich nicht begriffen habe ist Punkt 4. Alte Datei verwerfen und neue Datei laden.
    Wo finde ich die neue Datei. Bitte nicht lachen aber ich bin scjhon etwas älter und habe so meine Verständigungsprobleme. Deshalb bin ich immer froh wenn ich einen Beitrag gefunden habe der für mich halbwegs verständlich ist.
    Ich hoffe, Du antwortest mir aber trotzdem.
    Gruß Michael

    • Hallo Michael,
      diese Meldung erscheint nur, wenn du die selbe Datei (wie zB. die index.html) schon einmal auf diesem Weg geöffnet hast.

      In Filezilla öffnest du die index.html Datei. Dies geht aber nicht auf dem “direkten Weg”, da sie ja auf einem anderen Rechner/Server gespeichert ist. Deshalb läd Filezilla erst die Datei auf deinen Computer wo du gerade davor sitzt und öffnet sie dann erst.
      Wenn du davor schon einmal die selbe Datei bearbeitet hast, ist die vorherige Version der index.html Datei noch auf deinem Computer. Deshalb erscheint die Meldung.

One Ping

  1. Pingback:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.