API Docs for:
Show:

Inspector Class

Defined in: ../src/inspector.js:1

Inspector allows to create a list of widgets easily, it also provides methods to create the widgets automatically.
Every widget is created calling the function add followed by the widget name, p.e. addSlider or addVector3 or addNumber.
Widgets always receive three parameters:

  • name: String that defines the name at that it will be shown in the left side of the widget.
  • value: the value that will be displayed in the widget.
  • options: Object containing all the values .

Constructor

Inspector

(
  • options
)

Defined in ../src/inspector.js:1

Parameters:

  • options Object

    object with a set of options {
    width: total width
    height: total height
    widgets_width: width of every widget (used mostly in horizontal inspectors)
    name_width: width of the name part of widgets
    full: set to true if you want the inspector to use all the parent width and height
    widgets_per_row: number of widgets per row, default is 1 but you can change it if you want to pack several widgets in a row (useful for small widgets like checkboxes)
    one_line: widgets are place one next to the other horizontaly
    onchange: callback to call when something changes
    } 

    Dependencies: 
    - jscolor.js

Methods

add

(
  • type
  • name
  • value
  • options:
)
HTMLElement

Defined in ../src/inspector.js:618

Adds a widgete to the inspector, its a way to provide the widget type from a string

Parameters:

  • type String

    string specifying the name of the widget to use (check Inspector.widget_constructors for a complete list)

  • name String

    the string to show at the left side of the widget, if null this element wont be created and the value part will use the full width

  • value String

    the value to assign to the widget

  • options: Object

    some generic options that any widget could have:

    • type: overwrites the type
    • callback: function to call when the user interacts with the widget and changes the value [For a bigger list check createWidget and every widget in particular]

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addArray

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:2656

Widget to edit an array of values of a certain type

Parameters:

  • name String
  • value Array
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • data_type: the type of every value inside the array
    • data_options: options for the widgets of every item in the array
    • max_items: max number of items to show from the array, default is 100
    • callback: function to call once an items inside the array has changed

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addCheckbox

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1631

Widget to edit a boolean value using a checkbox

Parameters:

  • name String
  • value Boolean
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • label: text to show, otherwise it shows on/off
    • label_on: text to show when on
    • label_off: text to show when off
    • callback: function to call once the value changes

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addCombo

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1723

Widget to edit an enumeration using a combobox

Parameters:

  • name String
  • value
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • values: a list with all the possible values, it could be an array, or an object, in case of an object, the key is the string to show, the value is the value to assign
    • disabled: true to disable
    • callback: function to call once an items is clicked

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addFlags

(
  • value
  • optional
)
HTMLElement

Defined in ../src/inspector.js:1690

Widget to edit a set of boolean values using checkboxes

Parameters:

  • value Object

    object that contains all the booleans

  • optional Object

    object with extra flags to insert

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addInfo

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1494

Widget to show plain information in HTML (not interactive)

Parameters:

  • name String
  • value String

    HTML code

  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • className: to specify a classname of the content
    • height: to specify a height

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addList

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1957

Widget to select from a list of items

Parameters:

  • name String
  • value

    [Array or Object]

  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • multiselection: allow multiple selection
    • callback: function to call once an items is clicked
    • selected: the item selected

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addNumber

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:942

Widget to edit numbers (it adds a dragging mini widget in the right side)

Parameters:

  • name String
  • value Number
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • disabled: shows the widget disabled
    • callback: function to call when the string is edited
    • precision: number of digits after the colon
    • units: string to show after the number
    • min: minimum value accepted
    • max: maximum value accepted
    • step: increments when draggin the mouse (default is 0.1)

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addPad

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1343

Widget to edit two numbers using a rectangular pad where you can drag horizontaly and verticaly a handler

Parameters:

  • name String
  • value Vec2
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • callback: function to call once the value changes
    • disabled: shows the widget disabled
    • callback: function to call when the string is edited
    • precision: number of digits after the colon
    • units: string to show after the number
    • min: minimum value accepted
    • minx: minimum x value accepted
    • miny: minimum y value accepted
    • max: maximum value accepted
    • maxx: maximum x value accepted
    • maxy: maximum y value accepted
    • step: increments when draggin the mouse (default is 0.1)
    • background: url of image to use as background (it will be streched)

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addSeparator

() HTMLElement

Defined in ../src/inspector.js:685

Creates a line

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addSlider

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1559

Widget to edit a number using a slider

Parameters:

  • name String
  • value Number
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • min: min value
    • max: max value
    • step: increments when dragging
    • callback: function to call once the value changes

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addString

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:726

Widget to edit strings

Parameters:

  • name String
  • value String
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • focus: true if you want the cursor to be here
    • password: true if you want to hide the string
    • immediate: calls the callback once every keystroke
    • disabled: shows the widget disabled
    • callback: function to call when the widget changes

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addStringButton

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:815

