Gallery Component

This easy to use component enables you to display content in a streaming format that you can zoom and pan. You can take images as .jpgs or .pngs and add them in numbered order to a gallery folder created within your App’s Resource folder of images and they will automatically display on device. You can also convert previously created Powerpoint files, Excel files, Word docs to .pngs and display that content through the Gallery component.

The Gallery component is pre-set with a group of optional sub-component buttons. These buttons enable the user to tab backwards and forwards through the gallery, to view images fullscreen and to zoom in and out and pan around any image.

How to use the Gallery Component

To insert any component you click the large ‘plus’ button beside the App name. You can also use ‘Insert’ on the top menu bar.

Both actions will open the ‘Component Selector’. Under the Layout Tab, we are going to select the ‘Gallery’ component and click ‘Insert’

The ‘Gallery’ component is pre-populated in the Scene tree with 8 navigation buttons as you can see in the screenshot below. They are currently unchecked in the ‘Properties Inspector’ panel so they do not display on the screen. We have unpinned and expanded the ‘Properties Inspector ‘ panel so all the buttons are showing. You have the option to check all the buttons or just the buttons you want to display.

If you click the ‘Load’ button in the Preset section at the bottom of the Properties Inspector panel the standard gallery component will display that has all of its 8 buttons showing. You can choose to keep them all or uncheck some you don’t want.

To add content to the Gallery component, select the ‘Gallery’ component in the scene tree and then in the ‘Properties Inspector’ under the ‘Properties’ tab, under the ‘Appearance’ heading, beside ‘Image’, click the ‘Folder’ icon to access this app’s file of images.

This opens the ‘Images’ folder which sits inside this app’s ‘Resources Folder’. Each app has its own Resource folder.

The screenshot above shows our ‘images’ folder. It is already set up with 4 Gallery folders. It is useful to organize your content into folders that sit inside the ‘Images’ folder. Your folders can contain either .jpg or .png files. You need to convert Powerpoint, Excel or Word files into one of these 2 formats to display in a gallery component.

You can also use the ‘File’ menu in the top menu bar to access content. Click ‘File’, then ‘Open Resources Folder’ and then the ‘images’ folder.

In the screenshot above you can see that in this example the 4 folders all contain different types of content. Gallery 1 has a Powerpoint file converted to .pngs, Gallery 2 has a Word doc converted to a .png, Gallery 3 has an Excel worksheet converted to a .png and Gallery 4 has photos saved as .jpgs.

Our example will show how to create a simple picture gallery without navigation buttons. With the ‘Gallery’ component selected, in the ‘Properties Inspector’ panel, under the ‘Appearance’ heading, click the folder beside ‘Image’.

We will open the ‘Gallery 4’ folder which has our .jpg photos in it. We only need to select the first image and then all the other content will automatically load and populate our ‘Gallery’ component.

The Gallery component is so simple to use that we can immediately play our app using the ‘play’ arrow (insert from media files) and preview our photo gallery by clicking through it or swiping on a touchscreen. We can zoom in and out of images with the mouse wheel or pinch and zoom on a touchscreen

As you see in the screenshot below we have set the photos in a frame and set our crop mode to ‘Fill’. Our first example was designed to have no navigation buttons but if we decided we wanted them we could check all (or some) of the Navigation buttons and they will all display on the screen. They are already set up with actions so that they will function as labelled.

These buttons can be deleted and configured as you wish by amending their properties in the ‘Properties Inspector’ panel for each ‘Button’ component. In this case, we have retained the ‘Previous’ and ‘Next’ buttons. We have re-positioned them, resized them and changed the text to arrows.

The process for creating any other gallery is the same, as long as files are converted to .jpg or .png.

Our first ‘Gallery 1’ folder holds a Powerpoint presentation that has been converted to .pngs as you can see inside the folder below.

