Have ideas to improve npm?Join in the discussion! »

    perfect-gui

    2.5.2 • Public • Published

    perfect-gui

    Nice and simple GUI for JavaScript.

    Features:

    • image buttons
    • multiple panels
    • easy positioning
    • draggable panels

    Demo

    https://thibka.github.io/perfect-gui/public/

    Install

    NPM

    npm i perfect-gui
    import perfectGUI from 'perfect-gui';

    Usage

    const gui = new perfectGUI();
     
    gui.addButton('Click me', doSomething);
     
    function doSomething() {
        // ...
    }

    Options

    const gui = new perfectGUI({
        name: 'My GUI',
        // Name of the panel. 
        // Default is null.
        
        width: 250,
        // Width of the panel (in pixels). 
        // Default is 290.
        
        closed: false, 
        // Defines whether the panel should be open or closed on load. 
        // Default is false (open).
     
        position: 'bottom right',
        // Defines where to place the panel on screen.
        // Accepted values are 'top', 'bottom', 'left' and 'right' 
        // in no particular order ('bottom right' = 'right bottom').
        // If multiple instances have the same position, they will stack horizontally.
        // Default is 'top left'.
     
        draggable: false,
        // Defines if the panel can be manually moved across the screen.
        // Default is false.
     
        autoRepositioning: true
        // If set to true, the panel position will be reset when the screen is resized.
        // If a panel has been dragged, it won't be be affected.
        // Default is true.
    });

    Methods

    MethodExample
    addButton
    gui.addButton('Click me!', function() {
        ...
    });
    addImage
    gui.addImage('Click this', 'path/to/image', function {
        ...
    });
    addSlider
    gui.addSlider('Slide this', { min: 0, max: 10, value: 5, step: .1 }, function(value) {
        console.log('Slider value : ' + value);
    });
    addSwitch
    gui.addSwitch('Switch me!', true, function(state) {
        console.log('Switched boolean value: ' + state);
    });
    addList
    gui.addList('Select one', ['apple', 'lime', 'peach'], function(item) {
        console.log('Selected item: ' + item);
    });
    addFolder
    let open = true; // default is true
    let folder = gui.addFolder('folder name', open);
    folder.addButton('click me!', callback);
    toggleClose
    gui.toggleClose();

    To do

    • Adding scrollbars if window is too short
    • Adding color palette component
    • Adding object binding

    Keywords

    Install

    npm i perfect-gui

    DownloadsWeekly Downloads

    4

    Version

    2.5.2

    License

    MIT

    Unpacked Size

    614 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar