Die folgenden Seiten behandeln nicht mehr die Bedienung des Webservers, sondern das Konzept, damit eigene Themes erstellt werden können.

Nemp benutzt für die Anzeige im Webbrowser ein verschachteltes Template-System. Die einzelnen Template-Dateien (Dateiendung .tpl) können mit einem normalen Texteditor erstellt bzw. bearbeitet werden. Die Templates enthalten den HTML-Code, den der WebServer ausgeben soll, der allerdings mit Platzhaltern der Form {{Platzhalter}} durchsetzt sind. Nemp wird je nach aufgerufener Seite und dazugehörigen Parametern diese Platzhalter durch sinnvolle Daten ersetzen.

Eine Übersicht über alle Templates und verfügbare Platzhalter finden Sie auch in der separaten Datei TemplateOverview.pdf. 

Zum Erstellen eines neuen Themes ist es sinnvoll, ein vorhandenes zu kopieren - dazu einfach das passende Theme-Verzeichnis im Verzeichnis <Nemp-Programmverzeichnis>\HTML\ kopieren. Das neue Theme wird nach einem Neustart von Nemp gefunden und steht zur Auswahl zur Verfügung. Änderungen an den Templates werden nach einem Neustart des Webservers wirksam.

body.tpl

Basis aller Seiten des Webservers bildet das Template body.tpl. Dieses enthält den Rahmen, der für alle Seiten gleich ist, und den Platzhalter {{Content}}, der durch den tatsächlichen Inhalt ersetzt wird. Dieser wird bestimmt durch eines der Seiten-Templates.

Seiten-Templates page*.tpl

Je nach aufgerufener URL wird für {{Content}} eines der Seiten-Templates geladen.

  • PagePlayer.tpl zeigt das aktuell abgespielte Stück im Browser an, und ggf. Möglichkeiten zur Steuerung des Players.
  • PagePlaylist.tpl zeigt die Playlist an.
  • PageLibraryDetails.tpl zeigt Details zu einem bestimmten Titel in der Playlist an
  • PageLibrary.tpl zeigt je nach dem, welche URL-Parameter mit übergeben werden, eine Liste von Alben, Interpreten oder Genres an, oder eine Liste von Titeln zu einem Interpreten, Album, Genre oder Suchbegriff.
  • PagePlaylistDetails.tpl zeigt Details zu einem bestimmten Titel aus der Medienbibliothek an.
  • PageError.tpl gibt eine Fehlermeldung aus, falls etwas schief gelaufen ist.

Datei-Templates ItemFile*.tpl

Auf den meisten Seiten werden Informationen zu einem oder mehreren Audiodateien ausgegeben. Wie diese Informationen ausgegeben werde, wird für jede Seite durch das entsprechende ItemFile-Template gesteuert. Dieses Templates verstehen eine ganze Reihe von Platzhaltern. Einige davon (z.B. {{Artist}} oder {{Album}}) geben Informationen zu dem Titel aus. Andere wie {{ID}} oder {{ArtistID}} werden durch interne IDs ersetzt, die für die Verlinkungen notwendig sind. Hinzu kommen einige Platzhalter für CSS-Klassen und Platzhalter für diverse Buttons (Download, Vote, Hinzufügen, etc.).

Für das Template ItemFilePlaylist.tpl, das bei der Anzeige der Playlist verwendet wird, kann auch der Platzhalter {{Progress}} genutzt werden. An dieser Stelle wird dann (ein entsprechendes JavaScript vorausgesetzt) der Fortschritt im aktuellen Titel angezeigt.

Fortschrittsbalken in der Playlist, SliderPlaylistItemProgress.tpl

Dieses Template ist reines HTML ohne weitere Platzhalter. Es kann für die Anzeige der Playlist verwendet werden, um bei dem Titel, der aktuell abgespielt wird, einen Fortschrittsbalken anzuzeigen. Dieser kann ggf. auch als Eingabe benutzt werden (wie auf der Player-Seite). Im Standard-Template ist das aber nicht implementiert.

Collection-Templates ItemBrowse*.tpl

Für die Ausgabe einer Liste von Interpreten, Alben oder Genres werden eigene Templates verwendet. Bei Interpreten und Genres ist im Wesentlichen nur der Name bzw. die Bezeichnung interessant, ggf. ergänzt um die Anzahl der Titel darin oder die Gesamtdauer der Titel. Aus der Anzahl der Titel berechnet Nemp außerdem eine passende Font-Größe zwischen 10 und 24, die in den Platzhalter {{FontIdx}} eingesetzt wird. Diese Info kann direkt als Schriftgröße im HTML-Code verwendet werden, oder indirekt über eine Klassenangabe.

