Overview

Image Defect Locator is a widget designed to empower quality management teams and shop floor personnel in the manufacturing industry. By providing pixel-perfect precision for identifying and annotating defects within images, this widget streamlines the process of documenting and addressing quality issues in visual content.

Documentation

The Image Defect Locator widget identifies and marks defects on images. It allows users to upload an image and position markers to indicate areas of concern. The widget can trigger custom actions when the image or markers are updated.

Usage

1. Image upload and marker placement:
   1. Upload an image through the image uploader. Mark defects or areas of interest on the image, specifying coordinates for placement.
2. Configuration:
   1. In the Mendix module, set the widget properties to configure the image source, data source for selectable objects, and marker positions. The following properties can be configured: (Format as Property - Type - Description)

      • ImageUrl - image - Required. The image is to be displayed in the widget.

      • objectsDatasource - data source - Optional. A list of objects with coordinates or annotations for displaying markers or selectable items. This property is only used when the widget is in the list view.

      • XPositionAttribute - attribute - Optional. The X coordinate path for marker placement.

      • YPositionAttribute - attribute - Optional. The Y coordinate path for marker placement.

      • noteAttribute - attribute - Optional. The path for any notes or annotations associated with each marker.

      • Editable - boolean - To mark the image select yes in editable section

 ​​​​​​

3. Event Handling:

1. The widget provides event hooks for custom actions on image upload and marker state changes: (Format as Property - Type - Description)

• markerAction - action - Triggered when a marker state is updated.

Setting Up the Widget

1. Add the Image Defect Locator Widget to the Page:
   • Place the widget inside a Data View. This widget allows you to configure attributes for marker positions, notes, and the image source.
2. Configure Data Source and Properties:
   • Define the data source for the selectable objects and set up the attributes for X/Y positions and any additional notes.
3. Set Custom Actions:
   • Specify microflows or nanoflows for onChangeAction and markerActionto handle events such as marker changes.

Marker Positioning Logic

• When a user interacts with the image, marker coordinates are captured and can be saved to the defined attributes. You can trigger microflows to update the backend data or perform additional processing based on marker changes.

Widget Implementation

Entity Overview

1. ImagePath (System.Image)
   • Represents the path of the uploaded image.
   • This entity is linked to the Defect entity through a one-to-many relationship, allowing multiple defects to be associated with a single image.
2. Defect
   • Stores details about each identified defect on the image.
   • Attributes:
     • XPosition (String): The X coordinate of the defect marker.
     • YPosition (String): The Y coordinate of the defect marker.
     • Note (String): An optional note describing the defect.
   • This entity is associated with the ImagePath entity to connect each defect with the relevant image.
3. HelperEntity
   • Used as an intermediary for managing marker data in the widget.
   • Attributes:
     • XPosition (String): Temporary storage for the X coordinate.
     • YPosition (String): Temporary storage for the Y coordinate.
     • Note (String): Temporary storage for the defect note.
   • This entity is associated with both ImagePath and Defect through helper associations, which can facilitate managing complex workflows or user interactions.

Associations

• Defect_ImagePath
  • A one-to-many association between ImagePath and Defect, linking each image to multiple defect markers.
• HelperEntity_ImagePath
  • An association connecting HelperEntity with ImagePath, enabling temporary data handling for the image context.
• HelperEntity_Defect
  • An association connecting HelperEntity with Defect, facilitating temporary management of defect-related data.

Notes

• The entity names (ImagePath, Defect, HelperEntity) and attribute names (XPosition, YPosition, Note) in the domain model can be customized by the user. The user can choose meaningful names that align with their application's requirements.

Demo Project:-    

https://imagedefectlocator-demo100-sandbox.mxapps.io/index.html?profile=Responsive

[User id:- demo_administrator ,  Password:- B1JLCwI1FvVk]

Contributors:- Avinash Pansuriya