2022 Getting Started Challenge

Select and Show 360° Images

Build a Flutter app that picks an image and displays it. We’ll show you how to do this. You can display the 360° image in more interesting ways. Or you can pick a different method for displaying the image. We will be using the Flutter packages image_picker and panorama. They are easy to integrate into your code.

Start with this repo: 12_take_save_display

If you want to quickly test the functionality of the app, there is a pre-built apk available in the Releases section of the repo.

If you have access to a THETA camera, please use your own unique 360 images. If not, you can use the 360 images we provide below.

Download Media

Use an Android phone to download the images to your downloads folder, then use image picker to bring it into the 360 view.

Toyo Fujita Collection - IKOMA 360

If you would like your image added here, please feel free to message us (@jcasman or @craig).

press and hold image to download

Main goal: Your app will be able to pick an image and display it. Edit the code to display the image in a different way or pick a different method.

  • Use a different picker method instead of image_picker in the gallery. For example, store the RICOH THETA images in a separate folder, not in the main gallery.
  • Another idea is to change the crop or representation of the thumbnail to give a better idea of what the image is.
  • When the 360° image is displayed, have different controls for rotation speed, zoom, overlay.
  • Another idea is to set the default display orientation using the panorama properties.

Resources

Getting Started Guide

theta360.guide Forum - For support and questions

To Submit

Respond to this topic and include the following:

  • Two screenshots
  • Link to your GitHub repo
  • On the GitHub README, include an animated gif of your app running
  • Short description of what you changed and any tips that you want to share

Optional

  • A little bit of information about yourself!

Official Rules

1 Like

The newest version works on iOS if you do the build with XCode.

Select, “Allow Access to All Photos”

in Safari on iPhone, press and hold sample image above to save

Select “Add to Photos”

Press on image icon to select image

Select RICOH THETA image you downloaded from the post above

image

Tap on image to get 360 view

See image in 360 view

August 9, 2022

added hotspots into images

image

image

enabled sensor control

Move phone to move image

1 Like

Video introduction to the 2022 Getting Started Challenge.

Covers how to enable device orientation, zoom and orientation with sensors. Follow the tutorial and join the fun!

New Example of TSD

  • switch between 10 images using hotspots
  • using network caching to reduce image load times for subsequent loads

I made a video covering how I added hotspots to the 360 images.

New tutorial covering:

  • company logo overlay
  • rotational speed adjustment
  • sensor orientation control

Main code covered by the tutorial.

      body: Stack(children: [
        Center(
          child: Panorama(
            animSpeed: 1.0,
            sensorControl: SensorControl.AbsoluteOrientation,
            child: Image.file(myFile),
          ),
        ),
        SizedBox(
          height: 80,
          width: 80,
          child: Image.network(
              'https://oppkey.com/wp-content/uploads/2022/01/oppkey_logo_300x300.jpg'),
        ),
      ]),