ui

@ngfx/ui

NgFxController

A service for storing control surfaces.

 createSurface(id: string, controls: { [prop: string]: NgFxControl })
 getSurface(id: string)
 destroySurface(id: string)

NgFxSurface

A surface for controls that are positioned on css grid.

export interface NgFxSurface {
  id: string;
  controls: { [prop: string]: NgFxControl };
  presets?: { [prop: string]: { [prop: string]: NgFxControl }[] };
}

NgFxControl

A schema for a single control.

export interface NgFxControl {
  type: string;
  name: string;
  orient?: string;
  min?: number | number[];
  max?: number | number[];
  isActive?: boolean;
  hasUserInput?: boolean;
  hasRemoteInput?: boolean;
  currentValue?: number | number[] | boolean | string;
  position?: string;
  x?: number;
  y?: number;
  height?: number;
  width?: number;
  timeStamp?: Date | number;
  snapToCenter?: boolean;
  gridArea?: string;
  placeSelf?: string;
  transform?: string;
}

ngfx-slider

NgFxControl that displays a touch based slider or joystick. Sliders can be displayed vertical or horizontal. Joysticks have circular bounds.

ngfx-button

NgFxControl that displays a button. The button can be held firing the event multiple times.

ngfx-surface

Component for displaying a control surface. Accepts any type of NgFxControl.

<ngfx-surface [controller]="'dualJoySticks'"
              [grid]="'auto 240px / 240px auto 240px'"></ngfx-surface>

View Example

Create a surface called 'dualJoysticks' that displays two joysticks.

    this.controller.createSurface('dualJoySticks', {
      joyLeft: {
        type: 'slider',
        name: 'joystick',
        orient: 'is--joystick',
        min: [0, 0],
        max: [1024, 1024],
        snapToCenter: true,
        gridArea: '2 / 1 / 3 / 2',
        placeSelf: 'center center',
        transform: 'translateY(-6px)'
      },
      joyRight: {
        type: 'slider',
        name: 'joystick',
        orient: 'is--joystick',
        min: [0, 0],
        max: [1024, 1024],
        snapToCenter: true,
        gridArea: '2 / 3 / 3 / 4',
        placeSelf: 'center center',
        transform: 'translateY(-6px)'
      }
    });

All control events from the controller bound to the surface get piped to the onEvent EventEmitter. You can then send the current values of each control over WebRTC DataChannel with @ngfx/rtc.

   this.controller.onEvent.subscribe((ev: NgFxEvent) => {
      this._client.send({
        type: 'control',
        payload: {
          id: ev.control.name,
          currentValue: ev.control.currentValue
        }
      });
    });