We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Only Essential Cookies
Accept All

Documents from this version have been archived, and will not continue to be maintained. Please use the latest version.

HMS Core GuidesPanorama KitApp DevelopmentClient DevelopmentPanorama Presented in an App

Panorama Presented in an App

1. Invoking Mode

Panoramas can be presented inside or outside an app.

  • Panorama presented outside an app: The app obtains an intent by calling the API of the HMS Core Panorama SDK and redirects to Activity in HUAWEI Panorama Kit to present panoramas. In this mode, HUAWEI Panorama Kit uses the loadImageInfo or loadImageInfoWithPermission API to create a window outside the app.

  • Panorama presented inside an app: The app presents panoramas in its own process by calling getLocalInstance and PanoramaLocalInterface of the HMS Core Panorama SDK. In this mode, HUAWEI Panorama Kit returns a panoramic layer, and the app determines the position to display the layer and whether to superimpose other information (such as ads) on the layer.

You can present a panorama in your app as a view control, so that you can quickly switch between panoramas and change the control mode. The procedure is as follows:

Step 1: Create a local object

PanoramaLocalInterface getLocalInstance(Context context);

ParameterDescription
context

APP context. 

To actively trigger an upgrade, pass an Activity object.

Example:

  1. PanoramaInterface.PanoramaLocalInterface mLocalInstance = Panorama.getInstance().getLocalInstance(this);

Step 2: Initialize the local object

int init();

Example:

  1. if (mLocalInstance.init() != 0) {
  2.   //do something
  3.   return;
  4. }

This API initializes the resources required by the HMS Core Panorama SDK. Subsequent APIs can be correctly called only if the initialization is successful.

Step 3: Set a panoramic image and specify the type

Panoramic image displayed:

int setImage(Uri uri, int type);

Parameter nameDescription
uri

URI of the panorama to be loaded.   

Currently, only URIs starting with file,   content, or android.resource are supported.

type

Image type. 

Currently, spherical(IMAGE_TYPE_SPHERICAL) and cylindrical(IMAGE_TYPE_RING) panoramas are supported.

Example:

  1. if (mLocalInstance.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL) != 0) {
  2.    //do something
  3.    return;
  4. }

Panoramic video displayed:

Surface getSurface(int type);

Expand

Parameter

Description

type

Type of images decoded from video.

Example:

  1. Surface videoSurface = mLocalInstance.getSurface(PanoramaInterface.IMAGE_TYPE_RING);

After obtaining the surface, set it in MediaPlayer.

Example:

  1. Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.pano);
  2. mPlayer = new MediaPlayer();
  3. try {
  4.    mPlayer.setDataSource(getApplicationContext(), uri);
  5. } catch (IOException e) {
  6.    e.printStackTrace();
  7.    return;
  8. }
  9. mPlayer.setLooping(true);
  10. mPlayer.setSurface(videoSurface);
Note:

If the panoramic video is displayed in a cylindrical manner, set its aspect ratio.

A complete set of sample code is provided in Example.

(Optional) Set the video's aspect ratio.

int setValue(String name, String value);

Expand

Parameter

Description

name

Name of the attribute to be set.

value

Value of the attribute to be set.

Example:

  1. mLocalInstance.setValue(PanoramaInterface.KEY_VIDEO_RATIO, String.valueOf(mPlayer.getVideoWidth() / mPlayer.getVideoHeight()));
Note:

To set the aspect ratio of a panoramic video, it is recommended that you use getVideoWidth() and getVideoHeight() to obtain its width and height after mediaplayer.Prepare is called in MediaPlayer.

(Optional)Step 4 : Set an attribute to display panoramas in polar coordinates

int setValue(String name, String value);

ParameterDescription
name

Name of the attribute to be set.

value

Value of the attribute to be set.

Example:

  1. int ret = mLocalInstance .setValue(PanoramaInterface.KEY_RENDER_MODE, PanoramaInterface.VALUE_RENDER_MODE_POLAR);
  2. if (ret != ResultCode.SUCCEED) {
  3.    //error process
  4. }
