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.  

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

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_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


In the example above, 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]


Created with the Personal Edition of HelpNDoc: News and information about help authoring tools and software