QCD BrowseAmp manual
for v1.99 beta 2

 

back
chapter 2: creating skins

2.1 General information

2.2 HTML tags

2.3 Hyperlink commands

2.4 Publishing your skins

 

 

2.1 General information
QCD BrowseAmp -> creating skins -> General information

BrowseAmp is designed to be used with many different skins. All you can see in your webbrowser can be modified by you. The modular template structure allows you to use html code snippets in many different ways.

The skin html file is parsed by BrowseAmp and all valid HTML-Tags are replaced with the information they describe.

 

 


what is needed for a skin

If you want to create a skin that is detected by BrowseAmp you need to:

  • add a new directory for your skin in the BrowseAmp directory
    example: %QCD-Dir%\plugins\browseamp\myskin
  • create an index.html file that is designated to be the main page

With these two steps BrowseAmp should detect your skin on a QCD restart.

 

2.2 HTML tags
QCD BrowseAmp -> creating skins -> HTML tags

Any information provided by the Player can be displayed with HTML-Tags. These little things are placed in any Skin-file wherever you want. The file is parsed by BrowseAmp and the tags are replaced with the specific information the tags describe. Just try it!

Tagname syntax
<#Tagname parameter1=content1 parameter2="some content with blanks">

Some hints how to use the tags

If a parameter contains blanks you need some " "

Attention: Use &lt; and &gt; instead of < or >. If you don't replace the "<>" you could get access violations!

Tagname is NOT case sensitive. <#date> or <#DaTe> will do the same.

Example 1
<#Channels on_stereo="&lt;img src='gfx/stereo.gif&gt;'" on_mono="&lt;img src='gfx/mono.gif&gt;'">

Example 2
<img src="gfx/<#Channels on_stereo=stereo.gif on_mono=mono.gif>">

 

adding a file at the tag position

<#include file=filename>

inserts the given file at the current position.

Parameter
file: required, specifies a path/filename to include.

Example
<#include file=templates/playlist_template2.html>

 

show all available drives

<#browser_drives template=filename>

Used to build a list of all available drives on your system.

Parameter
template: required, Specifies a path/filename to use as template for a drive. The template is inserted for EVERY drive found on your system. You can use table rows <tr>...</tr> for example.

Example
<#browser_drives template=templates/browser_drives.html>


insert a drive

<#browser_drivename>

Should be used in the template for browser_drives. The tag is replaced with a drive.

Parameter
none.

Example
<a href="browser.html?drive=<#browser_enc_drivename>"> <#browser_drivename></a>


insert an url encoded drive name

<#browser_enc_drivename>

Should be used in the template for browser_drives. The tag is replaced with a url encoded drive name. That is needed for links.

Parameter
none.

Example
<a href="browser.html?drive=<#browser_enc_drivename>"> <#browser_drivename></a>

 

show a list of all directories

<#browser_directories template=filename>

Used to build a list of directories in the current folder.

Parameter
template: required, Specifies a path/filename to use as template for a directory. The template is inserted for EVERY directory found in the current browser directory. You can use table rows <tr>...</tr> for example.

Example
<#browser_directories template=templates/browser_directories.html>


insert a directory name

<#browser_directoryname>

Should be used in the template for browser_directories. The tag is replaced with a directory name.

Parameter
none.

Example
<a href="browser.html?dir=<#browser_enc_directoryname>"> <#browser_directoryname></a>


insert a directory name in a form

<#browser_form_directoryname>

Should be used in the template for browser_directories. The tag is replaced with a directory name modified to be used in a form (e.g. checkbox).

Parameter
none.

Example
<input name="add" type="checkbox" id="add" value="<#browser_form_directoryname>">


insert an url encoded directory name

<#browser_enc_directoryname>

Should be used in the template for browser_directories. The tag is replaced with a url encoded directory name. That is needed for links.

Parameter
none.

Example
<a href="browser.html?dir=<#browser_enc_directoryname>"> <#browser_directoryname></a>

 

show a list of all files

<#browser_files template=filename>

Used to build a list of files in the current folder.

Parameter
template: required, Specifies a path/filename to use as template for a file. The template is inserted for EVERY file found in the current browser directory. You can use table rows <tr>...</tr> for example.

Example
<#browser_files template=templates/browser_files.html>


insert a filename

<#browser_filename>

Should be used in the template for browser_files. The tag is replaced with a filename.

Parameter
none.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>


insert a filename in a form

<#browser_form_filename>

Should be used in the template for browser_files. The tag is replaced with a filename modified to be used in a form (e.g. checkbox).

Parameter
none.

Example
<input name="add" type="checkbox" id="add" value="<#browser_form_filename>">


insert an url encoded filename

<#browser_enc_filename>

