Overview

HUAWEI Panorama Kit provides the service of presenting images as 360-degree panoramic views. You can integrate HUAWEI Panorama Kit into your app through the HMS Core Panorama SDK to easily change a 2D image into a 3D view on an Android phone, delivering an immersive user experience.

What You Will Create

In this codelab, you will use the demo project to view panoramic images by calling the HMS Core Panorama SDK.

What You Will Learn

Hardware Requirements

Software Requirements

The HMS Core Panorama SDK can be directly called by devices, without connecting to AppGallery Connect.

Downloading the Demo Project

Download

Creating a Project

Step 1 Start Android Studio.
Step 2 Go to File > Open and select the path where the demo project is decompressed.

Step 3 Click OK to import the demo project.
Step 4 Check the Maven repository address, build dependencies, permissions, and obfuscation script configurations in the demo project. If any of them does not meet your requirements, change it in your own project.
Configure the Maven repository address in the project-level build.gradle file.

buildscript { repositories { ... maven { url 'http://developer.huawei.com/repo/' } } ... } allprojects { repositories { ... maven { url 'http://developer.huawei.com/repo/' } } } ...

Add build dependencies in the app-level build.gradle file.

dependencies { ... implementation 'com.huawei.hms:panorama:4.0.1.300' ... }

Grant the read and write permissions on external storage devices in the manifest file. (In Android 6.0 or later, you still need to dynamically apply for the permissions.)

... <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> ...

Configure the obfuscation script in the app/proguard-rules.pro file.

-ignorewarnings -keepattributes *Annotation* -keepattributes Exceptions -keepattributes InnerClasses -keepattributes Signature -keepattributes SourceFile,LineNumberTable -keep class com.hianalytics.android.**{*;} -keep class com.huawei.updatesdk.**{*;} -keep class com.huawei.hms.**{*;}

Verification

Tap to run the project you have created in Android Studio to generate an APK. Then install the APK on the test phone. You will see the graphical interface shown in the following figure.

The three buttons represent three call modes. Tap one of them to view panoramas.

Basic Use Cases (Panorama Viewing Outside This App)

Set the URI of your desired image. Example:

final Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.pano2);

To view a ring panorama, specify the panorama type as IMAGE_TYPE_RING through the API.

Panorama.getInstance().loadImageInfoWithPermission(getApplicationContext(), uri, PanoramaInterface.IMAGE_TYPE_RING).setResultCallback(new ResultCallbackImpl());

Advanced Use Cases (Panorama Viewing in This App)

To use more panorama-related services, call the LocalInterface of the HMS Core Panorama SDK. Please refer to LocalInterfaceActivity for specific code.

Step 1 Create a layout.

The Layout presents a panoramic view, with an ImageButton (for changing the control mode: Touch or Sensor) in the lower left corner.

Step 2 Obtain the LocalInterface object.

mLocalInterface = Panorama.getInstance().getLocalInstance(this);

Step 3 Initialize the LocalAPI object and set an image.

mLocalInterface.init(); mLocalInterface.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL);

Step 4 Obtain the view and add it to the new layout.

RelativeLayout layout = findViewById(R.id.relativeLayout); View view = mLocalInterface.getView(); layout.addView(view);

Step 5 Listen on the ImageButton event to change the control mode. In this example, the control mode is changed to Touch.

mImageButton = findViewById(R.id.changeButton); mImageButton.bringToFront(); mImageButton.setOnClickListener(this); @Override public void onClick(View v) { if (v.getId() == R.id.changeButton) { if (mChangeButtonCompass) { mImageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_touch)); mChangeButtonCompass = false; mLocalInterface.setControlMode(PanoramaInterface.CONTROL_TYPE_TOUCH); } else { mImageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_compass)); mChangeButtonCompass = true; mLocalInterface.setControlMode(PanoramaInterface.CONTROL_TYPE_POSE); } } }

Step 6 Send the view touch control event to the HMS Core Panorama SDK.

view.setOnTouchListener(this); @Override public boolean onTouch(View v, MotionEvent event) { if (mLocalInterface != null) { mLocalInterface.updateTouchEvent(event); } return true; }

Step 7 Tap to run the project you have created in Android Studio to generate an APK. Then install the APK on the test phone and tap PanoramaApiExt.LocalApi to check whether the panoramic view is presented as expected.

—-End

You can call the setImage API to set multiple panoramic images, if necessary.

@Override public void onClick(View v) { if (v.getId() == R.id.changeButton) { if (mChangeButtonCompass) { mChangeButtonCompass = false; Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.pano); mLocalInterface.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL); } else { mChangeButtonCompass = true; Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.pano2); mLocalInterface.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL); } } }

Well done. You have successfully completed this codelab and learned:

For more information, please click the following links:
Development Guide

API Reference

FAQs

Code copied