Unit 7: Tour Guide: Part 3

TOUR GUIDE:
GALLERY SCREEN The GalleryScreen will
allow users to take
GALLERY SCREEN pictures of the sites to
add to a Gallery!

❏
1 Go to the “GalleryScreen”.

❏
2 Switch to the Designer.

❏
3 With your partner, look at the user interface and see if you can identify what each
component does. See the screen layout below.

HorizontalArrangement1

CameraButton
InstructionLabel

Image1

HorizontalArrangement2
BackButton

TinyDB Camera
 Unit 7: Tour Guide: Part 3

GALLERY BUTTON
Now you’ll go back to LocationScreen and add the button and code to open the GalleryScreen.

❏
4 Go back to the “LocationScreen”.

❏
5 Select GalleryButton in the Components
panel, and click on the Visible checkbox
to make it visible.

❏
6 Switch to the Blocks Editor.
 Unit 7: Tour Guide: Part 3

GALLERY BUTTON

❏
7 Drag out a GalleryButton.Click event block.

❏
8 In GalleryButton.Click event, open the
GalleryScreen.

c
b

This time,
you’ll open
GalleryScreen,
without any
startValue
 Unit 7: Tour Guide: Part 3

TAKE PICTURES WITH THE CAMERA

❏
9 Now, go back to the GalleryScreen.

❏
10 Drag out a CameraButton.Click event.

❏
11 When the button is clicked, take the picture!
 Unit 7: Tour Guide: Part 3

DISPLAY PICTURE

❏
12 After a picture is taken, the Camera.AfterPicture event is triggered.

❏
13 Set the Image.Picture to the image the camera just took.
 Unit 7: Tour Guide: Part 3

AFTER PICTURE

❏
14 Hover over image and snap it
into set Image1.Picture.

❏
15 Test the Camera feature with Note: If you
the MIT AI2 Companion. take a second
picture, it will
Take a picture, and see overwrite the
that the image changes. first.

STORE PICTURE IN TINYDB

To make sure the picture is saved for the next time someone uses the app, you need to store it in
TinyDB. Remember, TinyDB stores information persistently, so it will always be saved.

When a picture is taken, store it in TinyDB.

❏
16 Drag out a TInyDB1.StoreValue block.
Make the tag “photo”.
Make the value image.
 Unit 7: Tour Guide: Part 3

INITIALIZE SCREEN

Because you are storing the photo to TInyDB, you need to get it from TinyDB each time the screen
opens. You will code that in the GalleryScreen.Initialize event.

❏
17 Drag out a GalleryScreen.Initialize event.

❏
18 Set the Image.Picture to the photo stored in TInyDB.

b
a

➢
19 Use “photo” as the tag again. And leave the
valueIfTagNotThere as blank text, so no picture
appears.

➢
20 Here you go! Test out your app with the MIT
AI2 Companion.
○ Go to the GalleryScreen.
○ Take a picture.
○ Close the app and reopen it.
The picture should still be there!
 Unit 7: Tour Guide: Part 3

COMPUTATIONAL THINKING CONCEPTS

Tour Guide

1. Events

2. Variables/Naming

3. Data manipulation and elementary data structures