There are some major features added in App Builder app version 2.8, one of them being “Photo Effect” page type.
With "Photo Effect" page type you can allow users to take a picture and then add different effects to it, like for example add sepia or grey effect also user can add from a set of predefined pictures on top of the photo, each of these pictures can be moved arround and zoomed in and out.
Let's show through an example what can be done:
1. We'll start with either an existent app or in my case create a new app. I have chosen BlankTemplate for this, but in fact any template or app would suit.
2. Now create a new page of type Photo effect and call it "PhotoEffect.html" like in the screen below.
3. Click "Edit" next to PhotoEffect page name to start editing the page.
You start with no images, you have to add them yourself.
4. Add images, as many you have or as many you want if you have many. Click "+" button under "Photo Effect Images" box and then click "..." in "Image Properties" box.
5. Select an image from Resources and then click Choose.
You now have one image in your Photo Effect page.
7. Similarly as above please add more images to your page. I have added 8 of them.
8. Now let's add a link to "Photo Effect" page from Tab 1. Go to edit tab1.html page.
9. Find in toolbox the button represented below and click it.
10. Fill out the fields as represented below and click "Insert".
Now your tab1.html should look like below.
Now let’s test what we’ve done on the device itself.
11. Open App Builder application version 2.8 or higher, login with your account and select the application used for this tutorial. Wait until all files get synchronized and you should see a screen like below.
12. Click on "Link to Photo Effect" and you should see the following.
This is the working area of your Photo Effect page. I'd like to mention that the inner frame where the picture will be is a square of 320px (width and height of course).
13. Tap on camera button on top right corner of the screen and take a picture. Please note that if user's device does NOT have a camera then the user will be prompted to choose a picture from the Photo Library. When you already took the picture you can adjust it a bit, i.e. zoom in/out or drag it. When you are happy on how your picture looks, tap on "Use" button.
You are back to your main Photo Effect screen, but now with your picture ready to be edited..
14 Click on "Mask" button and then on "Choose..." button in the panel that appears.
15. Here they are - the pictures that you added to this page through brick&mobile App Builder.
16. I choose the first picture (Android) and it appears on my screen as below.
The red square arround the picture means that it is currently selected.
17. You can zoom in/out the selected picture as well as drag it arround on the screen.
18. Similarly let's add another picture.
19. And put it into place.
20. You can now tap on "Mask" button and then "Apply". Now all your pictures (including the initial photo) are merged into a single image.
21. Tap on "Send" button and then "Save to Library".
This is the picture that gets saved to the library. You can click on it to see it in full size.
22. But editing might not stop here, we can still add other pictures.
24. And Apply.
Let's try another example with some tips.
1. Open Photo Effect page and take a picture.
2. Add a couple of pictures and then a frame on top of them.
Here are the tips:
- if you plan to add a frame to your photo you have to add it LAST, because after you add/select the frame you cannot select any othe objects(pictures) that are behind the frame
- if your picture is very small and you have difficulties pinch zooming it you can DOUBLE TAP on the picture and it will zoom in.