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

Method	Example
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