AUTEL iOS UX SDK User Manual

1. Introduction

To speed up application development, AUTEL UX SDK provides the following commonly used core functionalities:

• Showing the image transmitted by the camera in real time
• Showing the real-time position and flight paths of the aircraft on the map
• Providing camera shooting, video recording, parameter setting, and albums
• Showing the flight status information, including the aircraft altitude, speed, battery level, and signal strength
• Allowing developers to view and change aircraft settings
• Having basic functionalities such as automatic takeoff, landing, and return to home.

Having basic functionalities such as automatic takeoff, landing, and return to home.UTEL UX SDK provides UI elements that have the above functionalities. By using the default AUTEL UX SDK components, developers can quickly create an application that looks like the below without adding additional lines of code:

2. Concepts Overview

The UI elements provided by the AUTEL UX SDK are categorized into the following types:

• Component: An independent UI element that shows status information or offers simple control (for example, a battery level indicator or an automatic takeoff button).
• Component set: An organized collection of components that are related to each other (for example, the flight status bar).
• Panel: A complex menu and settings view with rich UI elements (for example, the camera settings panel).
• Page: A complete UI functional module (such as the image transmission page or map page).

All UI elements can simply be implemented in an application without extra maintenance. They are already bound to the AUTEL Mobile SDK, and will start updating themselves after being instantiated.

3. AUTEL Mobile SDK User Manual

AUTEL UX SDK is built on top of AUTEL Mobile SDK. Before using AUTEL UX SDK, familiarize yourself with how to access and use AUTEL Mobile SDK. For specific usage guidelines, see Mobile SDK Overview and AUTEL iOS Mobile SDK Development Workflow

4. AUTEL UX SDK Dependency

• Mobile SDK provides APIs to access various functional modules of the drone.
• AutelUXFramework is the basic function library encapsulated by Autel, providing some tool classes, basic controls, basic components such as map components, etc.

4.1 Import Mobile SDK

Import the AUTEL Mobile SDK, including the following three frameworks: AUTELSDK.xcframework, AUTELWidget.xcframework, and DDSimpleNetLogger.xcframework.

ow to import the AUTEL UX SDK:TARGETS -> Build Phases -> Click + on the upper left corner -> New Copy Files Phase, and then under Embed Frameworks, set Destination to Frameworks.

4.2 Import AutelFramework

Import AutelFramework by referring to the instructions on how to import the AUTEL UX SDK: TARGETS -> General -> Under Frameworks, Libraries, and Embedded content, import AutelUXFramework.framework.

Note: For AutelUXFramework.framework, select Do Not Embed

5. Functional Modules of AUTEL UX SDK

The AUTEL UX SDK includes the following functional modules:

• Real-time transmitted image display page
• Map display page
• Component collection of flight parameter status bar
• Camera control panel
• Camera parameter settings panel
• Attitude indicator display component
• One-touch takeoff/one-touch landing component
• Flight parameter settings page
• Gimbal angle adjustment component
• Zoom adjustment component
• Album preview page

5.1 Real-time Transmitted Image Display Page

5.1.1 Functionality

This module allows you to obtain and play real-time video images captured with an aircraft camera.

5.1.2 Key Classes

VideoOpenGLView

Video rendering view class

VideoStreamPlayManager

Real-time video stream player management class (single instance)

5.1.3 Usage

Add the video rendering page and create the page layout.

lazy var videoPlayView : VideoOpenGLView = {
    let view = VideoOpenGLView.init()
    return view
}()

view.addSubview(videoPlayView)
videoPlayView.snp.makeConstraints { (make) in
    make.edges.equalToSuperview()
}

Start video rendering.

VideoStreamPlayManager.sharedInstance().setPlayView(to: videoPlayView)

Stop video rendering.

VideoStreamPlayManager.sharedInstance().stopPlayAndRemoveView()

Implement the callback in the API that monitors the changes of the real-time video stream resolution and aspect ratio.

VideoStreamPlayManager.sharedInstance().ratioHandle = { [weak self] ratio in
    GCDUtils.main {
        self?.updatePlayerView(ratio)
    }
}

Obtain the real-time video stream resolution parameter.

let size = VideoStreamPlayManager.sharedInstance().renderAspectRatio

Enable the overexposure prompt feature.

VideoStreamPlayManager.sharedInstance().showOverExpose = true /// Enable or disable the overexposure prompt feature. It is disabled by default.

Obtain the video image rendering type parameter.

When the ratio of the image width to the image height is 16:9, set renderType to scaleAspectFill. Otherwise, set renderType to scaleAspectFit.

let renderType = VideoStreamPlayManager.sharedInstance().renderType

For more usage of VideoStreamPlayManager and VideoOpenGLView, see ATConsoleViewController and BaseVideoViewController classes.