Note:
You must set the panorama URI before setting polar coordinates. Otherwise, the polar coordinates do not take effect.

Step 5: Set the control mode

void setControlMode(int mode);

ParameterDescription
mode

Mode in which the panorama is controlled.

Currently, three modes are available: motion control, touch control, or both.

updateTouchEvent must be called for touch control.

Example:

  1. mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_POSE); // CONTROL_TYPE_TOUCH or CONTROL_TYPE_MIX

Notes:

You can call this API to change the control mode as needed.

Step 6: Obtain the view object

View getView();

Example:

  1. View view = mLocalInstance.getView();
  2. // Directly present the panorama.
  3. setContentView(view);

You can add the obtained view to your layout as needed.

Step 7: Update the touch event in real time

void updateTouchEvent(MotionEvent event);

ParameterDescription
eventAndroid touch event

Example: 

  1. View view = mLocalInstance.getView();
  2. view.setOnTouchListener(new View.OnTouchListener() {
  3.    @Override
  4.    public boolean onTouch(View v, MotionEvent event) {
  5.        if (mLocalInstance != null) {
  6.            mLocalInstance.updateTouchEvent(event);
  7.        }
  8.        return true;
  9.    }
  10. });

Note:
  • The updateTouchEvent API is available only in touch control mode.
  • The touch point coordinates are calculated by taking the upper left corner of the panorama view control as the origin (0, 0).
  • You canjust take care of the touch events required by the upper-layer app and pass other events to the SDK for processing.However, you must ensure that these touch events are correct and comply with the touch rules.

Step 8: Deinitialize the local object

void deInit();

Example:

  1. mLocalInstance.deInit();

If the service of presenting panoramas in an app is no longer needed, call this API to release resources. Otherwise, resource leak may occur.

2. Example

Panoramic image displayed:

  1. public class LocalDisplayActivity extends AppCompatActivity implements View.OnClickListener, View.OnTouchListener {
  2.    private static final String LOG_TAG = "PanoramaKitDemo";
  3.    private PanoramaInterface.PanoramaLocalInterface mLocalInstance;
  4.    private ImageButton mImageButton;
  5.    private boolean mChangeButtonCompass = false;
  6.    @Override
  7.    protected void onCreate(Bundle savedInstanceState) {
  8.        super.onCreate(savedInstanceState);
  9.        setContentView(R.layout.display_err);
  10.        final Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.panoramaPic);
  11.        // get PanoramaLocalInterface instance
  12.        mLocalInstance = Panorama.getInstance().getLocalInstance(this);
  13.        // Judge whether init and setimage are successful
  14.        if (mLocalInstance.init() == 0 && mLocalInstance.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL) == 0) {
  15.            // getview and add to layout
  16.            RelativeLayout layout = findViewById(R.id.relativeLayout);
  17.            View view = mLocalInstance.getView();
  18.            layout.addView(view);
  19.            // update MotionEvent to sdk
  20.            view.setOnTouchListener(this);
  21.            // change control mode
  22.            mImageButton = findViewById(R.id.changeButton);
  23.            mImageButton.bringToFront();
  24.            mImageButton.setOnClickListener(this);
  25.        } else {
  26.            Log.e(LOG_TAG, "local api error");
  27.            Toast.makeText(this, "Local init error!", Toast.LENGTH_LONG).show();
  28.        }
  29.    }
  30.    @Override
  31.    public void onClick(View v) {
  32.        if (v.getId() == R.id.changeButton) {
  33.            if (mChangeButtonCompass) {
  34.                mImageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_touch));
  35.                mChangeButtonCompass = false;
  36.                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_TOUCH);
  37.            } else {
  38.                mImageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_compass));
  39.                mChangeButtonCompass = true;
  40.                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_POSE);
  41.            }
  42.        }
  43.    }
  44.    @Override
  45.    public boolean onTouch(View v, MotionEvent event) {
  46.        if (mLocalInstance!= null) {
  47.            mLocalInstance.updateTouchEvent(event);
  48.        }
  49.        return true;
  50.    }
  51.    @Override
  52.    protected void onDestroy() {
  53.        if (mLocalInstance != null) {
  54.            mLocalInstance.deInit();
  55.        }
  56.        super.onDestroy();
  57.    }
  58. }

