{"id":5517,"date":"2025-01-01T03:36:42","date_gmt":"2025-01-01T03:36:42","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5517"},"modified":"2025-01-01T03:36:42","modified_gmt":"2025-01-01T03:36:42","slug":"camera-app-in-mit-app-inventor","status":"publish","type":"page","link":"http:\/\/obsidiansofteducation.com\/index.php\/camera-app-in-mit-app-inventor\/","title":{"rendered":"Camera App in MIT App Inventor"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/a><\/p>\n\n\n\n

In today\u2019s class, we will make a camera app using which we can take pictures. We will also add image viewing features to it so that we can look at all the images taken through our app\u2019s camera.<\/p>\n\n\n\n

Let\u2019s begin. Start a new project and call it MyCamera.<\/p>\n\n\n\n

First of all upload images for the camera button and first, previous, next, and last image buttons. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

I downloaded the images from:<\/p>\n\n\n\n

https:\/\/www.freepik.com<\/a><\/p>\n\n\n\n

I also resized these images to be 50 by  50 pixels.<\/p>\n\n\n\n

Now, for screen 1 properties, make the background dark gray and the screen orientation portrait.<\/p>\n\n\n\n

Make sure that the default file scope  is \u201cApp\u201d<\/strong><\/p>\n\n\n\n

Change the title text to My Camera.<\/p>\n\n\n\n

Drag and drop an image<\/strong> from the user interface<\/strong>.<\/p>\n\n\n\n

For the image properties, make height and width fill parent and make sure that \u201cscale picture to fit\u201d is checked.<\/p>\n\n\n\n

Drag and drop a horizontal arrangement<\/strong> from the layout<\/strong>. Make align horizontal and align vertical both center. Make height 15% and width fill parent.<\/p>\n\n\n\n

Drag and drop a button<\/strong> from the user interface<\/strong> inside this horizontal arrangement. Rename it to cameraBtn. And choose cameraIBtnImg from uploaded media as the image for this button. Remove text from it. Add a 1% width label with no text on the right of this cameraBtn. This is for spacing between the buttons. Duplicate cameraBtn by selecting it and pressing Ctrl + C and Ctrl + V<\/strong> for Windows or Command + C and Command + V<\/strong> for MacOS. Rename it to firstBtn. Change image to firstBtnImg. Again add space on the right of it using a 1% empty label. Similarly, add previousBtn, nextBtn, and lastBtn. You may have to change view to tablet mode for adding the lastBtn.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Drag and drop a Camera<\/strong> component from the Media<\/strong>.<\/p>\n\n\n\n

Drag and drop a TinyDB<\/strong> component from the Storage<\/strong>.<\/p>\n\n\n\n

Screen Design is done.<\/p>\n\n\n\n

Your project components should look similar to this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

And, your screen in the Viewer<\/strong> should look like this. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Let\u2019s work on the code now so go to the blocks section.<\/p>\n\n\n\n

Let me explain first how the camera component works in MIT App  Inventor.<\/p>\n\n\n\n

We want our camera component to take a picture when the cameraBtn is clicked so get the click event for cameraBtn and call camera\u2019s TakePicture procedure.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Select camera1 again. You will see that it has an AfterPicture event. Drag and drop it too in your blocks.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The AfterPicture event gives us an image but don\u2019t be confused. This is not an image but the address or location of where the image is. <\/p>\n\n\n\n

What we are going to do is that after each picture is taken by our camera, we will store the picture\u2019s location inside our imagesList.<\/p>\n\n\n\n

Hence, we need a global variable for our imagesList which again I will reiterate is not a list of digital pictures but instead the location of those pictures.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We also need a global variable for maintaining the index or position within this list so that we know which image should be shown when the next, previous, first, or last button is clicked. Initialize it to 1.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, let\u2019s work on our Camera1.TakePicture event.  We will store the new image address in our imagesList and we will further store this imagesList in the tinyDB so that whenever we start the app, we are able to see our previous images.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next, within the same event, we want to update the index to the size of imagesList and set our image component\u2019s picture value with the image at that index. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We are going to make a procedure for setting the image component\u2019s picture value.  The picture value will be loaded with the actual digital picture at that location and this way shown to the user.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, call this procedure from the AfterPicture event.<\/p>\n\n\n\n

Our final AfterPicture event will look like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, let\u2019s work on our screen initialize event. When the screen is initialized, we should get the images\u2019 locations from tinyDB.<\/p>\n\n\n\n

If the list length is greater than 0,  we will show the picture at the index = 1 when the app is started i.e. the first image otherwise we will call TakePicture because this means that no pictures have been taken with our app so far.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Another important thing to do for Android devices is to rotate the image 90 degrees. You don\u2019t have to do this for iPhones.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, let\u2019s work on our position buttons.<\/p>\n\n\n\n

The First button will show the image at index =1<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The Last Button will show the image at index = length of imagesList.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The Next button will add a 1 to the index but before showing the image we will check if the index has become greater than the length or size of imagesList. If it has then this should be not allowed as it will give an error because we are trying to access an index that doesn\u2019t even exist in our imagesList( index out of bounds error) so we will put it back to the length of imagesList. In the end we will call showPicture procedure.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The previous button will subtract a 1 from the index but before showing the image we will check if the index has become less than 1. If it has, we will put it back to 1 to avoid an index out-of-bounds error. In the end, we will call the showPicture procedure.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, we are done. This app will work for both iPhone and Android.<\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

You can also download the project file i.e. the aia file from below:<\/p>\n\n\n\n

My Camera App<\/a><\/strong><\/p>\n\n\n\n

The video tutorial is here:<\/p>\n\n\n\n

\n