5.2 Map Display Page

5.2.1 Functionality

The map page offers street maps, GPS coordinates, and hybrid maps. It allows you to lock directions, locate your current position, and let the aircraft go home. You can also choose whether to show No Fly Zones and view the real-time position and flight paths of the aircraft on the map.

5.2.2 Key Classes

ATBaseMapViewController 

Map view controller class

ATMapManager 

Map management class

ATMapDrawManager 

Map drawing management class

ATNoFlyZoneManager 
ATNoFlyZoneViewModel 

Data management class and data model class of No Fly Zones

AutelLocationDelegate
    
    /** Implement the callback when the location permission is changed */
    func locationManager(didChangeAuthorization status: CLAuthorizationStatus)
    
    /**  Implement the callback when the location is updated */
    func locationManager(didUpdateLocations locations: [CLLocation])
   
    /** Implement the callback when the heading is changed */
    func locationManager(didUpdateHeading newHeading: CLHeading)
    
    /** Implement the callback when the location error message is received */
    func locationManager(didFinishDeferredUpdatesWithError error: Error?)
    
    /** Check whether the location is successfully obtained */
    func locationManager(didFailWithError error: Error)

Map positioning proxy callback interface, including: positioning permission change callback, positioning update callback, map orientation change callback, positioning error information callback, and detecting whether the positioning callback is obtained.

5.2.3Frequently Used Map Components and Functional APIs

This section describes the frequently used map components and functional APIs, including the following:

Component for switching map types

  ATMapSettingView.mapTypesView

Component for showing or hiding aircraft trails and flight paths

  ATMapSettingView.mapTypesView
  API: ATMapManager.manager.setting.isShowFlightRoute

API for updating the aircraft position and home point in real time

  ATMapDrawManager
  func updateHomeLocation(_ coordnidate: CLLocationCoordinate2D)
  func updateDroneLocation(_ coordinate: CLLocationCoordinate2D)

API for locating your position and the aircraft position

  func mapLocateAround(_ type:ATMapLocateAroundType)

Component for displaying No Fly Zones and Restricted Altitude Zones

  ATMapDrawManager.limitUpdateNoFlyZone

Component for displaying No Fly Zones and Restricted Altitude Zones

mapManager.headingUpdateObservable

5.2.4 ATMapManager

ATMapManager is the map management class that manages all functionalities of the current map object. All the object functionalities can be shown on the ATBaseMapViewController.

ATMapManager enables you to configure the location permission, update the position, and change the aircraft heading.

ATMapManager manages the map locations on your phone and displays the aircraft positions.

ATMapManager has a built-in function for requesting and displaying No Fly Zones.

  ATMapDrawManager.limitUpdateNoFlyZone

5.3 Component Collection of Flight Parameter Status Bar

5.3.1 Functionality

The flight parameter status bar displays the obtained and updated flight status information, including the flight status, flight speed, altitude, and the current battery level.

5.3.2 Key Classes

ATFlyNavigationView

Description:

Displays the mode status, device status, and hardware information including the GPS signal strength, image transmission signal strength, battery percentage, remaining flight time, and visual obstacle avoidance component.

ATFlyInfoView

Description:

Displays the horizontal and vertical flight speed, flight distance, and flight altitude.

5.4 Camera Control Panel and Parameter Settings Panel

The two modules enable you to use camera shooting, video recording, and parameter setting functions.

5.4.1 Camera Control Panel

5.4.1.1 Functionality

• Support switching between the photo-taking and video-recording modes
• Support taking photos
• Support video recording
• Provide an entry for previewing the album

 ATConsoleRightControlView

Camera mode switching panel. The demo provides two modes (photo-taking and video-recording) for you to switch.

5.4.2 Camera Parameter Settings Panel

5.4.2.1 Functionality

• Support setting photo-taking parameters: photo-taking mode, photo format, photo resolution, and white balance

• Support setting video-recording parameters: video resolution, frame rate, video format, and video encoding

  ATCamaraSettingViewController

CameraMenuBranch lists the specific camera parameter menus that you can configure. If you want to use other cameras, refer to this enumeration.

enum CameraMenuBranch {
  case photoFormat = "PhotoFormat"
  case videoFormat = "VideoFormat"
  .......
}

The panels for configuring photo-taking and video recording in the demo are ATPhotoModeSettingView and ATVideoModeSettingView classes.

The directories where the two classes are located are shown below.


5.4.2.2 Key Classes

The key classes used for configuring camera parameters are listed below:

ATPhotoModeSettingView 

Panel for configuring the photo-taking mode

ATVideoModeSettingView  

Panel for configuring the video recording mode

CameraParametersSetter 

