https://github.com/lo-th/uil

simple javascript ui
https://github.com/lo-th/uil

Last synced: about 19 hours ago
JSON representation

simple javascript ui

• Host: GitHub
• URL: https://github.com/lo-th/uil
• Owner: lo-th
• License: mit
• Created: 2015-06-05T10:08:08.000Z (over 9 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-06-10T05:16:38.000Z (over 1 year ago)
• Last Synced: 2025-01-22T12:04:45.897Z (8 days ago)
• Language: JavaScript
• Homepage: http://lo-th.github.io/uil/
• Size: 22.5 MB
• Stars: 561
• Watchers: 23
• Forks: 51
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-game-engine-dev - uil - Simple JavaScript gui. (Libraries / JavaScript)

README

        

UIL v4.3.0


uil.js is a lightweight ui for javascript with a complete 3d display support.


totally customizable, only 6 events, auto resize


[**MAIN EXAMPLE**](http://lo-th.github.io/uil/index.html)

**1 - init engine**

```sh

var ui = new UIL.Gui( { w:300 } )

```

**2 - add value**

```sh

ui.add('title', { name:'Title'})

ui.add('bool', { name:'Bool' })

ui.add('color', { name:'Color', type:'rgba', value:[0,1,1,1]})

ui.add('slide', { name:'Slide', value:50})

let myList = ui.add('list', { name:'List', list:['i1', 'i2', ...]})

```

**3 - add value with object reference**

```sh

const obj = {

  name:'welcome to uil',

  value: 2,

  slider: 30,

  vector: { x:10, y:-30 }

}

ui.add( obj, 'string', { type:'string' })

ui.add( obj, 'value', { type:'number', min:0, max:10, precision:2, step:0.01 })

ui.add( obj, 'slider', { type:'slide' })

ui.add( obj, 'vector', { type:'number' })

```

**4 - callback return the value**

```sh

ui.add('number', { name:'Vector4', value:[0,0,0,0] }).onChange( function(v){ debug.innerHTML = v; } )

```

**5 - you can reset all value**

```sh

ui.clear();

```

**6 - other examples**

[**uil module**](http://lo-th.github.io/uil/examples/index_module.html)

[**uil listen**](http://lo-th.github.io/uil/examples/uil_listen.html)

[**uil color**](http://lo-th.github.io/uil/examples/uil_color.html)

[**uil stresstest**](http://lo-th.github.io/uil/examples/uil_stresstest.html)

[**uil group**](http://lo-th.github.io/uil/examples/uil_group.html)

[**uil to canvas**](http://lo-th.github.io/uil/examples/uil_to_canvas.html)

[**uil to three**](http://lo-th.github.io/uil/examples/uil_3d.html)

[**uil to three 2**](http://lo-th.github.io/uil/examples/uil_3d_2.html)

**7 - uil is on npm**

```sh

npm i uil

```

**8 - creator Tools**

[**uil icon creator**](http://lo-th.github.io/uil/examples/uil_icon.html)

[**uil ARM creator**](http://lo-th.github.io/uil/examples/uil_mapARM.html)

[**uil KTX2 creator**](http://lo-th.github.io/uil/examples/uil_ktx2.html)