RICOH THETA Mobile Development - Try It Yourself!

THETA API Usage developers lounge
1

Hi all! @codetricity built a step-by-step video that focuses on making a mobile app that nicely shows off 360° images first as thumbnails then when you click on them as full panoramic images that you scan swipe around in.

Build it yourself and post your screenshot of the app as a reply. I’d like to see what you come up with!

This tutorial is aimed at used car sales. Showing of the interior of cars with 360° images.

You don’t need to take 360° images. Example ones are provided. Or you can use your own.

Here’s the video. It took me about 4 hours to complete, since I was typing in code, replaying sections, running the code, debugging. Someone with better skills than mine could possibly complete it in…1 hour or less, I would guess.

Here’s a screenshot by me of the completed app. Please add yours in a reply to this post!

flutterapp3

Unfortunately, I had some issues with my THETA, and ended up using the images provided in the repo. This is great that you have this option. But I’m hoping to use my own images in my next version of the app.

Looking forward to see your screenshots! :point_down: :ok_hand: :facepunch:

1 Like
2

Variation with Virtual tours

Using Z1 JPG images with default “auto” settings.

Changes

  • added caption below image thumbnail
  • thumbnail is a 1:1 aspect crop

Navigation Thumbs

image
image384×862 99.8 KB

Support for multi-line captions.

image

image

Storytelling.

image

360 Image Scene Navigation

image
image379×808 113 KB

image
image379×809 123 KB

Code including Z1 images

High Level Overview of Provider

Variation with 2nd Variable to Pass Details

screenshot_details

ImageNotifier update

import 'package:flutter/material.dart';

class ImageNotifier extends ChangeNotifier {
  Image _image = Image.asset('assets/images/R0010960.JPG');
  Image get image => _image;
  void updateImage(image) {
    _image = image;
    notifyListeners();
  }

  String _details = '';
  String get details => _details;
  void updateDetails(details) {
    _details = details;
    notifyListeners();
  }
}

Connecting to Camera

1 Like
3

There’s a new video tutorial that covers how to use provider to update a response window. For example, if you send a command to the camera such as list files and want to update the response window with the list of files. This tutorial does not require the camera as I use a fake API testing server in the tutorial. anyone can go through it, with or without a camera.

1 Like