Plugin Commander offers the possibility to plug in custom interfaces for its FF Editor. Almost 10 interfaces have already been created by different people. Take a look here. I've had many requests by people who wanted to design their own interfaces for Plugin Commander but didn't knew how to do it. So here is the answer.

1. Creating the interface image

Before you start your favorite image application and begin designing an interface for Plugin Commander have a look at this example:

 

The pure interface image	Screen shot of the FF Editor using the interface image

As you can see the pure interface misses some controls e.g. there are no text labels, no check boxes, no drop down boxes, no 1- 10 memory spot and no buttons. These controls are created and placed by Plugin Commander. So you don't have to do them yourself. All you have to do is to make sure that your interface image matches the controls that are added by Plugin Commander.

To see where Plugin Commander will later put these controls, you need a screen shot of the FF Editor and place it as a layer with 50% transparency and multiply blend mode in an image you create in your favorite image application. To save you some work, I've prepared such a screen shot and mask for you.

If you want to use Paint shop Pro to create the interface image, please download a two layered PSP file. If you use Photoshop, download a two layered PSD file. If you want to use another application download the TIF file without a layer and create a layer/object out of it and with 50% transparency and multiply blend mode.

Now you can start painting the new interface on the background (layer). Please notice that the shape of the interface can be plain rectangular or have a shape that is build with rectangles, rectangles with rounded corners, circles and ellipses. So don't use polygons, because they aren't supported yet. How to cut out this shape for the final interface, is described in chapter 2.

When the interface image is finished, just remove the matte layer and save the interface as a JPG or GIF file.

2. Writing the description file

The description file contains the name of the interface, the filename of the interface graphic, instructions for building a interface shape etc. Please open one of the existing .des files from the Plugin Commander folder in Notepad and have a look at the structure.

Here's an example:

 

Green Havoc	Name of the interface
GreenHav.jpg	The interface image file. The accepted formats are BMP, JPG, GIF and WMF.
9,640,480	1st number: number of shape instructions that define the shape of the interface 2nd & 3rd numbers: horizontal and vertical size of the interface image
Rect,2,2,639,479,0,0	First shape instruction: Pixel coordinates of a rectangle (normally the one that surrounds the interface): X1=2, Y1=2, X2=639, Y2=479 The last two values are only dummies.
Ellipse,221,-36,403,23,0,0,RGN_DIFF	Second shape instruction: Creates an ellipse at X1=221, Y1=-36, X2=403, Y2=23 RGN_DIFF: Subtracts the ellipse from the previously created rectangle
RoundRect,601,1,640,45,30,30,RGN_OR	Third shape instruction: Creates an rectangle with round edges 30,30: This determines how round the edges are. RGN_OR: Melts the round rectangle with the shape created by the previous two parameters
Ellipse,601,23,697,68,,,RGN_DIFF Rect,1,174,71,426,,,RGN_DIFF Rect,15,174,71,347,,,RGN_OR Ellipse,15,291,120,402,,,RGN_OR Rect,1,145,15,174,,,RGN_DIFF Ellipse,1,119,33,171,,,RGN_OR	The 6 other instructions that build the interface shape.
GraphSlider 1	Selects the graphical slider Nr. one Accepted parameters: 0-2 If this line remains blank, the generic Win95 scroll bars are used.
Mailto,365,455,515,470, hgoussard,Need Artwork?	Defines a rectangle and opens a email application, if it was clicked. Need Artwork? will be displayed as a tool tip
CodeWindows,232,182,600,383	Defines the position and size of the 4 source code windows

Please notice: the file name of the Des file should be exactly 8 letters plus the "Des" extension. And the order in which the parameters are placed in the Des file mustn't be changed. A new line has to be used for each parameter.

I know, writing a Des file is a little bit complex and there are some other parameters that I haven't mentioned here. But if you want to create an interface and don't want to fiddle around with this stuff, please contact me and I will create the Des file for you.

3. Using the interface

After having both the interface image and the Des file you can copy them into Plugin Commander's folder and restart Plugin Commander. Please select the new interface in Preferences and double click a ff plugin or press F9. Now you should see the FF Editor using your new interface.

4. Feedback

If you should have any further question about this tutorial or didn't understand something, please contact me. If you succeeded at creating your own interface, please do send it to me.