Photo just taken, how to add to a photo album?

[John Herdean]

Hi, I used this tutorial to build my camera service:

http://docs.appery.io/tutorials/using...

I built the 1st part of my photo album with the above tutorial. So now i have successfully tested and taken a picture with my Android phone. I see it its in this screen (only the 1st image (top-left) is mapped):

QUESTION #1:
As you can see I laid out my design to show the way it would look like if the user adds multiple pics - it would be something like a gridview list area of pics. The question #1 is how do i show to the user all the added pics. And not only that how to hide the current blank image (s) on page arrival until a pic is taken and loaded to the page.

QUESTION #2 + 3 + 4:
Furthermore, I want to allow the user to add more pics, so obviously they will hit the Take Pictures button again, but (question #2) how do i add the next pic to another image? Basically, what Im asking is do I build a grid area like i did here (question #)3? And if so, can I store these pics in local storage until the user is finished and hits the 'Im Finished, Send Pics' button (sends all pics to my server at once) (question #4)?

QUESTION #5 + 6:
I'm assuming that I only need to design just one image in this gridview (and just add cells to the gridview as pics are taken and added, i had it shown in my screenshot just to show you guys what i want the layout to be like), is that correct (question #5). My next question (#6) is if so, how do I automatically add a new cell to the gridview area as pics are taken and stored in local storage? If there's JS code involved to do this, please respond with the JS to do that because I have no idea how to even draft the JS for this function or functions...

Thanks,
John

[Illya Stepanov]

Hi John - we will take a look on your issue and update you, but it will take time.

[Maryna Brodina]

Hello!
1) Don't map results to image assets. It's easier to add image using JS. On service success run the following JS:
codeAppery('containerName')&#46;append('<img src="' + data&#46;imageDataBase64 + '" class="pic">');/code
where containerName - name of container for images (panel or mobilecontainer).
To make all images placed in two columns add CSS:
code&#46;pic{
width: 48%;
float: left;
margin: 7px 1%;
}/code

You can store images in localStorage, but there is a size restriction (on different devices from 2,5 and up to 5 MB). But you can check exeption while saving to localStorage. If there is overflow error - send images to server:
codetry {
localStorage&#46;setItem("picData", "data from service");
} catch ( e ) {
if (e == QUOTA_EXCEEDED_ERR) {
&#47;&#47; do something nice to notify your users
}
}/code

[John Herdean]

ok, so for if i use a panel, do i have to drag and drop any image(s) to the panel? Or will the JS automatically do it all?

[Kateryna Grynko]

Hi John,

You don't have to drag and drop any images to the panel. JS automatically does it all.

[John Herdean]

ok so far it works, however this css:

.pic{
width: 48%;
float: left;
margin: 7px 1%;
}

you wrote it for 2 columns, but what if I want to allow it to extend all the way to the screen size? Like side by side if i had a wider screen i just want it to fill the full width of the 1st row first then go to the next row?

[John Herdean]

Another question, how can I make an image clickable so that when a user clicks an image it will show the full screen of the image? Once there, I want to have the user slide with fingers to the next image (if any) - to the left and right?? Then I want to have the user tap the screen to show up a header with some buttons, and tap again to hide the header?? Thank.

I havent tried the local storage yet.. Im doing that next...

[John Herdean]

sorry, i think i found what i need to do.

[John Herdean]

with the pics extending the entire width... i did something wrong previously..

[Kateryna Grynko]

Hi John, I'll take a look.