Für Alben sind neben dem Albumtitel einige weitere Informationen sinnvoll - z.B. der Name des Interpreten und die Anzeige des Covers.

Zusammenfassung Summary*.tpl

Auf den Seiten, auf denen eine Liste von Dateien in der Medienbibliothek ausgegeben wird, kann zusätzlich eine Zusammenfassung zu dieser Dateiliste ausgegeben werden. Das beinhaltet Informationen wie {{Artist}}, {{Album}}, {{Genre}}, {{Year}}, {{Duration}}, {{Count}}, {{Search}}. Welche Informationen in dieser Zusammenfassung sinnvoll sind, hängt maßgeblich davon ab, ob es sich bei der Liste von Titeln um ein Album handelt, um alle Titel von einem Interpreten oder eines Genres, oder die Treffer-Liste zu einem Suchbegriff ist.

Bei der Zusammenfassung zu einem Interpreten kann der Platzhalter {{AlbumCount}} genutzt werden, um die Anzahl der Alben auszugeben, auf denen dieser Interpret vertreten ist.

Analog gibt es bei Genres über {{ArtistCount}} die Möglichkeit, die Anzahl der verschiedenen Interpreten auszugeben.

Hier kann auch ein HTML-Audio-Element eingefügt werden, welches per JavaScript mit allen Titeln gefüttert wird, die darunter angezeigt werden.

HTML-Audio HtmlFileAudio.tpl

Über das Audio-Element kann ein Titel im Browser abgespielt werden, ohne dass die Wiedergabe im eigentlichen Player dadurch beeinträchtigt wird. 

Nemp wird dabei keine Konvertierung der Dateien in ein Format übernehmen, das der Browser unterstützt. Es wird das Format an den Browser geliefert, in dem die Datei vorliegt. Über den Platzhalter {{Mime}} kann Nemp einen zum Format passenden Mime-Typen mitliefern. Bei gängigen Formaten wie mp3, flac und ogg-Dateien funktioniert das ganz gut, bei anderen eventuell nicht.

Das bedeutet auch, dass weder Webradio, noch CD-Audio im Browser angehört werden kann. Letzteres liegt auch daran, dass immer nur ein Titel gleichzeitig von einer CD abgespielt werden kann.

Button-Templates BtnFile*.tpl, BtnIconNowPlaying.tpl

In den Datei-Templates können Buttons eingebunden werden, die eine bestimmte Aktion auslösen. Der Platzhalter {{Action}} wird von Nemp automatisch so gesetzt, dass er zum Button passt (also die gewünschte Aktion auslösen kann). Der Platzhalter {{ID}} identifiziert die jeweilige Datei.

  • BtnFileDownload.tpl ermöglicht den Download der Datei.
  • BtnFilePlayNow.tpl fügt die Datei in die Playlist ein und startet die Wiedergabe
  • BtnFileVote.tpl setzt ein "Gefällt mir" für diesen Titel und sorgt dadurch dafür, dass dieser Titel bald abgespielt werden wird
  • BtnFileAdd.tpl fügt die Datei an das Ende der Playlist ein
  • BtnFileAddNext.tpl fügt die Datei so in die Playlist ein, dass sie "als nächstes" abgespielt wird. Das ist auch abhängig von den Dateien, für die es "likes" gibt.
  • BtnFileMoveUp.tpl und BtnFileMoveDown.tpl verschieben einen Titel in der Playlist um eine Position nach oben oder unten.
  • BtnFileDelete.tpl entfernt eine Datei aus der Playlist.

Für HTML-Audio gibt es zwei weitere Templates. Diese sind nicht für die Steuerung des Players gedacht, sondern für die Wiedergabe einer Liste von Titeln im Browser. Hier ist auf jeden Fall ein passendes JavaScript erforderlich.

  • BtnFilePlayBrowser.tpl ermöglicht es, den Titel im Browser abzuspielen. Im onclick-Event sollte eine Funktion aufgerufen werden, die den Titel in das (oder eines?) HTML-Audio-Element lädt und abspielt oder wieder pausiert.
  • BtnIconNowPlaying.tpl ist ein Platzhalter für eine Grafik am Titel, die angibt, welcher Titel in der Liste gerade abgespielt wird.


Navigations-Templates

Für die Navigation und das Menü gibt es drei Templates.

  • MenuMain.tpl gibt das Hauptmenü aus, also Links zu den Seiten für Player, Playlist und Library, ggf. ergänzt um statische Seiten.
  • MenuLibrary.tpl erzeugt das Untermenü auf der Library-Seite, also Artist-Album-Genre-Search, inkl. ggf des Untermenüs mit der Aufteilung nach Anfangsbuchstaben.
  • Pagination.tpl erzeugt die Seiten-Navigation für große Titellisten