How to Integrate Image Kit's Smart Layout Service - Huawei Developers

Overview
HUAWEI Image Kit's smart layout service currently offers nine different smart layout styles, and two content layout types, which users are free to choose from.
Application Scenarios
When typesetting is performed for a digital magazine, for instance, many elements need to be incorporated onto the page, along with the text. Image Kit's smart layout service enables you to typeset with remarkable ease, and craft vivid designs, to enjoy greatly enhanced efficiency with eye-catching imagery that attracts users.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Development Practice
Now, let's take a look at how to integrate Image Kit's smart layout service.
Preparations
You'll need to add your images and configure related parameters during this process.
1. Import the smart layout service packages.
Code:
import com.huawei.hms.image.vision.bean.ImageLayoutInfo ;
import com.huawei.hms.image.vision.*;
2. Obtain an instance for the smart layout service.
Code:
// Obtain an ImageVisionImpl instance.
ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);
3. Initialize the service, which is the same as that for the filter service. For details, please refer to Development Procedure.
4. Construct parameter objects.
More detail about this, please check https://forums.developer.huawei.com/forumPortal/en/topic/0204411709476790211
For details about authJson parameters, please refer to Description of authJson parameters
Example requestJson parameter configuration:
Code:
{
"requestId":"requestId",
"taskJson":{"title":"Little luxury for the new gen","description":"Away from hustle and bustle","copyRight":"HUAWEIScreenMagazine","isNeedMask":false,"anchor":"More","styleList":["info1"]}, "authJson":{"projectId":"projectIdTest","appId":"appIdTest","authApiKey":"authApiKeyTest","clientSecret":"CSecretTest","clientId":"CIdTest","token":"tokenTest"}
}
5. Obtain the service result.
When calling the smart layout API, you'll need to specify the bitmap of the image to be processed, and select the style and text to be added (parameters). For details, please refer to step 4. The smart layout service requires a network connection. If no network connection is available, the info3 style is returned by default. The layout style is returned through ImageLayoutInfo. The smart layout service draws a view based on the style contained in ImageLayoutInfo. For more detailed operations, please refer to Sample Code. Because network requests are sent over the API, you'll need to call the API in a subthread.
Code:
//Obtain the return result from ImageLayoutInfo.
new Thread(new Runnable() {
@Override
public void run() {
ImageLayoutInfo imageLayoutInfo = imageVisionAPI.analyzeImageLayout(requestJson, imageBitmap);
}
}).start();
6. Stop the service.
If you do not need to use smart layout any longer, call the imageVisionAPI.stop() API to stop the service. If the returned stopCode is 0, it means that the service has been successfully stopped.
Code:
if (null != imageVisionAPI) {
int stopCode = imageVisionAPI.stop();
}
Source Code
To download the source code, please visit GitHub.

Related

Image Kit: Developing the Image Vision Service

