{"id":16125727,"url":"https://github.com/dy/settings-panel","last_synced_at":"2025-09-12T21:33:18.320Z","repository":{"id":57357061,"uuid":"63014762","full_name":"dy/settings-panel","owner":"dy","description":"Control panel for app, demo or tests","archived":false,"fork":false,"pushed_at":"2023-03-01T15:17:19.000Z","size":8229,"stargazers_count":71,"open_issues_count":15,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-28T06:41:39.956Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dy.github.io/settings-panel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-10T19:19:59.000Z","updated_at":"2024-11-06T22:58:44.000Z","dependencies_parsed_at":"2024-06-18T22:56:18.052Z","dependency_job_id":"c69062f9-c7fc-4e0d-ba1c-492c0cd2e2ef","html_url":"https://github.com/dy/settings-panel","commit_stats":null,"previous_names":["dfcreative/settings-panel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fsettings-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fsettings-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fsettings-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fsettings-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/settings-panel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232792150,"owners_count":18577262,"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-10-09T21:31:10.108Z","updated_at":"2025-01-06T21:55:02.776Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# settings-panel [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)\n\nSimple settings panel for your app, demo or tests.\n\n[![settings-panel](https://raw.githubusercontent.com/dy/settings-panel/gh-pages/images/preview.png \"settings-panel\")](http://dy.github.io/settings-panel/)\n\nIn the preview there is a _typer_ theme, for other themes or customizations see [demo](http://dy.github.io/settings-panel/).\n\n## Usage\n\n[![npm install settings-panel](https://nodei.co/npm/settings-panel.png?mini=true)](https://npmjs.org/package/settings-panel/)\n\n```javascript\nvar createPanel = require('settings-panel')\n\nvar panel = createPanel([\n  {type: 'range', label: 'my range', min: 0, max: 100, value: 20},\n  {type: 'range', label: 'log range', min: 0.1, max: 100, value: 20, scale: 'log'},\n  {type: 'text', label: 'my text', value: 'my cool setting', help: 'why this is cool'},\n  {type: 'checkbox', label: 'my checkbox', value: true},\n  {type: 'color', label: 'my color', format: 'rgb', value: 'rgb(10,200,0)', change: value =\u003e console.log(value)},\n  {type: 'button', label: 'gimme an alert', change: () =\u003e alert('hello!')},\n  {type: 'select', label: 'select one', options: ['option 1', 'option 2'], value: 'option 1'}\n],\n  {\n    title: 'Settings',\n    style: 'position: absolute; right: 0; z-index: 1'\n  }\n);\n```\n\n[**Run this in requirebin**](http://requirebin.com/?gist=21fc39f7f206ca50a4d5cd7298f8b9f8)\n\n## API\n\n`const Panel = require('settings-panel')`\n\u003cdetails\u003e\u003csummary\u003e**`let panel = new Panel(fields, options?)`**\u003c/summary\u003e\n\nThe first argument is a list of fields or object with id/field pairs. Each field may have following properties:\n\n* `type` one of `range` • `interval` • `checkbox` • `color` • `select` • `switch` • `raw` • `textarea` • `text` or any `\u003cinput\u003e` type. If undefined, type will be detected from the value.\n* `id` used as key to identify the field. If undefined, the label will be used instead.\n* `label` label for the input. If label is false, it will be hidden.\n* `value` current value of the field.\n* `default` explicitly defines default value, if differs from the initial value.\n* `orientation` defines position of a label relative to the input, one of `top`, `left`, `right`, `bottom`. Redefines `options.orientation`.\n* `style` appends additinal style to the field, can be a css object or css string.\n* `hidden` defines whether field should be visually hidden, but present as a value.\n* `disabled` just disables the input, making it inactive.\n* `input` callback, invoked if value changed.\n* `init` invoked once component is set up.\n* `change` invoked each time the field value changed, whether through `input` or API.\n* `before` and `after` define an html to display before or after the element, can be a string, an element or a function returning one of the two. That may come handy in displaying help, info or validation messages, separators, additional buttons, range limits etc - anything related to the element.\n* `title` will display text in tooltip.\n\nFor example,\n\n```javascript\n{type: 'checkbox', label: 'My Checkbox', value: true, input: value =\u003e {}}\n```\n\nSome types have additional properties:\n\n- `range` can specify a `min`, `max`, and `step` (or integer `steps`). Scale can be either `'linear'` (default) or `'log'`. If a log scale, the sign of `min`, `max`, and `value` must be the same and only `steps` is permitted (since the step size is not constant on a log scale). It also takes `precision` optional parameter for the displayed value.\n- `interval` obeys the same semantics as `range` inputs, except the input and ouput is a two-element array corresponding to the low/high bounds, e.g. `value: [1, 7.5]`.\n- `color` can specify a `format` as either `rgb` • `hex` • `array`\n- `select`, `switch` and `checkbox` can specify `options`, either as an `Array` (in which case the value is the same as the option text) or as an object containing key/value pairs (in which case the key/value pair maps to value value/label pairs).\n- `text` and `textarea` can specify `placeholder`.\n- `raw` can define `content` method, returning HTML string, element or documentFragment.\n\n#### options\n\n```js\n// element to which to append the panel\ncontainer: document.body,\n\n// a title to add to the top of the panel\ntitle: 'Settings',\n\n// specifies label position relative to the input: `top` • `left` • `bottom` • `right`\norientation: 'left',\n\n// collapse by clicking on title\ncollapsible: false,\n\n// use a theme, see `theme` folder.\n// available themes: typer, flat, control, dragon\ntheme: require('settings-panel/theme/none'),\n\n//theme customization, can redefine theme defaults\npalette: ['black', 'white'],\nlabelWidth: '9em',\ninputHeight: '1.6em',\nfontFamily: 'sans-serif',\nfontSize: 13,\n\n//additional css, aside from the theme’s one. Useful for custom styling\ncss: '',\n\n//appends additional className to the panel element.\nclassName: ''\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e**`panel.on(event, callback)`**\u003c/summary\u003e\n\nAttach callback to `change`, `input` or `init` event.\n\nThe callback will recieve `name`, `data` and `state` arguments:\n\n```javascript\npanel.on('change', (name, value, state) =\u003e {\n  // name === 'my checkbox'\n  // value === false\n  // state === {'my checkbox': false, 'my range': 75, ...}\n});\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e**`panel.get(name?)`**\u003c/summary\u003e\n\nGet the value of a field defined by `name`. Or get full list of values, if `name` is undefined.\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e**`panel.set(name, value|options)`**\u003c/summary\u003e\n\nUpdate specific field, with value or field options. You can also pass an object or array to update multiple fields:\n\n```js\npanel.set({ 'my range': { min: -100, value: 200}, 'my color': '#fff' });\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e**`panel.update(options?)`**\u003c/summary\u003e\n\nRerender panel with new options. Options may include values for the theme, like `palette`, `fontSize`, `fontFamily`, `labelWidth`, `padding` etc, see specific theme file for possible options.\n\n\u003c/details\u003e\n\n## Spotted in the wild\n\n\u003e [plot-grid](https://dy.github.io/plot-grid)\u003cbr/\u003e\n\u003e [app-audio](https://dy.github.io/app-audio)\u003cbr/\u003e\n\u003e [gl-waveform](https://dy.github.io/gl-waveform)\u003cbr/\u003e\n\n## See also\n\n\u003e [control-panel](https://github.com/freeman-lab/control-panel) — original forked settings panel.\u003cbr/\u003e\n\u003e [oui](https://github.com/wearekuva/oui) — sci-ish panel.\u003cbr/\u003e\n\u003e [dat.gui](https://github.com/dataarts/dat.gui) — other oldschool settings panel.\u003cbr/\u003e\n\u003e [quicksettings](https://github.com/bit101/quicksettings) — an alternative versatile settings panel.\u003cbr/\u003e\n\u003e [dis-gui](https://github.com/wwwtyro/dis-gui) — remake on dat.gui.\u003cbr/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fsettings-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Fsettings-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fsettings-panel/lists"}