{"id":18595735,"url":"https://github.com/goessner/ctrling","last_synced_at":"2025-04-10T16:31:42.392Z","repository":{"id":64983231,"uuid":"579588620","full_name":"goessner/ctrling","owner":"goessner","description":"An appealing GUI for controlling your Web-App, JSON, DOM or JavaScript Object Values","archived":false,"fork":false,"pushed_at":"2023-02-03T18:31:54.000Z","size":4356,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-20T16:08:39.763Z","etag":null,"topics":["controller-manager","custom-elements","dom","gui","html","javascript","json","jsonpath","object"],"latest_commit_sha":null,"homepage":"https://goessner.github.io/ctrling/","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/goessner.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":"2022-12-18T07:31:52.000Z","updated_at":"2025-01-10T00:43:54.000Z","dependencies_parsed_at":"2023-02-09T15:16:40.450Z","dependency_job_id":null,"html_url":"https://github.com/goessner/ctrling","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goessner%2Fctrling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goessner%2Fctrling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goessner%2Fctrling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goessner%2Fctrling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goessner","download_url":"https://codeload.github.com/goessner/ctrling/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248252691,"owners_count":21072701,"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":["controller-manager","custom-elements","dom","gui","html","javascript","json","jsonpath","object"],"created_at":"2024-11-07T01:20:59.084Z","updated_at":"2025-04-10T16:31:37.378Z","avatar_url":"https://github.com/goessner.png","language":"JavaScript","readme":"[![](https://data.jsdelivr.com/v1/package/npm/ctrling/badge)](https://www.jsdelivr.com/package/npm/ctrling)\n# \u0026lt;ctrl-ing\u0026gt; - A Smart GUI Controller\n\n## What is it ... ?\n\n`\u003cctrl-ing\u003e` is a tiny HTML custom element used to interactively control your Web-App parameters or JavaScript/JSON/DOM object values in a comfortable way with the following characteristics:\n\n* tiny footprint `25.3/14.2 kB` un/compressed.\n* dependency free.\n* easy prototypical generation with low effort. No programming required.\n* an object given, a menu template can be created automatically.\n* getting a pleasing GUI.\n\n\u003cbr\u003e\n\n\u003cfigure style=\"text-align:center\"\u003e \n   \u003cimg src=\"./docs/img/lissajous.gif\"\u003e\n\u003c/figure\u003e  \n\u003cfigcaption style=\"font-size:0.95em;text-align:center\"\u003eFig.: Controlling an Animation.\u003c/figcaption\u003e\u003cbr\u003e\n\nThe interactive menu on the right side of Figure 1 was created via:\n\n```json\n\u003cctrl-ing ref=\"app\" darkmode\u003e\n  [ {\"sec\":\"hdr\",\"text\":\"Parameters\"},\n    {\"sec\":\"num\",\"label\":\"a\",\"min\":0,\"max\":10,\"step\":1,\"path\":\"$['a']\",\"unit\":\"[-]\"},\n    {\"sec\":\"num\",\"label\":\"b\",\"min\":0,\"max\":10,\"step\":1,\"path\":\"$['b']\",\"unit\":\"[-]\"},\n    {\"sec\":\"hdr\",\"text\":\"Animation\"},\n    {\"sec\":\"chk\",\"label\":\"run\",\"path\":\"$['run']\"},\n    {\"sec\":\"rng\",\"label\":\"vel\",\"min\":1,\"max\":10,\"step\":1,\"path\":\"$['vel']\"},\n    {\"sec\":\"hdr\",\"text\":\"Style\"},\n    {\"sec\":\"col\",\"label\":\"Stroke\",\"path\":\"$['ls']\"},\n    {\"sec\":\"col\",\"label\":\"Fill\",\"path\":\"$['fs']\"}\n  ]\n\u003c/ctrl-ing\u003e\n```\n\u003cfigcaption\u003eListing: Structure of custom HTML element \u003ccode\u003ectrl-ing\u003c/code\u003e.\u003c/figcaption\u003e\u003cbr\u003e\u003cbr\u003e\n\nBeside implementing your web application, all you need to do for prototyping an appealing GUI, is inserting a `\u003cctrl-ing\u003e` element to your HTML document (see Listing 1). Its content is compact JSON text, representing an array of section objects. Each section corresponds to a single line in the grid-like view structure of the `\u003cctrl-ing\u003e` menu and is associated to either\n\n* *input* controlling application parameters.\n* *output* monitoring values.\n* *structuring* elements.\n\nAll section objects are generating plain native HTML (form) elements in the background (shadow DOM). That markup is hidden and separated from other code on the page \u0026mdash; thus avoiding code collisions.\n\nHelp for getting started and a complete documentation containing an interactive reference [is available](https://goessner.github.io/ctrling/).\n\n\n## Examples\n\n| Run | Source | Example |\n|:--|:--|:--|\n|[API](https://goessner.github.io/ctrling/examples/ctrl-api.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-api.html) | Using the API |\n|[array](https://goessner.github.io/ctrling/examples/ctrl-array.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-array.html) | Controlling an array object |\n|[autogenerate](https://goessner.github.io/ctrling/examples/ctrl-autogenerate.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-autogenerate.html) | Automatically generating a menu |\n|[color](https://goessner.github.io/ctrling/examples/ctrl-color.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-color.html) | Controlling an RGB color |\n|[demo](https://goessner.github.io/ctrling/examples/ctrl-demo.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-demo.html) | Showing all features |\n|[lissajous](https://goessner.github.io/ctrling/examples/ctrl-lissajous.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-lissajous.html) | Lissajous App |\n|[minimal](https://goessner.github.io/ctrling/examples/ctrl-minimal.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-minimal.html) | Minimal menu generation |\n|[parse-error](https://goessner.github.io/ctrling/examples/ctrl-parse-error.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-parse-error.html) | Treating JSON parse error |\n|[paths](https://goessner.github.io/ctrling/examples/ctrl-paths.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-paths.html) | Using paths as JSONPath strings |\n|[self](https://goessner.github.io/ctrling/examples/ctrl-self.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-self.html) | Controlling the menu itself |\n|[svg](https://goessner.github.io/ctrling/examples/ctrl-svg.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-svg.html) | Controlling SVG graphics |\n|[todeg](https://goessner.github.io/ctrling/examples/ctrl-todeg.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-todeg.html) | Transform property with user setting |\n|[variable](https://goessner.github.io/ctrling/examples/ctrl-variable.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-variable.html) | Controlling a single variable value |\n|[vector](https://goessner.github.io/ctrling/examples/ctrl-vector.html) | [source](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-vector.html) | Controlling multiple values as vector |\n\u003cfigcaption style=\"font-size:0.95em;text-align:center\"\u003eTable: Examples for using \u0026lt;ctrl-ing\u0026gt;.\u003c/figcaption\u003e\u003cbr\u003e\n\n## CDN\n\nUse a local instance or one of the following CDN links for `ctrling.js`.\n* `https://cdn.jsdelivr.net/npm/ctrling/ctrling.js`\n* `https://cdn.jsdelivr.net/npm/ctrling/ctrling.min.js`\n\n## FAQ\n\n* __Can I control a single global variable ?__\n  * In short ... yes.\n  * You only need to declare it using `var`, since `let` and `const` variables aren't accessible using `globalThis` or `window` object, which is used here for global variables. No restriction for objects or arrays though.\n  * See [`ctrl-variable.html`](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-variable.html) for an example.\n* __Can I control an array ?__\n  * Yes, see [`ctrl-array.html`](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-array.html) for an example.\n* __Can I convert values while setting ?__\n  * Yes.\n  * Either use getter/setter pair for get/set value ...\n  * ... or use `callback` function for setting value only.\n  * See [`ctrl-todeg.html`](https://github.com/goessner/ctrling/blob/master/docs/examples/ctrl-todeg.html) for an example.\n* __Can you implement feature X and possibly feature Y ?__\n  * `ctrling` serves my personal needs very well as it is.\n  * So ... no, I won't.\n  * Please go ahead and implement it by yourself.\n  * If you think, your enhancement is of common interest, you are very welcome, to send me a pull request.\n\n## Changelog\n\n###  [0.8.25] on February 01, 2023\n* Rounding bug with `num` section removed.\n###  [0.8.23] on January 11, 2023\n* Feature complete.\n###  [0.8.1] on December 20, 2022\n* First published.\n\n## License\n\n`ctrling` is licensed under the [MIT License](http://opensource.org/licenses/MIT)\n\n © [Stefan Gössner](https://github.com/goessner)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoessner%2Fctrling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoessner%2Fctrling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoessner%2Fctrling/lists"}