API class for setting camera parameters

CameraParametersGetter 

API class for obtaining camera parameters

CameraMenuItem 

Camera menu class

CameraMenuItemPicker 

Class for obtaining camera menu and submenu items

CameraSelection 

Camera parameter caching class

5.4.2.3 Class Relationships

ATPhotoModeSettingView、ATVideoModeSettingView enable you to use camera APIs to obtain and set camera parameters.

CameraParametersSetter、CameraParametersGetter are classes formed by encapsulating the APIs used for setting and obtaining camera parameters. They can save camera parameters through CameraSelection while obtaining and setting them.

CameraMenuItem is an abstraction of camera parameter settings. It associates camera menu items with submenu items through a chain.

CameraMenuItemPicker is a class for assisting the management of camera menus. You can use this class to obtain the submenus of camera menus.

5.5 Attitude Indicator Display Component

5.5.1 Functionality

The attitude indicator shows the aircraft position, home position, my position, speed, altitude, and distance.

5.5.2 Key Classes

AircraftAttitudeBallView

Description:

The attitude indicator shows the relative direction and position of the aircraft, home point, and remote controller. The central point is the home point, N points true north, and the heading of your phone serves as a reference.

The gray part in the middle of the attitude indicator shows how your aircraft is tilted currently, and the tilt angle is the current tilt angle of the aircraft. If the horizontal line of the gray part is level, the aircraft is not tilted. The attitude indicator represents a distance of 0 - 500m. If the aircraft is 500m away, it will stay on the boundary of the indicator.

5.6 One-touch Takeoff/One-touch Landing Component

5.6.1 Functionality

The one-touch takeoff/one-touch landing component enables you to take off or land an aircraft.

5.6.2 Key Classes

ATTakeOffLandingView

Description:

Class for controlling the takeoff and landing of an aircraft.

5.7 Aircraft Flight Status Page

5.7.1 Functionality

The flight status page enables you to monitor the aircraft connection status, flight mode, visual status, remote controller status, battery status, battery temperature, gimbal status, SD card status, and flash memory status in real time. It also processes and displays the monitored data.

5.7.2 Key Classes

AircraftStatusViewController

Flight status view controller class, which monitors the flight status data reported by the SDK, including the data related to the remote controller, visual component, camera, gimbal, and battery, and displays the current aircraft status in real time.

AircraftStatusParameters

Flight status parameter model class, which converts the flight status reported by the SDK into data models that can be displayed on a page.

5.8 Gimbal Angel Adjustment Component

5.8.1 Functionality

Long press the image transmission page to display the gimbal angle adjustment component. By dragging the component up and down, you can pitch the gimbal upwards and downwards and adjust the pitch angle.

5.8.2 Key Classes

ATConsoleGimbalSpeedView

Gimbal angle adjustment component. You can only adjust the pitch angle, not the roll angle.

5.9 Zoom Adjustment Component

5.9.1 Functionality

Long press this button to display the thumb view. Reset the zoom level by pressing this button lightly.

5.9.2 Key Classes

ATCameraZoomView

Description:

Zoom adjustment class, which enables you to adjust the current zoom to x-times zoom (1 to 8-times zoom).

5.10 Album Preview Page

5.10.1 Functionality

You can view and download photos and videos on the album preview page. The page offers the following functions: preview, play, download, and delete album files or view local videos and photos in your phone album.

Local album: system album of your mobile phone

ATAlbumViewController

5.10.2 Key Classes

ATMediaDataManager

Image and video management class (single instance)

ATMediaDownloader

File downloading management class

5.10.3 API Usage

Set the storage type

Set ATAlbumStoreType to sdCard. Then the operations, such as retrieving the album list, downloading, and deleting will be performed on files stored in the SD card. Similarly, if you set ATAlbumStoreType to lash or local, the operations will be performed on files stored in the flash memory or system album of your phone.

func switchDidChange(index: Int) {
    guard let type = ATAlbumStoreType(rawValue: index) else {
        return
    }
    ATMediaDataManager.shared.storeType = type
    collectionView.mj_header?.beginRefreshing()
}

Obtain the default storage type

func setupSwitchView() {
    let defautIndex = ATMediaDataManager.shared.defaultType.rawValue
    switchView.setTitleArray(titleArray: ["ATAlbumSDCard".fLocal("ATAlbum"),
                                          "ATAlbumAirborneFlashMemory".fLocal("ATAlbum"),
                                          "ATAlbumLocal".fLocal("ATAlbum")], selectIndex: defautIndex)
    switchView.delegate?.switchDidChange(index: defautIndex)
}

Obtain the thumbnail picture of your first album file

 ATMediaDataManager.shared.getFirstThumbImage(completion: {[weak self] (image) in
    if image != nil {
        /// The thumbnail picture is obtained successfully
    }
})

