UIFeedback Config Elements

Element Overlay section

The element overlay section is responsible for the spatial coordinates of the objects.

Source

The source attribute tells defines the referential source for the coordinates.

Values

cutout
Example demonstrating references for overlay source 
"overlay": {
    "source": "cutout"
}

Future possibility: "source:" "scanResult"
Source

Anchor

The anchor attribute allows defining the bounds of the source.

Values

top_left

top_center

top_right

center_left

center

center_right

bottom_left

bottom_center

bottom_right
Example demonstrating references for anchor sources 
"overlay": {
    "source": "cutout",
    "anchor": "top_center"
}
Anchor

SizeDimension

The sizeDimension attribute is responsible for setting the size of the overlay. It is composed by components x and y, one for each axis.

  • scaleValue: a Float value to be used with the scaleType for positioning overlays.

  • scaleType: Enum class containing possible values for scaling overlays.

Values

Description

none

No scaling

overlay

Scale based on source size

fixed_px

Fixed size in pixels

keep_ratio

Keep original view size ratio
Example demonstrating references for scaleValues 
"overlay": {
    "source": "cutout",
    "anchor": "top_center",
    "sizeDimension": {
      "scaleX": {
        "scaleValue": 1.0,
        "scaleType": "overlay"
      },
      "scaleY": {
        "scaleValue": 120.0,
        "scaleType": "fixed_px"
      }
    }
}
SizeDimension

OffsetDimension

