The following pages do not deal with the operation of the web server anymore, but with the concept, so that own themes can be created.

Nemp uses a nested template system for the display in the web browser. The individual template files (file extension .tpl) can be created or edited with a standard text editor. The templates contain the HTML code that the WebServer should produce, but with placeholders of the form {{placeholder}} in between. Nemp will replace these placeholders with meaningful data depending on the page being called and the related parameters.

An overview of all templates and available placeholders can also be found in the separate file TemplateOverview.pdf. 

To create a new theme, it makes sense to copy an existing one - just copy the theme directory in the <Nemp program directory>\HTML\ directory. The new theme will be found after a restart of Nemp and will be available for selection. Changes to the templates will take effect after a restart of the web server.

body.tpl

The base of all pages of the web server is the template body.tpl. This contains the body, which is the same for all pages, and the placeholder {{Content}}, which is replaced by the actual content. This content is determined by one of the page templates.

Page templates page*.tpl

Depending on the URL called, one of the page templates is loaded for {{Content}}.

  • PagePlayer.tpl displays the currently playing track in the browser and, if applicable, control options for the player.
  • PagePlaylist.tpl displays the playlist.
  • PageLibraryDetails.tpl displays details about a specific track in the playlist.
  • PageLibrary.tpl displays a list of albums, artists or genres, or a list of tracks for an artist, album, genre or search term, depending on which URL parameters are passed in.
  • PagePlaylistDetails.tpl displays details about a specific track from the media library.
  • PageError.tpl displays an error message if something went wrong.

File templates ItemFile*.tpl

On most pages, information about one or more audio files is displayed. How this information is shown is controlled for each page by the corresponding ItemFile template. This template understands a whole set of placeholders. Some of them (e.g. {{Artist}} or {{Album}}) output information about the title. Others like {{ID}} or {{ArtistID}} are replaced by internal IDs necessary for linking. In addition, there are some placeholders for CSS classes and placeholders for various buttons (download, vote, add, etc.).

For the template ItemFilePlaylist.tpl, which is used when displaying the playlist, the placeholder {{Progress}} can also be used. At this position, the progress in the current title is then displayed ( this requires an appropriate JavaScript).

Progress bar in the playlist, SliderPlaylistItemProgress.tpl

This template is pure HTML without any other placeholders. It can be used for the playlist to show a progress bar at the title that is currently playing. This can also be used as input if necessary (like on the player page), but this is not implemented in the default template.

Collection templates ItemBrowse*.tpl

For the output of a list of artists, albums or genres separate templates are used. For artists and genres basically only the name or the description is interesting, if necessary supplemented by the number of titles in it or the total duration of the titles. From the number of titles Nemp also calculates a suitable font size between 10 and 24, which is inserted into the placeholder {{FontIdx}}. This info can be used directly as font size in the HTML code, or indirectly via a class specification.

For albums, some other information is useful besides the album title - e.g. the name of the artist and the display of the cover.

Summary, Summary*.tpl

On the pages on which a list of files in the media library is output, a summary of this file list can also be output.

This includes data like {{Artist}}, {{Album}}, {{Genre}}, {{Year}}, {{Duration}}, {{Count}}, {{Search}}. What information is useful in this summary depends largely on whether the list of tracks is an album, all tracks from an artist or genre, or the result list for a search term.

When summarizing an artist, the additional placeholder {{AlbumCount}} can be used to output the number of albums where this artist is featured.

Similarly, for genres, {{ArtistCount}} can be used to output the number of different artists.

In the summary, an HTML audio element can also be included, which can be filled via JavaScript with all titles that are displayed below it.

HTML Audio, HtmlFileAudio.tpl

The audio element can be used to play a track in the browser without affecting the playback in the actual player. 

Nemp will not convert the files to a format that the browser supports. It will deliver the format to the browser in which the file is encoded. Using the {{Mime}} placeholder, Nemp can supply a mime type that matches the format. For common formats like mp3, flac and ogg files this works quite well, for others it may not.

This also means that neither web radio nor CD audio can be listened to in the browser. The latter is also due to the fact that only one track can be played from a CD at a time.

Button templates BtnFile*.tpl, BtnIconNowPlaying.tpl

In the file templates, buttons can be included that trigger a specific action. The placeholder {{Action}} is automatically set by Nemp so that it matches the button (i.e. can trigger the desired action). The placeholder {{ID}} identifies the respective file.

  • BtnFileDownload.tpl enables the download of a file.
  • BtnFilePlayNow.tpl adds the file to the playlist and starts playback.
  • BtnFileVote.tpl sets a "Like" for this title and makes sure that this title will be played soon
  • BtnFileAdd.tpl adds the file to the end of the playlist
  • BtnFileAddNext.tpl inserts the file into the playlist so that it will be played "next". This also depends on the files for which there are "likes".
  • BtnFileMoveUp.tpl and BtnFileMoveDown.tpl move a title in the playlist one position up or down.
  • BtnFileDelete.tpl removes a file from the playlist.

For HTML audio there are two more templates. These are not for controlling the player, but for playing a list of tracks in the browser. A suitable JavaScript is required here in any case.

  • BtnFilePlayBrowser.tpl allows to play the title in the browser. In the onclick event, a function should be called that loads the title into the (or a?) HTML audio element and plays or pauses it again.
  • BtnIconNowPlaying.tpl is a placeholder for a graphic at the title that indicates which title in the list is currently playing.

Navigation templates

There are three templates for the navigation and the menu.

  • MenuMain.tpl creates the main menu, i.e. links to the pages for Player, Playlist and Library, extended by static pages if desired.
  • MenuLibrary.tpl creates the submenu on the Library page, i.e. Artist-Album-Genre-Search, incl. if required the submenu with the separation by first letters.
  • Pagination.tpl creates the page navigation for large title lists.