@i2v/ngx-live-view v0.0.7

LibLiveView

npm i @i2v/ngx-live-view

This project was generated with Angular CLI version 12.2.13.

Building Library

During development the best way to consume our library is using npm link. This will allow us to symlink from a directory in our consuming application’s node modules folder to the compiled application in the library’s dist folder.

cd dist/ngx-live-view
npm link

We can link an Angular project to this library from anywhere our local machine. From the project root folder:

npm link ngx-live-view

If we now run the library with the watch flag,

ng build --watch

And at the same time run ng serve in another terminal window for our demo app.

ng serve

This will allow us to develop an application and (one or more) linked libraries simultaneously, and see the app recompile with each modification to the library’s source code.

Library Components

Import in main module

import { NgxLiveViewModule } from 'ngx-live-view';

The library contains the following components:

• Video Grid

  • Grid
    • I2V Video Grid
      • Web Player

• Event-Card

  • Event-Details

• Tree-View

1. Video-Grid

Input properties:

Output callback Events:

Example:

<div class="item2">
    <lib-video-grid [ViewList]=" {id: 2, Text: '2x1', heading: '2 cameras', Rows: 2, Cols: 1}, { id: 3, Text: '1 + 2', heading: '3 cameras', Rows: 2, Cols: 2,      hasSpecial: true, SpecialElement: 0, SEWidth: 2, SEHeight: 1, NumberofTiles: 3, }"
        [inputPlayVideo]="ExampleInputvideoObject"
        [theme]="light"
        [streamerIp]="192.168.x.x"
        [playerserverIp]="192.168.x.x"
        [gridMode]="FRS"
        [playDuplicate]="true"
        [options]="[{Title : 'clickSnapShot', Callback: 'snapshot', Icon :'camera_enhance'}]"
        [gridView]="{ id: 5,Text: '1 + 5',heading: '6 cameras',Rows: 3,      Cols: 3,
        hasSpecial: true,
        SpecialElement: 0,
        SEWidth: 2,
        SEHeight: 2,
        NumberofTiles: 6}"
        (VideoStarted)="onVideoStarted($event)"
        (ClearGridEvent)="GridClear()"
        (VideoClosed)="onVideoClosed($event)">
        (ClickFunction)="VideoGridFunctionCallback($event)">
        
    </lib-video-grid>
  </div>

2. Event-Card

Input properties:

Output callback Events:

Example:

<div class="item3">
    <lib-event-card 
      (dblclickEventCard)="EventCardDblClickCallback($event)"
      (ClickFunction)="EventCardFunctionCallback($event)" 
      [queueLimit]="10" 
      [toolbarOptions]="[{ Title: 'clickSnapShot', Callback: 'snapshot', Icon: 'camera_enhance'}, { Title: 'clickSnapShot', Callback: 'snapshot', Icon: 'camera_enhance' }]"
      [filters]="[{ name: 'Area Name', type: 'multiselect', values: ['Area 1', 'Area 2', 'Area 3', 'Area 4']}, { name: 'Camera Name', type: 'array',values:['Camera1', 'Camera2', 'Camera3']
      }, { name: 'Wanted', type: 'boolean', values: ['true', 'false'] }, { name: 'Color', type: 'array', values: ['Red', 'Green', 'Blue'] }]" 
      [cardOptions]="[{ Title: 'clickSnapShot', Callback: 'snapshot', Icon: 'camera_enhance' }]">
      [properties]="['cameraName', 'areaName', 'time', 'color', 'wanted']"
    }" 
    </lib-event-card>

  </div>

3. Tree-View

Input properties:

Output callback Events:

Example:

<div class="item1" style="width: 15%;">
    <lib-tree-view [treeID]="treeId"
    [toolbarButtons]="toolbarButtons"
    (NodeSelected)="CallBackNodeSelected($event)"
    (NodeSingleClick)="CallBackNodeSingleClick($event)"
    (NodeDoubleClick)="CallBackNodeDoubleClick($event)"
    (NodeContextmenuClicked)="CallBackNodeRightClick($event)"
    (NodeExpand)="CallBackNodeExpanded($event)"

    ></lib-tree-view>
  </div>

Library Services

The library contains the following services:

• Ngx-live-view.service
• Tree-View.service

1. Ngx-live-view.service

Subjects :

2. Video-Grid.service

Methods :

2. Tree-View.service

Methods :

Library Models

The library contains the following Models:

• IEventCard

• CustomOption

• treeToolbarButtonModel

• ZTreeModel

• FilterModel

• NotificationModel

• ViewListModel