jsui Reference

Javascript user interfaces and graphics

jsui

Description

Provides an environment to make user interface elements using Javascript. This provides all of the programming tools available in the js object, but also exposes the mgraphics and sketch drawing routines for visual output.

Examples

A simple dial with logic and drawing defined in Javascript

Discussion

The jsui object is a general purpose user interface object driven by javascript. There are a number of templates already built to use (some of which are shown below). While the patcher is in edit mode, you can ctrl-click (mac) or right-click (pc) to bring up the contextual menu which will let you view and edit the currently loaded javascript file, or select one of the template files from jsui-library. If the javascript file also has a help file associated with it (as do all of the template objects contained in this patch), the associated help file will be loaded instead of jsui.maxhelp. The inspector lets you set the javascript file, javascript arguments, size, border flag, and disable full scene anti-aliasing (fsaa).

At the present time, mouse position and object redrawing will only be reported correctly in the jsui object if the patching and Presentation mode sizes of the object are the same.

Arguments

None.

Attributes

border [int] (default: 1)

Toggles the drawing of a border around the jsui object. The default is 1 (draw border).

filename [symbol] (default: none)

The word filename, followed by a symbol that specifies a pathname, designates the Javascript file to be loaded.

jsarguments [256 atoms] (default: )

Specifies any arguments to be passed to the Javascript code contained in the jsui object.

nofsaa [int] (default: 0)

Toggle full screen anti-aliasing

parameter_enable [int]

Enables use of this object with Max for Live Parameters.

parameter_mappable [int] (default: 1)

When parameter_mappable is enabled, the object will be available for mapping to keyboard or MIDI input using the Mappings feature.

template [symbol] (default: jsui_default.js)

If no file is explictly loaded by the jsui object (via the filename attribute, for instance), the template file will be loaded into memory and evaluated, and can be used as the starting point for further development. The user will be prompted to save the template to a file when editing, or the external editor is opened.

Common Box Attributes

annotation [symbol]

Sets the text that will be displayed in the Clue window when the user moves the mouse over the object.

background [int] (default: 0)

Adds or removes the object from the patcher's background layer. background 1 adds the object to the background layer, background 0 removes it. Objects in the background layer are shown behind all objects in the default foreground layer.

color [4 floats]

Sets the color for the object box outline.

fontface [int]

Sets the type style used by the object. The options are:

plain
bold
italic
bold italic Possible values:

0 = 'regular'
1 = 'bold'
2 = 'italic'
3 = 'bold italic'

fontname [symbol]

Sets the object's font.

fontsize [float]

Sets the object's font size (in points). Possible values:

'8'
'9'
'10'
'11'
'12'
'13'
'14'
'16'
'18'
'20'
'24'
'30'
'36'
'48'
'64'
'72'

hidden [int] (default: 0)

Toggles whether an object is hidden when the patcher is locked.

hint [symbol]

Sets the text that will be displayed in as a pop-up hint when the user moves the mouse over the object in a locked patcher.

ignoreclick [int] (default: 0)

Toggles whether an object ignores mouse clicks in a locked patcher.

jspainterfile [symbol]

JS Painter File

patching_rect [4 floats] (default: 0. 0. 100. 0.)

Sets the position and size of the object in the patcher window.

position [2 floats]

g/s(set)

Sets the object's x and y position in both patching and presentation modes (if the object belongs to its patcher's presentation), leaving its size unchanged.

presentation [int] (default: 0)

Sets whether an object belongs to the patcher's presentation.

presentation_rect [4 floats] (default: 0. 0. 0. 0.)

Sets the x and y position and width and height of the object in the patcher's presentation, leaving its patching position unchanged.

rect [4 floats]

g/s(set)

Sets the x and y position and width and height of the object in both patching and presentation modes (if the object belongs to its patcher's presentation).

size [2 floats]

g/s(set)

Sets the object's width and height in both patching and presentation modes (if the object belongs to its patcher's presentation), leaving its position unchanged.

textcolor [4 floats]

Sets the color for the object's text in RGBA format.

textjustification [int]

Sets the justification for the object's text. Possible values:

0 = 'left'
1 = 'center'
2 = 'right'

varname [symbol]

Sets the patcher's scripting name, which can be used to address the object by name in pattr, scripting messages to thispatcher, and the js object.

Parameter Attributes

Order

Typeint

Sets the order of recall of this parameter. Lower numbers are recalled first. The order of recall of parameters with the same order number is undefined.

Parameter Mode Enable

Typeint

Parameter Mode Enable (not available from Parameters window)

Link to Scripting Name

Typeint

When checked, the Scripting Name is linked to the Long Name attribute.

Long Name

Typesymbol

The long name of the parameter. This name must be unique per patcher hierarchy.

Short Name

Typesymbol

Sets the short name for the object's visual display. The maximum length varies according to letter width, but is generally in a range of 5 to 7 characters.

Type

Typeint

Specifies the data type. The data types used in Max for Live are:

Float
Int
Enum (enumerated list)
Blob

Note: By convention, the Live application uses floating point numbers for its calculations; the native integer representation is limited to 256 values, with a default range of 0-255 (similar to the char data type used in Jitter). When working with Live UI objects whose integer values will exceed this range, the Type attribute should be set to Float, and the Unit Style attribute should be set to Int.

Range/Enum

Typelist

