{"id":19184505,"url":"https://github.com/9am/ctrl-panel","last_synced_at":"2025-06-25T07:34:08.707Z","repository":{"id":63111957,"uuid":"564590208","full_name":"9am/ctrl-panel","owner":"9am","description":"A simple control panel. 🎚🎛🕹","archived":false,"fork":false,"pushed_at":"2023-04-24T10:03:49.000Z","size":181,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-09T06:13:34.906Z","etag":null,"topics":["clamp","color","control","ctrl","group","input","knob","panel","radio","range","slider","switch","text","vector","web-components"],"latest_commit_sha":null,"homepage":"https://9am.github.io/ctrl-panel/","language":"TypeScript","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/9am.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2022-11-11T03:13:07.000Z","updated_at":"2023-04-24T07:56:22.000Z","dependencies_parsed_at":"2023-12-09T00:27:51.588Z","dependency_job_id":null,"html_url":"https://github.com/9am/ctrl-panel","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":0.4,"last_synced_commit":"b257b8c8a1cd64d5798803922f54b55951b422b9"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/9am/ctrl-panel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fctrl-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fctrl-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fctrl-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fctrl-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9am","download_url":"https://codeload.github.com/9am/ctrl-panel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Fctrl-panel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261827405,"owners_count":23215741,"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":["clamp","color","control","ctrl","group","input","knob","panel","radio","range","slider","switch","text","vector","web-components"],"created_at":"2024-11-09T11:07:23.777Z","updated_at":"2025-06-25T07:34:08.686Z","avatar_url":"https://github.com/9am.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"ctrl-panel\" src=\"https://user-images.githubusercontent.com/1435457/202668072-2d92cdc5-e723-4b1f-bc0a-b6126d5af1ba.png\" width=\"240\" /\u003e\n    \u003ch1\u003e\u0026lt;ctrl-panel\u0026gt;\u003c/h1\u003e\n    \u003cp\u003eA simple control panel.\u003c/p\u003e\n    \u003cp\u003e\n        \u003ca href=\"https://github.com/9am/ctrl-panel/blob/main/LICENSE\"\u003e\n            \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/9am/ctrl-panel?style=flat-square\u0026color=success\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@9am/ctrl-panel\"\u003e\n            \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@9am/ctrl-panel?style=flat-square\u0026color=orange\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@9am/ctrl-panel\"\u003e\n            \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/@9am/ctrl-panel?style=flat-square\u0026color=blue\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://bundlephobia.com/package/@9am/ctrl-panel@latest\"\u003e\n            \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@9am/ctrl-panel?style=flat-square\"\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## Why Build This\nSee my blog post on [9am.github.io](https://9am.github.io/)\n\u003e [Every Animation Lover Needs A Control Panel](https://github.com/9am/9am.github.io/issues/10)\n\n## Features\n- **9 custom elements** to choose.\n- **3 themes** out of the box.\n- **Control the value shape** with the template.\n- Customize or make your own theme with **CSS properties.**\n\n## Elements\n| Element | Screenshot | Varient | Description | Live Demo |\n| ------- | ---------- | ------- | ----------- | --------- |\n| ctrl-panel | ------- | ------- | The root element. | [demo](http://9am.github.io/ctrl-panel/ctrl-panel.html) |\n| ctrl-group | ------- | ------- | Group ctrl-* together to shape the value. | [demo](http://9am.github.io/ctrl-panel/ctrl-group.html) |\n| ctrl-slider | ![slider-1](https://user-images.githubusercontent.com/1435457/233948538-65ea017b-fddd-4026-a8a8-a739f199533a.gif) | ![slider-2](https://user-images.githubusercontent.com/1435457/233948534-3aa95a1c-5043-43d8-a8e7-5c81cdce2357.gif) | A numblic slider. | [demo](http://9am.github.io/ctrl-panel/ctrl-slider.html) |\n| ctrl-clamp | ![clamp-1](https://user-images.githubusercontent.com/1435457/233948483-22b0851b-c0d9-4ba0-82b4-5ba7993af5b4.gif) | ![clamp-2](https://user-images.githubusercontent.com/1435457/233948511-3f689958-500c-4e6a-83a2-c278cbc61b1b.gif) | Select a tuple low-high value. | [demo](http://9am.github.io/ctrl-panel/ctrl-clamp.html) |\n| ctrl-switch | ![switch-1](https://user-images.githubusercontent.com/1435457/233948542-e5611014-c9c9-4b3d-a2c0-be53745bd63e.gif) | ![switch-2](https://user-images.githubusercontent.com/1435457/233948545-6b2efbe3-ae87-4602-98f8-ded0537a6cae.gif) | A ON/OFF switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-switch.html) |\n| ctrl-radio | ![radio-1](https://user-images.githubusercontent.com/1435457/233948532-03a2f23c-41d3-4291-b8b7-fe770750b869.gif) | ![radio-2](https://user-images.githubusercontent.com/1435457/233948528-d19f430a-9681-4658-a23b-25f4f404f8e4.gif) | Multiple/Single switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-radio.html) |\n| ctrl-vector | ![vector](https://user-images.githubusercontent.com/1435457/233948552-672f7051-f07a-4c4c-950c-f7c8e5ccb122.gif) | | Select a tuple vector on a 2D surface. | [demo](http://9am.github.io/ctrl-panel/ctrl-vector.html) |\n| ctrl-text | ![text](https://user-images.githubusercontent.com/1435457/233948548-1088ed00-5bba-4d52-a64c-95341679c8d0.gif) | | Text input. | [demo](http://9am.github.io/ctrl-panel/ctrl-text.html) |\n| ctrl-color | ![color](https://user-images.githubusercontent.com/1435457/233948524-3f5b06b2-fdbf-4586-8892-d76fc0d6cfc6.gif) | | Color picker. | [demo](http://9am.github.io/ctrl-panel/ctrl-color.html) |\n\n\n## Usage\n\n#### Install\n```bash\nnpm install @9am/ctrl-panel\n```\n\n#### HTML\n```html\n\u003cctrl-panel theme=\"neumorphism\"\u003e\n    \u003cctrl-slider name=\"slider\"\u003eslider\u003c/ctrl-slider\u003e\n    \u003cctrl-clamp name=\"clamp\"\u003eclamp\u003c/ctrl-clamp\u003e\n    \u003cctrl-vector name=\"vector\"\u003evector\u003c/ctrl-vector\u003e\n    \u003cctrl-switch name=\"switch\"\u003eswitch\u003c/ctrl-switch\u003e\n    \u003cctrl-radio name=\"radio\"\u003e\n        \u003cctrl-switch name=\"a\"\u003eA\u003c/ctrl-switch\u003e\n        \u003cctrl-switch name=\"b\"\u003eB\u003c/ctrl-switch\u003e\n        \u003cctrl-switch name=\"c\" default=\"true\"\u003eC\u003c/ctrl-switch\u003e\n    \u003c/ctrl-radio\u003e\n    \u003cctrl-group name=\"group\"\u003e\n        \u003cctrl-text name=\"text\"\u003etext\u003c/ctrl-text\u003e\n        \u003cctrl-color name=\"color\"\u003ecolor\u003c/ctrl-color\u003e\n    \u003c/ctrl-group\u003e\n\u003c/ctrl-panel\u003e\n```\n\n#### Javascript\n```js\nimport '@9am/ctrl-panel';\n// import '@9am/ctrl-panel/theme.css'; // css to enable default themes.\n\ndocument.querySelector('ctrl-panel').addEventListener('CHANGE', (evt) =\u003e {\n    console.log('[panel value]:', evt.currentTarget.value);\n    /* output:\n     * {\n     *     slider: 5,\n     *     clamp: [0, 10],\n     *     vector: [0, 0],\n     *     switch: false,\n     *     radio: 'c',\n     *     group: {\n     *         text: '',\n     *         color: '#000000'\n     *     }\n     * }\n     */\n});\n\n```\n\n## Documentation\n\n### \\\u003cctrl-group\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | **`name*`** | string | **required** | value key |\n| attribute | **`orientation`** | h \\| v | `h` | layout direction |\n| attribute | **`type`** | object \\| array | `object` | value shape |\n| ---- |  |  |  |  |\n| property | get **`value`** | Value | `{}` | value |\n| ---- |  |  |  |  |\n| slot | **`label`** | html tag |  | label |\n| slot | **`default`** | ctrl-* | `''` | value |\n\n### \\\u003cctrl-panel\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | `extends \u003cctrl-group\u003e` | ---- | ---- | ---- |\n| attribute | **`theme`** | string | `flat` | theme (flat \\| oldschool \\| neumorphism) |\n| attribute | **`width`** | css length | `auto` | panel width |\n| attribute | **`height`** | css length | `auto` | panel height |\n| attribute | **`placement`** | top-left \\| top-right \\| bottom-left \\| bottom-right | `''` | if placement is set, panel will be positioned as fixed, and with a button to toggle the visibility. |\n| ---- |  |  |  |  |\n| property | `extends \u003cctrl-group\u003e` | ---- | ---- | ---- |\n| ---- |  |  |  |  |\n| slot | `extends \u003cctrl-group\u003e` | ---- | ---- | ---- |\n\n### \\\u003cctrl-radio\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | `extends \u003cctrl-group\u003e` | ---- | ---- | ---- |\n| attribute | **`multiple`** | boolean | `false` | enable select multiple items |\n| ---- |  |  |  |  |\n| property | `extends \u003cctrl-group\u003e` | ---- | ---- | ---- |\n| ---- |  |  |  |  |\n| slot | `extends \u003cctrl-group\u003e` | ---- | ---- | ---- |\n| slot | **`default`** | `ctrl-switch` | `''` | value |\n\n### \\\u003cctrl-slider\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | **`name*`** | string | **required** | value key |\n| attribute | **`orientation`** | h \\| v | `h` | layout direction |\n| attribute | **`type`** | range \\| knob | `range` | slider type |\n| attribute | **`min`** | number | `0` | min value |\n| attribute | **`max`** | number | `10` | max value |\n| attribute | **`step`** | number \\| 'any' | `1` | step interval |\n| attribute | **`default`** | number | `5` | default value |\n| ---- |  |  |  |  |\n| property | get **`value`** | number | `5` | value |\n\n### \\\u003cctrl-clamp\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | `extends \u003cctrl-slider\u003e` | ---- | ---- | ---- |\n| attribute | **`default`** | string(JSON) | `'[0,10]'` | default value |\n| ---- |  |  |  |  |\n| property | `extends \u003cctrl-slider\u003e` | ---- | ---- | ---- |\n| property | get **`value`** | number | `[0,10]` | value |\n| ---- |  |  |  |  |\n| slot | `extends \u003cctrl-slider\u003e` | ---- | ---- | ---- |\n\n### \\\u003cctrl-switch\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | **`name*`** | string | **required** | value key |\n| attribute | **`orientation`** | h \\| v | `h` | layout direction |\n| attribute | **`type`** | range \\| toggle | `toggle` | slider type |\n| attribute | **`default`** | boolean |  | default value |\n| ---- |  |  |  |  |\n| property | get **`value`** | number | `false` | value |\n\n### \\\u003cctrl-text\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | **`name*`** | string | **required** | value key |\n| attribute | **`default`** | string | `''` | default value |\n| ---- |  |  |  |  |\n| property | get **`value`** | number | `''` | value |\n\n### \\\u003cctrl-color\\\u003e\n\n| Doc | Name | Type | Default | Description |\n| --- | ---- | ---- | ------- | ----------- |\n| attribute | **`name*`** | string | **required** | value key |\n| attribute | **`orientation`** | h \\| v | `h` | layout direction |\n| attribute | **`default`** | string | `#000000` | default value |\n| ---- |  |  |  |  |\n| property | get **`value`** | number | `#000000` | value |\n\n### Event\n\n```js\n{\n  type: 'CHANGE',\n  detail: {\n    name: string, // attribute 'name' of \u003cctrl-*\u003e\n    value: Value, // property 'value' of \u003cctrl-*\u003e\n  }\n}\n```\n\n\n## License\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9am%2Fctrl-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9am%2Fctrl-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9am%2Fctrl-panel/lists"}