{"id":161,"date":"2014-10-16T02:52:19","date_gmt":"2014-10-16T09:52:19","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=161"},"modified":"2014-10-16T02:52:19","modified_gmt":"2014-10-16T09:52:19","slug":"using-images-and-the-camera-in-app-inventor","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/10\/16\/using-images-and-the-camera-in-app-inventor\/","title":{"rendered":"Using Images and the Camera in App Inventor"},"content":{"rendered":"

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

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\u00a0phone’s photo gallery. Either way, the image that is obtained is displayed on the screen.<\/p>\n

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

\"Image1-UserInterface\"<\/a><\/p>\n

The Image<\/em> component is located in the User Interface section of the Palette, in the Designer.<\/p>\n

The ImagePicker<\/em> is located in the Media<\/em> section of the Palette. Drag each to the Viewer window.<\/p>\n

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

After renaming the components, we should have a set of components like this:<\/p>\n

\"Image1-Components\"<\/a><\/p>\n

For the Image1<\/em> component, the Properties look like:<\/p>\n

\"Image1-Properties1\"<\/a><\/p>\n

Note that the text box field named Picture<\/em> 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<\/a>, saved to my hard drive and then uploaded to App Inventor.<\/p>\n

To upload a photo from your computer to the Image1<\/em> control, click on the Picture<\/em> field – this displays a prompt:<\/p>\n

\"Image1-Properties2\"<\/a><\/p>\n

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

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\u00a0makes the program a bit more interesting and helps the user to see where photos will be displayed.<\/p>\n

The Blocks<\/strong><\/p>\n

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

\"Image1-TakingPhoto\"<\/a><\/p>\n

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

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\u00a0ImagePicker<\/em>. The ImagePicker<\/em> is a control that displays the photo gallery, let’s you select\u00a0an image from the photo gallery, and then returns that selected image to the app.<\/p>\n

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

\"Image1-ImagePickerAfter\"<\/a><\/p>\n

Running the App<\/strong><\/p>\n

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. \u00a0Tap the checkmark icon to signify you are done and you should be returned to the\u00a0app and the photo you took should be displayed.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

SOURCE CODE<\/strong><\/p>\n

Source code is available in the MIT App Inventor Gallery –> here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading Using Images and the Camera in App Inventor<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-161","post","type-post","status-publish","format-standard","hentry","category-components"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/161\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}