@aca-1/a2-composer

Angular 2 Interface for composer

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
11Nov 18, 2020Jun 23, 2016Minified + gzip package size for @aca-1/a2-composer in KB

Readme

Angular 2 - Composer Library

Note:: You can create your own components that are customised for your application. Composer does all the heavy lifting allowing maximum flexibility for app integration.

Directives

Binding

The binding attribute can be attached to any element to manage the data for a device property.

<div binding [(value)]="value" [sys]="'sys-B0'" [mod]="module" [index]="2" [bind]="'power'" exec="switch" [params]="[value, value1, value2]"></div>

Name Binding Direction Valid Types Description
value Two-way Read & Write String Value of the bound. Updates when servers value is changed.
sys One-way Write-only String Identifier of the system to connect
mod One-way Write-only String Identifier of the module in the system to use e.g. Display
index One-way Write-only Number Index of the module in the system. Default: 1
bind One-way Write-only String Name of the variable in module to bind
exec One-way Write-only String Name of the function to execute on the server when the binding value changes. If undefined no function call will occur. If defined as empty function name will be bind value
params One-way Write-only Any[] Array parameters to pass into the function on the server. Defaults to value

Debug

The debug attribute can be attached to any element to get logging information for the selected device.

<div debug [(output)]="value" [sys]="'sys-B0'" [mod]="module" [index]="2" enabled="true"></div>

Name Binding Direction Valid Types Description
output Two-way Read & Write String Array of Debugging messsages on set module
sys One-way Write-only String Identifier of the system to connect
mod One-way Write-only String Identifier of the module in the system to use e.g. Display
index One-way Write-only Number Index of the module in the system. Default: 1
enable One-way Write-only String Enables debugging. Output will not update if false

Services

System Service

The systems service performs all the interactions on bindings.

Authentication details are setup through this service.

Resources Service

The resources service is used to make accessing Control API simple.

Usage in Web Workers

Running Angular 2 in web worker limits the access to certain global scope variables. As the auth needs local and session storage to operate correctly you will need to register a Message Broker in you app so that the auth can operate.

An example of how to register this message broker is given below.


import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
import { DataStoreBroker } from '@aca-1/a2-composer';

bootstrapWorkerUi('webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS).then((ref) => {
    let broker = new DataStoreBroker(ref);
});

You also need to add the DataStoreWorkerService to root module so that the worker communcates with the broker.


import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';
import { ACA_COMPOSER_MODULE, DataStoreService, DataStoreWorkerService } from '@aca-1/a2-composer';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
      ...
  ],
  imports: [
    WorkerAppModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    ACA_COMPOSER_MODULE
  ],
  providers: [
    ...
    WORKER_APP_LOCATION_PROVIDERS,
    { provide: DataStoreService, useClass: DataStoreWorkerService }
  ]
})
export class AppModule {

}

License

MIT © Alex Sorafumo

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.