tangojs-web-components

tangojs-web-components is a collection of controls for
tangojs. The controls are
designed to work with any framework (or vanilla JS), and
offer standard semantics of HTML*Element.

Installation

It's available in npmjs registry, just get it:
``
$ npm install tangojs-web-components
`

and drop desired components onto your page:
`html
href="node_modules/tangojs-web-components/dist/components/label.html">
`

$3


tangojs-web-components requires tangojs-core to be configured before any
components are created. Example:
`html



`

$3


* Mozilla Firefox 45+
* enable dom.webcomponents.enabled
* enable layout.css.grid.enabled
* use
HTMLImports polyfill
* apply this patch
just before the polyfill is loaded
* Google Chrome 49+
* enable experimental-web-platform-features

Components

All components are derived from
HTMLElement.
The behavior and layout depends on information received from underlying
model (e.g. AttributeInfo object).

* tangojs-label
* tangojs-line-edit
* tangojs-command-button
* tangojs-state-led
* tangojs-plot
* tangojs-trend
* tangojs-chart
* tangojs-image
* tangojs-form
* tangojs-device-tree

$3

Displays value of an read-only attribute. The attribute is polled at
constant rate.

#### Examples

`html
model="my/dev/01/attr01"
poll-period="1000"
show-name
show-unit>

`

#### Attributes

Property | Type | Attribute | Remarks
----------- | ------- | ------------ | -------
model | string | model | Full attribute name.
pollPeriod | number | poll-period | Poll period in milliseconds.
showName | boolean | show-name | Should display name.
showUnit | boolean | show-unit | Should display unit.
showQuality | boolean | show-quality | Should display quality led.

$3

Displays value of an writable attribute. The attribute is polled at
constant rate.

#### Examples

`html
model="my/dev/01/attr01"
poll-period="1000"
show-name
show-unit>

`

#### Attributes

Property | Type | Attribute | Remarks
----------- | ------- | ------------ | -------
model | string | model | Full attribute name.
pollPeriod | number | poll-period | Poll period in milliseconds.
showName | boolean | show-name | Should display name.
showUnit | boolean | show-unit | Should display unit.
showQuality | boolean | show-quality | Should display quality led.

$3

Executes command on the device. Takes arbitrary HTML nodes as children.

#### Examples

`html
model="my/dev/01/cmd01"
parameters="6">
Click Me!

`

#### Attributes

Property | Type | Attribute | Remarks
---------- | -------- | ----------- | -------
model | string | model | Full command name.
parameters | object | parameters | Parameters passed to the command.

#### Events

* tangojs-command-result - fired when command result is available
* event.detail.deviceData: DeviceData - result

$3

Displays device state.

#### Examples

`html
model="my/dev/01"
poll-period="1000"
show-name
show-led>

`

#### Attributes

Property | Type | Attribute | Remarks
---------- | ------- | ----------- | -------
model | string | model | Full device name.
pollPeriod | number | poll-period | Poll period in milliseconds.
showName | boolean | show-name | Should display name.
showLed | boolean | show-led | Should display led.

$3

TODO

$3

Plots multiple attributes over time.

#### Examples

`html
model="tangojs/test/dev1/sine_trend,tangojs/test/dev1/scalar"
poll-period="1000"
data-limit="5">

`

#### Attributes

Property | Type | Attribute | Remarks
---------- | -------- | ----------- | -------
model | string[] | model | Array of attribute names.
pollPeriod | number | poll-period | Poll period in milliseconds.
dataLimit | number | data-limit | Max no. of entries per dataset.

#### Remarks

tangojs-trend widget is built
on top of Chart.js. You have to include
dependencies manually:

`


`

$3

Visualizes spectrum attributes.

#### Examples

`html
model="sys/tg_test/1/long_spectrum,sys/tg_test/1/double_spectrum"
poll-period="1000">

`

#### Attributes

Property | Type | Attribute | Remarks
---------- | -------- | ----------- | -------
model | string[] | model | Array of attribute names.
pollPeriod | number | poll-period | Poll period in milliseconds.

#### Remarks

tangojs-spectrum widget is built
on top of Chart.js. You have to include
dependencies manually:

`


`

$3

[10-02-2017] @GregViguier and his team is currently working on this widget.

$3

Displays widgets for multiple attributes. Widgets are selected according
to the attribute type.

#### Examples

`html
model="tangojs/test/dev1/sine_trend,tangojs/test/dev1/scalar"
poll-period="1000">

`

#### Attributes

Property | Type | Attribute | Remarks
---------- | -------- | ----------- | -------
model | string[] | model | Array of attribute names.
pollPeriod | number | poll-period | Poll period in milliseconds.

$3

Displays devices, attributes and commands stored in database.

#### Examples

`html

`

#### Attributes

None.

#### Events

* selected - fires when element is selected (checked)
* event.detail.selections
* event.detail.selectionsAdded
* event.detail.selectionsRemoved

#### API

* getSelections(): Array,
* clearSelections(): undefined,
* collapse(): undefined,
* collapseAt(level: Number),
* expand(): undefined`.