Release note: https://github.com/pixlee/android-sdk/releases/tag/2.2.0

Updates to PXLPhotoProductView

• If showHotspots = true is passed from the app-side to PXLPhotoProductView, SDK draws hotspots on PXLPhotoProductView similar to lightbox
• Tapping a hotspot scrolls the product list UI and navigate to the right product.
• Tapping the content hide and show all hotspots.
• always read original url to get content's width and height for calculating the positions of hotspots on the screen because bounding_box_products's x, y, with, height are generated based on the original content's width height from Control Panel.

Example

[DEMO] A new example to the demo app

• how to access the example: Launch the app > main screen > tap Hotspots in PXLPhotoProductView button

[DATA] Added a new field to PXLPhoto

• boundingBoxProducts contains hotspots' positions on the content

#!java
public class PXLPhoto implements Parcelable {
...
    public List<PXLBoundingBoxProduct> boundingBoxProducts;
...
}

public class PXLBoundingBoxProduct implements Parcelable {
    @Json(name = "product_id")
    public String productId;

    @Json(name = "x")
    @NullableInt
    public int x;

    @Json(name = "y")
    @NullableInt
    public int y;

    @Json(name = "width")
    @NullableInt
    public int width;

    @Json(name = "height")
    @NullableInt
    public int height;

    @Json(name = "aspect_ratio")
    @NullableDouble
    public double aspectRatio;
...
}

[UI] Added a new option to PXLPhotoProductView to display hotspots

• showHotspots: pxlPhotoProductView.setContent(..) is added to PXLPhotoProductView
  - true: display hotspots. tapping on the content show/hide hotspots.
  - false: don't display hotspots.

• note that hotspots are only visible on Image. it's not available on video.

• Code Example

  • To display hotspots, you need to set showHotspots = true. Please see the example codes below.
  Kotlin

  #!kotlin
  pxlPhotoProductView
            .setContent(..
                showHotspots = true,
                ....)
  

Please note that below can happen

Some hotspots are located outside of the screen. This's not a bug. It's from the different screen ratios of mobile devices and the display options which are ImageScaleType's [FIT_CENTER, CENTER_CROP].

What does ImageScaleType do?

• FIT_CENTER displays all areas of the image keeping the ratio of the content and fill the rest of the screen with a blurry image.
• CENTER_CROP also keeps the ratio of the content. It fills the screen and crops the rest of the areas.
  Situation 1. FIT_CENTER: displays hotspots in most cases. but it cannot display hotspots that are located outside of the screen area.
  Situation 2. CENTER_CROP: hotspots are located outside of the screen because the areas of the image where certain hotspots are supposed to be located are cropped.

Here's the example

Example 1: Best case

Control Panel

.FIT_CENTER	.CENTER_CROP

Example 2: in CENTER_CROP, one hotspot is off the screen.

Control Panel

.FIT_CENTER	.CENTER_CROP

Example 3: in CENTER_CROP, one hotspot is located under the product list UI.

Control Panel

.FIT_CENTER	.CENTER_CROP

Example 4:

• FIT_CENTER: a hotspot located top left is partially off the screen.
• CENTER_CROP: the same hotspot is totally off the screen.

Control Panel

.FIT_CENTER	.CENTER_CROP