Suey

The Salinity 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/@salinity/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 ],
};

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

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

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

Properties

• Property functions can be chained together

folder.add(params, 'myNumber').name('Width').min(0).max(90).step(5).precision(1).unit('°');

On Change

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

// Fire 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