Using The Web App

This page will at some point be a tutorial-type introduction to how to use the Helga Web App. For now, it is a place to outline conceptually how the Web App will work.

Make sure to check out the mockup at the bottom of this page under the section "Attachments".

General Info

The Web App is a customizable interface that splits functionality into "widgets" - movable, resizable panes on a single page that can be created and destroyed at will. Widgets are confined to the "workspace" area of the web app, which has any number of tabs, allowing for many pages of widgets. The widgets minimize to a dock on each tab. Each user may save their custom "layout", a set of tabs and widgets for each tab that will be loaded on page load or user login.

Asset Selection

Asset selection will be done mostly visually via drag and drop, with assets represented by their preview images. These assets will be dropped onto widgets in order to trigger a standard "changeAsset" function that each widget will have. The functionality of changeAsset will vary on a per-widget basis, but some examples are:

  • The AttributeEditor widget's changeAsset function loads the asset's attributes into its grid display and checks the user's permission level on that asset. If they have appropriate permissions they are allowed to edit those attributes.
  • The PreviewBrowser widget's changeAsset function loads the asset's past and present preview images into a display with the current preview featured prominently. Users are allowed to click on other previews to enlarge them, and if they have appropriate permissions to modify that asset's attributes.

There will be several sources for assets, all of which will allow their assets/previews to be dragged onto widgets to populate the widget's content.

  • TreeView: presents a visual tree-type view of the asset structure. Users will be able to drag asset names from that list onto widgets.
  • TableView: a table-style view of the asset structure; the same info as TreeView? but with a different interface. Comparable to the "shots" page on Helga v0.2 (http://anim.hampshire.edu/wc/shots.php). Users will be able to drag asset previews to widgets.
  • SearchBar: will be able to search Helga for assets by name, full name, description, log entry text, etc. Will try to be as inclusive as possible in order to make it as easy as possible to find an asset with a limited amount of information.
  • Bookmarks: will be featured prominently on the page in a grid of asset previews. Users will be able to store assets that they access often in this grid by dragging assets onto it; the asset will then be represented by its preview. Previews in the grid may then be dragged onto widgets.

I believe the main method of accessing asset information will be through the ViewAsset widget, a meta-level widget that defines a minimum amount of original functionality, but rather collects useful asset-related widgets into one group. Widgets it collects will be:

  • PreviewBrowser: allows the viewing of past and current previews, and allows the setting of new previews.
  • AttributeEditor: a grid that display all of an asset's attributes. Allows editing of those attrs if the user has appropriate permission.
  • TaskEditor: displays the asset's task tree. Allows editing of those tasks if the user has permission.
  • Scripts: displays all scripts with Helga that may be executed with the asset as a target, such as render, composite, or a metascript that runs render, then composite.
  • FileBrowser: displays all files associated with the asset. Allows the viewing of those files that are web accessible.
  • LogBrowser: displays a grid of all log entries posted to the asset. Allows posting of new entries with permission.

The ViewAsset widget is comparable to the viewShot page in Helga v0.2 (http://anim.hampshire.edu/wc/viewShot.php?shot_id=8).

Login Process

When a user logs in, if a Helga user cookie is found on that user's computer, they will be logged in as that user. Users should be careful not to enable persistent login (done through the Login widget) on public machines.

If no cookie is found, the user is logged in as guest, which in turn loads "guest"'s default layout. This layout will include the Login widget, presenting users immediately with a way to log in as themselves. Once the user logs in, the guest layout will be replaced with that user's custom layout.

Some Example Workflows

The crew member: animator, lighter, TD.

  • Widgets: Assignments, ViewAsset
  • Can view their assigned tasks ("light this shot", "animate this character") immediately on login.
  • Can drag a task to the ViewAsset widget to load asset information
  • Can post log entries (w/ or w/o attached files which will be available immediately in the FileBrowser)
  • Can execute scripts
  • For a less restrictive view they could also use the TreeView or TableView widgets to browse the whole asset structure.

The project admin: director, producer.

  • Widgets: TableView/TreeView, ViewAsset
  • Can do all things the crew member can.
  • Can edit task trees.
  • Can assign users to tasks by dragging them from /users or /<project name>/users to a specific task.
  • Can create new asset previews from files.
  • Can drag assets around within TableView/TreeView, for example to reorder the shots in the film.

The site admin.

  • Widgets: TableView/TreeView, ViewAsset
  • Can do all things that crew members and project admins can.
  • Can view the entirety of the asset structure.
  • Can add/remove/modify assets of any type.

Attachments