RegionMapping

From TrillWiki

[edit] RegionMaps: How To Create An Irregularly Shaped Control

by DREADNOUGHT on 09/04/04 at 01:56:43 PM

If you've ever looked at the SETi skin, you may have noticed that alot of the buttons are not square. In TP2, the iconholder was certainly not your standard rectangle. In my 'bored' skin, the buddylist appears to have a little bit 'stuck on' the bottom corner.

How is it done?

The answer is, 'very easily'. It is literally a case of creating a new component and adding 1 extra line of code to your control - simple huh?

Ok, so first off why might one need an irregular Button?. Take a look at the example below.

http://www.civillians.com/skintricks/images/regionmaps/buttons.jpg

As you can see, my buttons would overlap each other if they were defined as rectangles, so we have to 'chop out' the bits which overlap.

Start by creating the buttons as you would normally, including the overlaps, and lining them up with the icontrols. So, when done, you have 3 overlapping icontrols, and 3 controls.

Next, we need to tell Trillian which bits to chop out. We do this in exactly the same way as we do when adding background code for components. In fact, we actually create a component, with background code as our way of telling trillian what to do. And, like usual, we create an image, with the bits we want to cut out in pink, as below:

http://www.civillians.com/skintricks/images/regionmaps/regionmap.gif

So the image here is the area of the image we have defined as the 'add' button control, with the bits we don't want in magenta.

Ok, create a component with one background section, like this:

<component name="add-regionmap">

<mainregion usebitmap="1" />

<background name="upperleft" transred="255" transgreen="0" transblue="255">

<source name="NAME" left="" top="" right="" bottom="" />

<rect>

<left num="" width="0" />

<top num="" height="0" />

<right num="" width="0" />

<bottom num="" height="0" />

</rect>

</background>

</component>

Replace the source name with the name of the bitmap for your regionmap, and the trans colours with your colo(u)r to chop out (most people use magenta, as I have done). Add in the coords as usual.

Don't forget the mainregion line, this is a common mistake.

Now we are almost done, but there is one final step.

In the control, we must tell it to use this regionmap. Add the following line:

<mainregion usesource="add-regionmap" />

Just before the closing </control>. Remember to change the usesource="" to whatever you called your regionmap component.

And that's it, all there is to it.

In my example, as my buttons were the same size and shape, I can use the same regionmap for all three of them. If your button/topic/iconholder is resizeable, you can include upper/left/right/lower parts of background code in the component, as well as the other three corners.