custom_editor_interfaces.md

Editor Interfaces

When creating components you usually want to control their data from WebGLStudio editor, this means that you need to know a little bit about the architecture of WebGLStudio in order to create user interfaces.

LiteGUI

All the interfaces in WebGLStudio are created using the library LiteGUI, so it is important to know a little bit how it works in order to take full advantage.

But the most important element is to know the class LiteGUI.Inspector which is in charge of create the widgets.

To know more about the Inspector, check the guide about LiteGUI.Inspector

Public Vars

WebGLStudio creates a default interface for every public var contained inside a Component unless an specific function is created.

The problem with automatically generated interfaces is that they cannot know the true meaning of the vars to adapt the widgets. An String could be a text, a url, a resource path, a script, etc.

This is why LiteScene allows to define properties per variable:

function MyComponent(o)
{
  this.myvar = null;
}

MyComponent["@myvar"] = { type: "texture" };

Or even specify properties:

MyComponent["@myvar"] = { type: "Number", widget: "slider", min: 0, max: 100, step: 1 };

Creating custom interfaces

But if you dont want to use the automatic interface, you can redefine by creating the inspect function:

MyComponent["@inspector"] = function( component, inspector )
{
  inspector.addString("Name",this.myvar, { callback: function(v){ component.myvar = v; } });
}

Or if you want to add something extra to the default interface generated by the system:

MyComponent.onShowProperties = function( component, inspector )
{
  inspector.addInfo( null, "This component is interesting" );
}