Skip to content

Added hotspots to PXLPhotoProductView

Compare
Choose a tag to compare
@SungjunApp SungjunApp released this 24 May 02:35
· 11 commits to master since this release
e972043

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
    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