Main Page

From ViViz

Jump to: navigation, search

ViViz - ViRBO Visualization Tools

Software for browsing, sorting, and subsetting images and data in a web browser. It is an out-growth of the ViRBO project.

The software collection consists of two components Viviz Gallery and ViViz Overview.

Contents

  1. ViViz Gallery
    1. Basic Use
    2. Installation
      1. local machine
      2. web server
    3. Configuration
      1. File lists
      2. Script
      3. Sprintf
      4. Strftime
      5. Attributes and Filters
        1. Attributes
        2. Filters: Regular Expressions
        3. Filters: Logical
      6. Pre-processing
      7. Performance
  2. ViViz Overview

1. ViViz Gallery

Browse, sort, and subset a collection of pre-generated images in a local or remote directory. (See #Pre-processing for displaying pdf, ps, eps, and svg.)

Demo page

Open in new page | Expand

1.1. Basic Use

To view a list of images located in a directory, append the directory to the string viviz.org/gallery/# for example,

  • viviz.org/gallery/#viviz.org/gallery/images/full/

See #Script if a directory listing is not available. A default set of menus is created based on inspection of the image file names.


A thumbnail directory can be specified (and load time will improve for large galleries):

  • viviz.org/gallery/#viviz.org/gallery/images/full/&thumbdir=../thumb/


If the file names have certain patterns, wildcards can be given that will result in a better set of drop-down menus. For example, the files at [1] may be viewed by entering the URL

  • viviz.org/gallery/#virbo.org/images/pngwalk/ACE/Multi/fulls/
    &thumbdir=../thumbs400/&strftime=product_$Y$m$d.png&start=1999-01-01&stop=1999-01-31

and the default will be to view one year of images and the filter drop-downs will include an option to switch the year in view.

1.2. Installation

ViViz can be used on a #web server or your #local machine.

1.2.1. local machine

  • Browse to viviz.org/gallery/index.htm
  • Select File -> Save As -> index.htm
  • Open saved file in a web browser
  • Edit the xml at the bottom of index.htm with a text editor to add new galleries.
  • Note that you will not be able to dynamically create galleries by appending a URL to the address. Only galleries specified in index.htm may be viewed.

1.2.2. web server

  • curl viviz.org/gallery/index.htm > index.htm
  • Edit the xml at the bottom of index.htm with a text editor to add new galleries.

To allow users to create a gallery by appending a URL to the address of g.htm,

  • curl viviz.org/gallery/proxy.php > proxy.php
  • Edit proxy.php to set allowed URL addresses.

1.3. Configuration

  • The menus can be configured so that subsets of the images can viewed.
  • All configuration information is specified in index.htm or the file viviz.org/gallery/xml/catalog.xml. If configuration information is found in index.htm, catalog.xml is ignored.
  • The configuration information for the gallery in view can be viewed by selecting the "Gallery Configuration" link that appears on the bottom of the page.

The four main configuration elements for a gallery in catalog.xml are

  1. fulldir A URL to the location of the full-sized image files.
  2. thumbdir A URL to the location of thumbnail version of the images.
  3. files or script or sprintf or strftime
    • files is a file containing a list of image file names and their attributes. See Example 1 below and #File_lists.
    • script is a script that generates a list of files using a for loop and sprintf (or strftime). See Example 2 below and #Script
    • sprintf is a formatted string statement with one wildcard and start/stop values. See Example 3 below and #Sprintf.
    • strftime is a formatted time string statement with $Y, $m, $d wildcards and start/stop times. See and #Strftime and the configuration for ACE/Multi for an example.

The only required element is fulldir.

  • If thumbdir is not given, the full-sized images will be scaled after they are loaded by the browser; performance will be poor for large images. See #Pre-processing for server-side generation and caching of thumbnail images.
  • If one of files or script or sprintf or strftime is not specified, the list of available files will be generated by attempting to create a directory listing of fulldir. See #Attributes and Filters for information on subsetting a directory with many files.

Example 1

In this example any one of Test-filelist.xml, Test-filelist.js, Test-filelist.json, or Test-filelist.txt may be used. 

<gallery id="Example1">
    <title>Example 1</title><!-- Optional.  Defaults to fulldir -->
    <files>xml/Test-filelist.{xml,js,json,txt}</files>
    <fulldir>viviz.org/demo/images/demo/full/</fulldir>
    <thumbdir>viviz.org/demo/images/demo/thumb/</thumbdir>
</gallery>

Example 2

In this example, fulldir contains a subdirectory named 171A with files named CR1911_171A_sinlat_a.gif, CR1912_171A_sinlat_a.gif, ..., CR1975_171A_sinlat_a.gif. The following script creates an array with these file names along with an additional attribute that is the Carrington Rotation (CR) number. The file names in this directory also change to end with _a.gif, _b.gif, and _c.gif - see viviz.org/gallery/xml/catalog.xml. 

<gallery id="Example2">
    <title>Example 2</title>
    <fulldir>sun.stanford.edu/synop/EIT/</fulldir>
    <thumbdir>sun.stanford.edu/synop/EIT/</thumbdir>
    <script>
	<![CDATA[
	(function () {
	  files = new Array();
	  var k = 0;
	  for (i = 1911; i < 1976; i++) {
		files[k] = ["171A/CR" + sprintf('%4d',i) + "_171A_sinlat_a.gif",i];
		k = k+1;
	  }
	  return files;						
	})
	]]>
    </script>
</gallery>

Example 3

The same file list as above (without the extra attribute) can be created using 

<gallery id="Example3">
    <title>Example 3</title>
    <fulldir>sun.stanford.edu/synop/EIT/</fulldir>
    <thumbdir>sun.stanford.edu/synop/EIT/</thumbdir>
    <sprintf>171/CR%4d_171A_sinlat_a.gif</sprintf>
    <sprintfstart>1911</sprintfstart>
    <sprintfstart>1975</sprintfstart>
 </gallery>

1.3.1. File lists

Each gallery has an associated list of image file names located in the directory fulldir. Each image can have attributes that can be used to view a subset of the images in fulldir. The general format is 

file1.png, attribute1, attribute2, ..., attributeN
file2.png, attribute1, attribute2, ..., attributeN
...

Quotes should be added if the attribute is a string (the image file names do not need to be quoted): 

file1.png, attribute1, "attribute2", ..., attributeN
file2.png, attribute1, "attribute2", ..., attributeN
...

Examples:

  • viviz.org/gallery/xml/Test-filelist.xml
  • viviz.org/gallery/xml/Test-filelist.js
  • viviz.org/gallery/xml/Test-filelist.txt
  • viviz.org/gallery/xml/Test-filelist.json

1.3.2. Script

This example creates a file list that is equivalent to a text file using a script. 

file1.png, 1
file2.png, 2

Note that the functions sprintf and strftime are available for use. 

<script>
<![CDATA[
	(function () {
	  files = new Array();
	  // Each element of files is an array with the first element
          // being the filename. The other elements are attributes
          // associated with the file.
	  files[0] = ["file1.png", 1];
	  files[1] = ["file2.png", 2];						
	})
]]>
</script>

1.3.3. Sprintf

Uses a Javascript version sprintf that supports the core options of sprintf.

1.3.4. Strftime

Uses a Javascript version strftime of that supports the core options of strftime.

1.3.5. Attributes and Filters

  • Each image may have two or more attributes (the first attribute is always the image file name).
  • Each attribute may have one or more associated filters. When a filter is selected, only a subset of all images will be shown.
  • Each filter has a title and a constraint. Filter constraints can be either regular expressions (for string attributes) or logical expressions (for numeric attributes).

1.3.5.1. Attributes

At minimum, each attribute must have a name. All attributes specified in the image file list must be given in the catalog in the correct order. For example, if the file list contained 

File1.png, 4.0
File2.png, 5.0
...

the attributes could be named as follows: 

<attribute>
	<name>Filename</name>
</attribute>
<attribute>
	<name>Attribute 1</name>
	<unit>nT&#183;hr</unit><!-- Use Unicode for special characters -->
	<format>%.0f</format><!-- How the numbers should be displayed (using sprintf) -->
</attribute>

1.3.5.2. Filters: Regular Expressions

The following attribute node in catalog.xml will result in a constraint menu with options of viewing all files and only files which match the expression T1.*. 

<attribute>
	<name>Filename</name>
	<filters>
		<filter>
			<title>All</title>
			<value>.*</value>
		</filter>
		<filter>
			<title>T1.*</title>
			<value>T1.*</value>
		</filter>
	</filters>
</attribute>

1.3.5.3. Filters: Logical

  • A filter may operate on the attribute in which it is enclosed (by using the this keyword.
  • It usually only makes sense to apply logical constraints to attributes that are given as numbers (and not quoted) in the file list.

The following attribute node will result in a contraint menu for viewing images with with options of viewing all files and only images for which this attribute is greater than 10. 

<attribute>
	<name>Duration</name>
	<unit>hour</unit>
	<format>%d</format>
	<filters>
		<filter>
			<title>All</title>
			<value>true</value>
		</filter>
		<filter>
			<title>Duration &gt; 10</title>
			<value>this gt 10</value>
		</filter>
	</filters>
</attribute>

1.3.6. Pre-processing

If images are available in a vector format, they can be rasterized on the ViViz server using ghostscript or convert by specifying a pre-processing URL in catalog.xml.

Examples of use are given in viviz.org/gallery/xml/catalog.xml - search on thumbpreprocess and fullpreprocess.

1.3.7. Performance

The time that it takes for the image gallery to load depends primarily on:

  • The number of thumbnails that are shown in a subset;
  • The size of the thumbnails; and
  • How fast the thumbnail server can serve each thumbnail.

The number of thumbnails in a subset can be reduced by modifying the filters so that fewer are shown in each view.

The thumbnail size can be reduced by installing convert.cgi or gs.cgi on the server and using thumbpreprocess (the first load will be slow as the images are modified and cached).

The performance of the server can be determined by using Firebug or Chrome's debugger and looking at the network timing events.

If the full-sized images are large, save them as interlaced (low quality image will be shown first image will progressively improve as more of the image download completes).

2. ViViz Overview

Browse data over a long time span (Requires TSDS and Autoplot servers on the back-end).

  • Example of use: virbo.org/overview
Retrieved from "viviz.org//Main_Page"
Views
  • Article
  • Discussion
  • View source
  • History
Personal tools
  • Log in / create account
Navigation
  • Main Page
  • Community portal
  • Current events
  • Recent changes
  • Random page
  • Help
  • Donations
Toolbox
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Printable version
Related searches:
gallery attribute example sprintf script
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.