# controller-ui

> Angular Component library for building train cockpit

Latest version **1.1.5** (published 2020-12-13) · GPL-3.0-or-later license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install controller-ui
pnpm add controller-ui
yarn add controller-ui
bun add controller-ui
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2020-12-13 |
| First published | 2018-05-29 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nicolas Meunier |
| Maintainers | nmeunier |
| Keywords | angular, angular11, library, ng, typescript, gauges |

## Links

- npm: https://www.npmjs.com/package/controller-ui
- Repository: https://github.com/nmeunier/controller-ui
- Issues: https://github.com/nmeunier/controller-ui/issues
- npm.io page: https://npm.io/package/controller-ui

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.1.5 (latest) — 2020-12-13
- 1.1.4 — 2020-07-15
- 1.1.3 — 2020-07-15
- 1.1.2 — 2020-06-13
- 1.1.1 — 2020-05-03
- 1.1.0 — 2020-05-03
- 1.0.10 — 2020-05-02
- 1.0.9 — 2020-05-01
- 1.0.8 — 2020-04-26
- 1.0.7 — 2020-04-26
- 1.0.6 — 2020-04-25
- 1.0.5 — 2020-04-25
- 1.0.4 — 2019-09-05
- 1.0.3 — 2019-08-28
- 1.0.2 — 2019-07-16
- … 9 more at https://npm.io/package/controller-ui/versions

## README

# Controller Ui library

Controller Ui is a component library for Angular.
This library is designed to create interfaces inspired by train cockpit and contains gauges, handlers and indicators.

## Prerequisites

Before using Controller Ui in your project, install the needed dependencies :

* Install Hammer.js
``` 
npm install --save hammerjs
```

Import hammerjs in your Angular project by adding this line in your src/main.js

```ts
import 'hammerjs';
```

## Installation

```
npm install controller-ui
```

## Demo

View components in action at [demo.cabview.io](https://demo.cabview.io)

## Classic components

Gauge and handle UI inspirate from 60'/80' train cockpit. Especialy [JR 103 cockpit](https://commons.wikimedia.org/wiki/File:JNR_Tc103-235cab.jpg#/media/File:JNR_Tc103-235cab.jpg) 

### Using classic module

In your angular module import the classic module from Controller UI

```ts
import { ClassicModule } from 'controller-ui';
```

And import it to your modules
```ts
@NgModule({
  declarations: [],
  imports: [
    ClassicModule
  ],

})
```


#### Classic brake gauge

Pressure brake style gauge

```html
<cui-classic-brake-gauge 
    [value]="classicBrakeGaugeValue" 
    [maxValue]="classicBrakeGaugeMaxValue" 
    [secValue]="classicBrakeGaugeSecValue" 
    [maxSecValue]="classicBrakeGaugeMaxSecValue" 
    [maxGraduation]="classicBrakeGaugeMaxGraduation" 
    [unit]="classicBrakeGaugeUnit">
</cui-classic-brake-gauge>
```

| Parameter | Description | Type |
| --- | --- | --- |
| value | Value for the first (black) pointer | Number between 0 and 1 |
| maxValue | Maximum value for the fist pointer (when value = 1) | Number |
| secValue | Value for the second (red) pointer | Number between 0 and 1 |
| maxSecValue | Maximum value for the second pointer (when value = 1) | Number |
| maxGraduation | Maximum value for the second pointer (when value = 1) | Number |
| unit | Text displayed on the gauge unit zone | String |



#### Classic speed gauge

Speed gauge style gauge

```html
<cui-classic-speed-gauge 
    [value]="classicSpeedGaugeValue" 
    [maxSpeed]="classicSpeedGaugeMaxValue" 
    [unit]="classicSpeedGaugeUnit">
</cui-classic-speed-gauge>
```

| Parameter | Description | Type |
| --- | --- | --- |
| value | Value to display | Number between 0 and 1 |
| maxSpeed | Maximum value (when value = 1) | Number |
| unit | Text displayed on the gauge unit zone (default km/h) | String |



#### Classic function display

Light indicator for display functions status

```html
<cui-classic-function-display 
  [functions]="classicFunctionDisplayGroup">
</cui-classic-function-display>
```

| Parameter | Description | Type |
| --- | --- | --- |
| functions | Functions description | Array of Object |


##### Function object example

```JS
{
  name: 'Fn0',
  userName: 'Headlights',
  iconCls: 'rf rf-headlight'
  value: this.classicFunctionDisplayValue0
}
```

##### Function object definition

| Property | Description | Type |
| --- | --- | --- |
| name | Function internal name | String |
| userName | Function display name (used when iconCls is undefined) | String |
| iconCls | CSS class to used for the function | String |
| value | Value of the function | Boolean |

##### Note: 
For a rail icon set see the project : [RailFont project](https://github.com/nmeunier/RailFont)



#### Classic direction handle

Direction handle component

```html
<cui-classic-direction-handle 
  [beginFrom]="classicDirectionHandleBeginFrom"
  [steps]="classicDirectionHandleSteps"
  [(value)]="classicDirectionHandleValue">
</cui-classic-direction-handle>
```

| Parameter | Description | Type |
| --- | --- | --- |
| beginFrom | beginning value for the first position | number |
| steps | Number of positions | number |
| value | current value (Two way binding property) | number |



#### Classic manipulator handle

Manipulator handle component

```html
<cui-classic-regulator-handle 
  [graduations]="classicRegulatorHandleGraduations" 
  [steps]="classicRegulatorHandleSteps" 
  [(value)]="classicRegulatorHandleValue">
</cui-classic-regulator-handle>
```

| Parameter | Description | Type |
| --- | --- | --- |
| graduations | Graduation to display (example: "1234") | String (array of chars) |
| steps | Number of positions | number |
| value | current value (Two way binding property) | number |



#### Classic toggle switch

Toggle switch component

```html
<cui-classic-toggle-switch 
  [label]="classicToggleSwitchLabel"
  [labelPosition]="classicToggleSwitchLabelPosition"
  [(value)]="classicToggleSwitchValue">
</cui-classic-toggle-switch>
```

| Parameter | Description | Type |
| --- | --- | --- |
| label | Text to display in label | String |
| labelPosition | Label position (bottom / top) | String |
| value | current value (Two way binding property) | Boolean |



#### Classic round button

Classic round button component

```html
<cui-classic-round-button 
    [color]="classicRoundButtonColor" 
    (press)="press($event)">
    <!-- Content to define icon -->
    <span class="material-icons">
        warning
    </span>
</cui-classic-round-button>
```

| Parameter | Description | Type |
| --- | --- | --- |
| color | RGB color code to use in button | String |
| press | Event call on button click | Function |
| content | Html content to define icon, like material icon code | HTML |


## License

[GNU Public License, version 3](https://www.gnu.org/licenses/quick-guide-gplv3.fr.html)

---
_Source: https://npm.io/package/controller-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._