{"id":13534344,"url":"https://github.com/superguigui/guigui","last_synced_at":"2025-04-01T22:31:29.481Z","repository":{"id":31304959,"uuid":"34867223","full_name":"superguigui/guigui","owner":"superguigui","description":"GUI tool for tweaking stuff in js","archived":false,"fork":false,"pushed_at":"2023-01-06T18:27:01.000Z","size":15358,"stargazers_count":72,"open_issues_count":39,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-02T21:32:08.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/superguigui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-30T17:25:45.000Z","updated_at":"2023-09-13T06:55:59.000Z","dependencies_parsed_at":"2023-01-14T18:45:50.216Z","dependency_job_id":null,"html_url":"https://github.com/superguigui/guigui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superguigui%2Fguigui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superguigui%2Fguigui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superguigui%2Fguigui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superguigui%2Fguigui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/superguigui","download_url":"https://codeload.github.com/superguigui/guigui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246720579,"owners_count":20822919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:30.882Z","updated_at":"2025-04-01T22:31:28.924Z","avatar_url":"https://github.com/superguigui.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/superguigui/guigui.svg?branch=master)](https://travis-ci.org/superguigui/guigui) \n\n# guigui\n\nGUI tool for creative coding projects Inspired from dat.GUI.\nCheck out the [demo](https://superguigui.github.io/guigui).\n\n## Install\n```bash\nnpm install guigui --save\n```\n\n## Getting started\n```javascript\nvar guigui = require('guigui');\n\nvar targetObject = {x: 0};\n\nguigui.add(targetObject, 'x');\n```\n\n![Getting Started](demo/images/getting-started.png)\n\nA couple things happened here. First by calling the add Method of guigui, you automatically created a panel called `Settings` in which your component will go. Then guigui detected the type of the `x` property from `targetObject` to be a Number and picked the slider component accordingly.\n\n## Components\nWhen possible guigui will auto detect the targeted property type and chose which component should be used. Here are the available components.\n- `Slider` to manipulate numerical values in a given range.\n- `Toggler` a button with a truthy and a falsy state to handle booleans. Equivalent to checkbox.\n- `Launcher` a button to launch a function.\n- `Text` a text input for string modification.\n- `Select` a dropdown select component.\n- `Colorpicker` To handle colors.\n\nThe select component will be invoked for a Number or a String if the third parameter of the `guigui.add()` function is an array.\n\nAlso the ColorPicker cannot be invoked from the `add` function. Instead you need to call the `guigui.addColorPicker()` function.\n\nFor all components you can use a third options arguments to configure the component more precisely. See below for more explanations.\n\n```javascript\n// The source object we want to control\nconst myObject = {\n  num: 9,\n  name: 'My Object',\n  action: () =\u003e {},\n  isActive: false,\n  color: '#FF0000',\n  type: 'awesome'\n}\n\n// Add some components to control myObject\nguigui.add(myObject, 'num')\nguigui.add(myObject, 'name')\nguigui.add(myObject, 'action')\nguigui.add(myObject, 'isActive')\n\n// Special cases, Select and ColorPicker components\nguigui.add(myObject, 'type', ['awesome', 'nice', 'crappy'])\nguigui.addColorPicker(myObject, 'color')\n```\n![Getting Started](demo/images/components.png)\n\n## Panels and folders\nIf you don't do it yourself, guigui will automatically create a panel called `Settings` when you first use `guigui.add(...)`. You can however create any number of panels yourself with the `guigui.addPanel()` method.\n```javascript\n// manually create panels\nconst panel1 = guigui.addPanel('Panel1')\nconst panel2 = guigui.addPanel('Panel2')\n\n// create components inside these panels\nconst o = {a: 0, b: 1, c: 2}\npanel1.add(o, 'a')\npanel1.add(o, 'b')\npanel2.add(o, 'c')\n```\n![Panels](demo/images/panel-example.png)\n\nEach panel can contain components and folders. To create a folder in a panel you need to call the `guigui.addFolder()` method.\n```javascript\n// creates folder in guigui default panel\nconst f1 = guigui.addFolder('Folder1')\nconst f2 = guigui.addFolder('Folder2')\n\n// add folders to another folder\nconst subF1 = f1.addFolder('SubFolder1')\nconst subF2 = f1.addFolder('SubFolder2')\n```\n![Folders](demo/images/folders.png)\n\n## Slider\nControls a number.\n```javascript\nconst o = {a: 0.6}\n\nguigui.add(o, 'a', {\n  min:      0, // default is 0\n  max:      1, // default is 100\n  step:   0.1, // default is 1\n  label: 'foo', // default is target property's name (here \"a\")\n  watch: false // default is false\n})\n```\n![Folders](demo/images/slider.png)\n\n## Text\nControls a string.\n```javascript\nconst o = {a: 'foo'}\n\nguigui.add(o, 'a', {\n  label: 'bar' // default is target property's name (here \"a\")\n  watch: false, // default is false\n})\n```\n![Folders](demo/images/text.png)\n\n## Toggler\nControls a boolean.\n```javascript\nconst o = {a: true}\n\nguigui.add(o, 'a', {\n  label: 'foo', // default is target property's name (here \"a\")\n  watch: false // default is false\n})\n```\n![Folders](demo/images/toggler.png)\n\n## Launcher\nLaunches a function.\n```javascript\nconst o = {a: () =\u003e {}}\n\nguigui.add(o, 'a', {\n  label: 'foo', // default is target property's name (here \"a\")\n  watch: false // default is false\n})\n```\n![Folders](demo/images/launcher.png)\n\n## Select\nChanges a value from an array of choices.\n```javascript\nconst choices = [0, 1, 2, 3]\nconst o = {a: 0}\n\nguigui.add(o, 'a', choices, {\n  label: 'foo', // default is target property's name (here \"a\")\n  watch: false // default is false\n})\n```\n![Folders](demo/images/select.png)\n\n## ColorPicker\nControls hex colors from string or number. It's also compatible with THREE.js Color class.\n```javascript\nconst o = {\n  css: '#DA5137',\n  hex: '#84AF52',\n  three: new THREE.Color(0x97C4E9)\n}\n\nguigui.addColorPicker(o, 'css', {\n  label: 'foo', // default is target property's name (here \"css\"),\n  watch: false // default is false\n})\nguigui.addColorPicker(o, 'hex')\nguigui.addColorPicker(o, 'three')\n```\n\n![ColorPicker](demo/images/colorpicker2.png)\n\n## Callbacks and events\nAll components can be passed a `watch` option, a boolean, to specify if the component should auto update when `targetObject[property]` is changed outside of the Gui. This option defaults to false.\n```javascript\nconst o = {x: 0, y: 0}\ngui.add(o, 'x', {watch: true})\no.x = 1\n// our slider component value will be updated to 1\n\ngui.add(o, 'y', {watch: false})\no.y = 2\n// our slider component value did not change\n```\n\n\nAdditionnaly all components extend `EventEmitter` and you can listen for value changes for custom behaviors.\n```javascript\ngui.add(o, 'x').on('update', value =\u003e {\n  // do something with value\n})\n```\n\n## Motivations\nThis library was mainly made as an exercise, and also to fill my need for a GUI tool for creative development.\nI also encountered various annoying behaviors with dat.GUI that i wished to avoid here :\n* Slider value representation should ALWAYS be based on the `step` param.\n* Sometimes the colorPicker of dat.GUI will become black when trying to edit the text input.\n* Min and Max of slider should be displayed.\n\n## What's next\n- [ ] Panel Scrolling\n- [ ] Drag and drop\n- [ ] Themes\n\n\n## Contributing\n\n```bash\nnpm install\nnpm start\n```\n\n### Demo\nTo work on demo in local you will want to link your local version of guigui to the one used in the demo folder.\n```bash\nnpm link\ncd demo\nnpm link guigui\nnpm start\n```\n","funding_links":[],"categories":["GUI Parameters \u0026 Settings","Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperguigui%2Fguigui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperguigui%2Fguigui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperguigui%2Fguigui/lists"}