{ "title": "Image Configuration", "description": "An image display widget for showing single or multiple images from URLs or base64-encoded data. Use this widget to display photos, diagrams, camera feeds, or any visual content on dashboards. Supports single image mode with direct URL or file upload, and multi-image mode for grid layouts of multiple images with optional labels. Features time-based filtering for displaying images within a selected time range and responsive grid layouts that optimize image arrangement based on available space.", "aiSelection": { "dataShape": "Image sources only: one imageUrl or uploaded file, or a list of data[] entries each with an imageUrl, an optional label and an optional timestamp for time-range filtering. Nothing numeric is plotted.", "useWhen": [ "Photos, camera stills, diagrams, product shots or scans should be shown as they are.", "A set of images should fill the tile as a responsive grid, optionally labelled (multiImage: true).", "Images should follow the dashboard's selected time range through their timestamp." ], "notFor": [ "An image that needs live values drawn on top of it — a floor plan with readings, a schematic with fill levels. Use widget-overlay.", "A live web page rather than a picture — use widget-embed.", "An icon conveying status — use widget-signal, or widget-scada for an industrial symbol.", "Images belonging to individual records alongside other fields — use widget-table with a column of type 'image'." ] }, "type": "object", "properties": { "title": { "title": "Title", "description": "The main heading displayed above the image in single-image mode. Use to describe or label the image content.", "order": 1, "type": "string" }, "titleLink": { "title": "Title Link", "description": "Optional URL for the title. When provided, the title becomes a clickable link.", "order": 2, "type": "string" }, "stretchToFit": { "title": "Stretch to fill", "type": "boolean", "description": "When enabled, images stretch to fill the entire widget area, potentially distorting aspect ratio. When disabled, images maintain their original aspect ratio and are contained within the widget bounds with letterboxing if needed.", "dataDrivenDisabled": true, "order": 3 }, "multiImage": { "title": "Multi Image", "description": "When enabled, displays multiple images in a responsive grid layout from the data array. When disabled, shows a single image from imageUrl or uploaded file. Enable for galleries, camera grids, or comparing multiple visual assets.", "type": "boolean", "dataDrivenDisabled": true, "order": 4 }, "gap": { "title": "Gap", "type": "number", "description": "Spacing between images in pixels when using multi-image mode. Increase for visual separation, decrease for compact grids. The gap scales proportionally with image size.", "order": 5, "condition": { "relativePath": "../multiImage", "showIfValueIn": [true] } }, "labelFontSize": { "title": "Image Label Font Size", "type": "number", "description": "Font size in pixels for image labels displayed below each image. Applies to both single and multi-image modes when labels are provided.", "order": 6 }, "imageUrl": { "title": "Image URL", "description": "Image source for single-image mode. Accepts a direct URL (e.g., 'https://example.com/image.jpg') or a base64-encoded image supplied as a data URI. Can be bound to a data column for dynamic image sources (e.g. a database column). Base64 values MUST include the data-URI prefix with the correct MIME type: 'data:image/png;base64,' (or image/jpeg, image/gif, image/svg+xml, etc.) — a raw base64 string without this prefix will not render. The base64 payload must contain no whitespace or line breaks. Used when 'Use image upload' is disabled.", "order": 7, "condition": { "relativePath": "../multiImage", "showIfValueIn": [false] }, "type": "string" }, "useUpload": { "title": "Use image upload", "description": "When enabled, displays an uploaded image file instead of loading from URL. Use for static images that don't change or when the image isn't accessible via URL.", "dataDrivenDisabled": true, "order": 8, "condition": { "relativePath": "../multiImage", "showIfValueIn": [false] }, "type": "boolean" }, "image": { "title": "Upload image file", "description": "Upload an image file directly to the dashboard. Supports common formats (PNG, JPG, GIF, SVG). The image is stored with the dashboard configuration.", "order": 9, "dataDrivenDisabled": true, "condition": { "relativePath": "../useUpload", "showIfValueIn": [true] }, "type": "image" }, "data": { "title": "Images", "description": "Array of images for multi-image mode. Each entry specifies an image URL, optional label, and optional timestamp for time-based filtering. Images are arranged in an optimized responsive grid.", "type": "array", "condition": { "relativePath": "../multiImage", "showIfValueIn": [true] }, "order": 10, "items": { "type": "object", "properties": { "timestamp": { "title": "Timestamp", "description": "Unix timestamp in milliseconds for time-based filtering. When a timeRange filter is active, only images with timestamps within the range are displayed. Images without timestamps are always shown.", "type": "number", "order": 1 }, "imageUrl": { "title": "Image URL", "description": "Image source for this entry. Either a full, accessible URL starting with http:// or https://, or a base64-encoded image supplied as a data URI. Can be bound to a data column (e.g. a database column). Base64 values MUST include the data-URI prefix with the correct MIME type: 'data:image/png;base64,' (or image/jpeg, image/gif, image/svg+xml, etc.) — a raw base64 string without this prefix will not render. The base64 payload must contain no whitespace or line breaks.", "type": "string", "order": 2 }, "label": { "title": "Image Label", "description": "Text label displayed below this image. Use for identification, captions, or metadata like camera name or timestamp.", "type": "string", "order": 3 } } } } } }