mnui

(Very, very permissive & multi-paradigm) MiNimal UI kit for quick prototyping.

demo

Install

NPM:
``
npm i @jniac/mnui
`

UNPKG:
`js
import { mnui } from 'https://unpkg.com/@jniac/mnui@1.0.6/dist/mnui.js'
`

Very, very permissive & multi-paradigm?

$3

The kit allow two different usages (multi-paradigm) :

- listener / callback:
`ts
import { mnui } from '@jniac/mnui'

mnui.range('my-value', 4, { min: 0, max: 10, step: 1 }).onUserChange(newValue => {
uniforms.myEffect.value = newValue
})
`
- render loop:
`ts
import { mnui } from '@jniac/mnui'

const updateLoop = () => {
uniforms.myEffect.value = mnui.range('my-value', uniforms.myEffect.value, { min: 0, max: 10, step: 1 }).value
}
`

$3


Both usages may coexist ☮ in a same program:
`ts
import { mnui } from '@jniac/mnui'

mnui.range('my-value', 4, { min: 0, max: 10, step: 1 }).onUserChange(newValue => {
amazingStuff(newValue)
})

const loop = () => {
// Here, mnui is used only to retrieve the value of "my-value".
// Note that there is no current value, neither props.
uniforms.myEffect.value = mnui.range('my-value').value
}
`

$3


Properties may be grouped:
`ts
mnui.range('my-comp/my-value', 4, { min: 0, max: 10 })
`
Into any arbitrary hierarchy:
`ts
mnui.range('foo/bar/baz/qux/and/others/my-value-1', 4, { min: 0, max: 10 })
mnui.range('foo/bar/baz/qux/and/others/my-value-2', 2, { min: 0, max: 10 })
`
And for the sake of simplicity 😅, an intermediate "group" level may be declared:
`ts
mnui.group('foo/bar/baz/qux/and/others', () => {
mnui.range('my-value-1', 4, { min: 0, max: 10 })
mnui.range('my-value-2', 2, { min: 0, max: 10 })
})
`

$3

Some properties — as "range" — allows concise declarations
`ts
mnui.range('my-value-1', 4, [0, 10]) // [0, 10] <=> { min: 0, max: 10 }
`

So through the "listener / render-loop" choice, the "intermediate-group" usage and some "concise" options, declarations of properties to be displayed may cover a wide range of usages:
`ts
mnui.group('my-component', () => {
mnui.range('scale', 1, [0, 10]).onUserChange(x => {
dispatchMessage('new scale value', { value: x })
})
})

const updateLoop = () => {
myComp.someProperty.value = mnui.range('my-component/scale').value
}
`




More complex example


`ts
import { mnui } from '@jniac/mnui'

const someState = {
active: true,
x: 5,
position: { x: .3, y: .4, z: .5 },
rotation: { x: .3, y: .4, z: .5, order: 'XYZ' },
}

mnui.setCustomStyle(
#mnui {
--color: #005128;
--background-color: #fff9;
}
)

mnui.setAlign('bottom-right')

const renderLoop = () => {
requestAnimationFrame(renderLoop)

mnui.group('My Component', () => {
someState.active = mnui.toggle('active', someState.active).value
someState.x = mnui.range('x', someState.x, { min: 0, max: 10 }).value
mnui.vector('position', someState.position)
mnui.vector('rotation', someState.rotation, {
keys: 'x,y,z',
step: .05,
map: [
x => x * 180 / Math.PI,
x => x * Math.PI / 180,
],
})
})

cube.position.copy(someState.position)
}

requestAnimationFrame(renderLoop)
`
will render into:




Dev


`
yarn start
``

Note

- Minimal ES version: 2015 (using private identifier)
- Use Fira Code from google fonts for UI rendering.

Resources

- configurer-rollup-bundles-esm-cjs