Quartz Composer WebKit Plug-in JavaScript Reference

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.

Methods by Task

Composition Metadata
Composition Playback
Composition Status
Pasteboard Operations
Working with Published Values

Methods

attributes

Returns an array of strings with the composition’s attributes.

composition.attributes()
Discussion

The attributes returned are the composition’s metadata, including its name, copyright, and description values, along with information about each port of the composition.

copyImageToPasteboard

Copies the current context of the composition to the pasteboard.

composition.copyImageToPasteboard()
Discussion

Use this method in conjunction with an oncopy handler.

getInputValue

Returns the value of a published input.

composition.getInputValue("key")
Discussion

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.

See Also

inputKeys

outputKeys

setInputValue

getOutputValue

getOutputValue

Returns the value of a published output.

composition.getOutputValue("key")
Discussion

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.

See Also

outputKeys

inputKeys

setInputValue

getInputValue

inputKeys

Returns an array of strings with the names of a composition’s published inputs.

composition.inputKeys()
See Also

setInputValue

getInputValue

outputKeys

getOutputValue

loaded

Returns whether the composition is loaded.

composition.loaded()
See Also

playing

paused

outputKeys

Returns an array of strings with the names of a composition’s published outputs.

composition.outputKeys()
See Also

getOutputValue

inputKeys

setInputValue

getInputValue

pause

Pauses playback of a composition.

composition.pause()
Discussion

If a composition wasn’t playing, calling this method does nothing.

See Also

play

stop

paused

Returns whether the composition is paused.

composition.paused()
Discussion

If the composition is stopped (as opposed to paused), paused returns false.

See Also

playing

loaded

play

Begins or pauses playback of a composition.

composition.play()
Discussion

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.

See Also

pause

stop

playing

Returns whether the composition is playing.

composition.playing()
See Also

paused

loaded

setInputValue

Gives the composition the provided value for published input.

composition.setInputValue("key", value)
Discussion

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.

See Also

inputKeys

outputKeys

getInputValue

getOutputValue

stop

Stops playback of a composition.

composition.stop()
Discussion

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.

See Also

play

pause