Using Images and the Camera in App Inventor

In an earlier post, I mentioned that ImageSprites use images – and suggested I do a tutorial on images so here is a first look at using images in App Inventor 2.

For this tutorial, we create a very simple app that uses the camera to take a picture, or we can fetch a selected photo from the phone’s photo gallery. Either way, the image that is obtained is displayed on the screen.

First, create a simple user interface. To set this up, I used the VerticalArrangement layout and then added a button, an ImagePicker and an Image on to the Viewer:

Image1-UserInterface

The Image component is located in the User Interface section of the Palette, in the Designer.

The ImagePicker is located in the Media section of the Palette. Drag each to the Viewer window.

You also need to drag a Camera component to the Viewer; the Camera is also located in the Media section. Note that the Camera is an invisible component and will appear below your app’s user interface screen, as shown above.

After renaming the components, we should have a set of components like this:

Image1-Components

For the Image1 component, the Properties look like:

Image1-Properties1

Note that the text box field named Picture has the name of a .jpg image file entered into, in this example. Sorry for the ugly gibberish filename – I just grabbed a photo off of my own Flickr page, saved to my hard drive and then uploaded to App Inventor.

To upload a photo from your computer to the Image1 control, click on the Picture field – this displays a prompt:

Image1-Properties2

The prompt shows the full name of the image I have already uploaded, and this file is already highlighted. Or, click on Upload File … at bottom to select and upload your own .jpg image file.

This uploaded .jpg becomes the default image initially displayed in the program. If you want, you could leave this blank but having something to show on screen makes the program a bit more interesting and helps the user to see where photos will be displayed.

The Blocks

Taking a photo is absurdly easy. When the button for taking a photo (btnTakePhoto) is clicked on (or rather, pressed with your finger), the Click event is raised – and all this event handled need do is call the camera’s TakePicture method:

Image1-TakingPhoto

Once the camera completes taking the picture, the AfterPicture event occurs. This is where we fetch the image (hover your mouse over the pink “image” within the AfterPicture block and select “get image”). Assign the image that was just taken (the get image) to the Picture property of the Image1 control. This copies the photo that was just taken, and displays it on screen.

We could stop here, but let’s take a look at grabbing a picture from the photo gallery on the phone. To implement this, we use ImagePicker. The ImagePicker is a control that displays the photo gallery, let’s you select an image from the photo gallery, and then returns that selected image to the app.

The ImagePicker displayed in the Designer is effectively a button that contains its own event handler for the Click event. Pressing the ImagePicker button on the main screen automatically enters the gallery where you select your photo. When the selection is complete, the ImagePicker’s AfterPicking event is raised and we add a tiny bit of code to process the image, merely copying the “Selection” property of the ImagePicker control (renamed here as impgSelectPhoto) to the Image control on screen to display the selected photo.

Image1-ImagePickerAfter

Running the App

When activating the camera, take a photo and wait a moment – you should see a “checkmark” at the bottom of the screen after the photo is processed.  Tap the checkmark icon to signify you are done and you should be returned to the app and the photo you took should be displayed.

When selecting a photo from the gallery, wait for the gallery to appear, scroll through and select a photo. Tap the photo and wait for a moment – and control should return to the app and the selected photo will appear on the screen.

Note – if you have more than one photo gallery app registered on your phone (I have 3 such apps), Android will prompt you as to which of the gallery apps you wish to use.

There are additional features that are not shown here. For example, if your phone has a front facing and back facing camera, its possible to switch between the cameras.

SOURCE CODE

Source code is available in the MIT App Inventor Gallery –> here

Advertisements

