VUI

VUE.js GUI plugin for creative coding and generative design. Work in progress.

Setup

npm install @pangenerator/vui --save

Using

Just a moment...

Settings file

{
  "toggleCodes": [9, 72, 104],
  "width": 300,
  "padding": 10,
  "visible": true,
  "values": true,
  "theme": {
    "background": "#222222",
    "f_high": "#ffffff",
    "f_med": "#affec7",
    "f_low": "#888888",
    "f_inv": "#000000",
    "b_high": "#555555",
    "b_med": "#333333",
    "b_low": "#111111",
    "b_inv": "#affec7"
  },
  "controllers": [
    {
      "name": "size",
      "type": "slider",
      "min": 0,
      "max": 300,
      "value": 100,
      "precision": 0
    },
    {
      "name": "opacity",
      "type": "slider",
      "min": 0,
      "max": 1,
      "value": 1.0,
      "precision": 2
    },
    {
      "name": "sides",
      "type": "slider",
      "min": 3,
      "max": 10,
      "value": 3,
      "precision": 0
    },
    {
      "name": "border",
      "type": "toggle",
      "value": true
    },
    {
      "name": "text",
      "type": "text",
      "value": "String content"
    },
    {
      "name": "color",
      "type": "color",
      "value": "#ffc800"
    },
    {
      "name": "square",
      "type": "button"
    }
  ]
}

License

MIT License

TODO

• [x] textfield
• [x] toggle
• [x] set
• [x] onchange events
• [x] button
• [ ] color selector
• [ ] switch
• [ ] group
• [ ] dropdown
• [ ] save
• [ ] load
• [ ] connect npm publish with git tag
• [ ] paper.js example
• [ ] d3 example
• [ ] svg example
• [ ] theme.svg [?]