Interface: IControl

WebGLModule.UIControls.IControl

Sets common properties needed to create the controls: this.context @extends WebGLModule.VisualizationLayer - owner context this.name - name of the parameter for this.context.[load/store]Property(...) call this.id - unique ID for HTML id attribute, to be able to locate controls in DOM, created as ${uniq}${name}-${context.uid} this.webGLVariableName - unique webgl uniform variable name, to not to cause conflicts If extended (class-based definition, see registerCass) children should define constructor as
Source:

Example

constructor(context, name, webGLVariableName, params) {
      super(context, name, webGLVariableName);
      ...
      //possibly make use of params:
      this.params = this.getParams(params);

      //now access params:
      this.params...
  }

Members

encoded

Encoded value as used in the UI, e.g. a name of particular colormap, or array of string values of breaks...
Source:

params

Get current control parameters the control should set the value as this._params = this.getParams(incomingParams);
Source:

raw

Raw value sent to the GPU, note that not necessarily typeof raw() === type() some controls might send whole arrays of data (raw) and do smart sampling such that type is only a number
Source:

supports

Parameters supported by this UI component, must contain at least - 'interactive' - type bool, enables and disables the control interactivity (by changing the content available when rendering html) - 'title' - type string, the control title Additionally, for compatibility reasons, you should, if possible, define - 'default' - type any; the default value for the particular control
Source:

supportsAll

Type definitions for supports. Can return empty object. In case of missing type definitions, the type is derived from the 'supports()' default value type. Each key must be an array of default values for the given key if applicable. This is an _extension_ to the supports() and can be used only for keys that have more than one default type applicable
Source:

type

GLSL type of this control: what type is returned from this.sample(...) ?
Source:

uiControlType

The control type component was registered with. Handled internally.
Source:

Methods

changed(event, value, encodedValue, context)

Invoke changed value event -- should invoke every time a value changes !driven by USER!, and use unique or compatible event name (event 'value') so that shader knows what changed
Parameters:
Name Type Description
event event to call
value decoded value of encodedValue
encodedValue value that was received from the UI input
context self reference to bind to the callback
Source:

clearEvents()

Clear ALL events
Source:

define()

Handles how the variable is being defined in GLSL - should use variable names derived from this.webGLVariableName
Source:

getName() → {string}

Automatically overridden to return the name of the control it was registered with
Source:
Returns:
Type
string

getParams(params)

Safely sets outer params with extension from 'supports' - overrides 'supports' values with the correct type (derived from supports or supportsAll) - sets 'supports' as defaults if not set
Parameters:
Name Type Description
params
Source:

getSafeParam(value, defaultValue, paramName) → {boolean|number|*}

Safely check certain param value
Parameters:
Name Type Description
value value to check
defaultValue default value to return if check fails
paramName name of the param to check value type against
Source:
Returns:
Type
boolean | number | *

glDrawing(program, dimension, gl)

Called when an image is rendered
Parameters:
Name Type Description
program WebglProgram instance
dimension canvas dimension
Properties
Name Type Description
width number
height number
gl WebGLRenderingContext | WebGL2RenderingContext
Source:

glLoaded(program, gl)

Called when associated webgl program is switched to
Parameters:
Name Type Description
program WebglProgram instance
gl WebGL Context
Source:

init()

JavaScript initialization - read/store default properties here using this.context.[load/store]Property(...) - work with own HTML elements already attached to the DOM - set change listeners, input values!
Source:

load(defaultValue, paramName) → {*}

Load a value from cache to support its caching - should be used on all values that are available for the user to play around with and change using UI controls
Parameters:
Name Type Description
defaultValue value to return in case of no cached value
paramName name of the parameter, must be equal to the name from 'supports' definition - default value can be empty string
Source:
Returns:
cached or default value
Type
*

off(event)

Clear events of the event type
Parameters:
Name Type Description
event string type
Source:

on(event, clbck(rawValue,)

On parameter change register self
Parameters:
Name Type Description
event string which event to fire on - events are with inputs the names of supported parameters (this.supports), separated by dot if nested - most controls support "default" event - change of default value - see specific control implementation to see what events are fired (Advanced Slider fires "breaks" and "mask" for instance)
clbck(rawValue, function encodedValue, context) call once change occurs, context is the control instance
Source:

sample(value, valueGlType) → {string}

Sample the parameter using ratio as interpolation, must be one-liner expression so that GLSL code can write `vec3 mySampledValue = ${this.color.sample("0.2")};` TODO: if a control throws with the usage (type of the value does not fit), it is not properly reflected in the documentation! NOTE: you can define your own global-scope functions to keep one-lined sampling, see this.context.includeGlobalCode(...)
Parameters:
Name Type Default Description
value string | undefined openGL value/variable, used in a way that depends on the UI control currently active (do not pass arguments, i.e. 'undefined' just get that value, note that some inputs might require you do it..)
valueGlType string void GLSL type of the value
Source:
Returns:
valid GLSL oneliner (wihtout ';') for sampling the value, or invalid code (e.g. error message) to signal error
Type
string

store(value, paramName)

Store a value from cache to support its caching - should be used on all values that are available for the user to play around with and change using UI controls
Parameters:
Name Type Description
value to store
paramName name of the parameter, must be equal to the name from 'supports' definition - default value can be empty string
Source:

toHtml()

Get the UI HTML controls - these can be referenced in this.init(...) - should respect this.params.interactive attribute and return non-interactive output if interactive=false - don't forget to no to work with DOM elements in init(...) in this case todo: when overrided value before 'init' call on params, toHtml was already called, changes might not get propagated - either: delay toHtml to trigger insertion later (not nice) - do not allow changes before init call, these changes must happen at constructor
Source:

(static) getVarType(x) → {string}

Uniform behaviour wrt type checking in shaders
Parameters:
Name Type Description
x
Source:
Returns:
Type
string