Histogram

The histogram control TcHmiVnHistogram generates a histogram from an image and displays it. It also offers the option of converting the image from the color format RGB to another before generating the histogram. The histogram can be displayed as a line or bar chart. The description of each configuration option can be found under the following categories on this page. For each category there are sub-chapters with further information, details and application examples. In order to directly process TwinCAT Vision images from the PLC, the Vision extension for the HMI server is also required.

	For all the following attributes, the control has a getter and a setter method. For example, for the attribute `LabelColor`, there are two methods: `getLabelColor(): SolidColor` and `setLabelColor(value: SolidColor): void`. The use of the attributes is explained in more detail in the linked subchapters. All further attributes, events and permissions provided by the Controls base class can be found in the TwinCAT HMI documentation.

Category: Colors

Attribute	Type	Description
`HistogramBackgroundColor`	`Color`	Background color of the histogram.
`SelectionColor`	`Color`	Color of the selection marker on the histogram.
`GridLineColor`	`Color`	Color of the grid lines on the histogram.
`LabelColor`	`Color`	Color of the labels that label the grid lines with frequency values.
`InfobarForegroundColor`	`Color`	Foreground color of the Infobar.

Category: Common

The following attributes fix the Resource and the View of the histogram.

Attribute	Type	Description
`Image`	`String`	Resource for the image to be displayed. Can be either a path to an image file or a data URI.
`ImageConversion`	`ImageConversion`	Image format into which the image is converted before the histogram is calculated. The input image is always interpreted as RGB.
`ColorChannels`	`ColorChannels`	Defines the display of the color channels. This includes: Number of channels Display colors of the channels Label of the channels Visibility of the channels
`ChartType`	`ChartType`	Histogram type. Possible are: `Line` for the line chart view `Bar Overlay` for the bar chart view with transparent overlays of the channels `Bar Mix` for the bar chart view with color mixing for channel overlays.
`Histogram` _(readonly)	`Histogram`	The calculated histogram data of the current image as a two-dimensional, numerical array. The array contains the frequency values per color channel and color value. The first dimension of the array corresponds to the color channels and the second dimension corresponds to the color values.

Category: Selection

The following attributes and functions relate to the Selection of color values.

Attribute	Type	Description
`SelectionMode`	`SelectionMode`	Determines whether several consecutive color values (`Range`), only individual color values (`Single`), both options (`Single or Range`) or none at all (`Disabled`) can be chosen.
`SelectionLowerBound` _(readonly)	`Number`	Lowest color value of the current choice. For single selection, this is the selected color value.
`SelectionUpperBound` _(readonly)	`Number`	Highest color value of the current choice. For single selection, this is the selected color value.
`SelectionFrequencies` _(readonly)	`Frequencies`	Frequency values of the individual image channels from the current choice for single selection, average values for range selection.

Function	Description
`clearSelection(): void`	Cancels the current color value choice.

Category: Infobar

The following attributes can be used to customize the Infobar of the control.

Attribute	Type	Description
`ShowInfobar`	`Boolean`	Determines whether the infobar is displayed.
`InfobarShowLegend`	`Boolean`	Fixes whether the legend is displayed in the infobar.
`InfobarShowFrequencies`	`Boolean`	Determines whether the frequency values of the current selection are displayed in the infobar.
`InfobarShowBin`	`Boolean`	Determines whether the brightness range (bin) associated with the current selection is displayed in the infobar.
`InfobarFontFamily`	`FontFamily`	Font of the Infobar.
`InfobarFontSize`	`MeasurementValue`	Font size of the info bar.
`InfobarFontStyle`	`FontStyle`	Font style of the Infobar.
`InfobarFontWeight`	`FontWeight`	Font weight of the Infobar.

Category: Grid

The following properties can be used to customize the control's Grid lines.

Attribute	Type	Description
`ShowGrid`	`Boolean`	Fixes whether grid lines are displayed on the histogram.
`GridShowHorizontalLines`	`Boolean`	Fixes whether horizontal grid lines are displayed on the histogram.
`GridHorizontalLineCount`	`Number`	Number of horizontal grid lines.
`GridShowVerticalLines`	`Boolean`	Fixes whether vertical grid lines are displayed on the histogram.
`GridVerticalLineCount`	`Number`	Number of vertical grid lines.
`GridLineWidth`	`Number`	Thickness of the grid lines.
`GridLineStyle`	`ChartLineStyle`	Style of the grid lines. Possible are: `Dashed` `Dotted` `Solid`

Category: Subgrid

The following attributes can be used to adjust the Sub-gridlines of the control.

Attribute	Type	Description
`SubgridShowHorizontalLines`	`Boolean`	Fixes whether vertical sub-grid lines are displayed on the histogram.
`SubgridHorizontalLineCount`	`Number`	Number of horizontal sub-grid lines between two horizontal grid lines.
`SubgridLineWidth`	`Number`	Thickness of the sub-grid lines.
`SubgridLineStyle`	`ChartLineStyle`	Style of the sub-grid lines. Possible are: `Dashed` `Dotted` `Solid`

Category: Labels

The Labels, which label the grid lines with frequency values, can be customized with the following attributes.

Attribute	Type	Description
`ShowLabels`	`Boolean`	Fixes whether a label with the corresponding frequency value is displayed per horizontal grid line.
`LabelPosition`	`LabelPosition`	Display position of the labels. At `Left outside` and `Right outside` next to the histogram and at `Left inside` and `Right inside` in the histogram directly below the corresponding grid line.
`LabelFontFamily`	`FontFamily`	Font of the labels.
`LabelFontSize`	`MeasurementValue`	Font size of the labels.
`LabelFontStyle`	`FontStyle`	Font style of the labels.
`LabelFontWeight`	`FontWeight`	Font weight of the labels.

Events

All events are listed in the Vision category.

Event	Description
`.onImageReceived`	This event is triggered when the control receives an image.

Further Information