HowTo: Get Thumbnails from RICOH THETA with camera.listFiles

THETA API Usage
1

there are two techniques to get the thumbnails from camera.listFiles.

Technique 1

set maxThumSize to 640

{
      'name': 'camera.listFiles',
      'parameters': {'fileType': 'image', 'entryCount': 10, 'maxThumbSize': 640}
}
  • only works on Z1 and V
  • will only work on SC2 with a single file
  • to use this technique with an SC2, you must change the startPosition for every file. The SC2 will only return the thumbnail for a single file

Technique 2

get the thumbnail from the fileUrl

This example shown with Dart.

        var thumb64 = responseBody['results']['entries'][0]['thumbnail'];
        String fileUrl = responseBody['results']['entries'][0]['fileUrl'];
        String name = responseBody['results']['entries'][0]['name'];
        print('fileUrl: $fileUrl, name: $name');

        // there are two different techniques to get the thumbnail
        // you can either convert it from base64 
        // Image thumbnail = Image.memory(base64Decode(thumb64));
        // or, you can use the query ?type=thumb
        var responseImage = await http.get(Uri.parse('$fileUrl?type=thumb'));
        var imageBytes = responseImage.bodyBytes;
        Image thumbnail = Image.memory(imageBytes);

Clicking on Image to Get the Full Image

You can pull the full image from the camera as the image is accessible with a HTTP GET call.

Create a class that holds information on the image.

class ThetaImage {
  final String fileUrl;
  final String name;
  final Image thumbnail;
  ThetaImage(this.fileUrl, this.name, this.thumbnail);
}

Once you have the class with properties for fileUrl, name, and thumbnail, you can store objects for your image in a lightweight array and use the array to display the thumbnails.

In the example below, the InkWell is a type of button. The thumbnail is the button. When the thumbnail is pressed, the app will change to display the full image.

 var responseBody = jsonDecode(response.body);
        List<Container> thumbList = [];
        var entriesList = responseBody['results']['entries'];
        for (var entry in entriesList) {
          var thumb64 = entry['thumbnail'];
          Image thumbnail = Image.memory(base64Decode(thumb64));
          Container imageContainer = Container(
            child: InkWell(
              child: thumbnail,
              onTap: () {
                getFullImage(entry['fileUrl']);
              },
            ),
          );
          thumbList.add(imageContainer);
        }

In future articles, I’ll provide more information on managing the state of the application to handle progress loading spinner and error states with the thumbnails.