LiveView

Odin Live View

The OdinLiveView component provides a means to easily display a live image provided by an Adapter. The image will be rendered at 100% scale by default, but provides zoom controls in a menu that appears when the mouse is hovered over the image.

Additional controls are provided to pause the loop that requests the image from the Adapter, as well as modifying the clip range and Colourmapping of the rendered image, if these options are available in the Adapter.

Note

The LiveView component, by default, is designed to work with the original LiveViewAdapter from Odin Data. This means it makes assumptions about the presence of, and paths to, certain parameters. If the adapter used is not LiveViewAdapter, but still provides some or all of these controls in a different Parameter Tree layout, ensure the paths are provides as the addrs prop.

If these options are not available in the Adapter, the OdinLiveView component will not render certain aspects based on what is missing. The table below explains this in more detail.

Parameter	Default Address	Type	Purpose
Clip Range	"clip_range"	[number, number]	An array with two values, which allows the component to "clip" the original data before it's rendered into an image. Any data points below the Minimum will be set to the minimum, and the same for the Maximum. If this exists, the LiveView component will provide a Double Slider to control the clip range.
Min/Max	"data_min_max"	[number, number]	An array with two values, which tells the component what the minimum and maximum value within the image is. This is used in conjunction with the Data Clipping option to set the minimum and maximum values of the slider
Frame Number	"frame/frame_num"	number	The frame number, as reported by Odin Data. Displays below the image, if it's available.
Selected Colourmap	"colormap_selected"	string	The currently applied colourmap, which changes what the colourmapping applied to the image is. Used alongside the Colourmap Options, this allows the LiveView Component to display a dropdown menu so that users can select the desired mapping.
Colourmap Options	"colormap_options"	Dictionary: {key: string, value: string}	A list of the options available for the colourmap of the image. This tells the Adapter which colours to assign to which values. the key is the lowercase value that gets sent to the Adapter when selected, the value is the Human Readable version displayed within the dropdown menu.

Note

By default, the LiveView component renders as a full Title Card, with the title and controls in the card header, and the Zoomable Image within the card body. This can be changed by setting the justImage Prop flag, so that the LiveView instead renders only the image, with the controls as a part of the hover menu within the image, to allow for greater flexibility in the GUI design.

Zoomable Image

The image used by the LiveView component is its own component called ZoomableImage, which is also available as a part of the odin-react package. It provides a means to render an image with zoom controls built in, that allow a user to zoom in and out, and scroll the image within it's container by dragging it, if the image is larger than it's container. This has potential uses outside of the LiveView component, and thus has been made available as it's own Component. The Zoom buttons are hidden by default but appear as an overlay when the mouse is hovered over the image.

The ZoomableImage component provides means to display a caption below the image, as well as a method to inject additional controls or other React components into the overlay that contains the Zoom buttons.

Properties

import { OdinLiveView, ZoomableImage } from 'odin-react';

OdinLiveView

Name	Type	Default	Description
endpoint	AdapterEndpoint_t		Required The endpoint that connects to the Adapter, that can provide the live image.
img_path	string	"image"	The path in the Adapter's parameter tree that can provide the image.
interval	number	1000	The interval, in milliseconds, that the Live View should request the images.
title	ReactNode	"Live View"	The title to display at the top of the Live View Card.
justImage	boolean	false	If set to true, the Live View component will render as just the image, with any controls in an overlay menu when the mouse hovers the picture, similar to how the zoom controls appear.
addrs	interface LiveViewerAddrs	{min_max_addr = "data_min_max", clip_range_addr = "clip_range", colormap_options_addr = "colormap_options", colormap_selected_addr = "colormap_selected", frame_num_addr = "frame/frame_num"}	Addresses on the Adapter Parameter Tree for the various Live View Controls. One or more can be set within the object and any not set will still be the defaults shown. The defaults are based on using the original LiveViewAdapter from Odin Data. If any of these options do not exist on the Adapter used, the component will not render the option that relies on that Parameter

ZoomableImage

Name	Type	Default	Description
src	string		Required the source address of the image to display
caption	string		A caption to display below the image, if set.
additional_hover	ReactNode		Any additional components to render alongside the zoom buttons in the hover overlay

Example

<OdinLiveView endpoint={liveviewEndpoint}/>

todo: image of live view with full controls available/opened?

<OdinLiveView endpoint={liveviewEndpoint} title="Basic View"
              addrs={{clip_range_addr: "not/real",
                      colormap_options_addr: "not/real",
                      frame_num_addr: "not/real"
              }}/>

todo: image of live view without extra controls

<OdinLiveView endpoint={liveviewEndpoint} justImage/>

*todo: image of just image live view