Added hotspots to PXLPhotoProductView
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 onvideo
. -
Code Example
- To display hotspots, you need to set
showHotspots = true
. Please see the example codes below.
#!kotlin pxlPhotoProductView .setContent(.. showHotspots = true, ....)
- To display hotspots, you need to set
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 |
---|---|