Overview
The Image Vision service provides you with 24 color filters, which are easy to use.
Use Cases
An app needs to beautify or retouch images.
Development Procedure
The Image Vision service renders the images you provide and returns them to your app.
1. Import the Image Vision service packages.
Code:
import com.huawei.hms.image.vision.*;
import com.huawei.hms.image.vision.bean.ImageVisionResult;
2. Construct an ImageVision instance. The instance will be used to perform related operations such as obtaining the filter effect.
Code:
// Obtain an ImageVisionImpl instance.
ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);
3 Initialize the service. To call setVisionCallBack during service initialization, your app must implement the ImageVision.VisionCallBack API with its onSuccess(int successCode) and onFailure(int errorCode) methods rewritten. If the ImageVision instance is successfully obtained, the onSuccess method is called and then the Image Vision service is initialized. If the ImageVision instance fails to be obtained, the onFailure method is called and an error code is returned. Your app is allowed to use the Image Vision service only after the successful verification. That is, the value of initCode must be 0, indicating that the initialization is successful.
Code:
imageVisionAPI.setVisionCallBack(new ImageVision.VisionCallBack() {
@Override
public void onSuccess(int successCode) {
int initCode = imageVisionAPI.init(context, authJson);
...
}
@Override
public void onFailure(int errorCode) {
...
}
});
Description of authJson parameters:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
You can find the preceding parameters except token in the agconnect-services.json file.
4. Construct a jsonObject object.
Description of requestJson and imageBitmap parameters:
Description of requestJson parameters:
Description of taskJson parameters:
For details, see the description of authJson parameters in step 3.
filterType mapping:
5. Obtain the rendered image.
When calling the getColorFilter() API, you need to specify the bitmap image to be rendered and select the required filter. In addition, you need to pass the authentication information. Your app can use the service only after it is successfully authenticated. On receiving the request from your app, the filter service parses the image and returns the rendered view to the app.
Note: Call the API in a subthread other than the main thread. If the image cannot be displayed during the test, it is recommended your turn off hardware acceleration.
Code:
//Obtain the rendering result from visionResult.
ImageVisionResult visionResult = imageVisionAPI.getColorFilter(requestJson,imageBitmap);
Description of visionResult parameters:
Description of responseJson parameters:
To turn off hardware acceleration, configure the AndroidManifest.xml file as follows:
Code:
<application
...
android:hardwareAccelerated="false"
...
</application>
6. Stop the Image Vision service.
If you do not need to use filters any longer, call the imageVisionAPI.stop() API to stop the Image Vision service. If the returned stopCode is 0, the service is successfully stopped.
Code:
if (null != imageVisionAPI) {
int stopCode = imageVisionAPI.stop();
}
Hi,
am facing an issue while integrated image vision API
2020-10-08 18:21:49.971 3143-3143/com.huawei.sujith.imageeditor E/ImageVisionImpl: ClassNotFoundException: Didn't find class "com.huawei.hms.image.visionkit.dynamic.FunctionCreator" on path: DexPathList[[zip file "/data/user_de/152/com.huawei.android.hsf/modules/external/huawei_module_imagevision/10003301/com.huawei.hms.image.visionkit-10003301.apk"],nativeLibraryDirectories=[/data/user_de/152/com.huawei.android.hsf/modules/external/huawei_module_imagevision/10003301/com.huawei.hms.image.visionkit-10003301.apk!/lib/arm64-v8a, /system/lib64, /hw_product/lib64, /system/product/lib64]]

How can I quickly return to the home page of an HTML5 quick app?

After the quick app web component is used to pack an HTML5 app into a quick app, the original web page does not provide the function of returning to the home page. In an HTML5 quick app, users want to have an entry for returning to the home page when browsing any HTML5 page.
To implement this requirement, perform the following steps:
1. Define the loadUrl variable under data in the page script. This variable is used to store the URL of the HTML5 web page. In this demo, the Huawei official website is used as the home page entry.
HTML:
export default {
props: ['websrc'],
data: {
title: "",
// TODO Replace the link to the H5 app
loadUrl: "http://www.huawei.com/en",
allowThirdPartyCookies: true,
//Attribute supportzoom, indicates whether the H5 page can be zoomed with gestures.
supportZoom: true,
wideViewport: true,
overViewModeLoad: true,
},
}
2. Modify template code.
Bind the src attribute of web in template to the variable loadUrl defined in step 1.
Listen to the pagestart event of the web component, that is, onpagestart in the code.
Add the entry layout of returning to the home page, which needs product design. This demo uses an image as an example.
The sample code is as follows. Pay attention to the text in red to see the modification points.
HTML:
<template>
<div class="doc-page">
<image src="/Common/main.png" onclick="goMain"></image>
<web class="web-page" src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish"
onmessage="onMessage" ontitlereceive="onTitleReceive" onerror="onError" id="web" supportzoom="{{supportZoom}}"
wideviewport="{{wideViewport}}}" overviewmodeinload="{{overViewModeLoad}}" useragent="{{userAgent}}"
Precautions:
The event callback methods goMain and onPageStart in the preceding code must be defined in the script.
The value of src in the image component must be replaced with the actual image path in the project.
3. Modify the code in the script. The following code needs to be modified:
In the callback method onPageStart of the web component, assign the value of url (indicating the URL of the current page) to loadUrl.
HTML:
onPageStart(e) {
console.info('pagestart: ' + e.url)
this.loadUrl=e.url;
},
l In the goMain method, assign the home page URL to loadUrl.
HTML:
goMain: function () {
console.log("goMain :");
this.loadUrl = "https://www.huawei.com/en";
},
Then, you can click HUAWEI on the screen to go to the Huawei official website.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}

Implementing HUAWEI Out-of-App Purchases Using Deep Links

