How it works

This filter and its variants can be applied to:

metrics whose value is a URL or a byte-encoded image.
properties whose value is a URL or the property type is FILE.

Null or empty values will generate an empty image.

The panzoom option can be used to display a small image preview, and when the image is clicked a popup will display the full-size image with also pan and zooming features.

Filter Variants

The set of predefined filter variants that can be used to format values.

Image	Displays an image without any scaling Name: image Input Types: STRING, FILE Output Type: HTML
Image (pan and zoom)	Displays an image (width 256px) allowing also mouse pan and zooming. Name: image_panzoom Input Types: STRING, FILE Output Type: HTML
Image (width 128px)	Displays an image by scaling its width to 128px. Name: image_w128 Input Types: STRING, FILE Output Type: HTML
Image (width 256px)	Displays an image by scaling its width to 256px. Name: image_w256 Input Types: STRING, FILE Output Type: HTML
Image (width 64px)	Displays an image by scaling its width to 64px. Name: image_w64 Input Types: STRING, FILE Output Type: HTML
Image (bitmap encoded)	Displays an image obtained by converting a bitmap encoded string to a Base64 PNG. Name: image_bitmap_to_png Input Types: STRING, FILE Output Type: HTML
Image (width 32px)	Displays an image by scaling its width to 32px. Name: image_w32 Input Types: STRING, FILE Output Type: HTML

Custom Variants

New variants can be defined through the following configuration options.

Option	Description	Sample Value
panzoom	The flag indicating whether the pan and zooming function are enabled (default false).	{"panzoom": true}
width	The image desired width expressed in pixels or percentage (default 100%).	{"width": "256px"}
converter	The image converter to be applied before visualization (default none).	{"converter": "BITMAP_TO_PNG"}

Example of defining a custom image filter variant into the Custom Filters component.


exports.image_w128 = ImageViewerFilter({ "width": "128px" });