Skinning/Scripting Tips and Tricks

[will]

This thread is devoted to all those little things that we skinners and scripters find out which are actually very useful.
Lets try to suppress the useless posts here pls. I want it all to be good stuff to help noobs.

I'll start:

Finding out guid's of other components
This is if you wanna have buttons for other components.
1) Close wa3, rename studio.xnf to something else
2) open the componet you want to find the guid of
3) put in the top left of the screen
4) close wa3
5) open studio.xnf
6) find something that looks like this:

code:
<section name="Container:Component:{163FF355-9B87-49DE-BD72-EF5EA0C57FDD}">

  <section name="Layout:normal">

    <entry name="odim" value="498,394" />

    <entry name="r" value="1." />

    <entry name="rect" value="0,0,240,340" />

  </section>

</section>

where the value of "rect" begins with "0,0"
7) The code in the curly brackets is the guid.
8) Delete studio.xnf and repeat from 2) for other components.
9) rename the file back to studio.xnf that you renamed in 1)

Here are some guids that i have found using this method:
Colour controls: guid:{163FF355-9B87-49DE-BD72-EF5EA0C57FDD}
Skin Switcher: guid:{0000000A-0078-001E-2878-8C82786EBEC8}
Configurification: guid:{ED3CD0D9-5FE5-4C34-AFE9-52E714D4FAA4}
Shoutcast server list: guid:{AFF7172F-4E42-4A38-9106-86B610B482EF}
Database Explorer: guid:{DED19CA5-0AA6-48AE-8045-9F4975E51253}

Using system.getTimeOfDay()
System.getTimeOfDay() returns an Int which is the number of milliseconds since midnight to the nearest second To find the hours, minutes and seconds from this, use something like this:

code:
  int time = system.gettimeofday()/1000;

  int hours = time/3600;

  int mins = (time/60)-(hours*60);

  int secs = time - ((hours*3600)+(mins*60));

Everyone else: Please don't let this thread die! Post loads of things like these pls!

[will]

Making Scripts Skinnable

This workes by making a content group and putting it inside a standard frame.

1) First open the container tag
for example

code:
<container id="myscript" name="My Skinned Scipt Window">

2) Now define your content group

code:
<groupdef id="myscript.content.group">

  <!-- Inset Content Here -->

So that your MAKI file can use your content, we'll add the script here

code:
<script id="mycoolscript" file="script.maki"/>

Now close off your group definition

code:
</groupdef>

Now we need to create the layout, and put the standard frame into it

code:
<layout

  id="normal" background="component.basetexture"

  minimum_w="180" minimum_h="160"

  default_w="180" default_h="160">

you can set all the minimum_h etc tags as you like
Now we add the standard frame to our layout

code:
<group id="wasabi.standardframe.nostatusbar" 

  x="0" y="0" w="0" h="0" relatw="1" relath="1"  

  content="myscript.content.group" 

  />

The notify bit tells the standard frame what to use for its content, so we'll tell it to put its content as out content group we defined above.
we also need to close off our layout and continer tags

code:
</layout>

</container>

To link objects in your xml to your maki script just use code like this

code:
  Group ScriptGroup = system.getscriptgroup();

  MyObject = ScriptGroup.getObject("MyObjectId");

For a working example of this, look in my sig for Alarm or Goodnight.

Other Skinners/Scripters: Lets keep the stuff coming in to this thread pls.

[edit: updated for winamp 3.0]

[Hollow]

When creating your own containers dont use any names that standard. ie dont name you container "main" and the layout "normal" it will execute fine, but its bad practice. if you do that your cant access the actual main window with that script.

Remember commands can do more than they might first appear to be able to do. .resize(x,y,w,h) can be used to move the window around the screen as well as for changing its size.


[edited for being blind dumb and doing things the hard way.]

[Naamloos]

Gamma Groups

• open up your elements.xml and add the code below to every element you want to be accesible by the color controls
  

  code:
  gammagroup="Bleh"
  

• Now open up in the thinger the gamma controls (3 stripes) and select the group..
  Now play with the sliders, and try the checkboxes... when you're done, save it.
• In the wa3 dir it should say something like themes, and you can manually edit the values there. Copy that file into your skin and you're done

[Hollow]

Also with the gammagproups make sure to include:

code:
<include file="@C[email protected]*.xml"/>

in your gamma-presets file or the user won't be able to load the color presets that they create.

[will]

How do I get my buttons to autorepeat?

Check This out

[will]

Creating animation strips
This gem was orginally posted by Wilba in this thread, and is very, very useful and easy.
_____________________________________________________________

Paint Shop Pro/Animation Shop is a wicked combo when it comes to creating a row of frames in a single PNG image.