Panoramic video displayed:

  1. public class LocalDisplayActivity extends AppCompatActivity implements View.OnClickListener, View.OnTouchListener {
  2.    private static final String LOG_TAG = "PanoramaKitDemo";
  3.    private PanoramaInterface.PanoramaLocalInterface mLocalInstance;
  4.    private ImageButton mImageButton;
  5.    private boolean mChangeButtonCompass = false;
  6.    private MediaPlayer mPlayer;
  7.    @Override
  8.    protected void onCreate(Bundle savedInstanceState) {
  9.        super.onCreate(savedInstanceState);
  10.        setContentView(R.layout.display_layout);
  11.        final Uri uri =  Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.video);
  12.        // Obtain the PanoramaLocalInterface object.
  13.        mLocalInstance = Panorama.getInstance().getLocalInstance(this);
  14.        // Check whether the initialization and image settings are successful.
  15.        if (mLocalInstance.init() == 0) {
  16.            Surface videoSurface = mLocalInstance.getSurface(PanoramaInterface.IMAGE_TYPE_SPHERICAL);
  17.            if (videoSurface == null) {
  18.                Log.e(LOG_TAG, "videoSurface is null");
  19.                return;
  20.            }
  21.            mPlayer = new MediaPlayer();
  22.            try {
  23.                mPlayer.setDataSource(getApplicationContext(), uri);
  24.            } catch (IOException e) {
  25.                e.printStackTrace();
  26.                return;
  27.            }
  28.            mPlayer.setLooping(true);
  29.            mPlayer.setSurface(videoSurface);
  30.            try {
  31.                mPlayer.prepare();
  32.            } catch(IOException e) {
  33.                Log.e(LOG_TAG, "Media Player prepare exception");
  34.            }
  35.            mPlayer.start();
  36.            // Obtain the view and add it to the layout.
  37.            RelativeLayout layout = findViewById(R.id.relativeLayout);
  38.            View view = mLocalInstance.getView();
  39.            layout.addView(view);
  40.            // Update the touch event to the SDK.
  41.            view.setOnTouchListener(this);
  42.            // Change the control mode.
  43.            mImageButton = findViewById(R.id.changeButton);
  44.            mImageButton.bringToFront();
  45.            mImageButton.setOnClickListener(this);
  46.        } else {
  47.            Log.e(LOG_TAG, "local api error");
  48.            Toast.makeText(this, "Local init error!", Toast.LENGTH_LONG).show();
  49.        }
  50.    }
  51.    @Override
  52.    public void onClick(View v) {
  53.        if (v.getId() == R.id.changeButton) {
  54.            if (mChangeButtonCompass) {
  55.                mImageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_touch));
  56.                mChangeButtonCompass = false;
  57.                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_TOUCH);
  58.            } else {
  59.                mImageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_compass));
  60.                mChangeButtonCompass = true;
  61.                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_POSE);
  62.            }
  63.        }
  64.    }
  65.    @Override
  66.    public boolean onTouch(View v, MotionEvent event) {
  67.        if (mLocalInstance!= null) {
  68.            mLocalInstance.updateTouchEvent(event);
  69.        }
  70.        return true;
  71.    }
  72.    @Override
  73.    protected void onDestroy() {
  74.        Log.d(LOG_TAG, "onDestroy");
  75.        if (mLocalInstance != null) {
  76.            mLocalInstance.deInit();
  77.        }
  78.        super.onDestroy();
  79.    }
  80. }


This page may contain third-party content. For details, click here.