Widget to edit strings, but it adds a button behind (useful to search values somewhere in case the user do not remember the name)

Parameters:

  • name String
  • value String

    the string to show

  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • disabled: shows the widget disabled
    • button: string to show inside the button, default is "..."
    • callback: function to call when the string is edited
    • callback_button: function to call when the button is pressed

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addTextarea

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:889

Widget to edit strings with multiline support

Parameters:

  • name String
  • value String
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • focus: true if you want the cursor to be here
    • password: true if you want to hide the string
    • immediate: calls the callback once every keystroke
    • disabled: shows the widget disabled
    • callback: function to call when the widget changes

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addTitle

(
  • title
  • options
)
HTMLElement

Defined in ../src/inspector.js:2971

Creates a title bar in the widgets list to help separate widgets

Parameters:

  • title String
  • options Object

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addVector2

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1035

Widget to edit two numbers (it adds a dragging mini widget in the right side)

Parameters:

  • name String
  • value Vec2
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • callback: function to call once the value changes
    • disabled: shows the widget disabled
    • callback: function to call when the string is edited
    • precision: number of digits after the colon
    • units: string to show after the number
    • min: minimum value accepted
    • max: maximum value accepted
    • step: increments when draggin the mouse (default is 0.1)

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addVector3

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1138

Widget to edit two numbers (it adds a dragging mini widget in the right side)

Parameters:

  • name String
  • value Vec3
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • callback: function to call once the value changes
    • disabled: shows the widget disabled
    • callback: function to call when the string is edited
    • precision: number of digits after the colon
    • units: string to show after the number
    • min: minimum value accepted
    • max: maximum value accepted
    • step: increments when draggin the mouse (default is 0.1)

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

addVector4

(
  • name
  • value
  • options,
)
HTMLElement

Defined in ../src/inspector.js:1246

Widget to edit two numbers (it adds a dragging mini widget in the right side)

Parameters:

  • name String
  • value Vec4
  • options, Object

    here is a list for this widget (check createWidget for a list of generic options):

    • callback: function to call once the value changes
    • disabled: shows the widget disabled
    • callback: function to call when the string is edited
    • precision: number of digits after the colon
    • units: string to show after the number
    • min: minimum value accepted
    • max: maximum value accepted
    • step: increments when draggin the mouse (default is 0.1)

Returns:

HTMLElement:

the widget in the form of the DOM element that contains it

assignValue

()

Defined in ../src/inspector.js:401

Tryes to assigns a value to the instance stored in this.instance

clear

()

Defined in ../src/inspector.js:96

Removes all the widgets inside the inspector

collectPropertier

(
  • instance
)

Defined in ../src/inspector.js:320

Parameters:

  • instance Object

    extract enumerable and public (name do not start with '_' ) properties from an object return {Object} object with "name" : value for every property

createWidget

(
  • name
  • content
  • options
)

Defined in ../src/inspector.js:427

Used by all widgets to create the container of one widget

Parameters:

  • name String

    the string to show at the left side of the widget, if null this element wont be created and the value part will use the full width

  • content String

    the string with the html of the elements that conform the interactive part of the widget

  • options Object

    some generic options that any widget could have:

    • widget_name: the name used to store this widget in the widgets_by_name container, if omited the parameter name is used
    • width: the width of the widget (if omited it will use the Inspector widgets_width, otherwise 100%
    • name_width: the width of the name part of the widget, if not specified it will use Inspector name_width, otherwise css default
    • content_width: the width of the widget content area
    • pre_title: string to append to the left side of the name, this is helpful if you want to add icons with behaviour when clicked
    • title: string to replace the name, sometimes you want to supply a different name than the one you want to show (this is helpful to retrieve values from an inspector)

getWidget

(
  • name
)
Object

Defined in ../src/inspector.js:205

Parameters:

  • name String

    the name of the widget supplied when creating it or the number of the widget

Returns:

Object:

widget object

inspectInstance

(
  • instance
  • properties
  • properties_info_example
  • properties_to_skip
)

Defined in ../src/inspector.js:218

Parameters:

  • instance Object

    the instance that you want to inspect, attributes will be collected from this object

  • properties Array

    an array with all the names of the properties you want to inspect, if not specified then it calls getProperties, othewise collect them and tries to guess the type

  • properties_info_example Object

    it overwrites the info about properties found in the object (in case the automaticaly guessed type is wrong)

  • properties_to_skip Array

    this properties will be ignored

refresh

()

Defined in ../src/inspector.js:120

Tryes to refresh (calls on_refresh)

showProperties

(
  • instance
  • properties_info
  • properties_to_skip
)

Defined in ../src/inspector.js:343

Parameters:

  • instance Object

    the instance that you want to inspect

  • properties_info Object

    object containing "property_name" :{ type: value, widget:..., min:..., max:... } or just "property":"type"

  • properties_to_skip Array

    this properties will be ignored