Flexible UI Gen II Image Utility - Help

Welcome to the help guide for the Flexible UI Gen II Image Utility for the DynaFlex II PED. This application allows you to generate custom BMP images with interactive buttons for use on MagTek's DynaFlex II PED devices.

However, to enable Touch Event reporting (Touch Down and Touch Up) on the DynaFlex II PED, the final image (BMP) must be cryptographically signed by MagTek through a separate signing process. Unsigned images can still be displayed on the device but will not support user event reporting—this is a security measure designed to prevent clear-text PIN theft and ensure compliance with PCI security standards.

For more information about the image signing process or to request image signing services, please contact your MagTek Representative.

Back to Application

Getting Started

To begin, select your desired layout (Landscape or Portrait) and then upload an image. You can then manipulate the image and add custom buttons.

Layout Selection

Choose between Landscape (320x240 pixels) or Portrait (240x320 pixels) using the radio buttons.
Changing the layout will reset the current image and any added buttons to fit the new dimensions.

Image Upload

Click the "Upload Image" button to select an image file from your computer.
Supported formats include common image types (e.g., JPEG, PNG).
Once uploaded, the image will appear in the viewfinder.

Image Manipulation

Dragging the Image

Click and drag the uploaded image within the viewfinder to adjust its position.
You can drag the image beyond the viewfinder boundaries.

Zoom Level

Use the "Zoom Level" slider to zoom in or out on your uploaded image.
This feature allows you to magnify specific areas for precise cropping or button placement.

Rotate Image

Click the "Rotate Image" button to rotate the uploaded image by 90-degree increments.
This helps in orienting your image correctly within the chosen layout.

Canvas Background Controls

These controls allow you to manage the background of the viewfinder canvas, especially useful when your image does not completely fill the space.

"Show Canvas" Checkbox: Toggle this to enable or disable the custom canvas background color. If unchecked, the background will default to a light gray.
"Canvas Color" Selector: If "Show Canvas" is enabled, use this color picker to choose a custom background color for the viewfinder area not covered by the image.
Note: If your image fully covers the viewfinder, these controls will be hidden, as the background won't be visible.

Button Management

The utility allows you to add and customize interactive buttons on top of your image. These buttons will be part of the final cropped output.

Adding Buttons

Click the "+ Button(s)" button to open the "Configure New Button" modal.
In the modal, you can set:
- Button Text: The text displayed on the button.
- Shape: Choose between Rectangle, Square, or Circle.
- Width (px) / Height (px): Define the dimensions of the button. Note that for 'Square' and 'Circle' shapes, the width and height will be constrained to maintain the aspect ratio.
- Background Color: The fill color of the button.
- Transparency (%): Adjust the transparency of the button's background. 0% means fully opaque (no transparency), while 100% means completely transparent.
- Text Color: The color of the button's text.
- Font Size (px): The size of the text on the button.
Click "Add Button" to place the new button in the center of the viewfinder.

Selecting and Deselecting Buttons

Click on a button to select it. A yellow dashed border will appear.
Hold Ctrl (Windows) or Cmd (Mac) and click on multiple buttons to multi-select them.
Click anywhere outside a button to deselect all buttons.
When buttons are selected, the Button Controls Panel becomes visible.

Dragging Buttons

Click and drag a selected button to move it around the viewfinder.
If multiple buttons are selected, dragging one will move all selected buttons by the same amount, maintaining their relative positions.

Button Control Panel Options

Delete: Removes the currently selected button(s).
Edit: Opens the "Configure New Button" modal to modify the properties of a single selected button.
Duplicate: Creates a copy of the selected button(s), slightly offset from the original.
Bring to Front / Send to Back: Adjusts the layering (Z-index) of selected buttons. "Bring to Front" places them on top of other elements, "Send to Back" places them underneath.
Align Top: Aligns the top edges of all selected buttons to the top-most selected button.
Align Left: Aligns the left edges of all selected buttons to the left-most selected button.
Distribute Horizontally: Evenly spaces three or more selected buttons along the horizontal axis, maintaining their relative order.
Distribute Vertically: Evenly spaces three or more selected buttons along the vertical axis, maintaining their relative order.

Grid Controls

These features help with precise placement and alignment of buttons.

"Show Grid" Checkbox: Displays a grid overlay on the viewfinder, with a default grid size of 20 pixels.
"Snap to Grid" Checkbox: When enabled, buttons will automatically "snap" to the nearest grid line when dragged, making alignment easier.

Saving Your Output

Save Button and Terms of Agreement

When you click the "Save" button, an "Agreement of Terms for Use of Flexible UI Gen II Image Utility" modal will appear. This is a critical security step:

Read the terms carefully, especially concerning Prohibited Content (no full keypad or PIN pad interfaces).
You must enter your email address in the provided field. We collect your email to ensure proper accountability and tracking of generated UI images. This helps us maintain compliance with security protocols and quickly identify the source of any non-compliant image content.
You must check the box that states "I understand and agree to the terms listed above."
The "Confirm Save" button will only become active once you've entered a valid email and accepted the terms.
Click "Confirm Save" to proceed. If you do not accept the terms or provide a valid email, you will not be able to save the image.

Important Security Notice: Creating images that replicate, mimic, or resemble a full keypad or PIN pad interface is strictly forbidden. Such content poses a significant security risk and violates PCI DSS requirements. You are fully responsible for ensuring all image content complies with applicable security standards and MagTek policy.

Output File

The utility will generate a 24-bit uncompressed BMP (Bitmap) image file.
This file will include your cropped image and all overlaid buttons.
The filename will be prepended with your sanitized email address (e.g., "your_email_address_cropped_image_with_buttons_timestamp.bmp"). A timestamp will also be added for easy identification.
The coordinates of the main cropped image and all visible buttons will be logged.

Clear Button

Clicking "Clear" will reset the entire application, removing the uploaded image and all added buttons.

MMS Command Generation & Device Control

This section allows you to generate the specific hexadecimal commands needed to display your image on a MagTek device and send them directly.

Generate MMS Command

Click "Generate MMS Command" to open the command generation modal.
Configure display options:
- Display Time: Set how long the image stays on screen (0 = indefinite).
- Background Color: Choose a fill color if the image doesn't cover the full screen.
- Position (X/Y): Set specific coordinates or leave blank for centered.
- Display Option: Choose how the image interacts with the device status bar.
Save to File: Enter a custom filename (optional) and click "Save to File" to download the command as a text file. This file includes the necessary headers (DISPLAYMESSAGE, SENDCOMMAND) for processing.

Device Control

Directly interact with a connected MagTek MMS device via WebHID.

Open Device: Click to connect to a MagTek device. You will be prompted to select the device from a browser dialog.
Close Device: Disconnects the currently connected device.
Browse & Send File: Click to select a command file (like the one saved from the MMS Command modal). The utility will read the file and send the commands to the connected device immediately.

Log View

The Log View displays important information about your actions, including image and button coordinates, and confirmation messages.

Download Log: Click this button to save the entire log content as a text file (MagTek_Cropper_Log.txt).
Copy Log: Click this button to copy the log content directly to your clipboard.

For further assistance, please contact MagTek support.