Customizing the arrow shape cursor wizard

The arrow shape wizard is a scripted operation. To access the source code, follow this guide:

1. Right-click on the toolbar with the wizard.
2. A context menu with a single entry ('Configure toolbar') appears, click on it.
3. A (quite cryptic) window appears. Find a blue text "Click here to zoom in" near the bottom of the window - click it.
4. The window changes and you'll see a box with commands (without meaningful names). Now you'll need to find the command that corresponds with the wizard. It should be the second from the end (between two separators). Click on it.
5. The right side of the window should now show its icon, multi-language name, etc. There should be also the JavaScript operation selected. Zoom in again.
6. Now you should be in the configuration of the wizard. Near the top of the window are buttons or tabs named "Configuration", "Execution" and "Preview".

The Configuration tab allows you to design a simple configuration panel for the operation.

The Execution tab is the main processing unit of the operation and the script here performs the actual drawing.

The Preview tab controls what preview is displayed when user plays with the wizard.

The Configuration

When you switch to the Configuration page (in version 2009.1 of the cursor editor), you'll see following script:

Configuration.Add1ofNPicker(
    "type",
    Application.Translate("Arrow direction"),
    Application.Translate("Direction of the arrow. Left-handed people would like to pick the right-facing arrow."),
    [
        Application.Translate("\\ - Up-left"),
        Application.Translate("| - Up"),
        Application.Translate("/ - Up-right"),
    ],
    Configuration.GetValueOrDefault("type", 0));
Configuration.AddAlphaColorButton(
    "fill",
    Application.Translate("Fill color"),
    Application.Translate("Color used to fill the arrow. Set to transparent to only draw outline."),
    Configuration.GetValueOrDefault("fill", 0));
Configuration.AddEditBox(
    "head",
    Application.Translate("Arrow head size"),
    Application.Translate("Size of the arrow head in pixels."),
    Configuration.GetValueOrDefault("head", 16));
Configuration.AddEditBox(
    "tail",
    Application.Translate("Arrow tail size [%]"),
    Application.Translate("Size of the arrow tail relative to its head. Set to 0 to create a tail-less arrow."),
    Configuration.GetValueOrDefault("tail", 40));
Configuration.Columns = 2;

This script make use of the Configuration object and adds four controls to the configuration panel of the wizard. Each of the controls has an ID ("type", "fill", ...), a translatable name and description and an initial value.

The initial value for each control is obtained from the Configuration object using its GetValueOrDefault method. This means that if the user has previously used the wizard, the last used value is remembered.

Let's change it

Our first task is changing the last field (the Arrow tail size). A slider would be more user-friendly than an edit box, because the user can easily control it with a mouse.

To do this, we need to replace the control for the "tail" parameter. Let's use the following code instead of the original one:

Configuration.AddSlider(
    "tail",
    Application.Translate("Arrow tail size [%]"),
    Application.Translate("Size of the arrow tail relative to its head. Set to 0 to create a tail-less arrow."),
    0, 100 ,Configuration.GetValueOrDefault("tail", 40));

There are 2 changes:

1. The AddSlider is used instead of AddEditBox.
2. Minimum (0) and maximum (100) values are specified before the initial value.

Click OK and test your modified wizard. You should have a slider instead of an edit box controlling the tail size.

What about the head size?

Can we do the same with the "head" field? Yes, but there is one tricky part.

The head size is given in absolute pixels. While most cursor are 32x32 pixels, users may want to create bigger ones. What shall we use for the maximum value of the head size?

In optimal case, the height of the cursor. Fortunately, we can do that with: Document.RasterImage.sizeY

Here is the modified command (using 4 as the minimum size):

Configuration.AddSlider(
    "head",
    Application.Translate("Arrow head size"),
    Application.Translate("Size of the arrow head in pixels."),
    4, Document.RasterImage.sizeY, Configuration.GetValueOrDefault("head", 16));

The Execution page

The script on this page draws the actual cursor. It uses the Polygon tool to fill the interior and the Line tool to draw the outline of the cursor. Drawing tools can be used from scripts via the DrawTool object. The drawing is performed at the end of the script.

The first part of the script read the parameters specified by the user in the configuration panel and then computes coordinates of the outline of the arrow shape. This requires a bit of math, but there is nothing tricky about it.

The Preview page

When the wizard is launched, the configuration script is run and the configuration panel is assembled.

Then the window is shown to the user and the initial parameters are sent to the execution script to generate a preview. The preview is shown via the view plug-in selected on the Preview page.

As you can see, the preview is using the standard Image - Viewer plug-in to display the result. You can also customize the icon and caption text of the window here.

Recent comments

hi bubba registered user on June 24th 2014

how do we move the thing

Anonymous on February 26th 2017

how we put a different one like bussy and other pointers not the principal

Anonymous

Signed comments carry more weight! Don't be a stranger - log-in or register. It only takes few seconds.