Case 1: You've got N frame images each in its own file. Now you need to assemble them into one file (a row of images) so you can load it into an animated layer.

Case 2: You've got two frames and want to apply some funky transition between them, like a clock "swipe" or a fade transition.

Case 3: You've got one image you want to rotate and create an animation.

Now, here's the cool combo:

Using Animation Shop, create the animation you want by loading images into frames. In Case 2, apply some transition. In Case 3, apply some image effect, like rotating. Ultimately, you'll end up with the frames you want in the animation (add/delete as necessary).
Now do "Export Frames" -> "To Picture Tube", select "All Frames".

Now open this .TUB file in Paint Shop Pro (don't USE the picture tube, just OPEN it). The frame images are all nicely placed in a single row, ready for saving as a PNG file.

The beauty of this method is that you can keep individual frames in their own files and then produce the animation bitmap quickly. It also saves a lot of manual cutting/pasting/aligning, as well as doing transition effects for you.

Sample file: Something I created in less than 5 minutes using this method.

Wilba
__________________________________________________________________

Thanks wilba!

[Naamloos]

Corners on components

ok, you want some nice corners on your components like Koalla?

Here is the trick

• Make a black and white map, black for the part that must be transparant and white for what doesnt needs to be cut off
• Make a new layer with the map as the image
• add sysregion="-2" to the layer
• save file and reload

Also, make sure you have a background on the group (in standardframe.xml, that's where you're working on) otherwise it doesnt do a thing


Good luck!

[Bizzeh]

Easy Animated Volume/EQ Sliders

No need for fussy stacked up images now... no need for maps.. all you need is each frame defined in XML and 1 or both of these tw2 scripts (xml demos included in zip)

[Plague]

Choose which kind of vis to show (analyzer or oscilliscope) from maki

Wanna limit your skin to just showing one of the standard vis modes and nothing else?
Wanna be able to change the vis mode by clicking on a standard button instead of clicking on the vis itself?

Sometimes there's only one of the built in vis modes that will look good in a skin and compromises are never funny.

With this script you can choose which mode to use and also limit your skin to ONLY that mode if so desired.

It's very simple and requires only a tiny bit on XML modifying.

Here are the only changes neccesary to XML.

code:


<!-- the standard vis, located in Player-Normal.xml and Player-shade.xml -->



  <vis

    id="vis"

    x="20" y="46"

    w="72" h="16"

  />



<!-- below are the things you need to add -->



  <!-- Put a cover on top of the vis to prevent changing modes,

make it a button instead of a layer to be able to use it for your

very own mode-changing script -->



  <button

    id="vis-cover"

    x="20" y="46"

    image="player.vis-cover"

    downImage="player.vis-cover"

    rectrgn="1"

  />



<!-- the 'player.vis-cover' image is a fully transparent PNG with

the same size as the vis area, w="72" h="16" in this case. -->

and here is the script for it, explaination inside the .m file.

-Plague

[edit] script updated a little with better example and more explainations [/edit]

[Hollow]

Want to have a slider that changes depending on the position of the slider? (like the volume, or eq sliders in winamp2.xx)?

Well the easiest way to create an slider like this is to create a animated layer png with all of the images you want to display. Place this in the xml where it should go (ie for the proper render order), with ghost="1". then you need to place a slider (volume, seek, eq, etc) on top of that. Then you need to do some maki.

What you need to do is catch all of the times that the slider changes, (such as for volume: system.onVolumeChanged(int newvol) then because the values for sliders go from 0 to 255, you want to do this.

code:
MySlider.onSetPosition(int newpos)

{

	int frame = (newvol*(MySliderBackground.getLength()-1))/255;

	MySliderBackground.gotoFrame(frame);

}

this takes the new position, newpos and converts it to a frame number. (newpos/255 = CurrentPercentage; CurrentPercentage*NumberOfFramesInAnimation-1 = the right frame number.)

As special cases, for volume, you can use System.onVolumeChanged(int newvol) or for seeking, System.onSeek(int newpos). For anything else, Eq bars included, use onSetPosition(int newpos), as System.onEqBandChanged(int band, int newvalue) does not return a 0-255 value.

[skinme!]

Here's an example of the above for the 10 EQ Bands + PreAmp. Customise it to suit your naming conventions.

And here is an example of the code in player-normal.xml:

code:
<groupdef id="window.eq" background="window.eq.bg">



	<slider id="eq.bar.1"  x="59" y="10" w="8" h="30"

	thumb="eq.bars.thumb" downThumb="eq.bars.thumb"

	hoverThumb="eq.bars.thumb" orientation="V" action="EQ_BAND" param="1"/>

	<animatedlayer id="eq.anim.1" x="59" y="10" w="8" h="30"

	image="eq.bars.anim" framewidth="8" autoreplay="1" ghost="1"/>



	<slider id="eq.bar.2"  x="69" y="10" w="8" h="30"

	thumb="eq.bars.thumb" downThumb="eq.bars.thumb"

	hoverThumb="eq.bars.thumb" orientation="V" action="EQ_BAND" param="2"/>

	<animatedlayer id="eq.anim.2" x="69" y="10" w="8" h="30"

	image="eq.bars.anim" framewidth="8" autoreplay="1" ghost="1"/>



</groupdef>



<layout id="normal" background="frame.bg">



	<group id="window.eq" x="284" y="76" w="209" h="50" move="1" sysregion="1" alpha="255"/>



</layout>

Please note that Bands are numbered 1-10 in PARAM but 0-9 in the M file below. Feel free to change this idiotic act of mine.

somebody fluffed.... smell cleared by Winamprocker

[BmmrMPower]

Some other guids

Here are some of the guids that I have found:

• {F0816D7B-FFFC-4343-80F2-E8199AA15CC3} = Video
• {45f3f7c1-a6f3-4ee6-a15e-125e92fc3f8d} = playlist editor
• {163FF355-9B87-49DE-BD72-EF5EA0C57FDD} = colors
• {DED13748-0AA6-48AE-8045-9A4975E51253} = classic visualization
• {ED3CD0D9-5FE5-4C34-AFE9-52E714D4FAA4} = config
• {DED19CA5-0AA6-48AE-8045-9F4975E51253} = database explorer

[DJGrenola]

Pluggable MAKI images and animations

I originally gave this its own thread, but was advised to stick it in here instead.

Suppose you wanted your skin to display a selection of images at random on the visualisation screen, perhaps when idle.

You can make this task easier for yourself by using a standard naming convention for the bitmaps and layers of the pictures to be displayed, for example:

code:




<elements>

  <bitmap id="blah.1" file="idle_images/01.png"/>

  <bitmap id="blah.2" file="idle_images/02.png"/>

  <!-- ... -->

</elements>



<!-- ... -->



<container id="main">

  <layout id="normal">

    <layer x="50" y="50" image="blah.1" id="IDLE_PICTURES_1"/>

    <layer x="50" y="50" image="blah.2" id="IDLE_PICTURES_2"/>

    <!-- ... -->

  </layout>

  <!-- ... -->

</container>

Then, in the MAKI engine which cycles the pictures, you have code like this:

code:




#define IDLE_PICTURE_ID_PREFIX      "IDLE_PICTURES_"



Int numIdlePictures = 0;

Timer idleAnimTimer;

Layout mainLayout;

GuiObject idleAnimPreviousFrame = NULL;



System.onScriptLoaded () {



  // probe Layout object to find number of bitmaps in XML



  mainLayout = System.getContainer("Main").getLayout("Normal");

  while (true) {

    GuiObject go = mainLayout.getObject (IDLE_PICTURE_ID_PREFIX + integerToString(j));

    if (go == NULL)

      break;

    numIdlePictures++;

    // turn off picture initially

    go.hide();

  }



  IdleAnimTimer = new Timer;

  IdleAnimTimer.setDelay (1000);

  IdleAnimTimer.start();



  // other stuff ...



}

    

// and then the method to change the picture when the timer fires

IdleAnimTimer.onTimer() {

  Int j;

  for (j=1;j<=numIdlePictures;j++) {

      GuiObject frame = mainLayout.getObject (IDLE_PICTURE_ID_PREFIX + integerToString(random(numIdlePictures + 1)));

      frame.show();

      if (idleAnimPreviousFrame != NULL)

        idleAnimPreviousFrame.hide();

      idleAnimPreviousFrame = frame;

  }

}

Incidentally, I've not tested that particular example, so don't whine if it doesn't work as expected. You get the idea.

The advantage here is that to add more images (or indeed animations, if you want to do it that way) simply requires addition of the <bitmap> and <layer> tags within the XML, and requires no changes to, or recompilation of, the MAKI. Indeed it is possible to encourage users to add their own bitmaps to the system by including them in the WAL file, and informing them in the XML of the naming convention required for the layer id.

Oh well, I suppose it might be of use to someone other than myself.

DJG

[Plague]

Wanna have 2 drawers on the same place?
Wanna switch between those 2 drawers so that when you slide one out, the other will slide in automatically?

Well, I've got a small script for you to do just that.

Just make 2 normal drawers, but with the same coordinates.
Then edit the attached script for your own need.

It's really easy and it looks great!

Have fun!

-Plague