Sub Menu contents

Unit 3

Creating Graphics & Images Bit by Bit

3.1 Unit Overview

3.2 Paint Pot Tutorial

3.3 Representing Images

3.4 Paint Pot Projects

3.5 Paint Pot Refactoring

3.6 Error Detection

3.7 Parity Error Checking

3.8 Magic 8 Ball

3.9 Persisting Photos

3.10 Map Tour

3.11BB Electronic Documents

3.12 Wrap Up


Persisting Photos

In this version of the Paint Pot we will learn how to take a photo with the device’s Camera and use that photo as the Canvas’s background image. We will also learn how to save that photo to a database on the device. So that whenever the app is run, the photo can be retrieved from the database.

By using a database in this way we will turn the photo into an example of persistent data -- i.e., data that persists between different uses of the app. We will use App Inventor’s Tiny DB component to allow the app to save the user’s photos on the device.

Unit Objectives

What is Tiny DB?

Up until now, the data in our apps has been stored either in global variables or as the value of the properties of the app’s various components. For example, when you store a piece of text in a Label, that data is stored in the computer’s main memory, in its RAM — random access memory. And as we’ve learned, RAM is volatile, meaning that any data stored there will be destroyed when the app is exited.

By contrast, data stored in the computer’s long-term storage — e.g., on the phone’s flash drive — will persist as long as the app is kept on the device. There are various ways to store data permanently on a computer. For example, you could store it in a file, such as a document or image file. Another way to store persistent data is in a database. App Inventor provides us a very simple, easy-to-use database in its TinyDb component. Any data that we store in the TinyDb, will not disappear when the app is exited. Instead, it will persist between uses of the app -- even if you turn off the device.

Incorporating TinyDB into Paint Pot

To get started, click here to open App Inventor with the PaintPotTinyDbTemplate in a separate tab and follow along with the video tutorial. Once the template project opens use Save As to rename your project PaintPotTinyDb. Note: If the blocks don’t appear well in the Blocks Editor, right-click on the background and use the Arrange Vertically option.

Creative Mini Projects

  1. As we saw in the overview video, one can also store lists of data in TinyDb. So rather than just having a single photo to use as the Canvas background, we could have a selection of photos to choose from. As a first step, initialize a list variable and add each photo that's taken to that list. Store the whole list in the TinyDb. Don't forget! You'll need a unique tag to associate with the list.

    If/else Algorithm. What about when the app starts up? This can be a little tricky because now you'll be retrieving a list of photos, rather than a single photo. (What should the default value be when you are retrieving a list from TinyDb?) So you can't assign the list as the background image. You could select a random item (photo) from the list and make that your background. But what if this is the first time the app runs? When the list is empty? This would be a good place for an if/else algorithm controlled by whether or not the list retrieved from the TinyDb is empty or not. To solve this problem, you'll have to look through the Lists drawer in the Blocks Editor for some useful functions to use.

  2. Add a ListPicker feature to the app to let the user select the background image. HINT: One of the ListPicker properties is the Elements property. You can assign your list to this property before the ListPicker is opened. Note that what will appear in the ListPicker are the file paths of the images, not the images themselves. There's no easy way around this.

Make sure that you do the Self-check at this link and that you update your Google Site Portfolio