Background
A developer team wants to integrate HUAWEI Out-of-App Purchases, allowing users to purchase a product on the app details page of a game on HUAWEI AppGallery. To use this mode, they need to deep link a user to the app details page, and pass the ID of the product for purchase..
Official documentation: https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/appgallerykit-devguide-game#h1-1589804284330
Let’s see how they achieved this.
Implementation
1. Activity Configuration in the Manifest File
The team added intent-filters for an activity of their game.
<data android:scheme=”agpms” androidath=”/product/pay” android:host=”com.sxx.huawei”/>
The assembled request URL is agpms://com.sxx.huawei/product/pay.
The official documentation describes the requirements on the link.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Sample code:
2. Code Implementation of Redirection (Opening a Deep Link from Another App)
HUAWEI AppGallery should be used for the testing. However, the team had not released the game on AppGallery, and they failed to find a test environment on the AppGallery side. So they turned to another app.
Java:
Intent intent = new Intent();
intent.setAction("com.google.open02");
intent.addCategory("android.intent.category.DEFAULT");
intent.setData(Uri.parse("agpms://com.sxx.huawei/product/pay?producid=TestProduct503"));
startActivity(intent);
agpms://com.sxx.huawei/product/pay?producid=TestProduct503
Generally, the parameter following a question mark (?) is in the format of key=value&key1=value1.
Sample code:
As shown in the sample code, the only parameter set is producid.
3. Parameter Parsing After Redirection to the Payment Page
If the details page has not been opened before the redirection, the onCreate method of the app activity needs to be called to obtain the intent object for data parsing.
If the details page has already been opened before the redirection, the onNewIntent method of the app activity needs to be called to obtain the intent object for data parsing.
Sample code:
After the team obtains the product ID from the parsed data, the HMS Core SDK displays the payment page.
FAQs
What should I do if I fail to open the payment page after configuring the deep link?
Generally, this problem is caused by the inconsistency between scheme, host, and path in the assembled URL and those in the configuration. You can perform a check by referring to the official documentation.

Quick integration for Image Kit Filter functionality

Introduction
HUAWEI Image Kit provides smart image editing, designing and animating capabilities into your application. It provides Image Vision service for 24 unique colour filters, 9 smart layouts as well as the image theme tagging, text arts, image cropping and many more functionalities. It also provide Image rendering service for five basic animations and nine advance animations capabilities.
It provides two SDKs, Image Vision SDK and Image Render SDK.
Image Vision service APIs to implement functions such as filter, smart layout, sticker, theme tagging and image cropping.
Image Render service APIs to implement basic and advanced animation effects.
Software Requirements
Java JDK 1.8 or later
Android API Level 26 or higher
EMUI 8.1 or later (applicable to the SDK, but not the fallback-SDK)
HMS Core (APK) 4.0.2.300 or later (applicable to the SDK, but not the fallback-SDK)
Functions
Basic Animations
Advanced Animations
Image Editing
Integration Preparations
To integrate HUAWEI Image Kit, you must complete the following preparations:
Register as a developer.
Create an Android Studio project.
Generate a signing certificate fingerprint.
Configure the signing certificate fingerprint on AG Console.
Integration steps
In this article we are going to implement filter service, although Image Vision provides five major functionalities which is most commonly used by image editing application and many more.
First, we need to add the Image Vision SDK dependencies in app build.gradle file.
Code:
dependencies {
...
implementation 'com.huawei.hms:image-vision:1.0.3.301'
implementation 'com.huawei.hms:image-vision-fallback:1.0.3.301'
...
}
Note: Image Kit works only on a device running Android 8.0 or later.
For initializing the service. call setVisionCallBack during service initialization, your app must implement the ImageVision. VisionCallBack API and override its onSuccess(int successCode) and onFailure(int errorCode) methods.
Code:
ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);
imageVisionAPI.setVisionCallBack(new ImageVision.VisionCallBack() {
@Override
public void onSuccess(int successCode) {
int initCode = imageVisionAPI.init(context, authJson);
...
}
@Override
public void onFailure(int errorCode) {
...
}
});
After Initializing the service select the Image from gallery :
Code:
public static void getByAlbum(Activity act) {
Intent getAlbum = new Intent(Intent.ACTION_GET_CONTENT);
String[] mimeTypes = {"image/jpeg", "image/png", "image/webp"};
getAlbum.putExtra(Intent.EXTRA_MIME_TYPES, mimeTypes);
getAlbum.setType("image/*");
getAlbum.addCategory(Intent.CATEGORY_OPENABLE);
act.startActivityForResult(getAlbum, 801);
}
Note: The image size should not be greater than 15 MB, resolution should not be greater than 8000 x 8000 pixel and the aspect should be in between 1:3 to 3:1.
There are 24 different colour filters provided by Filter Service. For each type of filter we have separate respective mapping code. Image Vision will return a bitmap filtered by one of these 24 colour filters.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Make sure that we call the getColorFilter() API in the background thread. For calling the filter API, you need to specify the bitmap of the image to be processed and the filter effect and set the filtered image on imageView.
Code:
//Obtain the rendering result from visionResult.
new Thread(new Runnable() {
@Override
public void run() {
ImageVisionResult visionResult = imageVisionAPI.getColorFilter(requestJson,imageBitmap);
}
}).start();
After getting the filtered result, If you do not want to use filters any longer, call the imageVisionAPI.stop() API to stop the Image Vision service. If the returned stopCode is 0, the service is successfully stopped.
Code:
if (null != imageVisionFilterAPI) {
int stopCode = imageVisionFilterAPI.stop();
}
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0203429680523150041

