Image Manipulator

From OpenMBD
Jump to: navigation, search

The Image Manipulator is a viewer that can be used to transform an image based on the value of a signal. It allows you to either move, rotate, scale and/or transparentize an image using so called manipulations. By combining images, signals and manipulations a user is able to create new viewers to be used in a layout.

Manipulations

Move Manipulation

A move manipulation can be used to change an images X and Y position using pixels.

Move Manipulation

A static image of a cylinder overlayed by an Image Manipulator with a move manipulation manipulating an image of a piston in the Y direction.

Rotate Manipulation

A rotate manipulation can be used to change the angle of an image using degrees.

Move Manipulation

A static image of a compass overlayed by an Image Manipulator with a rotate manipulation manipulating an image of a pointer.

Scale Manipulation

A scale manipulation can be used to change the width and height of an image using pixels.

Move Manipulation

A scale manipulation manipulating the width and height of a square.

Transparentize Manipulation

A transparentize manipulation can be used to change the opacity of an image using percentages.

Move Manipulation

A static image of an LED that is off overlayed by an Image Manipulator with a transparentize manipulation manipulating the opacity of an image of LED that is on.

Using the Image Manipulator

Adding a new Image Manipulator to your layout

To add a new Image Manipulator to your layout either right click the layout or drag a signal from the sidepanel and the following menu will appear.

Adding an image manipulator

Adding a Signal

After adding the Image Manipulator to your layout it will appear empty. First a signal needs to be added which can be done by clicking the 'Add Signal' button seen in the image below or by dragging a signal from the sidepanel to the Image Manipulator.

Note: If the Image Manipulator was added to the layout by dragging a signal from the sidepanel, the 'Add Signal' button will not appear. To add more signals you can either drag them from the sidepanel or right click the Image Manipulator and add a signal through the context menu.

Adding a signal

Adding an Image

In addition to a signal, the Image Manipulator also needs an image to manipulate. An image can be added by clicking the 'Add Image' button as seen in the image below.

Adding an image

When both a signal and an image have been added the Image Manipulator will appear showing only the image.

An image of a cylinder

For this step an image of a cylinder is used.

Placing the Image Manipulator

Sometimes you want to combine images so that they appear as one manipulation. You might for example want to overlay several images. Press 'Ctrl+R' to enter 'Resize and Move Mode'. All your windows will now appear with a dashed line around them, which indicates they can be moved or resized. You can use the arrow keys to to move the Image Manipulator around one pixel at a time allowing you to precisely overlay several images.

A selected viewer with an image of a piston

For this step an Image Manipulator with a picture a piston is used.

When overlaying pictures it can be that the image you want to have on top of another is actually underneath it. To change this you can either move the Image Manipulator to another layer, or move to the front in its current layer. This can be done by right clicking the Image Manipulator and navigating the context menu as can be seen in the image below.

Move to front dialog option

Managing Manipulations

Manage Manipulations

When both a signal and image are added to the Image Manipulator you can start adding new manipulations. Right click the Image Manipulator, choose 'Manage Manipulations' and the following dialog will appear.

Managing Manipulations

By default a new Image Manipulator already has one manipulation which is set to 'Move'.

Edit a Manipulation

To edit a manipulation press the 'Edit' button next to manipulation you want to edit. In the case of a 'Move Manipulation' the following dialog will appear.

Editting Manipulations

In this dialog you can set signal values and corresponding values for the properties of the image you want to manipulate (i.e. X and Y in the case of a 'Move Manipulation'. For all values in between the corresponding properties will be interpolated. Depending on the mode, when a signal is out of bounds (i.e. it is less than the minimum or greater than the maximum as defined in the 'Edit Manipulation' dialog) the image properties can either be saturated or extrapolated.

In the example above the piston will move 127 pixels in the Y-direction between signal values 0 - 100.

Order of Manipulations

Manipulations are applied in the same order as they are found in the 'Manage Manipulations' dialog. The order of your manipulations can be changed by pressing the 'triangle' buttons in the 'Manage Manipulations' dialog. However, changing the order of your manipulations can have unexpected results. Have a look at the following examples:

If a square is first rotated and then scaled, the end result will be a diamond.

Manipulation order: first rotated and then scaled


If a square is first scaled and then rotated, the end result will be a rotated rectangle.

Manipulation order: first rotated and then scaled

Demo Project

To try out some examples of the Image Manipulator you can download the following demo project.

HANtune_IM_Demo.zip