Skip to content

Lightweight JavaScript UI library built for the Onsight Editor.

License

Notifications You must be signed in to change notification settings

onsightengine/suey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Suey

Suey

The Onsight UI Library. A lightweight, customizable, modular UI library based on native HTML5 components.


Also includes an easy to use property inspector similar to dat.gui or lil-gui.



Install

  • Option 1: Copy build file suey.module.js, import from file...
// Import property inspector only
import { Gooey } from 'suey.module.js';

// Or, import entire library
import * as SUEY from 'suey.module.js';
  • Option 2: Install from npm, import from 'suey'...
npm install suey
import * as SUEY from 'suey';
  • Option 3: Import directly from CDN...
import * as SUEY from 'https://unpkg.com/suey/dist/suey.module.js';

Creation

const params = {
    myBoolean: true,
    myFunction: () => console.log('hello world'),
    myListInt: 0,
    myListString: 'b',
    myNumber: 75.54,
    myNumber2: 50,
    myString: 'California',
    myArray: [ 1, 0, 0 ],

    myColorString: '#ffffff',
    myColorInt: 0xffffff,
    myColorObject: { r: 1, g: 1, b: 1 },
    myColorArray: [ 1, 1, 1 ],
    myColorAlpha: 1.0,
};

const myList = [ 'a', 'b', 'c', 'd', 'e' ];

const gui = new SUEY.Gooey('Title');
const folder = gui.addFolder('Folder Name');

// Add Property
folder.add(params, 'myBoolean');                            // checkbox
folder.add(params, 'myFunction');                           // button
folder.add(params, 'myListInt', myList);                    // list by number
folder.add(params, 'myListString', myList);                 // list by value
folder.add(params, 'myNumber', min, max, step, precision);  // slider
folder.add(params, 'myNumber2');                            // if no min / max, number only
folder.add(params, 'myString');                             // text box
folder.add(params, 'myVector');                             // any length array of numbers
folder.addColor(params, 'myColor______');                   // string / int / object / array
folder.addColor(params, 'myColor______', 'myColorAlpha');   // color with transparency

// Expand / Collapse Folder
folder.toggle();

Properties

  • Property functions can be chained together
// Add Property
folder.add(params, 'myNumber').name('Width').min(0).max(90).step(5).precision(1).unit('°');

// Custom Property Title
const controller = folder.add(params, 'myNumber');
controller.name('Custom Title');

// Hide / Show Property
controller.hide();
controller.show();

On Change

// Fires constantly when slider is being changed
folder.add(params, 'myNumber').onChange(() => width = params.myNumber);

// Fires only when slider is done being changed
folder.add(params, 'myNumber').onFinishChange(() => width = params.myNumber);

Updating

  • Keep reference to controller if gui needs to be updated externally.
params = { myNumber: 5.0 };

const gui = new SUEY.Gooey();
const folder = gui.addFolder('Folder Name');
const controller = folder.add(params, 'myNumber');

// ...somwhere later params changes...
params.myNumber += 2.0;

// ...tells element to update itself from new value
controller.updateDisplay();

Styling

gui.color('#bb0000');       // Sets gui color
gui.opacity(0.5);           // Set background opacity
gui.scale(1.0);             // Scale multiplier
gui.width(200);             // Set panel width

License

Suey is released under the terms of the MIT license, so it is free to use in your free or commercial projects.

Copyright (c) 2024 Stephens Nunnally and Scidian Studios

Releases

No releases published

Packages

No packages published