The HTML5 Annotation Tool (HAT) is a JavaScript/HTML5 toolkit for quickly and easily annotating images and videos in a web browser. With just a few options, you can create a full-featured widget for markerless motion capture, and all data can be exported as a JSON string for computations in other programs. The following documentation explains the options available.
Examples
Below are examples of different classes and options available in HAT. Take a look at the source for each page; there is a script tag in the header with code and comments.
Videos
- Video Example 1
- Video Example 2
- Zoomable Video Example 1
- Zoomable Video Example 2
- Zoomable Video Example 3
- Multiple Videos Example 1
- Video Annotation Widget Example 1
- Video Annotation Widget Example 2
- Video Annotation Widget Example 3
Images
- Image Example 1
- Zoomable Image Example 1
- Multiple Images Example 1
- Image Annotation Widget Example 1
VideoAnnotationWidget
A widget for annotating videos. Creates a Video, adds an AnnotationCanvas on top, creates a VideoScrubber, and adds a VideoInputSet and VideoAnnotationInputSet. Takes care of all HTML structuring and formatting necessary to create the widget. To create a new VideoAnnotationWidget, the user must provide the DOM element in which the widget will go, the path to the video file for annotation, and an object literal containing any options for the AnnotationCanvas and Video. See the AnnotationCanvas and Video documentation for more details about the available options.
var widget = new VideoAnnotationWidget(
document.getElementById(`widgetDiv'),
`/path/to/video.mp4',
{
markerSets: [`HEAD', `LHND'],
autoplay: true,
scale: 50
}
);
ImageAnnotationWidget
A widget for annotating images. Creates an Image, adds an AnnotationCanvas on top, and creates an ImageAnnotationInputSet. Takes care of all HTML structuring and formatting necessary to create the widget. To create a new ImageAnnotationWidget, the user must provide the DOM element in which the widget will go, the path to the image file for annotation, and an object literal containing any options for the AnnotationCanvas and Image. See the AnnotationCanvas and Image documentation for more details about the available options.
var widget = new VideoAnnotationWidget(
document.getElementById(`widgetDiv'),
`/path/to/image.jpg',
{
markerSets: [`HEAD', `LHND'],
width: 500,
zoomable: true
}
);
EventHandler
A special utility object for handling the custom events defined in the various HAT classes. Use this utility rather than regular JavaScript event handling methods. EventHandler is an object literal, so methods are simply called directly on it; there is no need to create an instance.
Methods
addCustomListener(element, type, handler, scope, once) - Add a listener for a custom event fired by the specified element. Type is a string specifying the event type. Handler is the function to execute when the event is fired. Scope is the scope in which ``this'' applies for the handler. Defaults to the handler function. Once is an optional boolean specifying whether the listener should be automatically removed after the event is fired once. Used for load events where the action should not be called again after loading the first time.
function frameAlert() {
alert(this.getCurrentFrame());
}
EventHandler.addCustomListener(
video,
`timeupdate',
frameAlert,
video
);
removeCustomListener(element, type, handler) - Removes a listener for a custom event fired by the specified element. Type is a string specifying the event type. Handler is the function to remove. Handler must be a reference to the exact same function used when adding the listener, not an anonymous function with the same body.
EventHandler.removeCustomListener(
video,
`timeupdate',
frameAlert
);
fire(element, type) - Fires an event for the specified element. Type is a string specifying the event type. Should only be used inside classes created for HAT.
EventHandler.fire(this, `timeupdate');
URL
A special utility class for parsing URL arguments. Can be used to retrieve one or all URL arguments, or to parse the arguments into an object literal that can be passed as options to one of the HAT classes. As URL is an object literal, there is no need to ever create an instance.
Methods
get(name) - Returns the specified URL argument.
var name = URL.get(`name');
getAll() - Returns an object literal mapping all arguments to their values.
var args = URL.getAll();
parseOptions() - Returns an object literal that decodes the URL arguments such that they will work as options for a HAT class.
var options = URL.parseOptions();
var video = new Video(
document.getElementById(`videoDiv'),
`/path/to/video.mp4',
options
);
DisplayElement
DisplayElement is the parent of all classes producing the main visual output: Video, Image, and Canvas. All DisplayElements can be scaled, padded, labeled, and zoomed. When creating a DisplayElement, as detailed in the Video, Image and Canvas sections, options are passed in using an object literal:
var options = {
scale: 0.5,
padding: 25
};
Options
center - (Array) An (x, y) pair specifying the center point around which the DisplayElement should be focused when initially loaded. The center point is only used for DisplayElements with zooming enabled and with a starting zoom level greater than 1.0. Defaults to the center of the DisplayElement.
center: [360, 240]
height - (integer) The height of the DisplayElement in pixels. If no width is specified, the DisplayElement will be scaled to the exact height. If a width is given, the DisplayElement is scaled to fit within the bounding box formed by the specified height and width. Defaults to the natural height of the element unless a width or scale is provided.
height: 350
label - (String) A name or label for the DisplayElement. Labels are displayed in bold text below the DisplayElement. No label is displayed by default.
label: `Video 1'
mapDiv - (DOM Element) The DOM element in which to create the zoom navigation reference. Defaults to the same DOM element as the DisplayElement was created in. Ignored for DisplayElements with zooming disabled.
mapDiv: document.getElementById(`mapDiv')
mapScale - (float) The factor by which the zoom navigation reference should be scaled relative to the DisplayElement. For example, a scale factor of 0.2 for a 640x360 Video would make the zoom reference 128x72. Defaults to 0.35. Ignored for DisplayElements with zooming disabled.
mapScale: 0.35
maxZoom - (float) The maximum zoom factor. This specifies the maximum level the user may zoom in to. Defaults to 10.0. Ignored for DisplayElements with zooming disabled.
maxZoom: 5.5
minZoom - (float) The minimum zoom factor. This specifies the minimum level the user may zoom out to. Defaults to 1.0. Ignored for DisplayElements with zooming disabled.
minZoom: 2.0
padding - (integer) The amount of padding to provide around the DisplayElement (in pixels). Padding is applied evenly to all sides. Defaults to 0.
padding: 15
scale - (float) The factor by which the element should be scaled relative to its full resolution. For example, a scale factor of 0.5 would resize a 1280x720 video to 640x360. Defaults to 1.0 unless a height or width is provided.
scale: 0.75
width - (integer) The width of the DisplayElement in pixels. If no height is specified, the DisplayElement will be scaled to the exact width. If a height is given, the DisplayElement is scaled to fit within the bounding box formed by the specified height and width. Defaults to the natural width of the element unless a height or scale is provided.
width: 600
zoom - (integer) The initial zoom factor. Specifies the zoom level that should be used when the DisplayElement first loads. Defaults to the minimum zoom level. Ignored for DisplayElements with zooming disabled.
zoom: 3.65
zoomable - (boolean) Specifies whether zooming controls should be enabled on the DisplayElement. Zooming allows users to zoom in to an DisplayElement, which can be particularly useful when annotating hard-to-see points. All other zoom related options are ignored if zoomable is set to false.
zoomable: true
Methods
getHeight() - Returns the current height of the DisplayElement.
var height = video.getHeight();
getHTMLElement() - Returns the DOM Element created (video, img or canvas).
var img = image.getHTMLElement();
getPadding() - Returns the current padding size around the DisplayElement.
var padding = canvas.getPadding();
getRawHeight() - Returns the height of the element according to its natural resolution.
var height = video.getRawHeight();
getRawWidth() - Returns the width of the element according to its natural resolution.
var width = image.getRawWidth();
getScale() - Returns the factor by which the element is scaled relative to its natural resolution.
var scale = video.getScale();
getTotalHeight() - Gets the height of the DisplayElement including padding.
var height = canvas.getTotalHeight();
getTotalWidth() - Gets the width of the DisplayElement including padding.
var width = canvas.getTotalWidth();
getWidth() - Returns the current with of the DisplayElement.
var width = image.getWidth();
getZoomFactor() - Gets the factor by which the DisplayElement is currently zoomed.
var zoom = video.getZoomFactor();
isLoaded() - Checks if the DisplayElement is loaded.
var loaded = video.isLoaded();
setCenter(center) - Centers the zoomed DisplayElement around the specified (x, y) coordinates.
image.setCenter([250, 300]);
setHeight(height) - Sets the height of the DisplayElement.
video.setHeight(250);
setLabel(label) - Sets the label for the DisplayElement.
image.setLabel(`Image 1');
setPadding(padding) - Sets the padding around the DisplayElement.
canvas.setPadding(20);
setScale(scale, width, height) - Scales the DisplayElement depending upon the parameters provided. If only a scale factor is provided, the DisplayElement is scaled relative to the element's natural resolution. If only width or height are provided, the DisplayElement is scaled to that exact dimension. If both width and height are provided, the DisplayElement is scaled to fit within the bounding box created by the specified height and width.
video.setScale(0.5);
image.setScale(1, 250, 300);
setWidth(width) - Sets the width of the DisplayElement.
canvas.setWidth(500);
setZoom(zoom) - Sets the zoom factor for the DisplayElement.
video.setZoom(3.5);
Events
created - Fired when the DisplayElement is first created, but before the internal element has loaded.
loaded - Fired once the element loads.
recentered - Fired whenever a zoomed DisplayElement is recentered.
resized - Fired when the DisplayElement is resized.
update - A generic update event fired in conjunction with other, more specific events.
zoomupdate - Fired whenever the zoom level changes.
Canvas
Canvas is a wrapper around an HTML5 canvas. Standardizes canvas functionality for easier use. Subclass of DisplayElement. To create a new Canvas, the user must provide the DOM element in which the canvas will be created and an object literal of options, including a height and width.
var canvas = new Canvas(
document.getElementById(`canvasDiv'),
{ height: 300, width: 500 }
);
Options
source - (DisplayElement) A Canvas may duplicate an existing DisplayElement. For example, by setting the source to a Video, the Canvas will draw the current frame of the Video as it plays.
source: video
Methods
clear() - Clears the contents of the canvas.
canvas.clear();
draw(function) - Executes the function passed as a parameter to draw elements to the canvas. Inside the function, ``this'' refers to the Canvas instance.
canvas.draw(function() {
var ctx = this.getContext();
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 250, 250);
});
getContext() - Returns the canvas context.
var ctx = canvas.getContext();
setSource(source) - Sets the source DisplayElement for the Canvas to duplicate.
canvas.setSource(video);
Image
A wrapper class around images. The primary purpose of Image is to allow annotation and zooming of still images. Subclass of DisplayElement. To create a new Image, the user must provide the DOM element in which the img element will be created, the path to the image source file, and (optionally) an object literal of options.
var image = new Image(
document.getElementById(`imageDiv'),
'/path/to/image.jpg',
{ width: 600 }
);
Methods
getSource() - Returns the file path for the image source file.
var imageFile = image.getSource();
Video
Video is a wrapper around HTML5 videos. Video handles the loading and playback of videos in the web browser, and allows customization through simple options. Subclass of DisplayElement. To create a new Video, the user must provide the DOM element in which the video element will be created, the path to the video source file, and (optionally) an object literal of options.
var video = new Video(
document.getElementById('videoDiv'),
'/path/to/video.mp4',
{ scale: 0.4, loop: false }
);
Options
autoplay - (boolean) Specifies whether the video should automatically start playing once loaded. Defaults to false.
autoplay: true
frameRate - (floating point) The frame rate of the video source file. Defaults to 29.97.
frameRate: 24
loop - (boolean) Specifies whether the video should loop continuously on playback. Defaults to true.
loop: false
volume - (floating point) A number from 0 to 1.0 specifying the volume of the audio. Defaults to 0 (muted).
volume: 0.6
Methods
getCurrentFrame() - Returns the number of the current frame of the video.
var frame = video.getCurrentFrame();
getCurrentTime() - Returns the current time index of the video in seconds.
var time = video.getCurrentTime();
getFrameLength() - Returns the total length of the video in frames.
var frames = video.getFrameLength();
getSource() - Returns the file path of the video source file.
var videoFile = video.getSource();
getTimeLength() - Returns the total length of the video in seconds (as a floating point).
var seconds = video.getTimeLength();
isEnded() - Checks if the video has reached the end.
if (video.isEnded()) {
// Do something
}
isPlayable() - Checks if the video is ready to begin playing.
if (video.isPlayable()) {
video.play();
}
isPaused() - Checks if the video is currently paused.
if (video.isPaused()) {
video.play();
}
play() - Begins playing the video if it is playable.
video.play();
pause() - Pauses video playback.
video.pause();
setFrame(frame) - Pauses the video and jumps to the specified frame number.
video.setFrame(16);
setLoop(loop) - Sets whether the video should loop on playback.
video.setLoop(false);
setTime(time) - Pauses the video and jumps to the specified time index in seconds.
video.setTime(3.54);
setVolume(volume) - Sets the audio to the specified volume level.
video.setVolume(0.8);
step(step) - Pauses playback and steps the video the specified number of frames forward. Use a negative step to move backward.
video.step(4);
video.step(-3);
Events
loaded - Fired when the video is ready to play.
metadata - Fired when metadata about the video is available, but it is not yet ready to play.
play - Fired whenever the video begins playing.
pause - Fired when the video is paused.
timeupdate - Fired every 25 ms during playback.
AnnotationCanvas
A specialized Canvas for annotating DisplayElements. When the user clicks on a point, a marker appears. Creates a set of ColorButtons for switching between markers. Displays the currently selected marker below the DisplayElement. Also includes timelines indicating keyframes placed when annotating a video. Subclass of DisplayElement and Canvas. To create a new AnnotationCanvas, the user must provide the DisplayElement that is being annotated, and an object literal containing options including the marker set names.
var ac = new AnnotationCanvas(
video,
{ markerSets: [`HEAD', `LELB'] }
);
Options
buttonDiv - (DOM Element) The DOM element in which the marker buttons should be placed. Defaults to the same DOM element as the canvas.
buttonDiv: document.getElementById('x')
markerSets - (Array) An array of the marker sets to use for annotation. Several types of arrays are supported. The user may simply provide an array of strings representing the names of the markers, and the default colors will be used. The user may also provide an array of object literals with the fields color, name, and/or details. Finally, the user may explicitly provide an array of MarkerSet instances. There is no default; the user must explicitly provide the marker set options.
markerSets: [`HEAD', `RHND']
markerSets: [{
name: `HEAD',
color: `#0f3',
details: `The bridge of the nose.'
}]
markerSets: [new MarkerSet({
name: `HEAD',
details: `The bridge of the nose.'
})]
markerStyle - (String) The style of marker to use. The built-in options are `annotation' (a large circle with a plus symbol in the center, to be used when actively annotating) and `playback' (a smaller colored dot, to be used for playing back completed annotations). Defaults to `annotation'.
markerStyle: `annotation'
referenceDiv - (DOM Element) The DOM element in which the details about the currently selected track should be placed. Defaults to the same DOM element as the canvas (right below it, specifically).
referenceDiv: document.getElementById(`x')
timelineDiv - (DOM Element) The DOM element in which the annotation timelines should be created if a video is being annotated. Defaults to the same DOM element as the canvas (below the marker reference info).
timelineDiv: document.getElementById(`x')
trails - (boolean) Specifies whether to include checkboxes that turn on/off motion trails for each annotation point. Defaults to false.
trails: true
Methods
clearMarkers() - Clears all markers for all tracks.
ac.clearMarkers();
getCurrentMarker() - Returns the number of the current marker. For images, this will always return 0. For videos, this returns the current frame number.
var markerIndex = ac.getCurrentMarker();
getCurrentSet() - Returns the currently selected MarkerSet.
var markerSet = ac.getCurrentMarkerSet();
parse(json) - Parses the specified JSON string and loads the annotation data stored inside. Should only be used on strings generated by the stringify method.
ac.parse(`{``HEAD'':[[0, 0, 0, 0]]');
redo() - Redo the previously undone annotation action.
ac.redo();
setConnect(connect) - Draws black lines connecting the points specified in the two-dimensional array connect. There are three possible types of connection. Specifying the names of two markers will connect those two points directly. Specifying the names of three markers will draw a line from the first marker to the midpoint of the other two. Specifying four names will draw a line from the midpoint of the first two to the midpoint of the last two.
ac.setConnect([
[`HEAD', `LSHO', `RSHO'],
[`LSHO', `LELB']
]);
setTrails(trails) - Shows the motion path for each of the specified markers.
ac.setTrails([`HEAD', `RHND']);
stringify() - Converts the annotation data into a JSON string. Creates a mapping from the name of each marker to its corresponding annotation. See MarkerSet for details about the format of MarkerSet JSON strings.
var json = ac.stringify();
undo() - Undo the previous annotation action.
ac.undo();
Events
redo - Fired whenever redo() is called.
setupdate - Fired when a different marker set is selected, a marker is placed, or a marker is moved.
undo - Fired whenever undo() is called.
Marker
A class for tracking the position and visibility of markers. Primarily used as elements of a MarkerSet, which is used for tracking points in an AnnotationCanvas. To create a new Marker, the user need only provide an object literal containing any options.
var marker = new Marker();
var marker = new Marker({
position: [250, 300]
});
Options
position - (Array) An (x, y) pair specifying the position of the marker. Defaults to (0, 0).
position: [250, 300]
userDefined - (boolean) Specifies whether the marker position was determined by the user or by interpolation. Defaults to false.
userDefined: true
visible - (boolean) Specifies whether the marker is visible. Used for annotations in which a marker can go completely off screen. Defaults to false.
visible: true
Methods
clear() - Clears all settings for the Marker and restores the default values specified above.
marker.clear();
getX() - Returns the x-coordinate of the Marker.
var x = marker.getX();
getY() - Returns the y-coordinate of the Makrer.
var y = marker.getY();
isUserDefined() - Checks if the Marker position was user-defined or determined by interpolation.
var isUser = marker.isUserDefined();
isVisible() - Checks if the Marker is currently visible.
var isVisible = marker.isVisible();
parse(json) - Parses the specified JSON string and restores the Marker settings. See the stringify method for details on the format of the JSON string.
marker.parse(`[25, 79, 1');
setPosition(x, y) - Sets the position of the Marker to the specified (x, y) point.
marker.setPosition(250, 300);
setUserDefined(userDefined) - Sets whether the Marker position was user-defined.
marker.setUserDefined(true);
setVisible(visible) - Sets whether the Marker is visible.
marker.setVisible(true);
stringify() - Returns a JSON string representing the Marker. Creates an array containing the x- and y-coorindates followed by a boolean specifying whether the position was user-defined. If the Marker is not visible, the array is empty.
marker.stringify();
MarkerSet
A wrapper around sets of Markers. Each set has a name, color, and details about the point being annotated. The user must only provide an object literal containing options for the set.
var markerSet = new MarkerSet({
color: `red',
name: `LANK'
});
Options
color - (String) The name or hex code of the color that should be associated with the set. Defaults to `\#fff'.
color: `#f09'
details - (String) A longer description of the annotation point. Defaults to an empty string.
details: `The bridge of the nose'
name - (String) A short name indicating the point being annotated. Defaults to an empty string.
name: `HEAD'
size - (integer) The size of the set. Defaults to 0.
size: 20
Methods
clear(start, end) - Clears all markers in the specified range (inclusive). If no end is provided, only the exact marker specified will be cleared.
markerSet.clear(10, 18);
markerSet.clear(7);
disable() - Disables the MarkerSet, preventing any changes to the markers.
markerSet.disable();
enable() - Enables the MarkerSet.
markerSet.enable();
getColor() - Returns the color of the set.
var color = markerSet.getColor();
getDetails() - Returns the string of details about the annotation point.
var details = markerSet.getDetails();
getName() - Gets the name of the set.
var name = markerSet.getName();
getMarker(marker) - Returns the specified Marker.
var marker = markerSet.getMarker(8);
getNextUserDefined(frame) - Returns the number of the next user-defined Marker beginning at and including the specified frame. Returns -1 if there is no next.
var next =
markerSet.getNextUserDefined(11);
getPreviousUserDefined(frame) - Returns the number of the previous user-defined Marker beginning at and including the specified frame. Returns -1 if there is no previous.
var prev =
markerSet.getPreviousUserDefined(11);
getSize() - Returns the size of the set.
var size = markerSet.getSize();
isEnabled() - Checks if the set is enabled.
var enabled = markerSet.isEnabled();
parse(json) - Parses the specified JSON string and restores the marker data.
markerSet.parse(
`[[0, 0, 0, 0], [1, 0, 2, 1]]'
);
setColor(color) - Sets the color of the MarkerSet.
markerSet.setColor(`red');
setDetails(details) - Sets the details for the annotation point.
markerSet.setDetails(
`The bridge of the nose'
);
setName(name) - Sets the name of the set.
markerSet.setName(`HEAD');
setSize(size) - Sets the size of the set.
markerSet.setSize(20);
stringify() - Returns a JSON string representing the annotation data in the set. Creates a two-dimensional array. Each inner array represents a single marker. The inner array contains its index, the Marker's x- and y-coordinate, and whether the Marker is user-defined.
var json = markerSet.stringify();
Events
update - Fired whenever any changes are made to the Markers in the set.
InputElement
The abstract superclass of all input types. Establishes the basic DOM structure for all inputs and implements basic functionality. The user should never create an InputElement, only one of its subtypes.
Options
action - (function) A function to execute whenever the input is activated. Defaults to undefined.
action: function() {
this.play();
}
actionScope - (scope) The scope to which the keyword ``this'' should apply in the action function. Defaults to the InputElement.
actionScope: video
key - (String/integer) The key (as a string or its JavaScript char code) that should act as a shortcut for activating the input and calling the action. Defaults to undefined.
key: `x'
key: 32
keyLabel - (String) The label to show below the input specifying the keyboard shortcut. Useful when a char code must be used for the key (as with the space bar, for example). Defaults to the key character.
keyLabel: `Space'
name - (String) The name of the input to be used in HTML forms. Defaults to an empty string.
name: `visible'
text - (String) The text to display in or next to the input, specifying what it does or controls. Defaults to an empty string.
text: `Play'
tooltip - (String) Specifies the text to display when the user hovers the mouse over the input. Defaults to the text.
tooltip: `Play the video'
value - (String) The value of the input to be used in HTML forms. Defaults to undefined.
value: `50'
Methods
disable() - Disables the input. When disabled, the input cannot be activated.
input.disable();
enable() - Enables the input.
input.enable();
insert(div) - Inserts the input into the specified DOM element.
var dest = document.getElementById(`x');
input.insert(dest);
isEnabled() - Checks if the input is enabled.
if (input.isEnabled()) {
// Do something
}
setAction(action, scope) - Sets the function to be executed when the input is activated, as well as the scope of the keyword ``this'' in the function.
input.setAction(function() {
this.play();
}, video);
setKey(key, label) - Sets the keyboard shortcut and shortcut label for the input. The key can be either a character or a key's JavaScript char code.
input.setKey(`x');
input.setKey(32, `Space');
setName(name) - Sets the name attribute of the input for HTML forms.
input.setName(`score');
setText(text) - Sets the text to display in or next to the input.
input.setText(`Play');
setTooltip(tooltip) - Sets the text that appears when the user hovers over the input.
input.setTooltip(`Play the video');
Events
clicked - Fired whenever the input is activated (by clicking on the input, or by using a keyboard shortcut).
inserted - Fired when the input is inserted into the DOM
Button
An HTML button. Subclass of InputElement. All methods act according to the default functionality specified in InputElement. To create a new Button, the user must provide only an object literal containing any options.
var button = new Button({
text: `Play',
key: 32,
keyLabel: `Space',
action: function() {
this.play();
},
actionScope: video
});
Checkbox
An HTML checkbox. Subclass of InputElement. Can execute a distinct method when the box is checked and when it is unchecked. To create a new Checkbox, the user must provide only an object literal containing any options.
var checkbox = new Checkbox({
text: `Hide Video',
action: [function() {
video.hide();
}, function() {
video.show();
}]
});
Options
action - (function/Array) A function or pair of functions to execute when the checkbox is activated. Providing one function simply executes the same action when the checkbox is checked or unchecked. If two functions are provided, the first is executed when the checkbox is checked and the second is executed when it is unchecked. Defaults to undefined.
action: [function() {
video.hide();
}, function() {
video.show();
}]
actionScope - (scope/Array) A scope or pair of scopes to which the keyword ``this'' should apply in the action functions. If one scope is provided, it is used for both actions. If two scopes are provided, the first applies to the checking action, and the second applies to the unchecking action.
actionScope: [video, image]
Methods
clear() - Unchecks the checkbox without activating any actions.
checkbox.clear();
parse(json) - Parses the specified JSON string and restores the checkbox state (checked or uncheck).
checkbox.parse(`{checked:true}');
setAction(action, scope) - Sets the function(s) to execute when the checkbox is activated. If one function is provided, it will be executed when the checkbox is checked or unchecked. If two functions are provided, the first is run when the checkbox is checked, and the other when it is unchecked. The scope specifies the scope in which the keyword ``this'' applies for the functions. If no scope is provided, the Checkbox is used as the scope. If one scope is provided, it is used for both functions. If two scopes are provided, the first is used for the checking action, and the second is used for the unchecking action.
checkbox.setAction([function() {
this.hide();
}, function() {
this.show();
}], video);
stringify() - Converts the checkbox to a JSON string. Creates an object literal with one boolean (checked) specifying whether the checkbox is checked or unchecked.
var json = checkbox.stringify();
ColorButton
A colored HTML div that acts as a button. Subclass of InputElement. Used primarly for the marker set buttons in AnnotationCanvas. All methods act according to the default functionality specified in InputElement. To create a new ColorButton, the user must provide only an object literal containing any options.
var button = new ColorButton({
text: `Play',
color: `red',
key: 32,
keyLabel: `Space',
action: function() {
this.play();
},
actionScope: video
});
Options
color - (String) The color of the button. Defaults to white.
color: `red'
Methods
setColor(color) - Sets the color of the button.
button.setColor(`red');
RadioButton
An HTML radio button. Subclass of InputElement. All methods act according to the default functionality specified in InputElement. To link RadioButtons together, set multiple RadioButtons to have the same name attribute. To create a new RadioButton, the user must only provide an object literal containing any options.
var button = new RadioButton({
text: `Yes',
name: `enable'
});
Methods
clear() - Deselects the RadioButton.
button.clear();
parse(json) - Parses the specified JSON string and restores the state (selected or unselected).
button.parse(`{checked:true}');
stringify() - Converts the RadioButton to a JSON string. Creates an object literal with one boolean (checked) specifying whether the button is selected or not.
var json = button.stringify();
Slider
An HTML slider. Subclass of InputElement. Can execute a distinct method when the slider is increased or decreased. Two keyboard shortcuts must be provided, one to increase the slider and one to decrease it. To create a new Slider, the user must provide only an object literal containing any options.
var slider = new Slider({
action: [function() {
// Do something when increasing
}, function() {
// Do something when decreasing
}],
key: [`+', `-']
});
Options
action - (function/Array) A function or pair of functions to execute when the slider is activated. Providing one function simply executes the same action when the slider is increased or decreased. If two functions are provided, the first is executed when the slider is increased and the second is executed when it is decreased. Defaults to undefined.
action: [function() {
video.hide();
}, function() {
video.show();
}]
actionScope - (scope/Array) A scope or pair of scopes to which the keyword ``this'' should apply in the action functions. If one scope is provided, it is used for both actions. If two scopes are provided, the first applies to the checking action, and the second applies to the unchecking action.
actionScope: [video, image]
change - (floating point) The amount to adjust the slider value by when a keyboard shortcut is executed. Defaults to the same value as the step.
change: 0.5
max - (floating point) The maximum value of the slider. Defaults to 10.0.
max: 21.5
min - (floating point) The minimum value of the slider. Defaults to 0.
min: 5.0
step - (floating point) The size of the intervals by which the value changes as the user slides. Defaults to 1.0.
step: 0.8
style - (String) Specifies whether the slider is horizontal or vertical. Defaults to `horizontal'.
style: `vertical'
value - (floating point) The default starting value for the slider. Defaults to 0.
value: 11.3
width - (integer) The width of the slider in pixels. Defaults to 100.
width: 600
Methods
clear() - Sets the slider value back to the minimum without activating any actions.
slider.clear();
getMax() - Returns the maximum value of the slider.
var max = slider.getMax();
getMin() - Returns the minimum value of the slider.
var min = slider.getMin();
getValue() - Returns the current value of the slider.
var value = slider.getValue();
isVertical() - Checks if the slider is horizontal or vertical.
var vertical = slider.isVertical();
parse(json) - Parses the specified JSON string and restores the slider value.
slider.parse(`{value:10.0}');
setAction(action, scope) - Sets the function(s) to execute when the slider is activated. If one function is provided, it will be executed when the slider is increased or decreased. If two functions are provided, the first is run when the slider is increased, and the other when it is decreased. The scope specifies the scope in which the keyword ``this'' applies for the functions. If no scope is provided, the Slider is used as the scope. If one scope is provided, it is used for both functions. If two scopes are provided, the first is used for the checking action, and the second is used for the unchecking action.
slider.setAction([function() {
this.hide();
}, function() {
this.show();
}], video);
setKey(key, label) - Sets the keyboard shortcuts for increasing and decreasing the slider. Both key and label should be arrays where the first element is for increasing and the second is for decreasing.
slider.setKey([`+',`-']);
setMax(max) - Sets the maximum value of the slider.
slider.setMax(20.5);
setMin(min) - Sets the minimum value of the slider.
slider.setMin(5.1);
setStep(step) - Sets the step for the slider.
slider.setStep(0.4);
setValue(value) - Sets the value of the slider.
slider.setValue(5.9);
setWidth(width) - Sets the width of the slider.
slider.setWidth(500);
stringify() - Returns a JSON representation of the slider. Creates an object literal with one element (value) containing the current value of the slider.
var json = slider.stringify();
Events
decreased - Fired whenever the slider value decreases.
increased - Fired whenever the slider value increases.
VideoScrubber
A special slider designed for scrubbing videos. Subclass of Slider and InputElement. To create a new VideoScrubber, the user must provide the DOM element in which the scrubber will be placed, the Video object that the scrubber controls, and an object literal containing any options.
var scrubber = new Scrubber(
document.getElementById('scrubber'),
video
);
InputSet
A wrapper around sets of InputElements. Used for nicely spacing and centering related sets of inputs. To create a new InputSet, the user must provide the DOM element in which the set will be placed, and an object literal containing any options.
var set = new InputSet(
document.getElementById('inputs'),
{ style: `vertical' }
);
Options
style - (String) Specifies whether the set should be vertical or horizontal. Defaults to `horizontal'.
style: `vertical'
Methods
addInput(input) - Adds an input to the set. The input can be any type of InputElement.
set.addInput(new Button({
text: `Play',
key: 32,
action: function() {
video.play();
}
}));
addSpacer() - Adds extra spacing between two inputs.
set.addSpacer();
parse(json) - Parses the specified JSON string and restores the state of the InputElements.
set.parse(`[{checked:true}]`);
stringify() - Returns a JSON string representing all InputElements in the set. Creates an array containing the JSON for each individual input.
var json = set.stringify();
VideoInputSet
A special InputSet for controlling video playback. Subclass of InputSet. Creates the following buttons: jump to start, back 5 frames, back 1 frame, play/pause, go to frame, forward 1 frame, forward 5 frames, jump to end. To create a new VideoInputSet, the user must provide the DOM element in which the set should be created, the video the buttons control, and an object literal containing any options.
var videoSet = new VideoInputSet(
document.getElementById(`videoControl'),
video
);
Options
mode - (String) Specifies whether to include all buttons or only basic playback controls. Setting mode to `simple' will include only jump to start, play, and jump to end. Defualts to `full'.
VideoAnnotationInputSet
A special InputSet for annotating videos. Subclass of InputSet. Creates the following buttons: previous keyframe, next keyframe, nudge 1px left/right/up/down, delete keyframe, clear all keyframes, undo, redo. To create a new VideoAnnotationInputSet, the user must provide the DOM element in which the set will be created, the AnnotationCanvas the buttons control, and an object literal containing any options.
var set = new VideoAnnotationInputSet(
document.getElementById(`set'),
annotationCanvas
);
ImageAnnotationInputSet
A special InputSet for annotating images. Subclass of InputSet. Creates the following buttons: nudge 1px left/right/up/down, delete keyframe, clear all keyframes, undo, redo. To create a new ImageAnnotationInputSet, the user must provide the DOM element in which the set will be created, the AnnotationCanvas the buttons control, and an object literal containing any options.
var set = new ImageAnnotationInputSet(
document.getElementById(`set'),
annotationCanvas
);