Image Zoomer Component

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 app. 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 App’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 create an article that will be well positioned across devices.
Appearance Sets image to be zoomed.
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 as .png or.jpg 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.