In the Properties Inspector panel for this Gallery folder, under the ‘Appearance’ heading, in the ‘Image’ panel, select the ‘Slide 1.png’ from this folder and when ‘play ‘is pressed all the PPT slides will display in the app and we can move through the presentation as we wish.

The same process applies to display the ‘Word’ or ‘Excel’ files that are stored in Galleries 2 and 3.

 

The ‘Gallery’ component has 2 Events-‘On Press’ and ‘On Change’- that can have some special gallery actions attached to them.

Below is a screenshot of the 5 dedicated Gallery actions.

The five gallery actions are;

  • Navigate a Gallery – enables user to go back and forward through the gallery.
  • Set Gallery File – specify an initial image file and the Gallery will load it and any other images in that same folder. Useful for embedding a Gallery in a ‘Feed Item View’ component and having the Feed tell the Gallery what images to load.
  • Set Gallery Zoom Level – Zooms on the current image in the Gallery to the specified level.
  • Zoom a Gallery – enables a user to zoom into images in a gallery.
  • Zoom and Pan a Gallery – enables a user to zoom and pan around any image in the Gallery.

 

Have fun with this Gallery component. This is a simple introduction to a component that you will find very useful for displaying many different types of content.

Properties for Gallery 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 Set to percentage so that it works/looks good across devices.
Appearance Set the graphic elements for your quiz.
Image It is a good idea to create a ‘Gallery folder’ within the App’s Resources folder to hold all the images you want to display in a gallery component. Place the numbered images into the Gallery folder. Select the first image. Other images in the folder will display in numbered order.
Update Click this button to update the image stream.
Crop mode Dropdown to select display mode of either Fit or Fill.
Vertical If the box is not checked then images are aligned left to right (horizontally) so the user needs to drag left or right to get to the previous or next image.
If the box is checked then the images are aligned top to bottom (vertically) so the user needs to drag up or down to get to previous or next image.
Use hard edges If the box is not checked the edge of the first or last image that the user is trying to drag/slide will rebound off the edge.
If the box is checked then the edge of the first or last image that the user is trying to drag will be fixed to the side of the screen.
NOTE: Special case – if you have only one image in a gallery it can be useful to check the ‘Use hard edges’ checkbox so that the ‘Gallery’ component will behave more like the ‘Image Zoomer’ component.
Navigation start/end Drop down to select your navigation options:

  • Do nothing – leaves 4 buttons as is.
  • Disable buttons –If the gallery is showing the first image, then the buttons ‘First’ and ‘Previous’ appear as inactive (because they are not required) and when the gallery shows the last image, then the ‘Next’ and ‘Last’ buttons appear as inactive (because they are not required).
  • Hide buttons – The “First” & “Previous” buttons get hidden when the Gallery shows the first image (because one cannot navigate backwards) and the “Next” and “Last” buttons get hidden when the gallery shows the last image (because one cannot navigate forwards).
Looping Check the box to loop image stream
Disable zoom Check the box to disable zoom
Show First button Check the box to display the ‘First’ button. If any of the following checkboxes are unchecked, the button will not display.
Show Previous button Check the box to display the ‘Previous’ button.
Show Next button Check the box to display the ‘Next’ button.
Show Last button Check the box to display the ‘Last’ button.
Show Zoom in and out buttons Check the box to display both ‘In’ and ‘Out’ buttons.
Show Zoom to full or fit buttons Check the box to display both ‘Full’ and ‘Fit’ buttons.
Subcomponent Properties The 8 sub-components are all buttons & have the usual button properties & states for editing. See ‘Button’ component under Basic components for detailed help.

  • Name
  • Position and Size
  • Appearance – including Text and Icons
  • Text Style

Gallery Tutorial

Please Note: The 3 short videos below, were created using Umajin version 1.3.0.0.and there have been changes to the UI and some naming conventions since then. The main changes you will notice are the new component icons and that the Gallery Component sits in the Layout category of components rather than the Media category.The way you use the Gallery Component, however, remains much the same in spite of UI changes.