Frontend elements

There are two main types of objects in the frontend of a Tapestry page: Hyperimages, and Hyperactions.

Hyperimages are the interactive <img> tags that show a rendered dataset.

Hyperactions are special <a> tags that enable an alternative way of interacting with hyperimages.

A sample index.html file that can be built upon and edited that includes these objects can be found in tapestry/enchiladas/src/index.html.

Hyperimages

A hyperimage usually looks like so:

<img class="hyperimage" data-dataset="some server-side configuration name">

For timeseries datasets, hyperimages also support the timesteps that they will be rendering (representing). A hyperimage tag with the timerange attribute would look like below:

<img class="hyperimage" data-dataset="some server-side configuration name" data-timerange="5..10">

Hyperactions

A typical hyperaction looks like the following anchor tag:

<a class="hyperaction" href="#" for="turbulence" data-action="position=-100,10,800">Set camera</a>

The for attribute tells Tapestry, which hyperimage this action is associated with. The data-action attribute represents the action. The following actions are currently supported:

Action	Description
position(x, y, z)	Sets the position of the camera
rotate(angle, axis)	Rotates the camera "angle" degrees about the given axis
zoom(z)	Sets the relative camera Z position
link(id1, ...)	Links the viewpoint of other hyperimages to the current hyperimage's camera using their ids
unlink(id1, ...)	Unlinks the camera
play()	Animates through the timeranges of a timeseries dataset
stop()	Stops the animation
switch_config(name)	Switches the server-side configuration of the hyperimage to "name"

Enabling hyperimages with Javascript

Hyperimage tags are enabled using the tapestry function call. In the examples, this is done in tapestry/enchiladas/src/js/main.js and looks like the following call:

$(document).ready(function(){
    $(".hyperimage").tapestry({
        host: "the host name that runs the server",
        ...
    });
});

A series of parameters can be sent to a tapestry object when initializing it. Here are all the supported options along with their default parameters:

host: "", 
width: 512,
height: 512,
zoom: 512,
max_cache_length: 512,
enable_zoom: true,
enable_rotation: true,
animation_interval: 100,
n_timesteps: 1,