Photo Decal Component

Use the camera in your device to take photos. Add overlays and graphic effects/elements.

This component will activate the camera in your device and enable you to take a photo. You can then add overlays and effects to these photos, e.g. watermark, mustache, rims on a car etc….then upload and share these new images to a range of social media.

The Photo Decal component loads a preset default set of properties. The Photo Decal items can be changed in their property panels. The plus button on the Photo Decal component takes you to your App’s ‘images’ folder (within the App’s ‘Resources Folder’) to select any new images you have stored for further decals. It will add your selected image as a new Photo Decal item in the Scene Tree.

Photo Decal Tutorial

Please Note: The video below was created using Umajin version 1.1.0.0 and there have been considerable changes to the UI and naming conventions since then. How to set up the Photo Decal Component’s properties and new graphics, however, remains fundamentally the same.

Using the Photo Decal Component

  • The Photo Decal component is now found in the “Media” category of components. A default photo decal setup loads automatically. You can use this setting straight away.
  • In the tutorial, new graphical elements for buttons etc have already been created and stored in the App’s ‘images’ folder. In the ‘Property Inspector’  you can replace and alter any of these default properties.
  • You can change the images for the 3 photo decal items as well.
  • Using the plus button on the ‘Photo Decal component’ you are taken automatically to the main image selector to select and add photo decal items. (You will have previously created and saved graphical items for this purpose)
  • The photo decal item can be re-named in its Properties panel but it is re-sized using the Decal Scale slider in the Properties panel of the Photo Decal component.
  • Save is device dependent and will save according to your device capability.
  • Share offers a range of options for submitting the final image to social media.

Properties

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 in order to create a group that will be well positioned across devices.
Appearance Sets appearance of how this component will work when using the camera and adding any watermarks. The graphics are created in whatever software you like to use and stored in the App’s folders.
Menu setup Choose top or bottom from the dropdown for placement of the menu buttons for initiating the camera action and saving the photo.
Decal Scale Scale 0 to 1.5 with 0 being smallest. Sets scale of the decal items.
Button Scale Scale 0 to 1.5 with 0 being smallest. Sets scale of Menu Buttons.
Capture image Browse the App’s image folder for the button image to display so you have a button for your users to capture the image.
Select camera Browse the App’s image folder for the button image to display so you have a button for your users to select the camera.
Save image Browse the App’s image folder for the button image to display so you have a button for your users to save the image to your photo gallery (device dependent).
Share image Browse the App’s image folder for the button image to display so you have a button for your users to share the image they have created.
Watermark image portrait Browse the App’s image folder for the watermark image to sit over a portrait orientated photo.
Watermark image landscape Browse the App’s image folder for the watermark image to sit over a landscape orientated photo.
Transparent watermark for preview Checkbox
Move decals left image Browse the App’s image folder for the button image to indicate users can move the decals left.
Move decals right image Browse the App’s image folder for the button image to indicate users can move the decals right.
“Share to” comment Type in a comment for sharing in the Text editor.

Popup Messages.

Save Default message is ‘Image Saved’ but this can be changed in the Text Editor.
Preset A Preset is a pre-determined set of properties and files for a component. You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the component has a Predefined Preset it will automatically be loaded into your app as the default when you insert that component.
The ‘LOAD’ button  opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.