{"id":18440529,"url":"https://github.com/tangojs/tangojs-web-components","last_synced_at":"2026-04-27T00:31:51.602Z","repository":{"id":79541269,"uuid":"44334608","full_name":"tangojs/tangojs-web-components","owner":"tangojs","description":"Widgets for TangoJS.","archived":false,"fork":false,"pushed_at":"2018-04-13T21:39:46.000Z","size":124,"stargazers_count":0,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-30T12:46:07.357Z","etag":null,"topics":["tango","tango-controls","web-components"],"latest_commit_sha":null,"homepage":"https://tangojs.github.io","language":"JavaScript","has_issues":false,"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/tangojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2015-10-15T17:40:09.000Z","updated_at":"2018-04-13T21:39:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"bee6116d-3e32-4e6f-85ce-b50e5533309d","html_url":"https://github.com/tangojs/tangojs-web-components","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/tangojs/tangojs-web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangojs%2Ftangojs-web-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangojs%2Ftangojs-web-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangojs%2Ftangojs-web-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangojs%2Ftangojs-web-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tangojs","download_url":"https://codeload.github.com/tangojs/tangojs-web-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangojs%2Ftangojs-web-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32318417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"ssl_error","status_checked_at":"2026-04-26T23:26:25.802Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["tango","tango-controls","web-components"],"created_at":"2024-11-06T06:30:51.261Z","updated_at":"2026-04-27T00:31:51.586Z","avatar_url":"https://github.com/tangojs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tangojs-web-components\n\ntangojs-web-components is a collection of controls for\n[tangojs](https://tangojs.github.io). The controls are\ndesigned to work with any framework (or vanilla JS), and\noffer standard semantics of HTML*Element.\n\n## Installation\n\nIt's available in npmjs registry, just get it:\n```\n$ npm install tangojs-web-components\n```\n\nand drop desired components onto your page:\n```html\n\u003clink rel=\"import\"\n      href=\"node_modules/tangojs-web-components/dist/components/label.html\"\u003e\n```\n\n### Configuration\n`tangojs-web-components` requires `tangojs-core` to be configured before any\ncomponents are created. Example:\n```html\n\u003c!-- load scripts --\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  (function () {\n    var model = demoModel.createModel()\n    var conn = new tangojsConnectorLocal.LocalConnector(model)\n    tangojs.setConnector(conn)\n  })()\n\u003c/script\u003e\n\n\u003c!-- import components --\u003e\n\u003c!-- use components --\u003e\n```\n\n### Requirements\n* Mozilla Firefox 45+\n  * enable [`dom.webcomponents.enabled`](about:config)\n  * enable [`layout.css.grid.enabled`](about:config)\n  * use\n    [HTMLImports polyfill](http://webcomponents.org/polyfills/html-imports/)\n  * apply [this patch](https://github.com/mliszcz/html-imports-firefox-patch)\n    just before the polyfill is loaded\n* Google Chrome 49+\n  * enable [experimental-web-platform-features](\n    chrome://flags/#enable-experimental-web-platform-features)\n\n## Components\n\nAll components are derived from\n[`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement).\nThe behavior and layout depends on information received from underlying\nmodel (e.g. `AttributeInfo` object).\n\n* [tangojs-label](#label)\n* [tangojs-line-edit](#lineedit)\n* [tangojs-command-button](#commandbutton)\n* [tangojs-state-led](#led)\n* [tangojs-plot](#plot)\n* [tangojs-trend](#trend)\n* [tangojs-chart](#chart)\n* [tangojs-image](#image)\n* [tangojs-form](#form)\n* [tangojs-device-tree](#devicetree)\n* [tangojs-group](#group)\n\n### Label\n\nDisplays value of an read-only attribute. The attribute is polled at\nconstant rate.\n\n#### Examples\n\n```html\n\u003ctangojs-label\n  model=\"my/dev/01/attr01\"\n  poll-period=\"1000\"\n  show-name\n  show-unit\n  precision=\"3\"\u003e\n\u003c/tangojs-label\u003e\n```\n\n#### Attributes\n\nProperty    | Type    | Attribute    | Remarks\n----------- | ------- | ------------ | -------\nmodel       | string  | model        | Full attribute name.\npollPeriod  | number  | poll-period  | Poll period in milliseconds.\nshowName    | boolean | show-name    | Should display name.\nshowUnit    | boolean | show-unit    | Should display unit.\nshowQuality | boolean | show-quality | Should display quality led.\nprecision   | number  | precision    | Number of decimal digits.\n\n### LineEdit\n\nDisplays value of an writable attribute. The attribute is polled at\nconstant rate.\n\n#### Examples\n\n```html\n\u003ctangojs-line-edit\n  model=\"my/dev/01/attr01\"\n  poll-period=\"1000\"\n  show-name\n  show-unit\u003e\n\u003c/tangojs-line-edit\u003e\n```\n\n#### Attributes\n\nProperty    | Type    | Attribute    | Remarks\n----------- | ------- | ------------ | -------\nmodel       | string  | model        | Full attribute name.\npollPeriod  | number  | poll-period  | Poll period in milliseconds.\nshowName    | boolean | show-name    | Should display name.\nshowUnit    | boolean | show-unit    | Should display unit.\nshowQuality | boolean | show-quality | Should display quality led.\n\n### CommandButton\n\nExecutes command on the device. Takes arbitrary HTML nodes as children.\n\n#### Examples\n\n```html\n\u003ctangojs-command-button\n  model=\"my/dev/01/cmd01\"\n  parameters=\"6\"\u003e\n  Click Me!\n\u003c/tangojs-command-button\u003e\n```\n\n#### Attributes\n\nProperty   | Type     | Attribute   | Remarks\n---------- | -------- | ----------- | -------\nmodel      | string   | model       | Full command name.\nparameters | object   | parameters  | Parameters passed to the command.\n\n#### Events\n\n* `tangojs-command-result` - fired when command result is available\n  * `event.detail.deviceData: DeviceData` - result\n\n### Led\n\nDisplays device state.\n\n#### Examples\n\n```html\n\u003ctangojs-state-led\n  model=\"my/dev/01\"\n  poll-period=\"1000\"\n  show-name\n  show-led\n  show-value\n  only-name\u003e\n\u003c/tangojs-state-led\u003e\n```\n\n#### Attributes\n\nProperty   | Type    | Attribute   | Remarks\n---------- | ------- | ----------- | -------\nmodel      | string  | model       | Full device name.\npollPeriod | number  | poll-period | Poll period in milliseconds.\nshowName   | boolean | show-name   | Should display name.\nshowLed    | boolean | show-led    | Should display led.\nshowValue  | boolean | show-value  | Should display value as string.\nonlyName   | boolean | only-name   | Show only device name, instead of full path.\n\n### Plot\n\n*TODO*\n\n### Trend\n\nPlots multiple attributes over time.\n\n#### Examples\n\n```html\n\u003ctangojs-trend\n  model=\"tangojs/test/dev1/sine_trend,tangojs/test/dev1/scalar\"\n  poll-period=\"1000\"\n  data-limit=\"5\"\u003e\n\u003c/tangojs-trend\u003e\n```\n\n#### Attributes\n\nProperty   | Type     | Attribute   | Remarks\n---------- | -------- | ----------- | -------\nmodel      | string[] | model       | Array of attribute names.\npollPeriod | number   | poll-period | Poll period in milliseconds.\ndataLimit  | number   | data-limit  | Max no. of entries per dataset.\n\n#### Remarks\n\n`tangojs-trend` widget is built\non top of [Chart.js](http://www.chartjs.org/). You have to include\ndependencies manually:\n\n```\n\u003cscript src=\"node_modules/moment/min/moment.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/chart.js/Chart.min.js\"\u003e\u003c/script\u003e\n```\n\n### Chart\n\nVisualizes spectrum attributes.\n\n#### Examples\n\n```html\n\u003ctangojs-chart\n  model=\"sys/tg_test/1/long_spectrum,sys/tg_test/1/double_spectrum\"\n  poll-period=\"1000\"\u003e\n\u003c/tangojs-chart\u003e\n```\n\n#### Attributes\n\nProperty   | Type     | Attribute   | Remarks\n---------- | -------- | ----------- | -------\nmodel      | string[] | model       | Array of attribute names.\npollPeriod | number   | poll-period | Poll period in milliseconds.\n\n#### Remarks\n\n`tangojs-spectrum` widget is built\non top of [Chart.js](http://www.chartjs.org/). You have to include\ndependencies manually:\n\n```\n\u003cscript src=\"node_modules/moment/min/moment.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/chart.js/Chart.min.js\"\u003e\u003c/script\u003e\n```\n\n### Image\n\n[10-02-2017] @GregViguier and his team is currently working on this widget.\n\n### Form\n\nDisplays widgets for multiple attributes. Widgets are selected according\nto the attribute type.\n\n#### Examples\n\n```html\n\u003ctangojs-form\n  model=\"tangojs/test/dev1/sine_trend,tangojs/test/dev1/scalar\"\n  poll-period=\"1000\"\u003e\n\u003c/tangojs-form\u003e\n```\n\n#### Attributes\n\nProperty   | Type     | Attribute   | Remarks\n---------- | -------- | ----------- | -------\nmodel      | string[] | model       | Array of attribute names.\npollPeriod | number   | poll-period | Poll period in milliseconds.\n\n### DeviceTree\n\nDisplays devices, attributes and commands stored in database.\n\n#### Examples\n\n```html\n\u003ctangojs-device-tree\u003e\u003c/tangojs-device-tree\u003e\n```\n\n#### Attributes\n\nNone.\n\n#### Events\n\n* `selected` - fires when element is selected (checked)\n  * `event.detail.selections`\n  * `event.detail.selectionsAdded`\n  * `event.detail.selectionsRemoved`\n\n#### API\n\n* `getSelections(): Array\u003cT\u003e`, where `T` is\n  ```\n  {\n    key: string,\n    path: Array\u003cstring\u003e,\n    value: { model: string, info: (DeviceInfo|AttributeInfo|CommandInfo) }\n  }\n  ```\n* `clearSelections(): undefined`,\n* `collapse(): undefined`,\n* `collapseAt(level: Number)`,\n* `expand(): undefined`.\n\n### Group\n\nGroups several attributes into one widget. Shows device name, state,\nattribute value and unit.\n\n#### Examples\n\n```html\n\u003ctangojs-group\n  model=\"sys/tg_test/1/long_scalar,sys/tg_test/1/double_scalar\"\n  name=\"Test group\"\u003e\n\u003c/tangojs-group\u003e\n```\n\n#### Attributes\n\nProperty   | Type     | Attribute   | Remarks\n---------- | -------- | ----------- | -------\nmodel      | string[] | model       | Array of attribute names.\nname       | string   | name        | Group title.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangojs%2Ftangojs-web-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangojs%2Ftangojs-web-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangojs%2Ftangojs-web-components/lists"}