Cloudy Pics Part 2: Managing the Camera Roll

Cloud Pics Part 2_1

Photo by Adam Stanley

Let’s talk about the Camera Roll. That’s the thing that controls where pictures captured by the camera API get saved. If you’re building a camera app, you need to deal with it. Your users expect the option of saving their pictures to their SD card. Adding that to your app though? Bit of a pain. Not very sexy, either.

Let’s change that.

Welcome to part two of my series on the Cloudy Pics Showcase App. Part 1 introduced the concept of the Showcase App, and gave a brief outline of what Cloudy Pics can do. With this post, we are going to focus on how it will help you manage the Camera Roll, which was why I started building this app in the first place.

Managing the Camera Roll

For the first version of Cloudy Pics, I created the CameraRollManager class with some basic functionality. The idea is to call promptCameraRollPath() when the user wants to change the camera roll, and when you get the cameraRollPathUpdated signal, you set the camera roll to the string you are given.

In this version, it creates a Dialog for you and prompts the user. In the future, it will also give you a list of possible camera roll paths for use in a drop down or picker. Right now it’s also up to you to decide when to display the prompt, but later we will also detect things like SD card insertion for you.

We’ll go in depth with the CameraRollManager class itself in a little bit, but first let’s talk about a key file that goes along with it: cameraroll.json.

Cloud Pics Part 2_2 Photo by Luca Filigheddu


This file, located in the assets folder, contains the paths that CameraRollManager will consider valid places to point the camera roll. By default, it will include the camera folder on the device and the SD card. It also contains the Box and Dropbox pictures folders. Yes, that’s right, you can save images (and anything else, really) directly to Box or Dropbox from your app, assuming you have access to the Shared folder. This feature is part of what puts the “Cloud” in “Cloudy Pics.”

Cameraroll.json contains an array of json objects that look like this:

        "name": "Default Device Storage",
        "path": "shared/camera/",
        "required path": "shared/",
        "description": "Default camera path"

Let’s break down what each of these properties do:

Property Description
Name Name of the camera roll option displayed to the user in the prompt.
Path Actual path the camera roll will be set to.
Required path If this path exists, we will assume that this camera roll option is valid. For example, if “shared/Box/” exists, we assume Box is setup and will set the camera roll to “shared/Box/pictures/”, creating the pictures directory if necessary.
Description This is a short description of what the option represents. It’s not currently used.

If you have other paths you want to take advantage of, or if you would like to block certain ones, just modify the json file to suit your needs. Relative paths (such as those that do not start with a ‘/’) are interpreted to be based in the app’s main directory. Keep in mind is that the camera roll can NOT be redirected into the data folder of your app at this time. This is because the camera service doesn’t actually have permission to write there.

Cloud Pics Part 2_3 Photo by Paul Bernhardt


Actually using the CameraRollManager is pretty straightforward. It can be accessed from either C++ or QML, though obviously if you want to use it from QML you will have to register the class for use (see the applicationui.cpp class if you aren’t sure how to do that). The basic workflow is this:

1. Connect to the CameraRollManager::cameraRollPathUpdated signal, and (optional) the cameraRollPathNotUpdated signal.
2. (Optional) At some point, call createCameraRollDialog, providing the current camera roll path. This will happen for you automatically if you skip right to step 3, but it can be a bit slow the first time, so you may want explicitly call it yourself at an opportune moment.
3. When you want to let the user change the camera roll, call promptCameraRollPath with the current camera roll path. Providing the current path will ensure that option is pre-selected for the user.
4. In your slot for cameraRollPathUpdated, you will get a string containing the selected camera roll path. Apply that to the camera. For example:

onCameraRollPathUpdated: {
               cameraSettings.cameraRollPath = cameraRollPath;

5. (Optional) If you need to do something special if the user cancels out of the camera roll dialog, handle that in your slot for the cameraRollPathNotUpdated signal.

And that’s it! As always, if you have any questions, comments, or features you’d like me to add to Cloudy Pics in the future, drop me a line in the comments or on Twitter. Next time, we’ll take a look at CameraSettingsStore, which will help us save and restore camera settings between app launches.

About paulbe1