Integrating AppGallery Connect Crash Service in a Xamarin app for iOS

The Huawei AppGallery Connect Crash service is a free to use crash analytics service which is supported on a wide range of platforms and frameworks.
Today lets take a look at how we can use in in a Xamarin, a hybrid framework and specifically set it up to work on iOS devices. This guide will start with a blank application but of course you can just as easily follow along and integrate into a pre-existing application!
Preparing the Xamarin Environment and Configuring Your Project​You need to install Visual Studio for MAC first, and then select Mobile development with .NET in Visual Studio to install the Xamarin environment.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Create a project in AppGallery Connect and enable HUAWEI Analytics.
Right-click your project and choose Manage NuGet Packages.
Find the Huawei.Agconnect.iOS.Crash package and install it.
Find the Huawei.Agconnect.iOS.AgconnectCore package, select the 1.2.0.300 version, and install it.
Add the plist file from your AppGallery Project to the project directory.
Set Build Action to BundleResource.
Developing Your App​Start by Configure the layout of your app for the testing of the crash service, in this example we will create three buttons to trigger different tests.
Double-click main.storyboard to launch Xcode, and create the MakeCrash, CatchException, and CustomReport buttons
In the MainActivity.cs file, call AGConnectCrash.Instance.TestIt to trigger a crash, call AGConnectCrash.Instance.SetUserId to set a custom user ID, call AGConnectCrash.Instance.SetCustomKey to set the key and value for a custom key-value pair, call AGConnectCrash.Instance.Log to set the log level, and call AGConnectCrash.Instance.RecordException to record a non-fatal exception.
This could look something like:
Code:
using System;
using UIKit;
using Huawei.Agconnect.Crash;
using Foundation;
namespace crashios0512
{
public partial class ViewController : UIViewController
{
public ViewController(IntPtr handle) : base(handle)
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
// You can configure additional functions as required.
}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
// Delete the cached data or images that are no longer used.
}
partial void MakeCrash(UIKit.UIButton sender)
{
AGCCrash.GetSharedInstance().TestIt();
}
partial void CatchException(UIKit.UIButton sender)
{
AGCCrash.GetSharedInstance().RecordError(new Foundation.NSError());
}
partial void CustomReport(UIKit.UIButton sender)
{
AGCCrash.GetSharedInstance().SetUserId("testuser");
AGCCrash.GetSharedInstance().Log("default info level");
AGCCrash.GetSharedInstance().SetCustomValue(new NSString("test"), "this is string value");
AGCCrash.GetSharedInstance().LogWithLevel(AGCCrashLogLevel.Warning, "this is warning log level");
AGCCrash.GetSharedInstance().SetCustomValue(new NSNumber(123), "this is number");
}
}
}
View Crash Report​Tap MakeCrash, CatchException, and CustomReport in sequence, and check the report in AppGallery Connect.
View the crash statistics.
Check the exceptions
Diagnose the causes of exceptions.
Check the custom key-value pairs.
View the custom log levels
View custom user IDs.
For details, please refer to:
Crash for iOS
Codelab of Crash for iOS
Will it works on offline?
will its benefit for us or not? Epoxy Flooring Atlanta

Categories

Resources