index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>UIL</title>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="shortcut icon" href="./examples/assets/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./examples/assets/style.css">

    <script type="text/javascript" src="build/uil.js"></script>
</head>

<body>
<div id='content'></div>
<div id='logo'></div>
<div id='debug'></div>

<script>

    document.getElementById('logo').innerHTML = UIL.Tools.icon('logo', '#FFF', 64)

    let title, ny =0, graph, graphUp, display = false

    const list = ['item-0', 'item-1', 'item-2', 'item-3', 'item-4', 'item-5', 'item-6', 'item-7', 'item-8', 'item-9', 'item-10', 'item-11', 'item-12']
    const list2 = ['item-0', 'item-1', 'item-2']

    const debug = document.getElementById('debug')

    const callback = function(v){ debug.innerHTML = v; }
    const callbackButton = function(){ debug.innerHTML = "i'm a button !!" ; console.log(this.value) }
    const callbackSize = function(v){ ui.setWidth( v ); }
    const callbackLogo = function(v){ document.getElementById('logoin').setAttributeNS(null, 'fill', v ); title.setColor(v); }
    const callbackLink = function(v){ let w = window.open("./examples/"+v+".html", ""); }
    const callbackReturn = function ( data, name ){
        // data is text for any textfile or image
        // name is the name of file
        debug.innerHTML = name
    }

    const callbackLoader = function( name ){

        switch(name){
            case 'LOAD' :
                UIL.Files.load( { callback:callbackReturn } )
            break;
            case 'SAVE' :
                UIL.Files.save( { name:'test', data:'you are the best!!', type:'text' } )
            break;
        }

    }

    // single UI element
    const s = UIL.add('slide', { name:'ui size', min:128, max:400, value:240, step:10, w:100, pos:{left:'10px', top:'30px' }, simple:true }).onChange( callbackSize )
    const b = UIL.add('button', { name:'populate', w:100, pos:{left:'10px', top:'60px'}, simple:true }).onChange( populate )
    const c = UIL.add('button', { w:64, h:64, pos:{right:'10px', top:'10px'}, simple:true }).icon(UIL.Tools.icon('github', '#DEDEDE', 50) ).onChange( function(v){ let w = window.open('https://github.com/lo-th/uil','_blank'); } )
    const d = UIL.add('button', { w:64, h:64, pos:{right:'10px', top:'84px'}, simple:true }).icon(UIL.Tools.icon('donate', '#DEDEDE', 50) ).onChange( function(v){ let w = window.open('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8KTXA987XHYNQ','_blank'); } )

    // you can also use object reference 
    const obj = {
        Bool_v: false,
        Color_v: 0xffffff,
        Slide_v: -50,
        Circular_v: 25,
        Knob_v:25,
    }

    // init gui and define global callback
    const ui = new UIL.Gui( { css:'top:68px; left:50%;', w:240, h:20, center:true } ).onChange( callback );

    populate();

    function populate () {

        if( !display ){

            title = ui.add( 'title',  { name:'UIL '+ UIL.REVISION, h:22, align:'center' })

            let gr = ui.add('group', { name:'Examples', h:30, color:'#0FF' }).onChange( callbackLink )

            gr.add( 'button', { value: ['uil_3d', 'uil_3d_2'], color: '#EEE' })
            gr.add( 'button', { value: ['uil_color', 'uil_three'] })
            gr.add( 'button', { value: ['uil_group', 'uil_imagelist'] })
            gr.add( 'button', { value: ['uil_item', 'uil_listen'] })
            gr.add( 'button', { value: ['uil_pad2d', 'uil_to_canvas'] })
            gr.add( 'button', { value: ['uil_stress', 'uil_icon'] })
            
            ui.add('fps', { h:22, hplus:70, res:80 });
            graph = ui.add('fps', { 
                name:'custom graph', h:22, hplus:70, custom:true, alpha:1, res:50, 
                names:['Post','Step','Next'], cc:['50,160,222','222,120,50','222,222,50'], 
                range:[25,25,25], precision:2, radius:4, color:'#EEEEEE', adding:true   
            }).onOpen( updateGraph ).onClose( stopGraph )

            ui.add( 'empty', { h:5 })

            ui.add( obj, 'Bool_v', { h:20 })
            
            ui.add( 'space', { h:5 })

            ui.add( obj, 'Color_v', { ctype:'html' }).onChange( callbackLogo );
            ui.add( 'color', { name:'Color', ctype:'html', value:[ 0,1,1,1 ] });

            ui.add( 'empty', { h:5 })

            ui.add( obj, 'Slide_v', { min:-100, max:100, precision:0 });
            ui.add( 'slide',  { name:'Slide', min:-1, max:1, value:0, step:0.01, precision:2, mode:1 });
            ui.add( 'slide',  { name:'Slide', min:-1, max:1, value:0, step:0.01, precision:2, mode:2, color:'#D4B87B' });

            ui.add( 'empty', { h:5 })

            ui.add( 'string', { name:'String', value:'welcome to uil', h:30});

            ui.add( 'empty', { h:5 })

            ui.add( 'list',   { name:'List', list:list, miniCanvas:true, canvasBg:'green', h:30 })
            

            ui.add( 'number', { name:'Number', value:20, min:-60, max:200, h:25 })
            ui.add( 'number', { name:'Vector2', value:[0,0], h:25 })
            ui.add( 'number', { name:'Vector3', value:[0,0,0], h:25 })
            ui.add( 'number', { name:'Vector4', value:[0,0,0,0], step:1, precision:0, h:25 })


            ui.add('empty', { h:5 })
            ui.add('button', { name:'Files', value:[ 'LOAD', 'SAVE' ] }).onChange( callbackLoader )
            ui.add('empty', { h:5 })

            gr = ui.add('group', { name:'Buttons', h:30 })

            gr.add('button', { name:'Button-1', value:'B0' })
            gr.add('button', { name:'Button-2', value:['B1', 'B2', 'B3'], selectable:true })
            gr.add( 'empty', { h:5 })
            gr.add( 'grid', { values:['Line','Rectangle', 'Circle', 'Ellipse'], selectable:true, value:'Line' })
            gr.add( 'empty', { h:5 })
            gr.add( 'selector', { name:'selector', color:'#D4B87B', h:30,  values:[1, 2, 3, 4], value:4 })

            //

            gr = ui.add( 'group', { name:'Groups', h:30 })

            gr.add('list',   { name:'', list:list2, itemHeight:30, miniCanvas:true, canvasBg:'green', listOnly:true, dragout:true });
            gr.add( 'bool', { name:'OFF', onName:'ON', value:false, mode:1 })

            let grIn = gr.add('group', { name:'Slider', h:30 })

            grIn.add( 'slide',  { name:'slide', min:-100, max:100, value:0, precision:0, color:'#B0CC99', h:20 })
            grIn.add( 'slide',  { name:'slide', min:-100, max:100, value:0, precision:0, color:'#F6E497', h:20 })
            grIn.add( 'slide',  { name:'slide', min:-100, max:100, value:0, precision:0, color:'#C79F4B', h:20 })
            grIn.add( 'slide',  { name:'slide', min:-100, max:100, value:0, precision:0, color:'#FF5B2B', h:20 })
            grIn.add( 'slide',  { name:'slide', min:-100, max:100, value:0, precision:0, color:'#E70739', h:20 })

            gr = ui.add( 'group', { name:'Circulars', color:'#D4B87B', h:30  })

            gr.add( obj, 'Circular_v', { type:'circular', w:64, min:0, max:100, precision:2, step:0.1, color:'#B0CC99', mode:1 })
            gr.add( 'circular', { name:'circular', w:64, min:0, max:100, value:50, precision:0, step:1, color:'#F6E497', mode:1 })
            gr.add( 'circular', { name:'circular', w:64, min:0, max:100, value:70, precision:0, step:10, color:'#C79F4B', mode:1 })

            gr = ui.add('group', { name:'Knobs', color:'#D4B87B', h:30  })

            gr.add( obj, 'Knob_v', { type:'knob', w:64, min:0, max:100, precision:2, step:0.1, color:'#D4B87B', mode:1 })
            gr.add( 'knob', { name:'knob', w:64, min:0, max:100, value:50, precision:0, step:1, color:'#D4B87B', mode:2 })
            gr.add( 'knob', { name:'knob', w:64, min:0, max:100, value:70, precision:0, step:10, color:'#D4B87B', mode:1 })

            gr = ui.add('group', { name:'Joysticks', color:'#D4B87B', h:30  })

            gr.add( 'joystick', { name:'joystick', w:64, multiplicator:1, precision:2, color:'#D4B87B', mode:1 })
            gr.add( 'joystick', { name:'joystick', w:64, multiplicator:1, precision:2, color:'#D4B87B' })
            gr.add( 'joystick', { name:'joystick', w:64, multiplicator:1, precision:2, color:'#D4B87B' })

            gr = ui.add('group', { name:'Extra', h:30  })


            gr.add( 'graph',  { name:'Graph', h:80, value:[90,30,-40,-90,-40,30,90], neg:true, multiplicator:100, precision:0 })
            gr.add( 'pad', { name:'Pad', w:100, color:'#D4B87B', mode:0 })
            gr.add( 'pad', { name:'Pad', w:100, color:'#D4B87B', min:-50, max:50, precision:0, mode:1 })
            gr.add( 'select', { name:'Select', color:'#D4B87B', h:30, value:'yoooch' })
            gr.add( 'bitmap', { name:'Bitmap', color:'#D4B87B', h:30, value:'null' })

            //gr.open();

            display = true
            b.label('clear')
            
        } else {

            ui.clear()
            display = false
            b.label('populate')

        }

    }

    // update custom graph

    function stopGraph() {
        cancelAnimationFrame( graphUp )
    }

    function updateGraph() {

        graphUp = requestAnimationFrame( updateGraph )
        if( ny==4 ){
            graph.tick( [ 5*Math.random(), 5*Math.random(), 8*Math.random() ] )
            ny=0
        }
        ny++

    }

</script>
</body>
</html>