Image Marker Widget

Content Type: Widget
Categories: User Interface

Overview

The Image Marker Widget allows users to interactively mark images with labeled dropdown selections and export the marked images as base64 PNG strings.

Documentation

๐Ÿ“ Image Marker Widget for Mendix

The Image Marker Widget enables users to interactively mark images with dropdown labels and export the annotated results as base64-encoded PNG strings.

Perfect for scenarios like:

  • โœ… Visual inspections

  • โœ… Field data annotation

  • โœ… Quality assurance checks

  • โœ… Medical image reviews

  • โœ… UI/UX design feedback

โœจ Features

  • ๐Ÿ“ท Load multiple images from comma-separated URLs

  • ๐Ÿ–ฑ๏ธ Add interactive markers with dropdown labels

  • ๐Ÿ” Navigate through image gallery with Previous/Next controls

  • ๐Ÿงผ Remove markers with a click

  • ๐Ÿ“ Marker positions stored as percentage coordinates

  • ๐Ÿงพ Export images with markers as base64-encoded PNG strings

๐Ÿ”ง Configuration

PropertyTypeRequiredDescriptionImage List SrcString (Text)โœ… YesComma-separated image URLs to displayDropdown ValuesString (Text)โœ… YesComma-separated list of selectable labels for each markerExport Base64 ListString (Text)โœ… YesAttribute that receives the base64 strings of the marked images after Save

๐Ÿง‘โ€๐Ÿ’ป How to Use

  1. Drag & drop the widget into your Mendix page

  2. Set the Image List Src (e.g., https://example.com/1.png,https://example.com/2.png)

  3. Provide Dropdown Values (e.g., Yes,No,N/A)

  4. Bind a string attribute to Export Base64 List to collect output

  5. Click on the image to place a marker and choose a label

  6. Press Save to generate base64 images with all annotations

๐Ÿ“ฆ Output Format

  • The widget outputs a comma-separated string of base64-encoded PNG images in Export Base64 List.

  • Each image reflects the marker positions and selected labels exactly as placed.

๐Ÿงช Sample Use Case

Example Input:

  • Image List Src: https://example.com/img1.png, https://example.com/img2.png

  • Dropdown Values: Scratch, Damaged, Recheck

Example Output:

  • Export Base64 List: Two base64-encoded PNG strings (one per image)

โš ๏ธ Limitations

  • Only works with publicly accessible image URLs

  • Exported images are not re-editable once saved

โœ… Compatibility

  • โœ… Mendix version 9.0.5 and above

  • โœ… Supports Web & Responsive layouts

Releases

Version: 1.0.0
Framework Version: 9.24.0
Release Notes: The Image Marker Widget allows users to interactively mark images with labeled dropdown selections and export the marked images as base64 PNG strings.