When used with an integer or floating point data type, this field is used to specify the minimum and maximum values of the parameter.
When used with an enumerated list (Enum) data type, this field contains a space-delimited list of the enumerated values (if list items contain a space or special characters, the name should be enclosed in double quotes).

Modulation Mode

Typeint

Sets the Modulation Mode used by the Live application. The modulation modes are:

None
Unipolar
Bipolar
Additive
Absolute

Modulation Range

Typelist

This parameter is only used with the Absolute modulation mode. It specifies defines the range of values used.

Initial Enable

Typeint

When checked (set to 1), the UI object can store an initialization value. The value is set using the Initial attribute (see below).

Initial

Typelist

Sets the initial value to be stored and used when the Initial Enable attribute is checked.

Unit Style

Typeint

Sets the unit style to be used when displaying values. The unit style values are: Int: displays integer values
Float: displays floating point values
Time: displays time values in milliseconds (ms)
Hertz: displays frequency values (Hz/kHz).
deciBel: displays loudness (dB)
%: Percentage
Pan: displays Left and Right values
Semitones: displays steps (st)
MIDI: displays pitch corresponding to the MIDI note number
Custom: displays custom data type
Native: defaults to floating point values

Custom Units

Typesymbol

Sets the units to be used with the 'Custom' unit style (see "Unit Style", above). Custom unit strings may be simple symbols (e.g. "Harmonic(s)"), in which case the parameter's value will be displayed in its 'Native' display mode, followed by the symbol (e.g. "12 Harmonic(s)" for an Int-typed parameter or "12.54 Harmonic(s)" for a Float-typed parameter). For additional control over the numerical component displayed, a sprintf-style string may be used (e.g. "%0.2f Bogon(s)", which would display a value such as ".87 Bogons").

Exponent

Typefloat

When set to a value other than 1., the parameter's input and output values will be exponentially scaled according to the factor entered in this column.

Steps

Typeint

The number of steps available between the minimum and maximum values of a parameter. For instance, if the parameter has a range from 0.-64., with Steps set to 4, the user can only set the parameter to 0, 21.33, 42.66 and 64.

Parameter Visibility

Typeint

For automatable parameters (Int, Float, Enum), 'Stored Only' disables automation, although parameter values are stored in presets. 'Hidden' causes the parameter's value to be ignored when storing and recalling data. Non-automatable parameters (Blob) are 'Stored Only' by default, and can be set to 'Hidden', if desired.

Update Limit (ms)

Typeint

Speed limits values triggered by automation.

Defer Automation Output

Typeint

Defers values triggered by automation.

Messages

bang

Invokes the function named bang if defined.

int

Arguments

user-defined [int]
Invokes the function named msg_int if defined.

float

Arguments

user-defined [float]
Invokes the function named msg_float if defined.

list

Arguments

user-defined [list]
Performs the same as anything.

anything

Arguments

user-defined [list]
Invokes the function with the message name, assigning the message arguments to the arguments to the function. For example, if the object has a function named xyz defined, the message xyz 1 2 3 would invoke the xyz function with arguments 1 2 and 3.

(drag)

When a file is dragged from the File Browser to a jsui object, the file is loaded and executed.

autowatch

Arguments

flag [int]
The word autowatch, followed by a 1, turns on file watching for the Javascript source file. When file watching is on, the file is recompiled automatically when it is modified. This allows you to use an external editor for your Javascript file. When you save the file, the jsui object will notice. autowatch 0 turns off file watching.

compile

Arguments

filename [symbol]
Recompiles the current file. If followed by a symbol, will load, compile, and set the currently loaded Javascript file to be the file specified by the symbol argument.

delprop

Arguments

property [symbol]
The word delprop, followed by a name, deletes the named property.

editfontsize

Arguments

size [int]
Changes the font-size of the text used in the editing window which contains the object's Javascript source file.

getprop

Arguments

property [symbol]
The word getprop, followed by a name, outputs the value of the property name stored in the object out the left outlet.

jsargs

Arguments

arguments [list]
Sets the current Javascript arguments to any following message arguments.

jsfile

Arguments

filename [symbol]
The word jsfile, followed by a symbol , loads, compiles, and sets the currently loaded Javascript file to be the Javascript file specified by the symbol argument.

loadbang

Call the loadbang function

(mouse)

Double-clicking on a js object opens a text window where the object's Javascript source file can be edited. When the text window is saved, the text is compiled as the object's script.

open

Opens the text window where the object's Javascript source file can be edited.

setprop

Arguments

property and settings [list]
The word setprop, followed by name and one or more names or numbers, sets the named property to what follows the name. For example, after sending setprop xyz 1 2 3 to a js object. the xyz property would have a value of the list 1 2 3.

size

Arguments

width [int]
height [int]
The word size, followed by two int arguments, sets the width and height of the jsui object.

statemessage

Arguments

messages [list]
Allows for the testing of messages passed to functions within the Javascript source file.

wclose

Closes the text window where the object's Javascript source file is edited.

Output

anything

Numbers, lists, or symbols are sent out the jsui object's outlets when the Javascript code executing within the jsui object invokes the outlet function.

See Also

Name Description
JavaScript Usage JavaScript Usage
js Execute Javascript
jstrigger Execute Javascript instructions sequentially
mxj Execute Java in Max
Javascript in Max Javascript in Max
Max JS Tutorial 3: JavaScript Tasks, Arguments, and Globals Max JS Tutorial 3: JavaScript Tasks, Arguments, and Globals
JS Painter Guide JS Painter Guide