Skip to content

VIOLA Developer Manual

Jump to bottom
Johanna Senk edited this page Jul 5, 2018 · 3 revisions

This Developer Manual gives a technical overview of the tool VIOLA and is supposed to help anybody who wants to work on it.

Dependencies

  • three.js: a JavaScript library for web-based interactive 3D rendering.
    The source code is available on GitHub and can be downloaded here.
  • chroma.js: a JavaScript library for color manipulation.
    The source code is available on GitHub and can be downloaded here.

Architecture

The tool consists of various HTML, CSS, and JavaScript files.

index.html

The file index.html is the main file of the tool to be opened in a browser (Google Chrome preferred) for starting VIOLA.
The file contains the basic DOM tree and calls to the various JavaScript scripts used by the program.

jscolor folder

The folder contains the jscolor Color Picker.
We use jscolor to be independent of the browser's default color types.

css folder

The folder contains two CSS files. The main style file is visu.css, but the styles for the menu bar are defined in menu.css.

js folder

The folder contains all JavaScript files and the libs folder with the libraries three.min.js and chroma.min.js.

Here is a quick explanation of all the JavaScript files:

  • Main.js: core code of the program and basic functions for the user interface
  • MarchingCubes.js: implementation of the Marching Cubes in JavaScript used to display the 3D timeline (view 4)
  • Visu2D.js: code for view 1
  • Visu3D.js: code for views 2 and 4
  • VisuCorrelation.js: code for the cross-correlation panel (under construction)
  • VisuData.js: code for import of data files and for storing the data to make it available to all representations; functions to shape the data
  • VisuGraph.js: code for view3

Except for Main.js, all files are organized as JavaScript classes.

How the program works

Starting VIOLA

Opening index.html in a web browser directly executes Main.js and loads all other JavaScript files.

Setup

Once the configuration is validated, the init() function is called. Its role is to setup all the elements needed to run the visualization.
The init() function creates the HTML elements in the DOM tree according to the parameters the user specified, creates the listeners and callbacks for importing the data files, creates the objects to handle the different representations, and then launches the main rendering loop.

Main loop

The main loop is represented by the render() function. Its role is to call the requestAnimationFrame() function with itself as a parameter so that the render() function will be called again the next time the browser is ready to draw a new frame.
The update() function is used to tell the 3D panel (views 2 and 4) to update its state according to the new states of keys (pressed or not). The purpose of this is to have smooth animation when moving the camera around, while all the other animations only change when the time steps (and thus the data to be displayed) changes. If the updated Boolean is set to true, then we draw again all panels. The updated Boolean is used to know if anything changed that needs the program to draw again. The events setting updated to true can be the following: the camera moved, the time step changed, or some parameters where changed (color, size of elements).

Clone this wiki locally