Navigation:  How to Work with Screens > Adding Input Controls to a Screen > Adding a "Signature Capture" Control to a Screen

 

Control Purpose

 

This control is used to capture a signature. It requires the creation of an image file that stores the signature image.

 

Add a signature box to a screen by dragging a "Signature Capture" control from the top section of the "Control" tab OR  the "Style Preview Section" onto the screen.

 

Step-by-step

 

1. Drag the control onto the screen:

 

•If dragged from the "Control" tab, the control will assume the default style. (See Set Default.)

 

•If dragged from the "Style Preview Section", it will assume that particular style.

 

2. Now, double-click the selected control on the screen OR  the tree view to open the properties window.

 

 

The "General" tab is open by default.

 

3. In the "File Name" option, define the file name that will store the captured signature image. Click if you want to select a variable with that value. See Variable Definition.

 

4. Select a format for the file from the drop-down list (BitMap/PNG/JPG).

 

5. Select the style of the watermark by clicking . See Editing and Creating Styles and Editing and Creating the "Signature Capture" Style.

 

The signature box can contain a text, such as "Please sign here". This is called a watermark. By default, the watermark is located in the header of the signature box. You can add up to three "header texts" as well as three "footer texts" to a signature box.

 

6. Fill in the required header. Either enter the text in the intended row or click the corresponding and select a variable with the appropriate value.

 

Use the editing icons to the right of the table to move the rows up and down and to delete rows.

 

7. Position the header(s), within the signature box, with the alignment buttons.

 

8. If it is required that the header be saved with the capture signature image, check the "Save with Signature" option.

 

9. If required, fill in the "Footer Text(s)" table. Enter your text in the intended row or click the corresponding and select a variable with the required value.

 

10. To position the footer within the signature box, use the alignment buttons.

 

11. If required, the footer can be saved with the capture signature image. Check the "Save with Signature" option.

 

12. Go to the "Layout" tab.

 

 

13. Align the control within the screen. Maintain the given values or specify the control's position/size, within the screen, by providing the "X" and "Y" coordinates as well as "Width" and "Height".

 

Detail of Position/Size values

 

 

14. In the "Control Settings" section, attribute a name to the control. This name is displayed in the tree view.

 

15. Consider whether or not to check the following options:

"Enable"

Activates the control's input feature.

"Tab Stop"

Must be checked to enable a "Change Tab Order". This provides the possibility to change the order (between data input controls) in which the information is keyed in by the operator.

"Visible"

Manages the control's visibility in the device's screen.

 

16. If required, attribute a background image to the signature box. Use one of the following:

 

a. Enter the path (relative or absolute) to locate the image file you want to add to the "Signature Capture" control. See Working with Aliases.

 

b. Use to browse for the required background image.

 