Should be used in the template for browser_files. The tag is replaced with a url encoded filename. That is needed for links.

Parameter
none.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

 

show the current directory

<#CurrentBrowserDirectory>

Is replaced with the directory you are currently in.

Parameter
none.

Example
Current folder: <#CurrentBrowserDirectory>

 

show the current playlist

<#playlist template=filename highlight=filename next=filename length=# offset=#>

Used to build a list of files in the current folder.

Parameters
template: required, Specifies a path/filename to use as template for a song. The template is inserted for EVERY song in the current playlist. You can use table rows <tr>...</tr> for example.

highlight
: Specifies a path/filename to use as template for the current track playing. You can use table rows <tr>...</tr> for example.

next: Specifies a path/filename to use as template for the next track beeing played. You can use table rows <tr>...</tr> for example.

length: many song to show (integer).

offset: specifies the beginning of the playlist relative to the current track. If you use offset=-2 then the two tracks before the current track are also shown. You will understand that when you tried it...

Example
<#playlist template=templates/playlist_row2.html highlight=templates/playlist_hlrow2.html next=templates/playlist_nextrow2.html offset=-2 length=10>


show the path an filename of a playlist entry

<#playlist_filename>

Should be used in a template for playlist. The tag is replaced with the filename of a song.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>


show the artist of a playlist entry

<#playlist_artist>

Should be used in a template for playlist. The tag is replaced with the artist of a track.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>


show the title of a playlist entry

<#playlist_title>

Should be used in a template for playlist. The tag is replaced with the title of a track.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>


show the artist and title of a playlist entry

<#playlist_songtitle>

Should be used in a template for playlist. The tag is replaced with "<#artist> - <#title>" of a track. If <#artist> is empty it is only repleaced with <#title>.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_songtitle></a>


show the ID of a playlist entry

<#playlist_songid>

Should be used in a template for playlist. The tag is replaced with the ID of a track. This is used for hyperlink commands affecting the playlist. The ID is the CRC32 value of the filename combined with the current playlist index. Using IDs keeps the HTML code short but unreadable. ;-)

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>


show the index of a playlist entry

<#playlist_index>

Should be used in a template for playlist. The tag is replaced with the index of a track in the current playlist. Creates numbers from 1...n.

Parameter
none.

Example
<td><#playlist_index></td>


show the length of a playlist entry in minutes

<#playlist_songlengthmin>

Should be used in a template for playlist. The tag is replaced with the length of a track of the current playlist in minutes. Creates numbers from 1...n.

Parameter
none.

Example
<#playlist_songlengthmin>:<#playlist_songlengthsec>


show the length of a playlist entry in seconds

<#playlist_songlengthsec>

Should be used in a template for playlist. The tag is replaced with the length of a track of the current playlist in seconds. Creates numbers from 01...nn.

Parameter
none.

Example
<#playlist_songlengthmin>:<#playlist_songlengthsec>

 

show the length of the whole playlist

<#playlist_length>

The tag is replaced with the length of the whole playlist. Format: "h:mm:ss"

Parameter
none.

Example
total: <#playlist_length>

 

show the current time

<#time>

Shows the time. The format depends on your local settings.

Parameter
none.

Example
server time: <#date> - <#time>


show the current date

<#date>

Shows the date. The format depends on your local settings.

Parameter
none.

Example
server time: <#date> - <#time>

 

show the player version number

<#PlayerVersion>

show the player version number. Like "3.40".

Parameter
none.

Example
QCD version: <#PlayerVersion>


show the BrowseAmp version number

<#BrowseAmpVersion>

show the BrowseAmp version. Like "1.99 beta 2".

Parameter
none.

Example
BrowseAmp version: <#BrowseAmpVersion>

 

show the current username

<#CurrentUser>

show the username or "user management disabled" if you don't use it.

Parameter
none.

Example
current user: <#CurrentUser>


show the root directory of the current user

<#RootDirectory>

show the root directory of the current user.

Parameter
none.

Example
MP3 Root Directory: <#RootDirectory>


insert the charset of the current user

<#Charset>

show the charset of the current user. Use that in your HEAD tag to set the correct charset or use it in a dropdown combo to let the user select a charset (see base skin).

Parameter
none.

Example
<meta http-equiv="Content-Type" content="text/html; charset=<#Charset>">

 

insert the artist of the current song

<#artist>

Insert the artist of the current song.

Parameter
none.

Example
now playing: <#artist> - <#title>


insert the title of the current song

<#title>

Insert the title of the current song.

Parameter
none.

Example
now playing: <#artist> - <#title>


insert the name of the current song

<#SongTitle>

Is replaced with <#artist> - <#title>. If <#artist> is empty it is replaced only with <#title>.

