1.0.7 • Published 2 years ago
@jniac/mnui v1.0.7
mnui
(Very, very permissive & multi-paradigm) MiNimal UI kit for quick prototyping.
Install
npm i @jniac/mnui
import { mnui } from 'https://unpkg.com/@jniac/mnui@1.0.6/dist/mnui.js'
Very, very permissive & multi-paradigm?
Multi-paradigm 👩🎤
The kit allow two different usages (multi-paradigm) :
- listener / callback:
import { mnui } from '@jniac/mnui'
mnui.range('my-value', 4, { min: 0, max: 10, step: 1 }).onUserChange(newValue => {
uniforms.myEffect.value = newValue
})
- render loop:
import { mnui } from '@jniac/mnui'
const updateLoop = () => {
uniforms.myEffect.value = mnui.range('my-value', uniforms.myEffect.value, { min: 0, max: 10, step: 1 }).value
}
Permissive
Both usages may coexist ☮ in a same program:
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
}
Very permissive
Properties may be grouped:
mnui.range('my-comp/my-value', 4, { min: 0, max: 10 })
Into any arbitrary hierarchy:
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:
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 })
})
Very, very permissive
Some properties — as "range" — allows concise declarations
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:
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
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.