API Docs for:
Show:

LS.GUI Class

Defined in: ../src/gui.js:2
Module: LS

GUI is a static class used to create two kinds of GUIs: HTML GUIs on top of the 3D Canvas (in a safe way) or Immediate GUI using a Canvas2D (fast gui) For HTML GUIs check the getHTMLRoot function. For Immediate GUIs check the Box,Button,Toggle,Textfield,HorizontalSlider,VerticalSlider and Toolbar. To change colors of the immediate GUI check the LS.GUI.GUIStyle

Constructor

LS.GUI

()

Defined in ../src/gui.js:2

Methods

attach

(
  • element
  • anchor
)

Defined in ../src/gui.js:108

attach HTMLElement to HTML GUI Root in the anchor position specified

Parameters:

  • element HTMLElement
  • anchor String

    "top-left", "top-right", "bottom-left", "bottom-right" or "none"

Box

(
  • area
  • color
)

Defined in ../src/gui.js:344

Renders an immediate gui BOX, used as background

Parameters:

  • area Array

    [x,y,width,height]

  • color String

    a color in string format "#AFAFAF"

Button

(
  • area
  • content
  • content_over
)
Boolean

Defined in ../src/gui.js:403

Renders a Button and returns if the button was pressed

Parameters:

  • area Array

    [x,y,width,height]

  • content String | GL.Texture

    could be a string or a GL.Texture (if null the button will be invisible)

  • content_over String | GL.Texture

    same as before but in case the mouse is over

Returns:

Boolean:

true if the button was pressed

createElement

(
  • tag_type
  • anchor
)
HTMLElement

Defined in ../src/gui.js:91

Creates a HTMLElement of the tag_type and adds it to the DOM on top of the canvas

Parameters:

  • tag_type String

    the tag type "div"

  • anchor String

    "top-left", "top-right", "bottom-left", "bottom-right" or "none"

Returns:

HTMLElement:

detach

(
  • element
)

Defined in ../src/gui.js:169

Removes an element from the GUI (same as element.parentNode.removeChild( element ); )

Parameters:

  • element HTMLElement

    HTML element to detach from the GUI

getHTMLRoot

() HTMLElement

Defined in ../src/gui.js:41

Returns the DOM element responsible for the HTML GUI of the app. This is helpful because this GUI will be automatically removed if the app finishes. Any HTML must be attached to this element, otherwise it may have problems with the editor.

Returns:

HTMLElement:

hideHTML

()

Defined in ../src/gui.js:216

hides the HTML GUI (but it is still existing)

HorizontalSlider

(
  • area
  • value
  • left_value
  • right_value
  • show_value
)
Number

Defined in ../src/gui.js:708

Renders an horizontal slider widget, returns the current value Remember: you must pass as value the same value returned by this function in order to work propertly

Parameters:

  • area Array

    [x,y,width,height]

  • value Number

    the value to show in the slider

  • left_value Number

    the minimum value for the slider

  • right_value Number

    the maximum value for the slider

  • show_value Boolean

    if you want to see a caption in text format with the value

Returns:

Number:

the current value of the slider (will be different from value if it was clicked)

Knob

(
  • area
  • value
  • bottom_value
  • top_value
  • steps
  • content
)
Number

Defined in ../src/gui.js:845

Renders an knob slider widget, returns the current value Remember: you must pass as value the same value returned by this function in order to work propertly

Parameters:

  • area Array

    [x,y,width,height]

  • value Number

    the value to show in the slider

  • bottom_value Number

    the minimum value for the slider

  • top_value Number

    the maximum value for the slider

  • steps Number

    [optional] the numeber of steps (if 0 then infinite)

  • content Image | GL.Texture

    [optional] a texture or image to use as the knob

Returns:

Number:

the current value of the slider (will be different from value if it was clicked)

Label

(
  • area
  • content
)

Defined in ../src/gui.js:362

Renders a text (or a texture)

Parameters:

  • area Array

    [x,y,width,height]

  • content String | GL.Texture

    could be a string or a GL.Texture

loadHTML

(
  • url
  • on_complete
)

Defined in ../src/gui.js:228

Loads resource containing the HTML code for the GUI and attachs it inside a div to the hud

Parameters:

  • url String

    the url of the resource containing all the HTML code

  • on_complete Function

    callback that will be called once the HTML has been loaded and attached to the doom, it receives the HTMLElement containing all the HTML

reset

()

Defined in ../src/gui.js:181

Removes all the GUI elements from the DOM

ResetImmediateGUI

()

Defined in ../src/gui.js:285

Called by the LS.Renderer to clear intermediate stuff

showHTML

()

Defined in ../src/gui.js:203

shows the HTML GUI

TextField

(
  • area
  • text
  • max_length
  • is_password
)
Boolean

Defined in ../src/gui.js:608

Renders a textfield widget and returns the current text value Remember: you must pass as text the same text returned by this function in order to work propertly

Parameters:

  • area Array

    [x,y,width,height]

  • text String

    the text to show in the textfield

  • max_length Number

    to limit the text, otherwise leave blank

  • is_password Boolean

    set to true to show as password

Returns:

Boolean:

the current state of the checkbox (will be different from value if it was pressed)

Toggle

(
  • area
  • value
  • content
  • content_off
)
Boolean

Defined in ../src/gui.js:543

Renders a checkbox widget, and returns the current state Remember: you must pass as value the same value returned by this function in order to work propertly

Parameters:

  • area Array

    [x,y,width,height]

  • value Boolean

    if the checkbox is on or off

  • content String | GL.Texture

    an string or image in case the checkbox is on

  • content_off String | GL.Texture

    an string or image in case the checkbox is off

Returns:

Boolean:

the current state of the checkbox (will be different from value if it was pressed)

Toolbar

(
  • area
  • selected
  • options
)
Number

Defined in ../src/gui.js:462

Renders a Toolbar (list of buttons) and returns the active one

Parameters:

  • area Array

    [x,y,width,height]

  • selected Number

    the index of the selected option

  • options ArrayString | GL.Texture

    an array containing either strings or GL.Texture

Returns:

Number:

the selected index

VerticalSlider

(
  • area
  • value
  • bottom_value
  • top_value
)
Number

Defined in ../src/gui.js:780

Renders an vertical slider widget, returns the current value Remember: you must pass as value the same value returned by this function in order to work propertly

Parameters:

  • area Array

    [x,y,width,height]

  • value Number

    the value to show in the slider

  • bottom_value Number

    the minimum value for the slider

  • top_value Number

    the maximum value for the slider

Returns:

Number:

the current value of the slider (will be different from value if it was clicked)