Image Log
The Image Log widget shows a grid of images together with their associated data and analysis results. Clicking an image opens a dialog that presents it in detail, with its metadata, analysis results and interactive display capabilities (zoom, pan, brightness adjustment and navigation between images).
It is designed for visual inspection scenarios: each image can carry a result (OK/NOK), tags, bounding boxes, segmentation polygons and performance metrics. It also supports image upload functionality with status tracking and a configurable queue size.
Features
- Grid display: responsive layout with a configurable number of images.
- Interactive image dialog: high-resolution display on a Fabric.js canvas.
- Advanced zoom and pan: mouse wheel zoom, pinch-to-zoom and drag to pan.
- Dynamic image type selection: configurable image types for multi-type display.
- Image upload: individual image upload with status tracking.
- Image download: download with automatic format detection (JPEG, PNG, WebP, GIF).
- Bounding box overlay: visual highlighting of detected objects or regions.
- Polygon overlay: semi-transparent filled polygons for segmentation masks.
- State management: persistent viewport transform and configurable queue size.
Configuration
| Property | Description | Default |
|---|---|---|
Name (name) | Node name shown in the editor. | '' |
Group (group) | Dashboard group where the widget is displayed (required). | — |
Locale (localeConfig) | Locale configuration node for the time zone and date/time format. | '' |
Size (width / height) | Widget width and height (0 = fit automatically to the group). | 0 / 0 |
Close button text (closeButtonText) | Custom text of the dialog close button. | 'Close' |
Show mask image (showMaskImage) | Enables the mask image toggle in the dialog. | false |
Show mask checkbox (showMaskCheckbox) | Shows a checkbox in the dialog bar to toggle mask visibility. | true |
Show bbox checkbox (showBboxCheckbox) | Shows a checkbox to toggle bounding box visibility. | true |
Show annotations checkbox (showAnnotationCheckbox) | Shows a checkbox to toggle the bounding box labels. | true |
Show polygon checkbox (showPolygonCheckbox) | Shows a checkbox to toggle polygon visibility. | true |
Image types (numberOfImages) | Number of image type fields to display (0-9). | 0 |
Type names (imageTypes) | Names of the image types used for dynamic loading. They must match the keys of payload.imageShow. | [] |
Input
This node has 1 input. It accepts different message types depending on the msg properties.
Image array (replace the queue)
With msg.queue = true, msg.payload is an array that completely replaces the image log. Each element contains the imageShow structure (one image per configured type) plus the metadata and analysis results.
Each element of the array accepts the following properties:
| Property | Description |
|---|---|
imageShow | Multi-type image structure. Each key is an image type with a configurable name (raw in the example). |
result | Detection result. |
tag | Detected tag or classification. |
isAnomalous | Boolean indicating whether the image is anomalous. |
date | Date object or ISO timestamp. |
name | Image name or identifier. |
performance | Performance metrics. |
ocr | Barcode OCR result. |
resume | Per-model evaluation results. |
Within each imageShow type, imageDataThumbnailMask, imageDataMask and bbox (bounding boxes) are optional.
msg.queue = true;
msg.payload = [
{
imageShow: {
"raw": {
imageData: "data:image/jpeg;base64,/9j/4AAQSkZJRg...",
imageDataThumbnail: "data:image/jpeg;base64,...",
imageDataThumbnailMask: "data:image/jpeg;base64,...",
imageDataMask: "data:image/jpeg;base64,...",
bbox: [
{
x_rel: 0.1,
y_rel: 0.2,
w_rel: 0.3,
h_rel: 0.4,
color: "red",
tag: "defect",
score: 0.95
}
]
}
},
result: "NOK",
tag: "defect",
isAnomalous: true,
date: "2024-01-15T10:30:00Z",
name: "image_001.jpg",
performance: {
milliseconds: 1250
},
ocr: "BARCODE123",
resume: {
"model1": {
isAnomalous: true,
score: 0.95
}
}
}
];Upload status
Upload confirmation:
msg.payload = { uploaded: { name: "image_001.jpg" } };Upload error:
msg.payload = { error: { name: "image_001.jpg" } };Upload status message, where msg.done is true if the upload finished successfully and false on error:
msg.payload = "image_001.jpg";
msg.done = true;Queue management
To remove an image from the queue:
msg.payload = { removeQueue: "image_001.jpg" };To set the queue size, which is 100 by default and accepts a maximum of 200:
msg.payload = { logSize: 150 };Configuration messages
configViewportLog restores the viewport transform, that is, the zoom and the position.
msg.payload = { configViewportLog: [1, 0, 0, 1, 0, 0] };Polygons (optional)
msg.polygons overlays segmentation masks on the image:
| Property | Description |
|---|---|
points | [x_rel, y_rel] pairs with relative coordinates in the 0-1 range. |
color | Colour in rgb(r,g,b) format. |
tag | Class name (optional). |
confidence | Confidence between 0 and 1 (optional). |
alpha | Transparency between 0 and 1 (optional). |
msg.polygons = [
{
points: [[0.58, 0.59], [0.59, 0.60]],
color: "rgb(116,37,162)",
tag: "blister_nok",
confidence: 0.95,
alpha: 0.5
}
];Output
This node has 1 output. It emits messages when the user interacts with the dialog. When the canvas position and zoom are saved:
msg.payload = { saveViewportTransformLog: [1, 0, 0, 1, 0, 0] };And when an upload is requested through the corresponding button:
msg.payload = { name: "image_001.jpg" };Usage example
Replace the whole image log with a NOK inspection result and a bounding box:
msg.queue = true;
msg.payload = [
{
imageShow: {
"raw": {
imageData: "data:image/jpeg;base64,/9j/4AAQSkZJRg...",
imageDataThumbnail: "data:image/jpeg;base64,...",
bbox: [
{
x_rel: 0.1,
y_rel: 0.2,
w_rel: 0.3,
h_rel: 0.4,
color: "red",
tag: "defect"
}
]
}
},
result: "NOK",
isAnomalous: true,
date: "2024-01-15T10:30:00Z",
name: "image_001.jpg"
}
];
return msg;Confirm an image upload once it has completed:
msg.payload = {
uploaded: {
name: "image_001.jpg"
}
};
return msg;