Slider

Parent Previous Next

Layout: Slider

The slider layout is used to show a collection of image items under user control. It displays a single image item with an optional title under the image. Beneath that are one or more sliders that allow the user to select between the various images.  An example is shown below:



The slider template first selects the image items to be displayed. Note: it is not necessary to filter in incoming data item list to the image type, that part of the filtering is implicit. It then uses tag values to sort the images into "dimensions" based on the tags.  It will generate one slider per dimension (tag) and the number of positions of that slider will be equal to the number of values that tag can have. In the example above, there are three tags: 'timestep', 'variable' and 'mode'.  The first is a number, the second the name of a variable and the third a simple string.  These names are set in the configuration options as shown below.

Each of the tags is represented using a slider.  The user selects a value from each slider and the title (below the image) and the values to the right of the sliders update to reflect the new settings.  The representative image is fetched from the Nexus server and displayed. If a set of tags selects more than one image (in the example, if more that one image has the same 'timestep', 'variable' and 'mode' tags), an extra slider will be added automatically at the bottom of the sliders to allow the user to view all of those images. The visibility of this slider is dynamic, based on the number of images at the current set of tag values. There is a property (first_image_only) that will select only the first image be displayed and no extra slider be displayed.

There is an option to map clicking on the image and dragging in the X and Y axes to perform the same operation as dragging tag sliders.  The X and Y axes can be independently linked to a specific tag and instead of displaying a slider for those tag(s), the user can select the image by clicking and dragging.  This can be used to simulate motion through time, clip plane position or even rotation over the screen axes. There are three properties that control this function (they are duplicated for the x and y axes).  The 'slider_xaxis_tag' property should be set to the name of the tag that is mapped to the x axis.  Note: if this property is set, no slider will be displayed for that tag.  By default, drag motion is set so that a drag over the entire image axis will result in the entire domain of that tag.  For example, if there are 10 different values for the tag and the image is 500 pixels wide, then dragging the mouse 50 pixels will increment/decrement the tag value one step, depending on the direction of the drag.  The 'slider_xaxis_scale' property (default: 1.0) will let one change the relative number of pixels of motion needed.  In the previous example, with the 'slider_xaxis_scale' set to 2.0, dragging the mouse 25 pixels will change the tag one step.  One hint, it is often useful to set the scaling factors taking into the aspect ratio of the image into account.  This helps ensure that the same amount of motion in each axis as a similar effect, very useful when trying to simulate things like 3D rotation.  Finally, the 'slider_xaxis_clamp' property determines what happens when relative motion in the image window causes the tag value to increment/decrement beyond the number of items in the tag domain.  By default ('slider_xaxis_clamp' defaults to 0), the tag value will "wrap around", conceptually to the opposite end of the slider.  This can be very useful for periodic sequences (e.g. 360 degree rotations).  Setting this property to 1 causes the tag value to "clamp" the values to the first/last positions.  This can be desirable for things like non-periodic time sequences.  

Image Comparison

The Image Comparison layout is an extension of the Slider Layout. In addition to displaying one single image item, its title and sliders, it also renders a copy of the same. An example is shown below:



Each section's sliders can be used to set the image of the corresponding section. In addition to section-specific sliders, there are also optional common sliders that can control the images of both the sections at the same time. In the example above, the slider for 'Mode' changes the displayed image for different values of the 'Mode' variable of both the sections simultaneously.


A set of controls are also available to enhance the interaction with the slider images. You may use them to control the display of both the images at the same time. An example is shown below. Note the bar at the top.


On the right side are the Zoom In, Zoom Out and Reset buttons. The action is performed on both images at the same time.

On the left are the Panning, Grid and Pixel Probing buttons. The Panning button is used to pan both the images simultaneously. Note that panning will work only if the images are zoomed in. To use, check the Panning checkbox and drag across the zoomed image. The Grid option is used to display a grid overlay over the images. This may be helpful when trying to zoom or focus into a particular point in the images.



The Pixel Probing option, as the name suggests, returns per-pixel information from the image. Currently, the only information available from the images are the R,G,B values of each pixel. More information will be added in the future. In addition, the X, Y coordinates of the image are also displayed (origin beginning from the top-left corner). When Pixel Probing is enabled, you will not be able to use the Panning or Grid options and vice versa.


