Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lo-th/uil
simple javascript ui
https://github.com/lo-th/uil
Last synced: 1 day 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: 2024-10-28T00:23:15.698Z (about 2 months ago)
- Language: JavaScript
- Homepage: http://lo-th.github.io/uil/
- Size: 22.5 MB
- Stars: 554
- Watchers: 23
- Forks: 50
- 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.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