WiiRadio/Skinning Ref
WiiRadio Skinning reference v1.0 (WIP – Please Add any useful information to this document)
With version 0.5+ you can create custom skins for WiiRadio.
All skins should be placed in their own folder under the following directory sd:/apps/radiow/skins. E.G. sd:/apps/radiow/skins/myskin. All the necessary images, fonts and the skin.txt file should be place in your skin folder.
The skin.txt File
The skin.txt file is the core to your skin. This file tells WiiRadio what images and fonts to use and where to position the buttons on screen. The skin.txt file is similar to an ini file. Here's an example of positioning the “playlist” button and setting the over and out images.
pls_x=10
Set the playlist button to onscreen X 10 pixels.
pls_y=24
Set the playlist button to onscreen Y 24 pixels.
pls_text=Playlists
Set the text shown in the button
pls_text_color=#eeeeee
Set the text color for the button when the mouse is not over it.
pls_text_color_over=#14abd0
Set the text color for the button when the mouse is over it.
pls_text_size=2
Set the size of the text in the button. This is not a pixel value but corresponds to the either the small font, medium or large font sizes you've specified. E.G. 2 would be the small font, 1 would be medium and 0 would set the font to large.
pls_pad_y=10
This tells WiiRadio to Pad the text 10 pixels from the top of the button, useful for vertical positioning of text.
pls_pad_x=0
This tells WiiRadio to Pad the text 10 pixels from the left of the button, useful for horizontal positioning of text.
pls_out=playlists_out.png
Tells WiiRadio what image to use for the buttons out state (mouse not over the button). The image must be in your skin folder.
pls_over=playlists_over.png
Tells WiiRadio what image to use for the buttons over state (mouse over the button). The image must be in your skin folder.
Buttons
Do I have to display every button ?
There are two types of buttons optional and required. Optional buttons are not required and required are required :) Here a list of the two.
For complete syntax of how to script these please see "Full example of a skin.txt" at the bottom of this page.
Buttons- Optional
Search button – pop's open the search screen.
Stop button – Stops the stream from playing.
Add to playlist button – Adds the currently playing stream to the playlists.
Exit button – Quits back to loader.
Browser button – Shows the browser list.
Show Visualizer - Shows the full screen visualizer
Next Skin - Loads the next skin
Buttons- Required
Next – Next for playlists/genres or browser.
Back – Back for playlists/genres or browser.
Logo – WiiRadio's logo, also used for displaying the options screen when clicked.
Genres – Shows a list of genres
Playing Area – Show the title of the playing track
Playlists Buttons– The buttons used for showing playlists
Delete Buttons – The buttons used to delete playlists
Listing Buttons – The button used for listings – playlist, genre and browser ( These buttons also have extra properties that need to be set)
Other GUI Items (MOST REQUIRED)
Background Image – What's displayed as the background.
Fonts – Used to specify the fontset and sizes for the skin.
Visuals – Used to show a visual on the main GUI. This component is optional.
Cusror – Set the cursor image and hotspot properties.
Volume and Mute – Images that are used for the volume and mute.
Dialog – Used for the stream information dialog.
Info – Used for the connecting, searching and buffering states
A Full example of a skin.txt
// -- general images (required)
bgimg=bg.png
mute=mute.png
volume_over=volume_ol.png
volume_bg=volume_bg.png
// -- cusror (required)
cursor_y_off=0
cursor_x_off=10
cursor=cursor.png
// -- fonts (required)
fontset=FrancophilSans.ttf
fontsize_small=14
fontsize_medium=22
fontsize_large=26
// -- vars for positioning the lists (required)
listing_limit_text=380
listing_start_x=205
listing_start_y=122
listing_pad_y=0
listing_pad_text_y=2
listing_pad_text_x=5
listing_font_size=2
listing_font_color=#14abd0
listing_font_color_over=#eeeeee
listing_number_of=10
list_out=listing_out.png
list_over=listing_over.png
// -- delete button properties (required)
delete_start_x=610
delete_pad_y=2
delete_out=delete_out.png
delete_over=delete_over.png
// -- for displaying visuals on the main gui (optional)
show_vis=1
vis_x=15
vis_y=110
vis_h=160
vis_w=190
vis_color_bar=#14abd0
vis_color_peak=#039ac0
// - black = transparent
vis_bgcolor=#000000
// -- playlists buttons (required)
pls_x=10
pls_y=24
pls_text=Playlists
pls_text_color=#eeeeee
pls_text_color_over=#14abd0
pls_text_size=2
pls_pad_y=10
pls_pad_x=0
pls_out=playlists_out.png
pls_over=playlists_over.png
// -- playing area (required)
playing_x=15
playing_y=280
playing_text_color=#707070
playing_text_color_over=#14abd0
playing_text_size=2
playing_pad_text_y=0
playing_pad_text_x=0
playing_limit_text=180
playing_out=playing.png
playing_over=playing.png
// -- info dialog ... (dialog showing stream inf.) (required)
dialog_text_color=#eeeeee
dialog=dialog.png
// -- status text (i.e. buffering, connecting)
// -- offset of text from the background image (image is centered DEFAULT)
info_txt_x=20
info_txt_y=12
info_txt_size=1
info=info.png
// -- cancel button (required)
info_cancel_x=165
info_cancel_y=9
info_cancel_text_size=1
info_cancel_text_pad_y=10
info_cancel_out=cancel_out.png
info_cancel_over=cancel_out.png
// -- button exit (optional)
exit_x=170
exit_y=24
exit_text=Exit
exit_text_color=#eeeeee
exit_text_color_over=#14abd0
exit_text_size=2
exit_pad_y=10
exit_pad_x=0
exit_over=playlists_over.png
exit_out=playlists_out.png
// -- button search (optional)
search_x=170
search_y=24
search_text=Search
search_text_color=#eeeeee
search_text_color_over=#14abd0
search_text_size=2
search_pad_y=10
search_pad_x=0
search_over=playlists_over.png
search_out=playlists_out.png
// -- genres (required)
genres_x=90
genres_y=24
genres_text=Genres
genres_text_color=#eeeeee
genres_text_color_over=#14abd0
genres_text_size=2
genres_pad_y=10
genres_pad_x=0
genres_out=playlists_out.png
genres_over=playlists_over.png
// -- stop button (optional)
stop_x=30
stop_y=390
stop_text=
stop_text_color=#eeeeee
stop_text_color_over=#14abd0
stop_text_size=2
stop_pad_y=10
stop_pad_x=0
stop_out=stop_inactive.png
stop_over=stop_active.png
// -- back button (required)
back_x=377
back_y=105
back_out=left_out.png
back_over=left_over.png
// -- logo (required)
logo_x=410
logo_y=48
logo_out=logo_out.png
logo_over=logo_over.png
// -- browser button (optional)
browser_x=290
browser_y=39
browser_text=Browser
browser_text_color=#FFBA34
browser_text_color_over=#F8D948
browser_text_size=2
browser_pad_y=8
browser_pad_x=0
browser_out=playlists_out.png
browser_over=playlists_over.png
// -- next button (required)
next_x=377
next_y=355
next_out=right_out.png
next_over=right_over.png
// -- Show next skin button (optional)
nextskin_x=490
nextskin_y=413
nextskin_text=
nextskin_text_color=#FFBA34
nextskin_text_color_over=#F8D948
nextskin_text_size=2
nextskin_pad_y=8
nextskin_pad_x=0
nextskin_out=skin_out.png
nextskin_over=skin_over.png
// -- Show visuals button (optional)
showvisuals_x=530
showvisuals_y=413
showvisuals_text=
showvisuals_text_color=#FFBA34
showvisuals_text_color_over=#F8D948
showvisuals_text_size=2
showvisuals_pad_y=8
showvisuals_pad_x=0
showvisuals_out=vis_out.png
showvisuals_over=vis_over.png