Software for browsing, sorting, and subsetting pre-generated images in a web browser.
Table of Contents
If remote images are available from an HTTP address and their URLs follow a simple pattern, the images can be viewed by appending a configuration string to the URL http://viviz.org/#. For alternative usage, including for viewing local images, see the Installation section below.
The directory http://sohowww.nascom.nasa.gov/data/synoptic/sunspots_earth/ contains image files with a pattern that can be represented by a template sunspots_512_$Y$m$d.jpg. Browse them using ViViz using the link
The parameters passed to ViViz are
dirstrftimestartstop
Given start and stop, one filename per day is generated by substituting $Y, $m, and $d in strftime; the final URL created by prepending dir to the list of filenames.
The directory http://sohowww.nascom.nasa.gov/data/synoptic/sunspots_earth/ contains images of two sizes. To specify different full and thumbnail images, use
The program creategallery.py shows an example of using ViViz after a Python program creates a large set of images.
git clone https://github.com/rweigel/viviz/
cd viviz/demos
python creategallery.py # Creates images, gallery configuration, and opens in browser
If images to view are not accessible from a public web page, installation is required.
A. In a web browser, open
http://viviz.org/index-inline.htm, select File > Save As > index.htm and save as /tmp/index.htm
or
B. On the command line, enter
curl http://viviz.org/index-inline.htm > /tmp/index.htm
and then open file:///tmp/index.htm in a web browser.
The drop-down menus can be modified by editing the configuration near the top of index.htm with a text editor.
Arguments to index.htm can be sepecified in the address bar, e.g.,
file:///tmp/index.htm#dir=file:///path/to/images/&strftime=...&start=...&stop=...
If you have a directory of images and would like to allow them to be easily browsed using ViViz, place the following in a file named index.htm in a directory containing the images.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://viviz.org/#dir=http://sohowww.nascom.nasa.gov/data/synoptic/sunspots_earth/&fullstrftime=sunspots_1024_$Y$m$d">
</head>
</html>When a user enters the directory URL into a brwser address bar, they are redirected to
In this mode, fullfiles and thumbfiles may be relative URLs to a file list.
Installation options:
curl http://viviz.org/index-inline.htm > /server/root/dir/viviz/index.htm
# Open http://server/viviz/(configuration variables are in index.htm)
or
cd /server/root/dir/; git clone https://github.com/rweigel/viviz
# Open http://server/viviz(configuration variables are in index.js)
In this mode, fullfiles and thumbfiles can be absolute URLs to a file list. This allows, for example, a list of files to be stored in a remote repository.
The full application includes a web server and a proxy server that retrieves remote file lists and remote catalogs and requires the installation of Node.js.
git clone https://github.com/rweigel/viviz
# or
curl https://codeload.github.com/rweigel/viviz/zip/master > viviz-master.zip
unzip viviz-master.zip; mv viviz-master vivizthen
cd viviz
npm install --production
npm start
And then open http://localhost:8002/ with a web browser.
The variable VIVIZ["config"] in index.htm (or index.js, depending on installation method) contains all of the application options.
Any configuration option that appears in VIVIZ["config"] is over-ridden by a same-named option that appears in a gallery configuration or a parameter in the query string.
The gallery configuration options are stored in an object in VIVIZ["catalog"].
To see the gallery configuration for the gallery in view, select the Gallery configuration link at the top of the page. See also index.htm (or index.js) for many examples of gallery configurations. The catalog http://viviz.org/#catalog=Test shows many of the configuration options and features.
The main gallery configuration parameters are
fulldirordir: A base URL for the location of full-sized image files (default is same directory of index.htm)thumbdir: A base url for the location of reduced-size versions of the full-sized images (default isfulldir).fullfilesorfiles: A list of image filenames that are appended tofulldir.thumbfiles: A list of image filenames that are appended tothumbdir(default isfullfiles).
The format of the lists in fullfiles and thumbfiles is either a Javascript array of the form
[["demo-2001.png"],["demo-2002.png"],["demo-2003.png"],["demo-2004.png"]]
or a quoted new-line separated string
"demo-2001.png\ndemo-2002.png\ndemo-2003.png\ndemo-2004.png"
or a relative relative URL to a JSON or text file for a [Web Server](#Web Server) installation:
path/fullfiles.json
path/fullfiles.txt
and an absolute URL to an external JSON or text file for a [Full Application](#Full Application) installation:
http://server/path/fullfiles.json
http://server/path/fullfiles.txt
When the list of files is long and the filenames have a pattern, the list of image URLs can be represented by sprintf or strftime pattern along with start and stop indices or dates.
sprintfis a formatted time string expression (e.g.,data-$04d.png)strftimeis a formatted time string expression (e.g.,data-$Y$m$d.pngfor files of the formdata-19990412.png)start: Either an integer (forsprintf) or an ISO8601 datestop: Either an integer (forsprintf) or an ISO8601 date
When the list of full- or thumb-sized image files cannot be described using the above parameters, the lists can be specified using a script, where
scriptis a script that generates a list of files.
If any of the above parameters (excluding start and stop) applies only to either the full- or reduced-sized images, the parameters should be prefixed by full or thumb, respectively.
Any Javascript code that can run in a browser is allowed and the functions https://github.com/alexei/sprintf.js and strftime are available.
The following three examples create the same list of four files. Note that % instead of $ must be used when using sprintf or strftime in a script. For the non-script parameters above, $ must be used.
function () {
files = []
for (i = 0; i < 4; i++) {
files[i] = ['demo-200' + (i+1) + '.png']
}
return files
}function () {
files = []
for (i = 0; i < 4; i++) {
files[i] = ['demo-' + sprintf('%02d',i+1) + '.png']
}
return files
}function () {
files = []
for (i = 0; i < 4; i++) {
files[i] = ['demo-' + strftime('%Y',2000+i+1) + '.png']
}
return files
}- Each image can have zero or more attributes and each attribute can have zero or more filters that allow for showing only a subset of images.
- Filters expressions can be either regular expressions (for string attributes) or logical expressions (for numeric attributes). To refer to the value of the attribute in logical expressions, use the
thiskeyword.
Each image in a file list can have zero or more that can be used to view a subset of the images. The JSON format is
[
["file1.png", "attribute1", "attribute2", ..., "attributeM"],
...
["fileN.png", "attribute1", "attribute2", ..., "attributeM"]
]
and the ASCII format is
file1.png, attribute1, attribute2, ..., attributeM
fileN.png, attribute1, attribute2, ..., attributeM
In the JSON case, attributes may be either strings or numbers (do not quote attributes that are numbers). In the ASCII case, all attributes are assumed to be strings unless they can be converted to floating point numbers.
To give attributes names, see the configuration for http://viviz.org/#catalog=Test&id=Demo/05d; the named attribute appears in the attribute drop-down menu.
See the configuration for http://viviz.org/#catalog=Test&id=Demo/05d for an example of allowing attributes to be filtered. (Select Age in the attribute drop-down menu and a filter drop-down will appear).
- Use thumbnail images.
- Use interlaced PNG encoding for large full-sized images.
- Use https://pngquant.org/ for compressing PNG images.
- In gallery mode, the configuration variable
lazyLoadMaxcontrols how many thumbnail images are pre-loaded before and after the active thumbnail. It also controls how many full-sized images are pre-loaded. For small values of the parameterframeRate, which controls the frame rate (in milliseconds) when the play button is pressed, you may need to increaselazyLoadMaxif blank images are shown as the animation progresses.