Damp — File Browser
02.htm — 101.3 KB — Download this file
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./01_files/filelist.xml">
<title>Building your own picture window mp3 player</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Mossie`Ol Chin</o:Author>
<o:LastAuthor>Mossie`Ol Chin</o:LastAuthor>
<o:Revision>2</o:Revision>
<o:TotalTime>73</o:TotalTime>
<o:Created>2002-12-22T09:40:00Z</o:Created>
<o:LastSaved>2002-12-22T09:40:00Z</o:LastSaved>
<o:Pages>12</o:Pages>
<o:Words>3961</o:Words>
<o:Characters>22580</o:Characters>
<o:Company>Small Corp.</o:Company>
<o:Lines>188</o:Lines>
<o:Paragraphs>45</o:Paragraphs>
<o:CharactersWithSpaces>27729</o:CharactersWithSpaces>
<o:Version>9.2720</o:Version>
</o:DocumentProperties>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;
mso-font-charset:2;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:0 268435456 0 0 -2147483648 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
h1
{mso-style-next:Normal;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
page-break-after:avoid;
mso-outline-level:1;
font-size:12.0pt;
font-family:"Times New Roman";
mso-font-kerning:0pt;
font-weight:normal;
font-style:italic;}
h2
{mso-style-next:Normal;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
page-break-after:avoid;
mso-outline-level:2;
font-size:12.0pt;
font-family:"Times New Roman";
text-decoration:underline;
text-underline:single;}
p.MsoBodyText, li.MsoBodyText, div.MsoBodyText
{margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:blue;}
p.MsoBodyTextIndent, li.MsoBodyTextIndent, div.MsoBodyTextIndent
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:blue;
font-style:italic;}
p.MsoBodyText2, li.MsoBodyText2, div.MsoBodyText2
{margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:blue;
font-style:italic;}
p.MsoBodyTextIndent2, li.MsoBodyTextIndent2, div.MsoBodyTextIndent2
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
mso-bidi-font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:blue;
font-style:italic;}
p.MsoBodyTextIndent3, li.MsoBodyTextIndent3, div.MsoBodyTextIndent3
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
mso-bidi-font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";
color:blue;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;
text-underline:single;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:918055092;
mso-list-type:hybrid;
mso-list-template-ids:267280938 -8211562 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l0:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.75in;
mso-level-number-position:left;
margin-left:.75in;
text-indent:-.25in;
font-family:Symbol;
mso-fareast-font-family:"Times New Roman";
mso-bidi-font-family:"Times New Roman";}
@list l1
{mso-list-id:1155223194;
mso-list-type:hybrid;
mso-list-template-ids:1004413710 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l1:level1
{mso-level-tab-stop:39.0pt;
mso-level-number-position:left;
margin-left:39.0pt;
text-indent:-.25in;}
@list l2
{mso-list-id:1273510572;
mso-list-type:hybrid;
mso-list-template-ids:572172434 -209700154 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l2:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
margin-left:1.0in;
text-indent:-.25in;
font-family:Symbol;
mso-fareast-font-family:"Times New Roman";
mso-bidi-font-family:"Times New Roman";}
@list l3
{mso-list-id:1511068547;
mso-list-type:hybrid;
mso-list-template-ids:-2110246570 67698689 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l3:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple style='tab-interval:.5in'>
<div class=Section1>
<p class=MsoNormal><img src="pic_01.png" width="343" height="471" align="left" alt="Damp"></p>
<p class=MsoNormal> </p>
<p class=MsoNormal><b><u>Building your own picture window mp3 player.<o:p></o:p></u></b></p>
<p class=MsoNormal><b><u><o:p></o:p></u></b><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal>Author notes: This tutorial is written based on the mp3 player
that was custom built for it. You will need download the mp3 player in order
to understand some, if not most, part of the tutorial. This tutorial doesn’t
explain step by step on what the code does as it’s impractical to comment
900 lines of code.</p>
<p class=MsoNormal> </p>
<p class=MsoNormal><a href="download%5Cdamp.zip">Download Damp</a></p>
<p class=MsoNormal> </p>
<p class=MsoNormal align="left"><font size="2"><i>*** You may notice differences
in the code that is provided to the code in the full script. This is because
the development of the script was never stopped even when this tutorial was
written.</i></font></p>
<p class=MsoNormal> </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>Introduction</h2>
<p class=MsoNormal><b><u><![if !supportEmptyParas]><![endif]><o:p></o:p></u></b></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Mp3 player
scripts have been part and parcel of mIRC scripting since mp3 support was
introduced. Since then, it has bred a lot of mp3 players. Most took the form of
a dialog enhanced with the much-acclaimed MDX dll, while only a handful took
the form of picture window (picwin). However, these picwin players were few and
merely lived in the shadow of the dialog based mp3 player. Personally I think
the reason behind this circumstance is that picwins are so alien to many of the
scripters, especially since dialogs provide such an easy way to make a
graphical user interface.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Hopefully,
this tutorial will cast some light into the shadow of doubt among the many who
have not dared to approach picwins. Picwins may be used for a lot of functions,
however the popularity of the mp3 player cannot be denied, and therefore a
tutorial on picwin mp3 players is just nice!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>This tutorial,
however, will not explain line by line what the code does. It will instead
suggest a few ways for one to go about the coding. Therefore, some basic mIRC
scripting knowledge is required, especially the /draw commands (read /help
picture windows or <a href="http://www.mircscripts.org/showdoc.php?type=tutorial&id=112">picture
windows tutorial</a> by <a href="http://www.mircscripts.org/users/dohcan">dohcan</a>).
This tutorial also uses a few snippets that have been released and can be
found at <a href="http://www.mircscripts.org/">http://www.mircscripts.org/</a>.
The snippets include:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo2;
tab-stops:list .75in'><![if !supportLists]><span style='font-family:Symbol'>·<span
style='font:7.0pt "Times New Roman"'>
</span></span><![endif]>^Andy <span style='mso-tab-count:1'> </span><span
style="mso-spacerun: yes"> </span>- <a href="http://www.mircscripts.org/comments.php?id=999">moving
windows without titlebar</a></p>
<p class=MsoNormal style='margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo2;
tab-stops:list .75in'><![if !supportLists]><span style='font-family:Symbol'>·<span
style='font:7.0pt "Times New Roman"'>
</span></span><![endif]>xiao-wen-zi - <a href="http://mircscripts.org/download.php?id=1603">$button.text</a></p>
<p class=MsoNormal style='margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo2;
tab-stops:list .75in'><![if !supportLists]><span style='font-family:Symbol'>·<span
style='font:7.0pt "Times New Roman"'>
</span></span><![endif]>xiao-wen-zi - <a href="http://mircscripts.org/download.php?id=1756">picwin
trackbar</a></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>The picwin
mp3 player that we are going to build has three main structures:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:1.0in;text-indent:-.25in;mso-list:l2 level1 lfo1;
tab-stops:list 1.0in'><![if !supportLists]><span style='font-family:Symbol'>·<span
style='font:7.0pt "Times New Roman"'>
</span></span><![endif]>The database</p>
<p class=MsoNormal style='margin-left:1.0in;text-indent:-.25in;mso-list:l2 level1 lfo1;
tab-stops:list 1.0in'><![if !supportLists]><span style='font-family:Symbol'>·<span
style='font:7.0pt "Times New Roman"'>
</span></span><![endif]>The objects</p>
<p class=MsoNormal style='margin-left:1.0in;text-indent:-.25in;mso-list:l2 level1 lfo1;
tab-stops:list 1.0in'><![if !supportLists]><span style='font-family:Symbol'>·<span
style='font:7.0pt "Times New Roman"'>
</span></span><![endif]>The play-list</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'>And this mp3 player will have the
skinning ability. </p>
<p class=MsoNormal style='margin-left:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>The database</h2>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>For a
script to function well, it will need to have a set of variables that are
easily accessible. For the mp3 player I chose to make use of hash tables (read
/help hash tables). For this input-output process, I have written the following
aliases to do the job:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span><i><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;color:blue'>alias -l v hadd
-m damp.cache $1 $2-<o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l uv if ($hget(damp.cache,$1)) {
hdel damp.cache $1 }</span><span style='color:blue'><o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'><i><span style='color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'>The above aliases are simple. The
command <i>/v <item> <value></i> allows me to add a variable to the
<i>damp.cache</i> table, while the <i>/uv <item></i> allows me to unset a
certain <i><item></i> in that table.</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l rd if ($hget(damp.cache,$1)) { return
$ifmatch }<o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'><span style='color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:.5in'>What good is a value/variable when
you can’t access it? The above alias certainly gets the job done. It’s used as
an identifier, <i>$rd(<item>),</i> to provide better code handling
throughout the script. You may fancy <i>$id(<item>)</i> since ‘id’ stands
for identification, while I used ‘rd’ which means read. ‘r’ is not used because
it’s the same as <i>$rand()</i>.</p>
<p class=MsoNormal style='text-indent:.5in'><span style='color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Note that
all the above aliases are localized to prevent conflicts with other loaded
scripts. This is especially true when many scripts uses <i>/v</i> for <i>/voice</i>.
</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Now that we
have the aliases to input and retrieve values from a database, it’s time for us
to build the database. This database is simply the platform for our objects to
locate their rightful position on the GUI itself. Therefore, the database and
the objects are very much linked together.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><i><span style='color:blue'><span style='mso-tab-count:1'> </span></span></i><i><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;color:blue'>alias -l
button.play if ($isid) { return $rd(button.play) } | else { v button.play $1- }<o:p></o:p></span></i></p>
<p class=MsoNormal><i><span style='color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'>The above alias works in two ways.
We will use <i>/button.play <value> </i>to store the value for this
object in the database, while to retrieve this object’s value we will use the
alias in its identifier form, <i>$button.play</i>. </p>
<p class=MsoNormal style='text-indent:.5in'><i><![if !supportEmptyParas]> <![endif]><o:p></o:p></i></p>
<p class=MsoNormal style='text-indent:.5in'><i>button.play </i><span
style="mso-spacerun: yes"> </span>is an object of the player. Yes, you guessed
right, it’s the name for the button that we use to play songs. Other objects in
the script will be discussed in the objects section.</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>It’s amazing how much you can
achieve with such a simple way of coding. The database may seem simple, but
when you look at the full script and its code, you will notice that for each
object that is provided in this mp3 player I’ve coded an identical alias. This
has it’s own pros and cons. </p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The pros are that you will have
neat coding and an easy to follow script. This also makes the mp3 player
upgrade friendly. However, the down side is that you will have too many identical
aliases. Since the structures of the aliases are so similar, there is another
way of doing it: just one alias to do it all!</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>Example:</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias –l button {<o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($isid) { return $rd($1) }<o:p></o:p></span></i></p>
<p class=MsoNormal><i><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
color:blue'><span style='mso-tab-count:1'> </span><span
style="mso-spacerun: yes"> </span>else { v $$1- }<o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}</span><span style='color:blue'><o:p></o:p></span></i></p>
<p class=MsoNormal><i><span style='color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoBodyText style='text-indent:.5in'><span style='color:windowtext'>The
above alias would mean that we will need to use <i>/button <name>
<value></i> in order to input a value and <i>$button(<name>)</i> to
retrieve a value. Notice how I used <i>$$1-</i> when setting the value? In
doing so, I make sure that there won’t be any blank data or errors when calling
the <i>/v</i> command. This alias seems better, and it greatly reduces the file
size, however for this script I have chosen the earlier one simply for
explanatory purposes.<o:p></o:p></span></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>So we have
got the database going, now let’s move on to the objects. </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>The objects</h2>
<p class=MsoNormal><b><u><![if !supportEmptyParas]><![endif]><o:p></o:p></u></b></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>What is an
object in this script? What’s object oriented scripting? Well, very simple.
Objects in this script are those buttons, boxes and trackbars that work
independently. You do not need to recode them to suit every new player you will
make in the future. You can copy and paste them as they are. So it’s kind of
like doing a script without knowing how it gets the result. You just add
whatever objects you want and the scripts will work!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>In this mp3
player, the functionality of these objects has allowed it to be skin-able! How?
Well, we set the value for each needed object of the mp3 player in a skin file.
When we run the player, it will look for these values and place the objects
accordingly on the GUI. </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l build.button.play {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %cood $rd(button.play) <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (!%cood) { return } <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>tokenize 44 %cood <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>drawtext -rcn $w $c3 $button.text(marlett,$5,$1,$2,$3,$4,8) <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>dbox1 $1-4<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}</span><span style='color:blue'><o:p></o:p></span></i></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The above alias is the build object
command for the object <i>button.play</i>. In the above alias, the code looks
for the values set in the database and later draws it on the GUI. Since the
values for <i>button.play</i> are stored in this format: <i>x,y,w,h,fontsize</i>,
the retrieved values are tokenized for easier access. The <i>$c3 </i>is the
value for our text color while the command <i>/dbox1 $1-4 </i>is the command to
draw the button/box on the GUI. </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>In addition to <i>/dbox1</i>, there
is the <i>/dbox2 </i>command. Both the commands draw a button/box on the GUI,
but each has a different effect!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l dbox1 {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>drawline -rn $w $c5 1 $1 $calc($2 + $4 -1) $1 $2 $calc($1 + $3 -1) $2<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>drawline -rn $w $c4 1 $1 $calc($2 + $4 -1) $calc($1 + $3 -1) $calc($2 +
$4 -1) $calc($1 + $3 -1) $2<span style="mso-spacerun: yes"> </span><o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}</span><span style='color:blue'><o:p></o:p></span></i></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The above <i>/dbox1</i> will draw a
button that is not pressed by the mouse! To achieve this, we must understand
how colors trick our eyes! A square will look 3D with the right border color. A
lighter color on the west and north border and a darker one on the east and
south border of the box will make the box look as if it is a button that’s not
pressed!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>As you can see from above, we have
the <i>$c5</i> and <i>$c4</i> representing our border colors. Simply, the <i>$c5</i>
returns the lighter color, highlight as Windows would call it. The <i>$c4</i>
returns the darker color, or border/shadow.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l dbox2 {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>drawline -rn $w $c4 1 $1 $calc($2 + $4 -1) $1 $2 $calc($1 + $3 -1) $2<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>drawline -rn $w $c5 1 $1 $calc($2 + $4 -1) $calc($1 + $3 -1) $calc($2 +
$4 -1) $calc($1 + $3 -1) $2<span style="mso-spacerun: yes"> </span><o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}</span><span style='color:blue'><o:p></o:p></span></i></p>
<p class=MsoNormal><i><span style='color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'>While the un-pressed button is
drawn with the lighter color on the west and north borders and the darker color
on the east and south borders of the designated box, we simply reverse the
order and we get a pressed button! And that’s exactly what <i>/dbox2</i> does!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>You have probably noticed the $1 to
$4 values in both the <i>/dbox</i> commands. They are basically the
x-coordinate, y-coordinate, width and height of the buttons. The drawing
requires two /drawline commands. We draw the first line from the southwest
corner to the northwest corner and proceed to the northeast corner, and the
second line would be drawn from the southwest corner to the southeast corner
and meet the first line at the northwest corner.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>The objects list </h2>
<p class=MsoNormal><b><u><![if !supportEmptyParas]><![endif]><o:p></o:p></u></b></p>
<p class=MsoNormal style='text-indent:.5in'>Enough of the box drawing, let’s
get on with the objects in the player that we will write. Below is a list of
objects that the current player supports:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<table border=1 cellspacing=0 cellpadding=0 style='margin-left:.5in;border-collapse:
collapse;border:none;mso-border-alt:solid windowtext .5pt;mso-padding-alt:
0in 5.4pt 0in 5.4pt'>
<tr style='height:15.0pt'>
<td width=590 colspan=2 valign=top style='width:6.15in;border:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal align=center style='text-align:center'><i>box.<name>
x,y,w,h,font,fontsize</i></p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>box.kbs<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Song kbs box</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>box.khz<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Song khz box</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>box.mode<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Song mode(mono/stereo) box</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>box.song<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Song name box</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>box.time
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Song time box</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>box.title
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>mp3 player titlebar</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=590 colspan=2 valign=top style='width:6.15in;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<p class=MsoNormal align=center style='text-align:center'><i>button.<name>
x,y,w,h,fontsize</i></p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.eject<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Eject song button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.exit<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Close mp3 player button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.min<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Minimize mp3 player button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.next<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Next song button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.pause<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Pause song button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.play<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Play song button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.playlist<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Open playlist button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.prev<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Previous song button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.random
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Enable/disable random play button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.repeat<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Enable/disable repeat play button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>button.stop
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Stop song button</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=590 colspan=2 valign=top style='width:6.15in;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<p class=MsoNormal align=center style='text-align:center'><i>c<N>
<RGB value></i></p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>c1<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Background color 1</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>c2<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Background color 2</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>c3<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text color</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>c4<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Shadow/border color</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>c5<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Hi-light color</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=590 colspan=2 valign=top style='width:6.15in;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<p class=MsoNormal align=center style='text-align:center'><i>text.<name>
[text]</i></p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>text.kbs
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text of song kbs box </p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>text.khz<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text of song khz box</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>text.mode<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text of song mode(mono/stereo) box </p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>text.song<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text of song name box </p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>text.time<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text of song time box </p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>text.title
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Text of titlebar</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=590 colspan=2 valign=top style='width:6.15in;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<p class=MsoNormal align=center style='text-align:center'><i>trackbar.<name>
x,y,w,h,bar size</i></p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>trackbar.progress
<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Song progress trackbar</p>
</td>
</tr>
<tr style='height:15.0pt'>
<td width=295 valign=top style='width:221.4pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:15.0pt'>
<ul style='margin-top:0in' type=disc>
<li class=MsoNormal style='mso-list:l3 level1 lfo3;tab-stops:list .5in'><i>trackbar.volume<o:p></o:p></i></li>
</ul>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:15.0pt'>
<p class=MsoNormal>Volume trackbar</p>
</td>
</tr>
</table>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>As you can see, those are the
currently available objects in the player. How do these objects work? That is
what we will be looking into!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>An object will need a build command
and a function command. The build command has been discussed earlier, however,
not the function command. The function command is simply the command that is
triggered when a certain action has been done to the object. Lets take the <i>button.play</i>
object for example.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>Commanding an object through mouse events </h2>
<p class=MsoNormal><b><u><![if !supportEmptyParas]><![endif]><o:p></o:p></u></b></p>
<p class=MsoNormal style='text-indent:.5in'>Naturally, when someone presses the
<i>button.play</i> object, it will play a song. But we need to animate it! We
will have a few steps to consider when doing its animation. First, when the
button is being pressed, we will need to make it look as if it’s being pressed;
but the fact is that it’s just a 2D picwin that the mouse interacts with, so we
will use the <i>/dbox2</i> command as discussed earlier. However, the <i>/splay</i>
will not be called because the command has not been confirmed! This leads to
the following two important mouse events, the <i>sclick</i> and the <i>uclick </i>(read
/help picture windows).</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>Wait a minute, what if the user
held the left mouse button down and continued the click from the play button to
the button next to it? In this case, we will need to make the play button
un-pressed and press down the other. This brings in the <i>mouse</i> event in
our menu event!</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>menu @damp {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>mouse: return $mo($mouse.x,$mouse.y)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>sclick: return $sc($mouse.x,$mouse.y)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>uclick: return $uc($mouse.x,$mouse.y)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}</span><span style='color:blue'><o:p></o:p></span></i></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>So we have assigned each of the
mouse events to a command.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoBodyTextIndent><span style='font-size:10.0pt;mso-bidi-font-size:
12.0pt'>alias –l sc if ($inrect($1,$2, [ [ $g($button.play) ] ] )) { dbox2
$p($button.play) | h $p($button.play) }<o:p></o:p></span></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The above alias is called when the
mouse clicks on something. As you can see, the code is just a part taken from
the whole script, but it will do for the following explanation. The <i>$inrect()</i>
identifier (read /help picture windows) will ensure that when the mouse click
is in the area of<span style="mso-spacerun: yes"> </span>the object <i>button.play</i>
it calls the <i>/dbox2</i> command to draw the pressed button.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoBodyText2 style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt'>alias –l uc if ($inrect($1,$2, [ [ $g($button.play)
] ] )) { dbox1 $p($button.play) | h $p($button.play) | cmd.button.play }<o:p></o:p></span></p>
<p class=MsoBodyText2><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoBodyText2><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
font-style:normal'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:.5in'>The mouse release event has the
above alias. It’s about the same as the <i>/sc</i> but with just two different
things. It uses <i>/dbox1</i> to draw the button, making the user believe that
the button pops out from being pressed and also the <i>/cmd.button.play</i>
command which contains the <i>/splay</i> command. So it did what the button
should do after all!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>“Wait!” You
say? Why can’t we just call the <i>/cmd.button.play</i> in the <i>/sc</i>
alias? Isn’t the object supposed to perform its function when pressed? Why are
you making it only perform the function when it’s released? </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Before
answering your question, let’s look at the <i>/mo</i> alias for the <i>mouse </i>event.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoBodyTextIndent2>alias -l mo<span style="mso-spacerun: yes">
</span>if ($mouse.key & 1) && ($inrect($1,$2 , [ [ $g($button.play)
] ] )) { dbox2 $p($button.play) | h $p($button.play) }</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The <i>/mo </i>alias only performs
when the left button of the mouse is being pressed! This allows the mentioned
function of moving a pressed mouse from button to button! So this is why we
didn’t call the <i>/cmd.button.play</i> command when the <i>sclick mouse event</i>
happened!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>Now to explain the <i>$g, $p,</i>
and <i>h</i> aliases.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The data is stored in such a way
that it needs some modification when being used in the script. In all the above
<i>mouse events</i> we only need the <i>x,y,w,h</i> values, but in the database
the values are stored with an extra value or two. So we need to remove them.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l g if ($gettok($1,1-4,44)) {
return $ifmatch } | else return 0,0,0,0<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l p return
$replace($g($1),$chr(44),$chr(32))<o:p></o:p></span></i></p>
<p class=MsoNormal><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:.5in'>The <i>$g </i>alias removes the
excessive values in the data retrieved from the database. Because <i>$inrect() </i>needs
to have a value for its <i>x,y,w,h</i> we substitute a no match from the database
with a 0,0,0,0 so as not to break the script.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The <i>$p</i> alias, on the other
hand, changes the commas, <i>$chr(44),</i> into spaces, <i>$chr(32),</i> so
that the <i>/dbox </i>command receives its parameter in the <i>x y w h</i>
format.</p>
<p class=MsoNormal><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l h {<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %h $rd(history)<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (!%h) { v history $1- | return }<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (%h == $1-) { return }<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($numtok(%h,32) == 4) { dbox1 %h }<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>v history $1-<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>dd<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}<o:p></o:p></span></p>
<p class=MsoNormal><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:.5in'>The <i>/h </i>alias is actually a
history cache. It caches all of the pressed buttons, and when the mouse moves
to another button, it will release the pressed button! </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Though we
already have a few objects in the player, we need to have the main window. The
basic command to make a picture windows is <i>/window –p @damp</i>. Since the
mp3 player is built in mIRC, we will only need to show the window in mIRC, but
we do not want the mp3 player to be covered by other windows in mIRC.
Therefore, we will make the <i>@damp </i>window as a desktop window that is
always on top. So <i>/window –phdo @damp</i> will do the job. But we do not
want the window’s titlebar, and we do not want it to show in the taskbar.
Therefore, we have the following command:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes"> </span><i>/window
-apk0CBdo +deL $w -1 -1 $rd(w) $rd(h)<o:p></o:p></i></span></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Now, we
have a working GUI. No, you say? Well, as I have discussed earlier, the whole
structure of the script is based on the database and objects. Therefore, all
objects are identical to the <i>button.play</i> object we have discussed so
far; only the <i>cmd.<name></i> function is different as required. You
will need to study the full code I have presented though.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>The play list</h2>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>An mp3
player generally plays an mp3 file, so we will need a play-list! Now let’s
discuss the ways that a play-list can be done! There are many ways to do a
play-list. Most people will rely on the basic method of opening a list window
and placing the song filenames into it. So in the list, you will see the full
path of the song, which means you will see something like <i>c:\music\mp3\song_name_here.mp3</i>.
Well, when you have just a few mp3s, that makes perfect sense and it’s not
messy for you to navigate. But what if you have hundreds or thousands of them?
It will be really messy and hard to navigate once the file names get very long!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Therefore,
the option of using two list windows comes into play. The first one will do
what the above window does, but it is hidden! So it’s a cache window! Then the
second window will be the “formatted” window. When I say formatted, it means
the song details, especially the filename, are being processed for easy
navigation. For example, the song may be located at <i>c:\music\mp3\song_name_here.mp3,</i>
so the full path of the file will be stored in the cache window while only the
song name will be listed in the second window. So the second window is a GUI by
itself. (A very basic one I might add.) Though it seems simple, with a little
bit of different coding, you could get a different result.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Unintentionally,
the format for mp3 info to be displayed seemed to have been standardized to <i><artist>
- <song name></i>. However, not all files are named in such a way. This
brings the ID3 tag into the scene. In the <i>$sound() </i>identifier, there are
many properties you can use to get certain information from the mp3 file.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoBodyTextIndent3><i>Properties: album, title, artist, year, comment,
genre, track, length, version, bitrate, vbr, sample, mode, copyright, private,
crc<o:p></o:p></i></p>
<p class=MsoNormal><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:.5in'>A good scripter will know what
property to use for the <i>$sound() </i>identifier when making a good play
list. Here is a basic description of the properties:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<div align=center>
<table border=1 cellspacing=0 cellpadding=0 style='border-collapse:collapse;
border:none;mso-border-alt:solid windowtext .5pt;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
<tr style='height:16.6pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:16.6pt'>
<p class=MsoNormal align=center style='text-align:center'><b>Properties<o:p></o:p></b></p>
</td>
<td width=507 valign=top style='width:380.4pt;border:solid windowtext .5pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:16.6pt'>
<p class=MsoNormal align=center style='text-align:center'><b>Value returned<o:p></o:p></b></p>
</td>
</tr>
<tr style='height:17.5pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:17.5pt'>
<p class=MsoNormal>Album</p>
</td>
<td width=507 valign=top style='width:380.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:17.5pt'>
<p class=MsoNormal>Song album</p>
</td>
</tr>
<tr style='height:17.5pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:17.5pt'>
<p class=MsoNormal>Title</p>
</td>
<td width=507 valign=top style='width:380.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:17.5pt'>
<p class=MsoNormal>Song title</p>
</td>
</tr>
<tr style='height:17.5pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:17.5pt'>
<p class=MsoNormal>artist</p>
</td>
<td width=507 valign=top style='width:380.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:17.5pt'>
<p class=MsoNormal>Singer</p>
</td>
</tr>
<tr style='height:17.5pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:17.5pt'>
<p class=MsoNormal>length</p>
</td>
<td width=507 valign=top style='width:380.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:17.5pt'>
<p class=MsoNormal>The total length/time of the song in milliseconds</p>
</td>
</tr>
<tr style='height:17.5pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:17.5pt'>
<p class=MsoNormal>bitrate</p>
</td>
<td width=507 valign=top style='width:380.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:17.5pt'>
<p class=MsoNormal>Kbps</p>
</td>
</tr>
<tr style='height:17.5pt'>
<td width=83 valign=top style='width:62.55pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
height:17.5pt'>
<p class=MsoNormal>sample</p>
</td>
<td width=507 valign=top style='width:380.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt;height:17.5pt'>
<p class=MsoNormal>Hz</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>The above properties are the
properties that are usually used in an mp3 player. You may wish to add more
information in your mp3 player, and so the other properties will prove their
usefulness.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>There’s one
mistake here, we are building a <b>picwin</b> mp3 player. But what we have
discussed so far about the play list is just how to use the list window to
display the song name. Why can’t we make the list window in a <b>picwin</b> as
well? Yes we can. It won’t be really hard, you just need the basic knowledge on
the <i>/draw</i> commands and some creativity of your own. However, when
presenting the information, it’s all the same!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>Building the play list</h2>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>In this
player I that have coded, I used both the double list windows and a picwin GUI
play list. This is because the picwin GUI was a request and I thought it is
only fair for me to actually demonstrate how to make a picwin GUI since I
claimed it’s very easy to do. However, before we go into detail on how to make
a picwin play list, let see what basic coding can we use to make the
input-output of a play list.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l build.playlist {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($1 == c) { clear @damp.cache }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($1 == +) || ($1 == c) {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (!$window(@damp.cache)) { window -lh @damp.cache }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes"> </span><span
style="mso-spacerun: yes"> </span>var %ext
$gettok($nopath($longfn($2-)),-1,46)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>%damp.musicdir = $remove($2-,$gettok($2-,-1,92))<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (!$isfile($2-)) { return File not found! } <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (%ext == mp3) { aline @damp.cache $shortfn($2-) } <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>else { .loadbuf @damp.cache $f($2-)<span style="mso-spacerun: yes">
</span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($window(@damp.list)) { ref.playlist }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($1 == -) {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($2 == *) { .clear @damp.cache | return }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %i $sline(@damp.list,0)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($window($wl)) { %i = $sline(@damp.cache,0) }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>while (%i) {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %l = $sline(@damp.list,%i).ln<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($window($wl)) { %l = $sline(@damp.cache,%i).ln }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($window(@damp.list)) { dline @damp.list %l }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>dline @damp.cache %l<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>dec %i<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoNormal style='text-indent:.5in'>Basic play list code will have the
option to add or remove songs from it. The above alias shows exactly how it can
be done.<i><o:p></o:p></i></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Let’s study
the ‘+’ parameter first. With the ‘+’ parameter, I have allowed the addition of
either a song or a <i>.txt</i> file that contains a list of mp3s. It is not
necessary that a play list be stored in a <i>.txt </i>file, so other file types
will work too. However, since I have used the <i>/loadbuf </i>command, I am
unable to check if all the lines in the file are valid mp3 files. Therefore,
the burden is passed on to <i>/cmd.button.play</i> where it will check if the
file is an mp3 file!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>With the
‘-’ parameter, it will remove the selected file in the list. Remember, the main
ingredient for a successful play list is its cache window! So, we must remove
the selected lines one by one and make sure that the order of lines in both the
cache window and the user interface window is the same. This is because the
selected line in the user interface window will be used as a reference to the
cache window. If the same line has different files, you will get the wrong song
playing!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>Picwin play list, more than a basic GUI</h2>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>The above
method sounds very easy, and it’s easier to implement on a second list window
than a picwin. Now, let us look into the picwin play list GUI that I have built
in the script that come along with the player. Note that the player will
automatically use a list window as the play list if the commands for a picwin
play list is not found in the skin file.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Again, our
picwin play list is coded to be skin-able and thus, it holds onto the concept
of<span style="mso-spacerun: yes"> </span>database and objects as well.
Building a database for this play list is as simple as how we build the
database fpr the main interface of the player. It uses the same approach of
each objects anchored to a command, <i>/playlist.<name>.</i><span
style="mso-spacerun: yes"> </span>While the building commands also follows the
<i>/build.<name></i> concept. All in all, the hardest part of a picwin
play list is the listbox, since the rest are also buttons that we have
discussed earlier.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>To many,
they found that a <i>listbox </i>in picwin is very hard to do. But this is not
exactly the case. A <i>listbox</i> consist of a big square with two buttons and
a trackbar attached to it by its side. And that’s the basic interface for a <i>listbox.
</i>What many had failed to do is adding the text into the big rectangle on the
interface. They have fail to get the right coordinate for each new line and
others. Now, let us look at the main code I used for our player.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>alias -l pl.update.list {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %cood $rd(pl.list) | if (!%cood) { return }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>tokenize 44 %cood<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>tokenize 32 $1 $2 $calc($3 -14) $4 $5-<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %h $int($calc($height(T,$5,$6) +2)) , %l $int($calc($4 / %h)) , %s
$rd(scrollline) , %i 1<span style="mso-spacerun: yes"> </span><o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %w $calc($3 - $width(T,$5,$6) *2) , %x $calc($1 + $width(T,$5,$6)) ,
%y $calc($2 + 2)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>drawrect -frn $wl $c2 1 $1-4 | dbox2 $wl $1-4<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($calc($line(@damp.cache,0) - %s ) < %l) &&
($line(@damp.cache,0) >= %l) {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>%s = $calc($line(@damp.cache,0) - %l +1) | v scrollline %s <o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>while (%i <= %l) {<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %v = $nopath($longfn($line(@damp.cache,%s)))<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes"> </span><span
style="mso-spacerun: yes"> </span>if (!%v) { inc %i | continue }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if ($width(%v,$5,$6) >= %w) { %v =
$button.text($5,$6,$1,%y,%w,%h,%v)<span style="mso-spacerun: yes"> </span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>else { %v = $5 $6 %x %y %w %h %v }<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>if (%s == $sline(@damp.cache,1).ln) { drawrect -frn $wl $c5 1 %x %y %w
%h<span style="mso-spacerun: yes"> </span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span><span style="mso-spacerun: yes"> </span>drawtext -rcn $wl $c3 %v<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>inc %i<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>inc %s<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>inc %y %h<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>}<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>var %p $int($calc($rd(scrollline) / $line(@damp.cache,0) *100))<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>v pl.scroll.percent $iif((%p > 95),95,%p)<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>update.trackbar.progress pl.scroller<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'><span style="mso-spacerun: yes">
</span>ddl<o:p></o:p></span></i></p>
<p class=MsoNormal style='margin-left:.5in'><i><span style='font-size:10.0pt;
mso-bidi-font-size:12.0pt;color:blue'>}<o:p></o:p></span></i></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal>The above alias is abit complex and might need some
understanding. But, to put everything in a simple sentence, it’s the <i>$width()
</i>and<i> $height() </i>identifiers (read /help picture windows) that’s
important. </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Before we
begin, I should remind you that the $1-$6 parameter we stored in <i>x,y,w,h,font,fontsize</i>
format. I minused a 14 pixels from the width because the 14 width was used to
make the scroll buttons! Now, we have already got ourselves the <i>x,y,w,h</i>
of the area which we can work on. Now, we use the <i>$height() </i>identifier
to get the font height and we divide it with the total height of the box in
order to find the total line of text we can put in. The total width of the box
isn’t so important because we are using <i>/drawtext –c</i> which require us to
supply the width and height of the area of which we can draw on. But, I made a
few changes to the <i>x,y </i>and <i>h</i> value so that it looks nicer when
put together. I call the values that affected the changes <i>constant modifier</i>.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>Events and lines</h2>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Remember
the rules that each line we present to a user GUI must match the file in the
cache window? This is also the golden rule for picwin play list. But our play
list can only accommodate so many lines, so we set a variable call <i>scrollline</i>
that will guide the script to start <i>/drawtext</i> from certain line until
the limit/maximum line. Whenever the scroll up button is press, the <i>scrollline</i>
variable will be decrease by one. And when the scroll down button is press, the
<i>scrollline</i> variable will be increase by one. The trackbar<span
style="mso-spacerun: yes"> </span>by the side, is tracked by a percentage
value as like the progress trackbar and volume trackbar. So, we would do <i><span
style='color:blue'>$int($calc(<percentage> / <total lines> * 100)) </span></i>to
get the line which should be set as the scroll line.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>The events
in for the listbox also follows the main <i>mouse,sclick </i>and <i>uclick</i>.
I have added the <i>dclick</i> mouse event to detect a double click on the box
that will automatically plays the selected file. But I would like to show you
the way to get the line number of where the mouse clicks on!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal align=center style='text-align:center'><i><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;color:blue'>var %h
$int($calc($height(T,$5,$6) +2)) , %l $int($calc((%y - $2) / %h +
$rd(scrollline)))<o:p></o:p></span></i></p>
<p class=MsoNormal align=center style='text-align:center'><i><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;color:blue'><![if !supportEmptyParas]> <![endif]><o:p></o:p></span></i></p>
<p class=MsoNormal>Again, the $1-$6 values comes from the data stored for the
listbox. The <i>%y</i> is the y-coordinate of the mouse. First, we use the <i>$height()</i>
identifier get the height of the font, so we know how far apart is each line.
The ‘+2’ is a constant modifier. Then, for the line number, we would minus the
y-coordinate of the mouse point to the<span style="mso-spacerun: yes">
</span>y-coordinate of the box. Later, it’s divided by the font height to get
the line number that the mouse clicked on. But that’s the line number on
screen, it’s not the line number that matches the line in the cache window. So,
the <i>scrollline</i> variable is added to get the result.</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>That’s
basically how you make a listbox, the mouse events are similar to the main GUI
that we have discussed earlier. However, this picwin play list doesn’t <span
style='mso-tab-count:1'> </span>support the c<i>trl<span
style='color:blue'>($mouse.key & 2</span>) </i>and <i>shift(<span
style='color:blue'>$mouse.key & 4</span>) </i>click function. After all
this discussion, I<span style="mso-spacerun: yes"> </span>believe you should
know the objects parameter for the skinning function of a play list. </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>Play list objects</h2>
<p class=MsoNormal><b><u><![if !supportEmptyParas]><![endif]><o:p></o:p></u></b></p>
<div align=center>
<table border=1 cellspacing=0 cellpadding=0 style='border-collapse:collapse;
border:none;mso-border-alt:solid windowtext .5pt;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
<tr>
<td width=427 colspan=2 valign=top style='width:320.25pt;border:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal align=center style='text-align:center'><i>playlist
x,y,w,h,font,fontsize</i></p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<h1>playlist.w</h1>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Set play list width. Only require one value.</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.adddir <o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list add directory button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.addlist <o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list add list button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.addsong <o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list add song button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.deflist<o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Playlist default list button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.dellist<o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list delete list button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.delsong<o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list delete song button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.h <o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Set play list height. Only require one value.</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.list<o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list listbox</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.savelist<o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list save list button</p>
</td>
</tr>
<tr>
<td width=132 valign=top style='width:98.85pt;border:solid windowtext .5pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal><i>playlist.title <o:p></o:p></i></p>
</td>
<td width=295 valign=top style='width:221.4pt;border-top:none;border-left:
none;border-bottom:solid windowtext .5pt;border-right:solid windowtext .5pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>Play list title</p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<h2>So far…</h2>
<p class=MsoNormal><b><u><![if !supportEmptyParas]><![endif]><o:p></o:p></u></b></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Well,
that’s plenty about the play list. So now we will piece everything together!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal><span style='mso-tab-count:1'> </span>Step by
step, we will:</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='margin-left:39.0pt;text-indent:-.25in;mso-list:l1 level1 lfo4;
tab-stops:list 39.0pt'><![if !supportLists]>1.<span style='font:7.0pt "Times New Roman"'>
</span><![endif]>Create a database</p>
<p class=MsoNormal style='margin-left:39.0pt;text-indent:-.25in;mso-list:l1 level1 lfo4;
tab-stops:list 39.0pt'><![if !supportLists]>2.<span style='font:7.0pt "Times New Roman"'>
</span><![endif]>Grab information from the database</p>
<p class=MsoNormal style='margin-left:39.0pt;text-indent:-.25in;mso-list:l1 level1 lfo4;
tab-stops:list 39.0pt'><![if !supportLists]>3.<span style='font:7.0pt "Times New Roman"'>
</span><![endif]>Start building/drawing the objects on the window</p>
<p class=MsoNormal style='margin-left:39.0pt;text-indent:-.25in;mso-list:l1 level1 lfo4;
tab-stops:list 39.0pt'><![if !supportLists]>4.<span style='font:7.0pt "Times New Roman"'>
</span><![endif]>Build the play list</p>
<p class=MsoNormal style='margin-left:39.0pt;text-indent:-.25in;mso-list:l1 level1 lfo4;
tab-stops:list 39.0pt'><![if !supportLists]>5.<span style='font:7.0pt "Times New Roman"'>
</span><![endif]>Bind everything together</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>So it’s a simple 5 steps to
actually build your own mp3 player. </p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>That’s a lot about how to build
your own mp3 player in picture windows! However, the player that I have
presented here can be improved in a lot of ways! I did mention that the player
is skin-able with its object-oriented structure/concept, but it doesn’t support
image files! With a little tweaking, it will be able to support image files
(hint: <i>/drawpic</i>). Secondly, the play list is not in a picwin, but as I
mentioned earlier, a picwin play list is not hard to build at all! Thirdly, the
objects are limited. We could actually code an engine of some sort to support
unlimited objects! Fourthly, the objects are too static and provide very little
customization. More could be done on this.</p>
<p class=MsoNormal style='text-indent:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
<p class=MsoNormal style='text-indent:.5in'>Perhaps you will wish to play
around with the player and update it yourself, but for the time being, that’s
another story for another time! See you and thank you for reading this
tutorial!</p>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
</div>
</body>
</html>