The 'image_comparision' property enables this functionality.  The properties: common_slider_tags, common_slider_title_width, common_slider_title_justification and image_controls are all enabled only when image_comparison is enabled.

Configuration options

There is a single button that is used to select the tags that will become the sliders.  The dialog appears like this:



The name of a tag can be typed in the left column and can be paired with a specific sorting option.  The sort is applied to the tag values and determines the ordering of the values along the slider(s). It is possible to sort up or down, interpreting the value as a number or a text string. Finally, an axis can not be sorted at all, preserving the order of the data items themselves as set by the template sorting features (e.g. by date, sequence number, etc).

Properties

Several properties specifically control the display of the sliders and the titles.

Property

Value

common_slider_tags

A list of tag values that should be used for the common sliders controlling both image sections, when image comparison is enabled. Example: [timestep, variable]

common_slider_title_width

Width of the common slider caption column in percent. Default is 20.  0 removes the column.

common_slider_title_justification

Common slider caption justification: center, left, right, justify. Default is left.

first_image_only

If set to 1, the extra slider that allows the user to walk through all of the images that match the current tag values will not be displayed and only the first image in the image set will be displayed.

height

The height of the image in pixels

image_comparison

Flag to show/hide a copied section of the image with sliders for comparison. Default is 0. Setting it to 1 will enable comparison.

image_controls

Flag to show/hide image controls like pan, zoom, etc. when image comparison is enabled. Default is 0. Setting it to 1 will enable the control panel.

image_link


Value

Operation

0

image is not clickable (the default)

1

click on the image to go to a page with only the image

2

click on the image to open the image in a new tab

3

click on the image to open the image data item details page in a new tab

image_title

String of HTML displayed beneath the image.  Item and context properties can be used with the macro syntax {{}}. Default: ""

initial_values

List of the tag values that the sliders should be set to initially.  This is an array of values, one per slider (tag).  If the specific value cannot be found in the tags, the first value will be used.  Example:  [10.0,displacement,hidden] would yield the initial position illustrated above.

slider_title_justification

The justification of the slider title text in its column.  Values can be: center, left, right, justify  The default is left.

show_nodes

List of values that can be 1 or none.  If 1, the steps of the corresponding slider will be displayed as nodes. If none, no nodes will be displayed.

slider_title

List of strings in the same format as 'image_title'.  One for each slider. Note: the macro expansion for each substring can include the values for any of the sliders. An example: [Timestep: {{timestep}},Variable: {{variable}},Mode: {{mode}}]

slider_title_width

The width of the slider title column.  In percent.  0=do not display slider titles. The default: 30

slider_xaxis_tag

Select the name of a tag that clicking and dragging on the image in the x axis will change the value for.  No slider will be displayed for this tag.

slider_yaxis_tag

Select the name of a tag that clicking and dragging on the image in the y axis will change the value for.  No slider will be displayed for this tag.

slider_xaxis_scale

By default, dragging a distance the same as the width of the image in pixels will cause all of the images for the specified tag to be iterated over.  The default is 1.0.  Increasing this value, to 2.0 will halve the pixel motion requirements to cause the same change in the image sequence.  

slider_yaxis_scale

By default, dragging a distance the same as the height of the image in pixels will cause all of the images for the specified tag to be iterated over.  The default is 1.0.  Increasing this value, to 2.0 will halve the pixel motion requirements to cause the same change in the image sequence.

slider_xaxis_clamp

By default, when mouse motion in the x axis would cause the image sequence to progress beyond natural limits, the axis will "wrap around" to the opposite limit.  If this property is set to 1, mouse motion beyond the natural limits will "clamp" to the minimum/maximum image in the sequence.

slider_yaxis_clamp

By default, when mouse motion in the y axis would cause the image sequence to progress beyond natural limits, the axis will "wrap around" to the opposite limit.  If this property is set to 1, mouse motion beyond the natural limits will "clamp" to the minimum/maximum image in the sequence.

width

The width of the image in pixels


NOTE: When Image Comparison is enabled, certain features present in a basic Slider Layout like image dragging, image links, custom image sizing, etc. will not be available, in order to provide a non-intrusive experience.


In this example configuration:

 the 'image_title' property has been set to:


<h4>variable={{variable}} timestep={{timestep}}</h4>


and the 'show_nodes' property has been set to:


[none,1,1]


Notice the slider value replacement in the title string and the inclusion of nodes for the latter two sliders.