Designing your own Interface for Plugin Commander's FF Editor
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:
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.|
1st number: number of shape instructions that define the shape of the interface
2nd & 3rd numbers: horizontal and vertical size of the interface image
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.
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
Third shape instruction:
Creates an rectangle with round edges
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.|
Selects the graphical slider Nr. one
Accepted parameters: 0-2
If this line remains blank, the generic Win95 scroll bars are used.
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.
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.