Skinning Information
From
This is currently a work in progress with no real organization to it yet.
Contents |
[edit] Basic Skin Requirements
There are a couple rather important things that should be taken into mind when designing and creating a skin. The first is that everything is CASE SENSITIVE!. I know this is a new concept to windows users, but being as this is cross platform I'm keeping everything standardized. Also there must be a Menu1.xml. This skin file does not have to be a menu per se, but it has to be something as it will be the first window shown when RevFE loads. Reference the Rev skin for an example of how to create a non-menu based skin.
There are a bare set of common controls required for RevFE to function as a media player. You can reference the included AudioPlayer.xml in the default skin set for most of these.
[edit] Listboxes
There are two primary listboxes that RevFE is set up to use to provide media functionality. The first is playlistListBox. This is a single column listbox that will be populated on load with a list of the currently loaded playlists. You send a playlist to the MediaLibrary with this command:
MediaLibrary:playlist set !%LISTBOX-playlistListBox-ITEMTEXT%!
This will send the currently selected text to MediaLibrary and it will take care of loading that playlist into memory and getting it prepared to play.
This brings into play the second listbox required, which is currentPlaylistBox. This listbox is populated with a list of songs in the current playlist. Unlike the list of playlists, music is played by index, not text. Hence the command required to start a selected song playing is: Code:
MediaEngine:media play !%LISTBOX-currentPlaylistBox-ITEMINDEX%!
Please note the ITEMINDEX as opposed to ITEMTEXT. These commands are usable on any listbox. This can either be a standalone button, or the cmd="" on the listbox itself. If it is a standalone button and you have nothing selected, nothing will happen!
[edit] Labels
There are a couple of variables which come into play at this point, which display information about the song currently being played. Below are two example labels (text display boxes). The first one displays current and total track time. The second one displays artist and title information. All these values are for the currently playing track.
<label> <properties name="trackTime2" text="%TT-CURRENTTIME%/%TT-TOTALTIME%" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" /> <geometry x="410" y="445" width="250" height="35" /> <function cmd="" textvalues="%TT-CURRENTTIME%,%TT-TOTALTIME%" /> </label> <label> <properties name="currentSongLabel2" text="%ID3-CURRENTARTIST% - %ID3-CURRENTTITLE%" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" /> <geometry x="10" y="410" width="500" height="35" /> <function cmd="" textvalues="%ID3-CURRENTARTIST%,%ID3-CURRENTTITLE%" /> </label>
The text field denotes how the text will be displayed, and the textvalues field is a comma delimited list of variables used. if you have a variable in the text field, but not in textvalues, it will not be updated.
[edit] Buttons
Once you have a playlist loaded, a song started, and you are watching the numbers tick down as the song plays you probably are going to want to be able to control this song, play/pause/stop, and move around the playlist. This is achieved through some MediaEngine commands:
MediaEngine:media pause
This will pause or unpause (as a toggle) the song.
MediaEngine:media stop
This will stop the current song from playing, and reset it to the beginning
MediaEngine:media prev
This will move back one song in the playlist
MediaEngine:media next
This will move forward one song in the playlist
If you assign these commands to buttons as such:
<button> <properties name="pauseButton" text="" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" /> <geometry x="200" y="500" width="100" height="100" /> <function cmd="MediaEngine:media pause" textvalues="" /> </button>
You can now easily control the flow of a song.
[edit] Window control
Let's assume you loaded a playlist slightly larger than your screen. You are going to need a way to scroll around this playlist (Or list of playlists in the case of the playlistmanagerwindow.xml). You can set up a button with the command
WindowName:window scroll-up !listboxname!
Let's assume your window is called AudioPlayer.xml as it is in the default skin, and your listbox is currentPlaylistBox. The following command would scroll the box up:
AudioPlayer:window scroll-up !currentPlaylistBox!
You also have scroll-down, page-up, and page-down which follow the same format:
AudioPlayer:window scroll-down !currentPlaylistBox! AudioPlayer:window page-up !currentPlaylistBox! AudioPlayer:window page-down !currentPlaylistBox!
That's enough about media, let's talk about window control. There are a couple of things you can do with windows. When RevFE first loads, you only have one window showing. To display other windows you must show them. Let's say you have a button on your menu to show the AudioPlayer. The command would be:
AudioPlayer:window show
Likewise, if you have a button on the audio player to hide itself (to go back to the main menu) it would be:
AudioPlayer:window hide
There is also a "back" feature, which will take you to the last-shown window:
WindowManager:window showlast
This is useful if your skin does not follow a linear layout, eg it does not have a main menu, but rather windows link to each other.
[edit] Button Commands
Multiple commands from one button are possible
<function cmdcount="2" cmd0="FileBrowser:file sendlist !MediaLibrary! !playlist! !addsongs!" cmd1="FileBrowserWindow:window hide"/> <function cmd="FileBrowser:file select !%selectedtext%!"/>
playlist editing
MediaLibrary:playlist addsongs !songpathname1! !songpathname2! MediaLibrary:playlist removesong !index! MediaLibrary:playlist movesongdown/movesongup !index!
[edit] Basic Skin Layout
First of all, here is an example of a skin XML file for an Audio Player type window.
<!-- This is the first line in the file. It sets the skin name and version. -->
<skin name="Default" version="1.00">
<!-- This holds information about the skin's author -->
<author name="Michael Carpenter" email = "mcarpenter@interforcesystems.com" comment=""/>
<!-- This is the base size and position of the window upon creation -->
<geometry x="0" y="0" width="800" height="600"/>
<!-- The three images are the three default images you see on a skin. You should have these three at a minimum -->
<!-- You can also have NIGHT:ON NIGHT:OFF and NIGHT:DOWN which will auto-switch should you have the day/night skin switcher -->
<!-- plugin -->
<background>
<bgimage filename="AudioPlayer_ON.png" name="DAY:ON"/>
<bgimage filename="AudioPlayer_OFF.png" name="DAY:OFF"/>
<bgimage filename="AudioPlayer_DOWN.png" name="DAY:DOWN"/>
</background>
<!-- A command to be executed when this particular skin file is loaded. In this example -->
<!-- this allows the window to get a list of the current songs in the "Now Playing" list -->
<onload cmd="MediaEngine:playlist getlist"/>
<!-- Layout contains information relating to the actual visual properties of a window -->
<layout>
<!-- controls are things like buttons, listboxes, labels, etc -->
<controls>
<!-- The primary user interaction control is a button. the text field is ALWAYS empty unless -->
<!-- there is no background image as listed above. Most of the fields are self explanitory -->
<!-- except function. cmd="" contains the command to be executed when a button is clicked -->
<!-- You can have multiple commands executed as this example from another skin file: -->
<!-- <function cmdcount="2" cmd0="SingleLineOsk:cmd init !MediaLibrary! !playlist! !savecurrentplaylist!" cmd1="OskWindow:window show"/> -->
<button>
<properties name="playButton" text=""/>
<geometry x="100" y="500" width="100" height="100"/>
<function cmd="MediaEngine:media play"/>
</button>
<button>
<properties name="pauseButton" text=""/>
<geometry x="200" y="500" width="100" height="100"/>
<function cmd="MediaEngine:media pause"/>
</button>
<button>
<properties name="stopButton" text=""/>
<geometry x="300" y="500" width="100" height="100"/>
<function cmd="MediaEngine:media stop"/>
</button>
<button>
<properties name="prevButton" text=""/>
<geometry x="0" y="500" width="100" height="100"/>
<function cmd="MediaEngine:media prev"/>
</button>
<button>
<properties name="nextButton" text=""/>
<geometry x="400" y="500" width="100" height="100"/>
<function cmd="MediaEngine:media next"/>
</button>
<button>
<properties name="upButton" text=""/>
<geometry x="700" y="0" width="100" height="100"/>
<function cmd="AudioPlayer:window scroll-up"/>
</button>
<button>
<properties name="downButton" text=""/>
<geometry x="700" y="300" width="100" height="100"/>
<function cmd="AudioPlayer:window scroll-down"/>
</button>
<button>
<properties name="EditButton" text=""/>
<geometry x="700" y="400" width="100" height="100"/>
<function cmd="PlaylistEditorWindow:window show"/>
</button>
<button>
<properties name="BackButton" text=""/>
<geometry x="600" y="500" width="100" height="100"/>
<function cmd="WindowManager:window showlast"/>
</button>
<button>
<properties name="pageUpButton" text=""/>
<geometry x="700" y="100" width="100" height="100"/>
<function cmd="AudioPlayer:window page-up"/>
</button>
<button>
<properties name="pageDownButton" text=""/>
<geometry x="700" y="200" width="100" height="100"/>
<function cmd="AudioPlayer:window page-down"/>
</button>
<button>
<properties name="exitButton" text=""/>
<geometry x="700" y="500" width="100" height="100"/>
<function cmd="AudioPlayer:window hide"/>
</button>
<!-- labels are the primary way of displaying text or information on a skin -->
<!-- the text field shows the actual formatted text including key variables which -->
<!-- have %'s surrounding them. fontsize and fontcolor are self explanitory -->
<!-- textvalues should contain a comma delimited list of the variables which are in -->
<!-- the text field. -->
<label>
<properties name="currentSongLabel2" text="%ID3-CURRENTARTIST% - %ID3-CURRENTTITLE%" fontsize="18" fontColor="255:255:255"/>
<geometry x="10" y="410" width="500" height="35"/>
<function cmd="" textvalues="%ID3-CURRENTARTIST%,%ID3-CURRENTTITLE%"/>
</label>
<!-- prepending an x before a field invalidates it as shown below -->
<xlabel>
<properties name="currentSongLabel3" text="%ID3-CURRENTPLAYLIST%" fontsize="18" fontColor="255:255:255"/>
<geometry x="10" y="445" width="396" height="35"/>
<function cmd="" textvalues="%ID3-CURRENTPLAYLIST%"/>
</xlabel>
<!-- a scrollbar is either a horizontal (alignment=1) or vertical (alignment=2) bar which shows a value -->
<!-- as a line in the middle. It can also respond to clicks with the %value% variable as shown in the cmd -->
<!-- field. value is the variable which gets displayed on the bar. -->
<scrollbar>
<properties name="trackPositionScroll" text="" min="0" max="100" alignment="1"/>
<geometry x="10" y="445" width="396" height="20"/>
<function cmd="MediaEngine:media setpos !%value%!" value="%TT-CURRENTTIMEPERCENT%"/>
</scrollbar>
<scrollbar>
<properties name="volumescroll" text="" min="0" max="100" alignment="2"/>
<geometry x="650" y="400" width="30" height="100"/>
<function cmd="MediaEngine:media setvolume !%value%!" value="%TT-CURRENTVOLUME%"/>
</scrollbar>
<label>
<properties name="trackTime2" text="%TT-CURRENTTIME%/%TT-TOTALTIME%" fontsize="18" fontColor="255:255:255"/>
<geometry x="410" y="445" width="250" height="35"/>
<function cmd="" textvalues="%TT-CURRENTTIME%,%TT-TOTALTIME%"/>
</label>
<!-- listboxes are for lists of information, such as the current playlist, a list of playlists, -->
<!-- or files. There are unfortunately at the moment hard coded. There are three types: currentPlaylistBox -->
<!-- playlistListBox and filelistbox . These either list the songs in teh current playlist, list -->
<!-- all the playlists on file, or display a list of files via FileBrowserPlugin respectively. -->
<listbox>
<properties name="currentPlaylistBox" columnNumber="1" columnWidths="700," rowHeight="125" lineWidth="0" bgColor="57:57:57" fontColor="255:255:255" textPixelSize="30" header-h="0" header-v="0" scroll-v="0" scroll-h="0"/>
<geometry x="0" y="0" width="700" height="400"/>
<function cmd="MediaEngine:media play !%selectedsong%!"/>
</listbox>
</controls>
</layout>
</skin>
Under Construction
