jabroni-outfit

Jabroni Outfit GUI

Small GUI and Persistent State library based on Vue

https://smartacephale.github.io/Jabroni-Outfit-GUI/

Features

• Store vaiables are persistent by default.
• Store variable with <$> prefix are not persistent.

Usage

import { JabronioStore, JabronioGUI } from 'jabroni-outfit';

<script src="https://unpkg.com/jabroni-outfit@latest/dist/jabroni-outfit.umd.js"></script>
...
const { JabronioStore, JabronioGUI } = window.jabronioutfit;

Example

const { JabronioGUI, JabronioStore, setupScheme } = window.jabronioutfit;

const example = () => {
  const store = new JabronioStore();

  const scheme: SchemeInput = setupScheme([
    {
      title: 'Colors',
      content: [
        {
          $color1: 'coral',
        },
        {
          color2: 'crimson',
        },
        {
          $color3: 'tomato',
        },
        {
          size: 100,
          type: 'range',
          max: '500',
          min: '0',
        },
        {
          gradientEnabled: true,
          label: 'gradient enabled',
        },
        {
          reset: () => {
            store.state.$color1 = 'darkslateblue';
            store.state.color2 = 'maroon';
            store.state.$color3 = 'darksalmon';
          },
        },
      ],
    },
    {
      title: 'Advanced',
      collapsed: true,
      content: [
        {
          'clueless checkbox': false,
        },
      ],
    },
  ]);

  new JabronioGUI(scheme, store);

  function drawGradient() {
    const { $color1, color2, $color3, gradientEnabled, size } = store.state;
    if (!gradientEnabled) {
      document.body.style.background = '#000';
      return;
    }
    document.body.style.background = `repeating-radial-gradient(${$color1}, ${color2}, ${$color3} ${size}%)`;
  }

  drawGradient();

  store.stateSubject.subscribe((_) => {
    drawGradient();
  });

  store.eventSubject.subscribe((e) => {
    console.log('event', e);
  });
};

example();