Image Zoomer

Displays a large image that can be panned and zoomed.

The image zoomer overcomes the problem of not having enough screen space for lots of detail. Use this
component in conjunction with the ‘Zoom image zoomer’ action, to zoom and pan around large content on a
small device. For example: a brochure intended for traditional print could be reused within the Project.
Zoom in and out controls can be added by creating buttons, for example, and then adding the ‘Zoom Image
Zoomer’ actions when the buttons are pressed.

Using the Image Zoomer

The Image Zoomer Component is very useful when you have an image that covers a large area with a lot
of content and you want users to be able to view it on a small device like a phone. The type of
asset might be a complex diagram, a large photograph or detailed piece of art work.
The Image Zoomer uses the assets you have created and stored in the Project’s ‘Resource
Folder’/’images’ folder.
Browse the ‘images’ folder and insert the asset into the ‘images’ file panel.
On a touch device users will be able to pinch and zoom around the image or with a mouse, users can
likewise pan around and look at the content in detail.

Properties for Image Zoomer Component

Name	When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size	Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height on order to maintain a set size across devices.

Appearance

Image	Browse your Image folder using the Folder icon. The icon opens the Image folder and lets you select the item you want zoomable.You can insert new images/graphics (.png, .jpg, .tga, .svg, or .bmp files) into the Image folder using copy and paste. Note: to see the new image/s you have added, you will need to press the Refresh key bottom left of the Image folder button.
Default Scaling	Set the dropdown to Fit or Fill mode. Fit retains the whole image to scale on the page and Fill will fill the whole space you have set for the image.
Opacity	Set how opaque the image will display on a scale of 0 to 1, with 0 being totally translucent.