DriveWorks Pro 22

How To: Create A Clickable Image (KB12121007)

How To: Create A Clickable Image

This example explains how the Macro Button form control can be used to advance through a sequence of images.

This article requires DriveWorks Pro Administrator.

Overview

The steps involved to achieve an image that, when clicked, will advance to the next image are as follows:

1. Create a constant to store the image number.
2. Use the Macro Button form control to display the image.
3. Create a Specification Macro that drives the constant.
4. Apply the Specification Macro to the Macro Button.
5. Apply a rule to the Picture property of the Macro Button that changes the picture.

Before you Begin

Prepare the images to be used on the Macro Button control using an image editing application.

This example uses the images from the Sample Pictures folder in Windows 7.

Ensure the images follow the guidelines below:

1. Each image has the same dimensions (Each of the sample images in Windows 7 are 1024 x 768).
2. The images are not smaller in size than the control they will appear on (or the image will be pixilated when viewed on the user form).
3. Each image is numbered consecutively in the order they are to be presented (1.jpg, 2.jpg, 3.jpg, etc.).
4. The images are stored in a folder relative to the project location, for this exercise use the sub folder Images, so you have the location:
   
   < Drive>\< ProjectLocation>\Images

Open or create a group and project to start this exercise, at the location < Drive>\< ProjectLocation>

Create a Constant

1. From Stage 3.Data and Rules > Define Constants create a constant and name it ImageNumber.
2. Give the constant a value of 1 to begin with (the macro created later will change this value)

Please refer to the topic Define Constants for help on creating a constant.

Add a Macro Button

1. From Stage 2. User Interface > Form Design select the form the Macro Button is to be placed on.
2. From the command bar select the More button, choose the Macro Button and click OK.
3. Enter  ClickImage for the name of the macro button and click OK.
4. Resize the macro button so the images will appear within the control boundary. No picture will display until the correct property has been set, so final adjustments can be done once an image is displayed.

Create a Specification Macro

1. From Stage 5: Specification Control > Specification Macros click Add to add a new macro.
2. Enter IncrementPicture for the name of the macro and click OK.
3. In the Edit tasks dialog drag the Drive Constant Value task from the toolbox window to the Tasks window.
4. From the Properties window select the Constant Name property. From the drop down that appears on this property select the constant DWConstnatImageNumber.
5. Double click the grey orb on the Constant Value property (to make the property dynamic), and then click the button that appears on this property to launch the rule builder. Build the following rule:
   
   IF(DWConstantImageNumber=8 , 1 , DWConstantImageNumber+1)
   
   

   This rule first makes a check to see if the value of the constant has reached the maximum number for the quantity of pictures that are to be cycled through. In this example we have 8 images but this should be changed if you are using more.

   If the value of the constant has reached 8 the macro will drive the value 1 into the constant (therefore beginning the cycle again). This can be seen in the portion of the rule:

   IF(DWConstantImageNumber=8 , 1

   When the maximum number of images has not been reached, the macro will take the existing value of the constant and add 1 to it. (therefore advancing to the next image). This can be seen in the portion of the rule:

   , DWConstantImageNumber+1)

   This rule will be run each time the macro button is clicked.

   
   
6. Click OK in the rule builder to apply the rule.

Apply the Specification Macro to the Macro Button

1. From Stage 2. User Interface > Form Design select the form the Macro Button was placed on and select the Macro Button.
2. Select the Macro Name property from the Behavior section of the control property list, and click the build button to launch the rule builder.
3. Enter the following into the rule editor window of the rule builder:
   
   "IncrementPicture"
   
   
   Ensure the macro name entered is exactly as the macro created above (in the Create a Specification Macro section) and is encased within quotes "".
4. Click OK in the rule builder to apply the rule.

Apply a rule to the Picture Property of the Macro Button

1. With the properties of the macro button still displayed in the Form Designer select the Picture property, double click the grey orb, to make the property dynamic (green).
2. Click the build button at the end of the Picture property field to launch the rule builder.
3. Enter the following into the rule editor window of the rule builder:
   
   "Images\" & DWConstantImageNumber & ".jpg"
   
   

   This rule will construct the path relative to the project location (Images\) and then use the number coming from the constant ImageNumber as the image name, and then append the file extension (.jpg).

   If the images you are using have any other extension replace the .jpg with the extension of your image files.

Apply other Picture properties to the Macro Button

1. With the properties of the macro button still displayed in the Form Designer select the Picture Size Mode property and change the value to Zoom.
2. Select the Picture Style property and change the value to Picture Only.

Test

As specification macros cannot be run during Test Mode in the Form Designer a new specification will need to be created to test this example in real time.

Go to Stage 6. Specification > Specification Explorer and start a new specification to see this working.

Additional Information

For images that cannot be numbered sequentially consider creating a Data Table (named ImageNames for this example) that has a column for the ImageNumber and a column for the Actual Image Name, as below:

Then adjust the rule for the Picture Property on the Macro Button to be:

"Images\" & VLookup(DWConstantImageNumber , DwLookupImageNames , 2 , FALSE)

Where

"Images\" is the folder, relative to where the project is located that stores the images to use.

DWConstantImageNumber is the constant whose value is being driven by the specification macro.

DWLookupImageNames is the name of the Data Table created above.