Obtain the album file list

File type: All, photo, video

Page: the page on which the album files you want to obtain are located

Number of files on a single page: the maximum number is 50

ATMediaDataManager.shared.getFileList(with: .all, offset: pageIndex == 0 ? 0 : allMediaItems.count, count: pageCount) {[weak self] (result) in
    switch result{
    case let .success(medias):
        self.configMediaItems(medias)
    case let .failure(error):
        self.configMediaItems([])
    }
}

Download a single album file

resoType: sharpness. Values include low, high, and original

ATMediaDataManager.shared.startDownload(media: media, resoType: .original) { result in   }

Download a group of album files

ATMediaDataManager.shared.downloadOriginal(medias: medias) /// medias Returned by get album list request

Download the video and then cache it before you play it.

ATMediaDataManager.shared.fetchPlayerItem(media: media) {(result) in
    GCDUtils.main {
        switch result{
        case let .success(item):
            playerView.setPlayerItem(item)
            playerView.player?.uniqueID = media.uniqueID
            playerView.player?.play()
        case let .failure(error):
            ToastManager.shared.show(title: error.localizedDescription)
        }
    }
}

Cancel downloading

ATMediaDataManager.shared.cancelDownload()

Cancel all downloading tasks

Remove all tasks from the download queue and cancel the download

ATMediaDataManager.shared.cancelAllDownload()

Delete a group of album files

ATMediaDataManager.shared.delete(medias: medias, progress: progressHandler) { result in
    GCDUtils.main {
        completionHandler?()
        switch result{
        case let .success(medias):
            self.removeItems(medias: medias)
            self.showSuccessAlert()
        case .failure(_):
            self.showFailedAlert()
        }
    }
}

Cancel deletion

ATMediaDataManager.shared.cancelDelete()

Obtain the path of the local album thumbnail picture

let path = ATMediaDataManager.shared.fetchThumbImagePath(media: media)

Obtain the path of the original file in the local album

let path = ATMediaDataManager.shared.fetchOriginalImagePath(media: media)

Use the callback API for obtaining the download progress, speed, and task completion information

let downloader = ATMediaDataManager.shared.downloader
downloader.progressHandler = {[weak progressView, weak pop] count,progress in
    GCDUtils.main {
        progressView?.update(progress)
        countTitle = String(format: "ATAlbumDownloading".fLocal("ATAlbum"), count + 1,mediasCount)
        pop?.viewModel.title = countTitle + speedTitle
        pop?.update()
    }
}
downloader.speedHandler = {[weak pop] speed in
    GCDUtils.main {
        speedTitle = ": " + speed + "\n\n" + "ATAlbumDownloadSpeedLow".fLocal("ATAlbum")
        pop?.viewModel.title = countTitle + speedTitle
        pop?.update()
    }
}
downloader.completionHandler = { [weak self,weak pop] error in
    GCDUtils.main {
        pop?.hide(animiated: true)
        if error != nil{
            self?.showSuccessAlert(false)
        }else{
            self?.showFailedAlert(false)
        }
    }
}

5.11 Aircraft Parameter Settings Page

5.11.1 Functionality

This module displays commonly used parameter settings of the aircraft, including:

• Support setting flight control parameters
• Support adjusting the altitude limit of the aircraft
• Support adjusting the distance limit of the aircraft
• Support adjusting the altitude for returning to home
• Support enabling or disabling obstacle avoidance
• Support setting battery parameters
• Support setting parameters about the gimbal and remote controller

upport gimbal and remote control parameter setting

• Support switching the gimbal mode
• Support configuring the heading of the gimbal
• Support enabling and disabling the upward gimbal rotation feature
• Support switching the remote sensing mode of the remote controller

Support setting common camera parameters

• Support enabling or disabling the histogram feature
• Support enabling or disabling the overexposure prompt feature
• Support enabling or disabling the defogging feature
• Support obtaining or formatting the storage information

Support setting image transmission parameters

• Support configuring the sharpness for image transmission
• Support configuring the frequency bands for image transmission

Support displaying aircraft version information

1. Support displaying the serial number of each module
2. Support displaying the firmware version of each module

The directories where the key classes are located in the demo project are shown below:

5.11.2 Key Classes

ATSettingsMainViewController

Class of the aircraft parameter settings main page

ATSettingsSafeViewController

Class of the flight controller settings page

ATSettingsControlViewController

Class of the gimbal/remote controller parameter settings page

ATSettingsDSPViewController

Class of the image transmission parameter settings page

ATSettingsShootingViewController

Class of the common camera parameter settings page

ATSettingsAboutViewController

Class of the firmware version display page