# Recorded Image Viewer

The Recorded Image Viewer element is used to display the images from an Image Recorder block that have been saved to an SD card, or to a USB drive.

Note: While images are supported, graphics are not, unless you save them using the Record > Recorderoption (BMP and SVG file formats).

By using the default buttons of this HMI element during deployed mode, you can check all the recorded images that the specified directory contains. The element supports displaying the following image file types:

- BMP 8-bit greyscale
- BMP 24-bit
- BMP 32-bit
- JPG 8-bit greyscale
- JPG 24-bit sRGB

The directory path for the Recorded Image Viewer is relative to the $System.WebServer.RootDirectory property. By default this is the project folder.

The viewer displays images if the record was saved using the Image Recorder block with the "Cognex Record (*.BMP + *.SVG)" recorder type.

To add a Recorded Image Viewer element to a Web Page, drag and drop the Recorded Image Viewer to the opened Web Page. The Recorded Image Viewer element shares several control components with the HMI element, and consists of the following parts:

Number | Description
1 | The label of the element, showing the following information: The file name of the current image. The index number of the current image and the image count. The Refresh button. When clicked, it updates the available images at the specified location, and reloads the image list. Note: The label of the Recorded Image Viewer element is only visible during deployed mode.
2 | The Image Display box.
3 | The File Selector list that you can use to select the image to display. This list contains all *.JPG and *.BMP files present in the selected directory.
4 | The navigation buttons: First: Displays the first image of the Image Selector List. Previous: Displays the previous image in the list. Next: Displays the next image in the list. Last: Displays the last image of the Image Selector List. Note: The navigation buttons do not cycle through the images in the File Selector list. For example, pressing the Next button when the last image at the bottom of the list is selected will not jump the selection back to the first image at the top of the list.

The Recorded Image Viewer element has the following element-specific configurable components listed in its Properties window. These properties are bindable. Therefore, the vision application will reload the image list if any of the below properties have been changed.

Property | Description
Directory | Use the Directory property to optionally set a sub-directory, using System > Settings > Web HMI > User Directory. Setting an absolute path, such as C:\Images\GoodImages as the Directory property is not permitted.
Filter | Sets up a filter condition for the image file names by using wildcards, such as * and ?.
Order by | Sets the sorting mode of the image files: File Name Ascending: Sorts the images by file name in alphabetical and/or numerical order. File Name Descending: Sorts the images by file name in reversed alphabetical and/or numerical order. File Size Ascending: Sorts the images by file size in ascending order (smallest image listed first). File Size Descending: Sorts the images by file size in descending order (largest image listed first). Last Modification Time Ascending: Sorts the images by modification time in ascending order (newest file listed first). Last Modification Time Descending: Sorts the images by modification time in descending order (oldest file listed first).
Selected Image | Gets or sets the name of the selected image. Note: Changing the selected image does not refresh the Recorded Image Viewer element.

Tip:

- The element also has three published functions (Refresh, NextImage and PreviousImage) that you can use as Button Click Command properties, or call in scripts as $ functions.