The offsetDimension attribute is responsible for shifting the positions of the overlay. It contains the same structure of sizeDimension (two components for x and y, both with scaleValue and scaleType.

Example demonstrating direction of positive and negative values for offsetDimension 
"overlay": {
    "source": "cutout",
    "anchor": "top_center",
    "offsetDimension": {
      "scaleX": {
        "scaleValue": 0.0,
        "scaleType": "none"
      },
      "scaleY": {
        "scaleValue": 160.0,
        "scaleType": "fixed_px"
      }
    }
}
OffsetDimension
OffsetDimension
Offset Dimension pushes to anchor direction.

Element Attributes section

The element attributes section is responsible to apply additional attributes to the element.

  • textAlignment: an enum string value that corresponds to text alignment (only applicable for contentType: text). Possible values: left, right, center. Default value: center.

  • textColor: a string value (HEX RGB) corresponding to text color (only applicable for contentType: text).

  • backgroundColor: a string value (HEX RGB) corresponding to background color.

  • imageScaleType: an enum string value that corresponds to image scale type (only applicable for contentType: image). Possible values: fit_center, center, center_crop, fit_xy. Default value: fit_center.

Element Content section

The element content section is responsible for filling the elements with content.

  • contentValue: a string value that is going to fill the element depending on its contentType.

contentType

contentValue

image

Drawable resource

sound

Sound asset

text

Text string

  • durationMills: an integer value in milliseconds corresponding to the duration the content will be shown. A zero-value keeps the content always visible. Default value: 0

  • priorityLevel: an integer value (between 0 and 100) indicating the priority of the content. Highest priority: 0; lowest priority: 100. The lower the value, the higher the priority this content has over other contents. E.g., in case a trigger tries to replace the contentValue with newer content with a lower priority, it shall be ignored. Default value: 1

Example usage of image and text being displayed, with image being dismissed after three seconds, while text keeps being shown. 
    {
      "id": "instruction_text",
      "contentType": "text",
      "defaultContent": {
        "contentValue": "Please scan your ID."
      },
      "overlay": {
        "source": "cutout",
        "anchor": "top_center",
        "sizeDimension": {
          "scaleX": {
            "scaleValue": 1.0,
            "scaleType": "overlay"
          },
          "scaleY": {
            "scaleValue": 120.0,
            "scaleType": "fixed_px"
          }
        },
        "offsetDimension": {
          "scaleX": {
            "scaleValue": 0.0,
            "scaleType": "none"
          },
          "scaleY": {
            "scaleValue": 10.0,
            "scaleType": "fixed_px"
          }
        }
      }
    },
    {
      "id": "guide_image",
      "contentType": "image",
      "defaultContent": {
        "contentValue": "scanning_tutorial_dialog_image",
        "durationMills": 3000
      },
      "defaultAttributes": {
        "imageScaleType": "fit_center"
      },
      "overlay": {
        "source": "cutout",
        "anchor": "center",
        "sizeDimension": {
          "scaleX": {
            "scaleValue": 1.0,
            "scaleType": "overlay"
          },
          "scaleY": {
            "scaleValue": 1.0,
            "scaleType": "overlay"
          }
        }
      }
    }
Content
Content
The content for the element guide_image is dismissed after 3 seconds while the content for the element instruction_text keeps being shown for the whole scanning process.

Element Trigger section

The element trigger section is responsible to apply changes to the element based on advanced ScanPlugin responses during the scan process.

  • scanInfo: an array of WhenScanInfo objects.

  • runSkipped: an array of WhenRunSkipped objects.

Element WhenScanInfo Trigger section

The ScanInfo trigger watches ScanPlugin.scanInfoReceived events for specific variable names and values.

  • varNameEquals: a string value that refers to the variable to be watched.

  • varValueEquals: a string value that refers to the value expected.

  • applyDefaultContent: a boolean value that makes the defaultContent to be applied to the element when triggered.

  • applyContentInstead: an ElementContent object that will be applied to the element when triggered.

  • applyDefaultAttributes: a boolean value that makes the defaultAttributes to be applied to the element when triggered.

  • applyAttributesInstead: an ElementAttribute object that will be applied to the element when triggered.

Element WhenRunSkipped Trigger section

The RunSkipped trigger watches ScanPlugin.runSkippedReceived events for specific codes.

  • codeEquals: an integer value that refers to the code expected.

  • applyDefaultContent: a boolean value that makes the defaultContent to be applied to the element when triggered.

  • applyContentInstead: an Element Content object that will be applied to the element when triggered.

  • applyDefaultAttributes: a boolean value that makes the defaultAttributes to be applied to the element when triggered.

  • applyAttributesInstead: an Element Attribute object that will be applied to the element when triggered.

Example usage triggering the light condition to a text element. 
{
  "id": "lighting_feedback_text",
  "contentType": "text",
  "defaultContent": {
    "contentValue": "Ready to perform scan"
  },
  "defaultAttributes": {
    "textColor": "00FF00"
  },
  "trigger": {
    "scanInfo": [{
      "when": {
        "varNameEquals": "$lightingCondition",
        "varValueEquals": "TOODARK",
        "applyContentInstead": {
          "contentValue": "Too dark to perform scan"
        },
        "applyAttributesInstead": {
          "textColor": "FF0000"
        }
      }
    }, {
      "when": {
        "varNameEquals": "$lightingCondition",
        "varValueEquals": "TOOBRIGHT",
        "applyContentInstead": {
          "contentValue": "Too bright to perform scan"
        },
        "applyAttributesInstead": {
          "textColor": "FF0000"
        }
      }
    }, {
      "when": {
        "varNameEquals": "$lightingCondition",
        "varValueEquals": "GOOD",
        "applyDefaultContent": true,
        "applyDefaultAttributes": true
      }
    }]
  },
  "overlay": {}
}
Trigger
Trigger
Trigger
The content and attributes for the element lighting_feedback_text are updated for every $lightingCondition with TOODARK and TOOBRIGHT values but return to their default state with GOOD value.

Element section

The element section refers to the concrete implementation of the element and all of its properties.

  • id: a string value used to refer the element.

  • contentType: a string enum value corresponding to the associated type of view object.

contentType

View Type

image

ImageView

sound

(no view)

text

TextView

  • overlay: an ElementOverlay object containing the constraints for positioning the element on the screen.

  • trigger: an ElementTrigger object containing the constraints for watching and applying dynamic content.

  • defaultAttributes: an ElementAttribute object containing the default attributes to be applied to the element on its creation.

  • defaultContent: an ElementContent object containing the default content to be applied to the element on its creation.

  • tag: a string value that can be used to add additional information to the element.

  • clickable: a boolean value that sets whether the element is responding to onClick events or not.

Example usage overlaying a hint image (of an electric meter) to present combined scanning comprehensible to the user. 
{
    "id": "cutout_image",
    "contentType": "image",
    "defaultContent": {
      "contentValue": "analog_gas_meter_bg"
    },
    "overlay": {
      "source": "cutout",
      "anchor": "center",
      "sizeDimension": {
        "scaleX": {
          "scaleValue": 1.3,
          "scaleType": "overlay"
        },
        "scaleY": {
          "scaleValue": 1.0,
          "scaleType": "keep_ratio"
        }
      },
      "offsetDimension": {
        "scaleX": {
          "scaleValue": 0.0,
          "scaleType": "none"
        },
        "scaleY": {
          "scaleValue": 50.0,
          "scaleType": "fixed_px"
        }
      }
    }
},
{
    "id": "hint_image",
    "contentType": "image",
    "defaultContent": {
      "contentValue": "ic_info"
    },
    "clickable": true,
    "tag": "Use this are to scan the meter value",
    "overlay": {
      "source": "cutout",
      "anchor": "center_right",
      "sizeDimension": {
        "scaleX": {
          "scaleValue": 80.0,
          "scaleType": "fixed_px"
        },
        "scaleY": {
          "scaleValue": 80.0,
          "scaleType": "fixed_px"
        }
      },
      "offsetDimension": {
        "scaleX": {
          "scaleValue": 20.0,
          "scaleType": "fixed_px"
        },
        "scaleY": {
          "scaleValue": 0.0,
          "scaleType": "none"
        }
      }
    }
}
Element

Listening to UIFeedback click events

To receive click notifications from clickable elements you must listen to the onUIFeedbackOverlayViewClickedEvent event on the ScanView.

Example usage on how to receive click Event data from clickable elements
scanView.onUIFeedbackOverlayViewClickedEvent = Event { data ->
    val scanViewPlugin: ScanViewPlugin = data.first
    val elementEventContent: UIFeedbackOverlayViewElementEventContent = data.second
    if (elementEventContent.element.tag.isNotEmpty()) {
        Toast.makeText(this,
            elementEventContent.element.tag,
            Toast.LENGTH_SHORT)
            .show()
    }
}