I. Click the corresponding to open a window with tabs that contain image resources ("Theme", "Designer Resources", "Project Resources", "My Pictures" and a tab representing the folder you previously used as a source for an image import. In the case of the image below, it is the "C:\...\Pictures\" tab).

 

 

This window allows you to control the displayed images:

 

•Click and select the most appropriate view ("Large Icons", "Medium Icons" and "Small Icons").

 

•Use to filter the image display according to the defined resolution.

 

 

Right-clicking an existing image resource, opens a menu with several options. The available options vary according to the resource's location (the tab that includes the selected image).

Below are all the possible options:

 

 

II. Open the tab that contains the image you want to use.

 

III. Select the image.

 

To avoid image display issues, make sure that the dimension of the selected image resource and the target area of the Signature Capture are the same.

 

 

IV. Click to apply and return to the "general" tab.

 

c. Import an image from an outside source.

 

 

I. Click (on the lower left of the window).

 

II. Browse for the required image in an OS browse window and select it.

 

II. Click to import the image.

 

No matter which tab you had open when you clicked , the imported image is placed in the "Project Resources" tab.

 

IV. In the "Project Resources" tab, select the image you have imported.

 

V. Click to apply and return to the "Layout" tab.

 

 

To avoid image display issues, make sure that the dimension of the selected image resource and the target area of the Signature Capture are the same.

 

 

17. If the selected background image needs to be saved with the signature capture, check the "Save with Signature" option.

 

18. Select the color of the virtual pen that is displayed in the signature box. Select it from the drop-down list or click to customize the virtual pen's color.

 

19. Define the thickness of the virtual pen.

 

20. The default icon, on the signature box's upper left corner, has a repeat function to redo the signature capture, if required. This button can be disabled by checking the "Clear Button" option.

 

Use the right click in MCL-Designer's input boxes to access certain features regarding the input box's option as well as general actions such as "Copy"; "Paste"; "Search".

Ex: If you right-click the "Text Data" input box (included in a "Display Text" properties window), you are provided with the "Paste", "Search..." and "Variable Select" options.

If you right-click any other input box, it will provide other possibilities.

 

 

21. Go to the "Actions" tab.

 

Keep in mind that there is always a default event (ex: "On Change"; "On Timer"; "On Hotkey"; etc.) attached to the control (in this case, an "On Change" event). If you want the event to trigger an action, you must add processes to it (ex: "Go To"; "Check File"; "Set Focus"; etc.).

 

 

22. To edit the default event, double-click the event row ("On Change") OR  right-click the event row and select "Edit..." in the resulting menu. Either of these choices opens an "Edit Event" window.

 

 

23. Select from the drop-down (G) or (H) list:

 

 

Detail of a window

 

 

24. If required, add processes to the default event. See Adding and Editing Processes.

 

At this stage, the processes are being added to the default event (in this case, an "On Change"). The default event can, however, be ignored/overridden by adding other events (step 26).

 

 

This control has predefined local variables (only available in event context). See Signature Capture's Predefined Local Variables.

 

 

25. If there is no need to add more events, click in the "Actions" tab to conclude the operation. If the project requires more events, proceed to step 26.

 

26. Click (at the bottom of the "Actions" tab) to add a new event.

 

 

27. Select one of the available events (A) for this control ("On Timer" or "On Hotkey") and edit it (B or C, D and E).

 

 

Detail of a window

 

 

It is possible to add as many of the available events as required by the project. (Repeat steps 26 and 27.)

 

 

28. Edit the new event(s). Double-click the event row to be edited and open the "Edit Event" window. (Repeat steps 22 and 23.)

Ex: The editing of an added "On Hotkey" event.

 

 

Define which keystroke function(in a virtual or hardware keyboard) the control represents.

Define the target/action to be executed after the event is triggered. Select one of the available destinations from the drop-down or list OR <Action> if you want to add other processes.

 

29. These new events can include processes. See Adding and Editing Processes.

 

If you have more than one event, remember to select the event row you want to add processes to.

If you use the drag-and-drop method to add processes, make sure to drop the process on the row below the intended event.

 

 

Before concluding the addition operation, check the following:

 

Remember that the "Enable" option (located in the "Layout" tab) must be checked so that the added actions/processes run.

 

 

If required, use the icons located on the upper right corner of the properties window:

 

Click this icon to open a "Localization" window where you can edit the text element within that control or add translations to it. See Localization.

 

Click this icon to attach any relevant notes to this control. Enter your text in the resulting window. This information is displayed in the "Developer report". See Report.

 

 

30. Click in the "Actions" tab to apply the choices made.

 

The "Signature Capture" has been successfully added to the screen.

 

 

 

If any subsequent edition of the control's properties is required, double-click the "Signature Capture" OR  select " 'Signature Capture' Properties" (in its right-click menu) to open the properties window.

 

 

 

Signature Capture's Predefined Local Variables

 

This control has predefined local variables (only available in event context).

 

 

 

* Defined in the control's properties window ("Layout" tab).