CTPanoramaView is a library that displays complete spherical or cylindrical panoramas with touch or motion based controls.
- iOS 8.0+
- Xcode 8.0+
- Swift 3.0+
CTPanoramaView can be used both from Objective-C and Swift code.
To install CTPanoramaView using Carthage, add the folowing line into your Cartfile:
github "CTPanoramaView/CTPanoramaView" ~> 1.0
Then run the
carthage update command to build the framework and drag the built
CTPanoramaView.framework into your XCode project.
To install CTPanoramaView using CocoaPods, add the following line into your Podfile:
pod "CTPanoramaView", "~> 1.0"
Then run the
pod install command and use the created workspace to open your project from now on.
Just add the file
CTPieSliceView.swift if you want to use it as the compass view) to your project.
Running the Example project
The example project is located in the Example directory. The framework target is already added as a dependency to it therefore you can run it directly.
Create an instance of
CTPanoramaView either in code or using a Storyboard/Nib.
Then load a panoramic image and set it as the image of the CTPanoramaView instance:
// Create an instance of CTPanoramaView called "panoramaView" somewhere // ... let image = UIImage(named: "panoramicImage.png") panaromaView.image = image
CTPanoramaView supports two types of panoramic images:
- Spherical panoramas (also called 360 photos)
- Cylindrical panoramas
All panoramas should be full. Partial panoramas (panoramas with a field of view of less than 360º) are not supported. For a spherical panorama, the image should use equirectangular projection. Cubic format is not supported.
CTPanoramaView will automatically determine whether the given image is a spherical or cylindircal panorama by looking at the aspect ratio of the image. If it is 2:1, then it will assume a spherical panorama. If you want to override this default value, change the value of the
panoramaType property after the image is set.
panaromaView.panoramaType = .spherical // or .cylindrical
CTPanoramaView allows the user to navigate the panorama two different ways. To change the control method, use the
panaromaView.controlMethod = .touch // Touch based control panaromaView.controlMethod = .motion // Accelerometer & gyroscope based control
The default control method is touch based control. You can change the control method on the fly, while the panorama is being displayed on the screen. The visible section will get automatically reset during a control method change.
All orientations are supported. Orientation changes are automatically handled. Therefore you don't have to worry about things getting messed up after an orientation change.
If you want to display a compass that shows the users current field of view, use the
compass property. When you set this property to a custom
UIView subclass conforming to the
CTPanoramaCompass protocol, the view will automatically supplied with rotation and field of view angles whenever one of them changes.
// compassView is a custom view that conforms to the `CTPanoramaCompass` protocol. panaromaView.compass = compassView
The protocol contains only a single method, which is
rotationAngle is the amount of rotation around the vertical axis, and
fieldOfViewAngle is the horizontal FoV angle of the camera. Both values are in radians.
You can see an example implementation of a compass in the supplied
CTPieSliceView class. Add it into your view hierarchy somewhere above your
CTPanoramaView instance, and then set it as its compass. You'll see that it correctly shows the current FoV accurately. Here's how
CTPieSliceView looks in its default configuration:
CTPieSliceView has several customizable properties such as
bgColor, all of which can also be modified from the interface builder thanks to its live-rendering support.
There is also a convenience property named
overlayView that can be used to add a custom view that covers the entire panorama view on top. When using touch based controls, it's up to you to make sure that the overlay view does not "consume" the touches it receives so that the
CTPanoramaView instance can receive the touch events properly.