Parameter
none.

Example
now playing: <#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)

 

insert the length of the current song in minutes

<#SongLengthMin>

Insert the length of the current song in minutes. Format: "mm"

Parameter
none.

Example
now playing: <#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)


insert the length of the current song in seconds

<#SongLengthSec>

Insert the length of the current song in seconds. Format: "ss"

Parameter
none.

Example
now playing: <#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)


insert the position in the current song in minutes

<#SongPositionMin>

Insert the position of the current song in minutes. Format: "mm"

Parameter
none.

Example
position: <#SongPositionMin>:<#SongPositionSec>


insert the position in the current song in seconds

<#SongPositionSec>

Insert the position of the current song in seconds. Format: "ss"

Parameter
none.

Example
position: <#SongPositionMin>:<#SongPositionSec>


insert the remaining time of the current song in minutes

<#SongRemainMin>

Insert the remaining time of the current song in minutes. Format: "mm"

Parameter
none.

Example
remaining: -<#SongRemainMin>:<#SongRemainSec>


insert the remaining time of the current song in seconds

<#SongRemainSec>

Insert the remaining time of the current song in seconds. Format: "ss"

Parameter
none.

Example
remaining: -<#SongRemainMin>:<#SongRemainSec>


insert the bitrate of the current song

<#Bitrate>

Insert the bitrate of the current song in kHz.

Parameter
none.

Example
<#Bitrate>kbps, <#Samplerate>kHz <#Channels on_mono="uhh... mono!">


insert the samplerate of the current song

<#Samplerate>

Insert the samplerate of the current song in kbps.

Parameter
none.

Example
<#Bitrate>kbps, <#Samplerate>kHz <#Channels on_mono="uhh... mono!">


insert the number of channels of the current song

<#Samplerate>

Insert the number of channels of the current song. Says "mono" or "stereo" by default.

Parameters
on_mono: String to insert if the current track is mono.

on_stereo
: String to insert if the current track is stereo.

Example
<#Channels on_mono="uhh... mono!">

 

insert the shuffle state

<#ShuffleState>
<#ShuffleStatus>

Can be "on" or "off" by default.

Parameters
on: String to insert if shuffling is on.

off
: String to insert if shuffling is off.

Example
<#Channels on_mono="uhh... mono!">


insert the repeat state

<#RepeatState>
<#RepeatStatus>

Can be "off", "track" or "all" by default.

Parameters
off: String to insert if repeat is off.

track
: String to insert if repeat is set to track.

all: String to insert if repeat is set to all.

Example
Shuffle <#ShuffleStatus>    Repeat <#RepeatStatus>


insert the main volume

<#Volume>

Shows a number from 0...100 representing the current volume.

Parameters
none

Example
Volume: <#Volume>%

 

insert a list of all available skins

<#skinlist template=filename>

Create a list of all available web skins.

Parameters
template: required, Specifies a path/filename to use as template for a skin. The template is inserted for EVERY skin. You can use table rows <tr>...</tr> for example.

Example
<#SkinList template=templates/skin_template.html>


insert a skinname

<#skin_name>

Should be used in the template for skinlist. The tag is replaced with a skin name.

Parameter
none.

Example
<a href="index.html?skin=<#skin_enc_name>"><#skin_name></a>


insert an url encoded skinname

<#skin_enc_name>

Should be used in the template for skinlist. The tag is replaced with an url encoded skin name. That is needed for links.

Parameter
none.

Example
<a href="index.html?skin=<#skin_enc_name>"><#skin_name></a>

 

 

2.3 Hyperlink commands
QCD BrowseAmp -> creating skins -> Hyperlink commands

Hyperlink command are used to tell BrowseAmp what to do. These commands are added to the requested url or posted with a form.

The commands are separated from the html document by a question mark "?". Multiple parameters are separated by a "&".

Syntax
<a href="index.html?command1&command2=parameter&command3">do something</a>

where index.html can be every file you use.

 

Example 1
<a href="index.html?play"><img src="GFX/play.gif" width="24" height="24" border="0" alt="start playback">

Example 2
<a href="index.html?volume=0&stop">silence!</a>

A list of all available commands follows.

 

start playback

play

Start playback.

Parameters
none

Example
<a href="index.html?play">play</a>


stop playback

stop

Stop playback.

Parameters
none

Example
<a href="index.html?stop">stop</a>


pause playback

pause

pause playback.

Parameters
none

Example
<a href="index.html?pause">pause</a>


move 5 seconds forward

forward

move 5 seconds forward.

Parameters
none

Example
<a href="index.html?forward">ffw</a>


move 5 seconds reverse

reverse

move 5 seconds reverse.

Parameters
none

