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
import 'hammerjs';
Installation
npm install controller-ui
Demo
View components in action at demo.cabview.io
Classic components
Gauge and handle UI inspirate from 60'/80' train cockpit. Especialy JR 103 cockpit
Using classic module
In your angular module import the classic module from Controller UI
import { ClassicModule } from 'controller-ui';
And import it to your modules
@NgModule({
declarations: [],
imports: [
ClassicModule
],
})
Classic brake gauge
Pressure brake style gauge
<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
<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
<cui-classic-function-display
[functions]="classicFunctionDisplayGroup">
</cui-classic-function-display>
Parameter | Description | Type |
---|---|---|
functions | Functions description | Array of Object |
Function object example
{
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
Classic direction handle
Direction handle component
<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
<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
<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
<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 |