The JavaScript API provided by the Quartz Composer WebKit plug-in includes methods for changing a composition’s state and manipulating its published inputs and outputs. To learn how to include a Quartz Composer composition in a web page or Dashboard widget, read Webpages and Widgets.
Note: All of the method descriptions described in “Methods” assume that the method is called on the composition object as obtained from the DOM. You can obtain the object by calling document.getElementById:
var composition = document.getElementById("myComposition");
Obtaining and manipulating the composition is discussed further in Webpages and Widgets.
Returns an array of strings with the composition’s attributes.
composition.attributes() |
The attributes returned are the composition’s metadata, including its name, copyright, and description values, along with information about each port of the composition.
Copies the current context of the composition to the pasteboard.
composition.copyImageToPasteboard() |
Use this method in conjunction with an oncopy handler.
Returns the value of a published input.
composition.getInputValue("key") |
The value of key is any of the inputs that you published in Quartz Composer.
If the returned value is a color, an object is returned with red, green, blue, and alpha properties. Each value is a floating-point number, on a scale from 0 to 1. Call htmlColor() on the object to return its HTML hexadecimal color value or cssColor() to return its rgba value.
No images are returned when calling getInputValue.
Returns the value of a published output.
composition.getOutputValue("key") |
The value of key is any of the outputs that you published in Quartz Composer.
If the returned value is a color, an object is returned with red, green, blue, and alpha properties. Each value is a floating-point number, on a scale from 0 to 1. Call htmlColor() on the object to return its HTML hexadecimal color value or cssColor() to return its rgba value.
No images are returned when calling getOutputValue.
Returns an array of strings with the names of a composition’s published inputs.
composition.inputKeys() |
Returns whether the composition is loaded.
composition.loaded() |
Returns an array of strings with the names of a composition’s published outputs.
composition.outputKeys() |
Pauses playback of a composition.
composition.pause() |
If a composition wasn’t playing, calling this method does nothing.
Returns whether the composition is paused.
composition.paused() |
If the composition is stopped (as opposed to paused), paused returns false.
Begins or pauses playback of a composition.
composition.play() |
The play method starts playback of a composition if it was stopped or hasn’t played yet, pauses playback if the composition is already playing, and resumes playback if the composition was paused.
Returns whether the composition is playing.
composition.playing() |
Gives the composition the provided value for published input.
composition.setInputValue("key", value) |
The value of key is any of the inputs that you published in Quartz Composer.
If you’re setting an input to a color value, you can pass in:
An object like that returned by “getInputValue” and “getOutputValue,” with red, green, blue, and alpha properties
An HTML hexadecimal color value, like #FFFFFF
An HTML color name, like red or green
A CSS rgb or rgba value
If the input value can’t be parsed, no change is made. Also, images aren’t allowed as an input value.
Stops playback of a composition.
composition.stop() |
The stop method releases all resources associated with the composition and clears its visuals from the page. After calling stop, you can call play to restart the composition.
Last updated: 2009-01-06