Example
<a href="index.html?reverse">rev</a>


skips to next track

next

skips to next track.

Parameters
none

Example
<a href="index.html?next">next track</a>


skips to previous track

prev

skips to previous track.

Parameters
none

Example
<a href="index.html?prev">previous track</a>

 

toggle repeat

repeat

toggles repeat state. Can be off, track or all.

Parameters
none

Example
<a href="index.html?repeat">Repeat</a>


toggle shuffle

shuffle

toggles shuffle state. Can be on or off.

Parameters
none

Example
<a href="index.html?shuffle">shuffle</a>

 

clear playlist

clear

clear the current playlist.

Parameters
none

Example
<a href="index.html?clear">clear playlist </a>

 

jump to home folder

home

Resets the current folder to the standard folder. Useful when you're lost...

Parameters
none

Example
<a href="index.html?home">home</a>

 

set volume

volume=#

Set the current volume.

Parameters
#: volume from 0...100

Example
<a href="index.html?volume=0">mute</a>


increase volume

incvol=#

Increase the current volume.

Parameters
#: step from 0...100

Example
<a href="index.html?incvol=10">&nbsp;+&nbsp;</a>


decrease volume

decvol=#

Decrease the current volume.

Parameters
#: step from 0...100

Example
<a href="index.html?decvol=10">&nbsp;-&nbsp;</a>

 

set charset

charset=<string>

Set the current charset. A valid charset looks like iso-8859-1 for latin1. You can use a form with a dropdown box to select charset (see base skin, option.html)

Parameters
<string>: the charset you like

Example
<a href="index.html?charset=iso-8859-1">defaut charset </a>

 

search playlist

search_playlist_string=<string>

The playlist is filtered with the string given in the parameter. Only track that match the searchstring are displayed in the playlist. Use this with an input field in a form. (see base skin, playlist.html)

Parameters
<string>: what you are searching for

Example
<form name="form1" method="get" action="" class="standard">search: <input name="search_playlist_string" type="text" id="search_playlist_string"> &nbsp; <input type="submit" name="button" value=" search "> </form>


search files

search_files_string=<string>

Search your harddrive. Only files/directories that match the searchstring are displayed in the browser. (see base skin, browser.html)

Parameters
<string>: what you are searching for

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>


search for directories

search_for_directories=true

This is an option for searching files. If set to true the search includes directories. (see base skin, browser.html)

Parameters
true: for including directories to the search. Anything else but true if not.

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>


search for files

search_for_files=true

This is an option for searching files. If set to true the search includes files. (see base skin, browser.html)

Parameters
true: for including files to the search. Anything else but true if not.

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>


search in subdirectories

search_in_subdirs=true

This is an option for searching files. If set to true the search includes all subdirectories of the current folder. (see base skin, browser.html)

Parameters
true: for including subdirectories to the search. Anything else but true if not.

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>

 

play a track

playsong=#
playtrack=#

Specify a track to play immeadiately. Use this command in a playlist row template.

Parameters
#: the SongID of a track

Example
<a href="?playtrack=<#playlist_songid>"><#playlist_artist> - <#playlist_title></a>

 

remove a track

removesong=#
removetrack=#

Remove a track from the playlist. Use this command in a playlist row template.

Parameters
#: the SongID of a track

Example
<a href="?removesong=<#playlist_songid>">remove track</a>

 

change the current drive

drive=<string>

Change the current drive. Use this command in a browser drive row template.

Parameters
<string>: Use the browser_enc_drivename tag to specify a drive

Example
<a href="browser.html?drive=<#browser_enc_drivename>"> <#browser_drivename></a>


change the current directory

dir=<string>

Change the current directory. Use this command in a browser directories row template.

Parameters
<string>: Use the browser_enc_directoryname tag to specify a directory

Example
<a href="browser.html?dir=<#browser_enc_directoryname>"> <#browser_directoryname></a>


add a file or directory to the playlist

add=<string>

Adds a file or a directory to the playlist. Use this command in a browser files/directories row template.

Parameters
<string>: Use the browser_enc_directoryname tag to specify a directory or browser_enc_filename to specify a file.

Example
<a href="browser.html?add=<#browser_enc_directoryname>">add</a>


add and play file

file=<string>

Adds a file to the playlist and starts playback of that file. Use this command in a browser files row template.

Parameters
<string>: Use the browser_enc_filename to specify a file.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

 

use another web skin

skin=<string>

Select a web skin. Use this command in skin template.

Parameters
<string>: Use the skin_enc_name to specify a file.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

 

2.4 Publishing your skins
QCD BrowseAmp -> creating skins -> Publishing your skins

coming soon...

 

 

last change: 2003-03-23 , Henry Thasler