skinning tools
 

 

content

nsis installer script

HTML code snippets
progress/volume bar

JavaScript gallery
character replacing, image based font
limit the string length

Image based fonts
base

Flash tools
Volume slider

back
nsis installer script

I have created a nsis installer script you should use to publish your skins. It creates a guided installer exe in the same design as the BrowseAmp installer. Feel free to modify it!

how-to:

  1. You need to get and install the nsis installer (from the nsis homepage)
     
  2. copy the Skin Installer GT3.nsi file to your skin directory.
     
  3. Edit the script with any text editor and replace AppLongName, AppShortName and AppVersion with your favorite values (lines 15,16 and 17).

  4. optional: If you need a special file extension parsed by BrowseAmp, uncomment (remove the semicolon) line 63 (WriteIniStr) and change the values (txt, text/plain) according to your needs. The skin installer will then add this setting to the existing mime.ini during the installation of your skin.
     
  5. A README.TXT is also required in your skin directory. Please add a short description and credits of your skin in this txt-file.
     
  6. Right-click the script file to compile. Now you should see an exe file named after AppShortName in this directory.
     
  7. Post the skin installer in the BrowseAmp forums or send me an e-mail and attach the installer.

If you don't want to use the nsis installer, just zip the skin directory including all subdirs and publish the zip file.

 

back
HTML code snippets

html based progress/volume bar

description
Use this to display a progress bar only with HTML and some JavaScript code.

Example
(click me)

written by
Keefy, Henry

script
place the following part somewhere in the <head>:

<script language="JavaScript" type="text/JavaScript">
function clickProgressBar()
{
var x = event.offsetX + event.srcElement.offsetLeft; // x relative to the table
var mywidth = progressBar.width; // width of table

// tell BrowseAmp the new position
document.location.href="?playifnotplaying&trackpos="+parseInt(100*x/mywidth);

// to use it as a volume bar just use this line
//document.location.href = "?volume=" + parseInt(100*x/mywidth);
}
</script>

This is the tabe that is used as progress bar. Place this somewhere in your <body>:

<a id="progressBarLink" href="#" onclick="clickProgressBar();">
<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#6699DD"
 id="progressBar" title="click bar to move to a position">
 <tr>
  <td class="small" align="right" width="1%" bgcolor="#276ACF"
   id="progressBarLeft"><img src="clearpixel.gif" width="1" height="8" border="0">
  </td>
  <td class="small" bgcolor="#000033" id="progressBarRight">
   <img src="clearpixel.gif" width="1" height="8" border="0">
  </td>
 </tr>
</table>
</a>

<script language="JavaScript" type="text/JavaScript">
var Position = <#SongPositionPercent>; // this bar is for the current pos.
// var Position = <#Volume>; // use this to show the current volume.
if(isNaN(Position))
Position = 1;
if(Position == 0)
Position = 1;
progressBarLeft.width = Position + "%";
</script>

back
JavaScript gallery

replace each character with an image, image based font

description
replace each character of a string with an image tag. Used for image-based fonts.

written by
Henry

script

<script language="JavaScript" type="text/JavaScript">

// string inserted by BrowseAmp
var Title="<#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)";

// use caps
Title = Title.toUpperCase();

for(var x=0; x<Title.length; x++)
  {
  // space between the letters
  document.write("<img src='clearpixel.gif' width='1' height='1'>");
  // replace the character with the <img> tag
  document.write("<img src='font/" + Title.charCodeAt(x) + ".gif' >");
  }
</script>

download image based fonts


limit string length and insert ... in the middle

description
here's an example.
input: "this is a very large string that does not fit into a frame"
output: "this is a ...to a frame"

written by
Henry, Azimuth, Keefy, (did I forget someone?)

script
<script language="JavaScript" type="text/JavaScript">
function printValue(Title) { // the global function
if(Title.length > 11)
{
document.write(Title.substr(0,10));
document.write("...");
document.write(Title.substr(Title.length-10));
} else {
document.write(Title);
}
}
</script>

somewhere in your HTML code...

<script language="JavaScript" type="text/JavaScript">
printValue("<#SongTitle>"); //call global function
</script>

back
Image based fonts

The fonts are based on gif files for each character. The files should be named after their HTML numeric code (see code table).
Example: 65.gif represents the 'A'

base

created by
Henry

download
     base.zip  (Photoshop source)

 

Font Ripper

Eracerbit has created a little app to extract images from any installed font. It saves a BMP for each character according to the HTML numeric code used for image based fonts. See demo page for example and script (IE only).

See also BrowseAmp forums.

created by
Eracerbit

download
     FontRipper.zip  (300kb)

 

 

back
Flash tools

Flash Volume Slider

description
Well, they do just what you think... The package contain 2 vertical and 2 horizontal volume slider including their flash source.

written by
genekeenan

download
     see this thread in the forum

 

 

last change: 2008-03-23 , Henry Thasler
back to main page