28 thoughts on “Using Images and the Camera in App Inventor

  1. Hello Ed,
    The photo taking and image displaying is quite simple. If you want more pictures at the same display, I think it gets tricky. I gave a try in making the option of taking two, three or four photos (displayed in a table arrangement), but I failed to make the blocks work.
    Usually you have one global declared value for Image, so in multiple images several global (empty) values are needed for them.
    In case there are one, two or three photos already taken, the block needs to check if they are valid and filled, before continuing to the next empty value. Seems I am not approaching this the right way. Can you recommend me a solution?

    Here’s my attempt. https://drive.google.com/file/d/0B4c2eCyvDxPWTlIwMkRyRzNNNG8/view?usp=sharing

    Thank you
    Drini

    Like

    • Drini,
      The problem with the “not” is that the value “get image1” does not evaluate to a true or false value. “not” only works if the value to the right can be converted to a true (including non-zero values, I think) or false (include zero, I think).

      Another way to keep track of which Image has a valid value is to set up a 2nd set of variable (such as ValidImage1, ValidImage2, ValidImage3…) and set those to true or false, to keep track of what is stored in Image1, Image2, Image3.

      My memory is that when I worked with Images, App Inventor does not currently support a “list” of images. If AI did support a list of Images, this would be a lot simpler.

      Ed

      Like

      • Hi Ed, thank you for your reply. You were right regarding the “not” use. I was looking at the wrong place (the “Logic”) while I was actually aiming at “is empty” part (which was in “Text”). Once I started using the “is empty” part instead of “not” I did create blocks for every image. Of course, I cannot use lists but four images are enough.

        Thank you again for your insight.

        Cheers
        Drini

        Like

  2. I have ASUS tab. After clicking the photo. the tab displays, 2 buttons. Retake and Done. How many ever times I click Done, the screen does not go back to the app.

    Like

    • Are you running in the AI2 Companion? Yesterday I was having similar problems from time to time on a different app I am writing. Sometimes screens would come up blank or not at all. This occurred after several test runs of the app – and I eventually had to restart my phone (not just kill the AI2 Companion). Something odd was happening but I do not know what was going on.

      When I used “Build” to create the .apk file and then install that on my phone directly, the app ran fine. Wonder if you are encountering a similar problem?

      Ed

      Like

  3. hi,im trying to build an app that contains different categories of images if we choose particular category that album will be displayed.Say for instance categories be fruits,flowers etc.If i click on fruits button all the images of fruits taken by me should be displayed.Here the images are taken by the user from camera.how to store these images under different cateogries and retrieve them.Please help.

    Like

  4. hi,im trying to build an app that contains different categories of albums if we choose particular category that album will be displayed.Say for instance categories be fruits,flowers etc.If i click on fruits button all the images of fruits taken by me should be displayed.Here the images are taken by the user from camera.how to store these images under different cateogries and retrieve them.Please help.

    Like

    • I have not yet done much work with images. If other readers have worked with images, please jump in with a comment.

      Perhaps I will play with images later today to see what options there are for storing images.

      Ed

      Like

    • You can store images in Lists. Just use Add Items to List -> List to use, -> get Image.

      Then you can fetch any list item from the list, and assign it to an Image1 object on the screen to display the images you have.

      You could create a separate list variable for each category, or you could create a list that contains sublists (more complicated).

      I also just did a little check and it appears that you can store images in TinyDB, as well. I will need to do a lot more experimenting to figure out the possibilities of using images/camera, etc, in App Inventor apps. Looks like it might be able to do a lot.

      Hope that helps!

      Ed

      Like

    • Paul, not exactly. App Inventor seems to launch a standard Android camera which runs independently of whatever you do in App Inventor. I understand your desire – I always use grid lines when shooting photos with cameras.

      Ed

      Like

      • Thank you for the fast reply.
        The app i want to make will use my own grid lines.
        sad face.
        I wonder weather this is something they will update.
        Is there any thing else like app inventor, that would let me do this.

        Like

      • There might be a possibility if written using the much more complex Android Studio in the Java programming language and the Android SDK (this is not for programming beginners).

        I have not done very much with the camera and images and I do not know if you can do the grid overlay using the Android SDK directly.

        Another possibility – could you use a camera app that someone else has written? There are many free camera apps on the Google Play store and if someone has solved that grid lines problem, you might be able to use that. Then, in your App Inventor app, you may be able to launch that other camera app using the Connectivity | ActivityStarter to launch another app. When that app finishes, control returns to your App Inventor app. I do not know if this is the best path to try, but it is probably the next step I would look in to.

        Ed

        Like

  5. Hello Ed,
    Im working on camera with image processing for my final year project. the project are to make an android app that take picture and peocess the image. Is it possible to use openCV or connected to MatLAB using app inventor?
    if not, can you recommend me any other method?

    Thank You
    Akithero

    Like

    • Akithero,
      In App Inventor, you can operate the camera (AI2 calls Android to do that) to take photos. The camera returns a photo image that can be used as an image, and you can store them in TinyDB too. But there is not much you can do directly in AI2 to analyze the image – yet.

      Last fall, App Inventor announced they are testing a new “extensions” feature that enables programmers to add new features to App Inventor. If you go here http://appinventor.mit.edu/extensions/ there is an ImageProcessor extension available for testing. It does not yet do a lot, but I suspect more feature will be coming in the future.

      Another way to do image analysis, eventually, might be to write the image analysis code in Java and the Android SDK. Then use ActivityStarter (under Connectivity in the Designer View) to launch the external app to do the image analysis, or more likely, have that separate app use the openCV library code base. I do not know if there is an easy way to transfer an AI2 image to an external app. I know you could assign the image to a Canvas background and you can take a “snapshot” of the Canvas and store that in an image file on the Android device.

      Unfortunately, I do not have access to MatLAB and it is really expensive to buy it. I wish I could use MatLAB as there are many things I would like to try with it. But that means I am not of much help when it comes to interfacing to MatLAB.

      I just had a comment on FB from someone that is using App Inventor code, and a link via Bluetooth to an Arduino, and then from the Arduino through an unspecified mechanism, to get data into MatLAB. I do not know if that would work for Image data in AI2. However, I did something similar a couple of years ago using the Android SDK instead of AI2. I wrote code for an Arduino that interfaced to a linear current sensor and the ADC on the Arduino to measure voltage and current in an external device. I had the Arduino send the measurements over the serial/USB interface to an app I wrote for Windows which read the data and logged it to a data file on the PC. The data files were then later analyzed in Microsoft Excel. My project also had code running on an Android phone, which was written in the Android SDK.

      I could see something similar using AI2 to write an Android app that collects the data into a file, which is then transferred to a PC. In fact, you could install something like DropBox on the Android and the PC – as you write data into the Android file, it would then automatically synchronize through DropBox to the PC. And there on the PC, you could read the data into MatLAB.

      I am thinking “out loud” as I write this – these are just ideas but perhaps they will spark an idea that solves your problem?

      Ed

      Ed

      Like

    • At this time, MIT App Inventor does not support MySQL. Instead, MIT AI works with Google Fusion Tables, which is very similar to an SQL database. It’s sufficiently complicated to set up, program and use, that I have several chapters about databases in my volume 3 – ebook, App Inventor 2 Databases and Files available for immediate download from the links on the http://appinventor.pevest.com web site.

      Ed

      Like

    • I was away for a week on vacation, with much Internet! Off hand, I do not know how to save an image to a php external web site. I don’t know if this is possible from App Inventor code.

      Like

  6. hey Ed,
    i want to build a camera app in which camera will open within the screen only and cover only the part of screen. can u tell me if it is possible using app inventor 2?

    Like

    • I have not used the camera feature in a while and I am traveling just at the moment. From what I remember, the camera app basically opens a generic Android camera app, which takes over the screen. Then, upon return, it returns an “image object” to your. I just checked – I do have a post on the camera component – check this out
      http://appinventor.pevest.com/?p=161

      Good luck to you!

      Ed

      Like

    • The camera component is pretty limited. It just fires up the generic Android camera app and takes a photo and passes that back to the App Inventor app as an “image object”. There’s not a lot that you can do with image objects, as best I can tell. Does the image get saved in the gallery? I don’t know off hand. I don’t have time to test that out – but its pretty easy. If you go to
      http://appinventor.pevest.com/?p=161

      There is a set of sample blocks to do a simple camera app and that could be tested/checked fairly quickly.

      Ed

      Like

  7. Hi Ed,
    The Camera “Take Picture” method in App Inventor only launches the android camera and does not actually take or snap the picture.
    Is it possible that once the android camera is launch and with a timer set, it can take pictures without human intervention?

    Like

    • I do not think an App Inventor app can control the actual camera – only launch the camera app.

      There might possibly be a way to do something using the StartActivity block which enables App Inventor apps to launch other apps on the device. What I am thinking is that IF that works, then would could launch the camera app, and IF the camera app can take a parameter to activate the shutter, then, perhaps something could be made to work. But all this is very speculative! I don’t know if any of it would work!

      Like

  8. I try to run this code on a Moto X and after taking (or selecting) the picture, instead of it showing the new picture, the image disappears entirely. I can tell the file path is being saved, because I can still share it over social media. But, it’s not displaying on the screen. What am I doing wrong?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s