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:

| Property | Type | Default | Description | Necessity | | -------------- | --------------------------------------------- | ------- | -------------------------------------------------- | --------- | | ViewList | any array | - | Grid Configuaration Layout. | Optional | | inputPlayVideo | any | - | If any particulay video to play at Initialization. | Optional | | options | CustomOption [] | - | Custom Options to pass to Grid. | Optional | | theme | string | dark | To change theme of Video Grid. (light) | Optional | | playDuplicate | boolean | false | To play duplicate video in Grid. | Optional | | streamerIp | string | - | To play video from different streamer. | Optional | | playerserverIp | string | - | To play video from different player server. | Optional | | gridMode | string | general | To change Grid Mode. (FRS - for frs) | Optional | | gridView | ViewListModel | Grid is Set for 2X2 | Passes Grid View Configuration to Event Card. | Optional |

Output callback Events:

| Callback | Description | | ---------------- | -------------------------------------------------------------------------------------------------- | | VideoStarted | The callback that is called when an video is created. | | VideoClosed | The callback that is called when an video is closed. | | ClearGridEvent | The callback that is called when we clear the Grid. | | ClickFunction | The callback that is called when we The callback that is called when an custom function is clicked |

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:

| Property | Type | Default | Description | Necessity | | ---------- | ----------------------- | ------- | ------------------------------------ | --------- | | queueLimit | number | 10 | No. of events to be stored in Queue. | Optional | | toolbaroptions | CustomOption [] | - | Custom Options to pass to Grid. | Optional | | filters | FilterModel [] | - | Passes filter to Event Card. | Optional | | properties | any[] | - | Passes properties to show in Event Card. | Optional | | cardOptions | CustomOption [] | - | Passes options to show in Event Card. | Optional

Output callback Events:

| Callback | Description | | ------------------- | -------------------------------------------------------------- | | dblclickEventCard | The callback that is called when double click on Event Card | | ClickFunction | The callback that is called when an custom function is clicked |

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:

| Property | Type | Default | Description | | --------------- | ------------------- | --------------------------------------------------------------- | ------------------------------------ | | queueLimit | number | 10 | No. of events to be stored in Queue. | | toolbarButtons | toolbarButtonsModel | {"id": "refresh", "matIcon": "autorenew", "toolTip": "Refresh"} | Passes Button to toolbar | | availableGroups | any | - | Pass Availabale Group to Tree. | | theme | string | dark | passes theme to Tree |

Output callback Events:

| Callback | Description | | ------------------------ | ---------------------------------------------------------------------- | | NodeSelected | The callback that is called when select a node | | NodeUnSelected | The callback that is called when we unselect a node | | NodeChecked | The callback that is called when we check a node | | NodeUnChecked | The callback that is called when we uncheck a node | | NodeSingleClick | The callback that is called when single click on Node | | NodedoubleClick | The callback that is called when double click on node | | NodeContextmenuClicked | The callback that is called when we click Context Menu | | toolbarButtonClicked | The callback that is called when an toolabr custom function is clicked | | NodeExpand | The callback that is called when we expand an node |

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 :

| Name | Description | Model | | ----------- | ------------------------------------------------- | | eventsCards | The subject is used to pass events to event cards | IEvent[] | | playVideo | Used to play video in Grids either on node drop or clicks | playVideo[] | | notificationemitter | Used to emit notification from library to app | NotificationModel[] |

2. Video-Grid.service

Methods :

| Name | Description | | --------- | --------------------------- | | resizer | Used to resize Grids |

2. Tree-View.service

Methods :

| Name | Description | | --------------------- | ----------------------------------------------------------- | | createNode | Used to create Node | | getTreeObject | Used to get Tree Object as per Tree Id | | getTreeNodeByParam | Used to get Tree Node By Param | | insertNodes | Used to insert nodes | | getTreeNodeById | Used to get Tree Node By Id | | getTreeNodeByRandomId | Used to get Tree Node By Random Id | | getTreeNodeByName | Used to get Tree Node By Name | | isNodeChecked | Used to check if Node is Checked | | checkNode | Used to Check Node | | removeAllChildNodes | Used to remove all Child Node | | selectNode | Used to select node | | getParentNode | Used to get Parent Node | | deleteNode | Used to Delete Node | | getFirstNode | Used to get First Node | | updateNode | Used to update Nodes | | deSelectAllNodes | Used to Deselect all Nodes as per Tree ID | | deSelectNode | Used to Deselect any Node as per Tree ID and node | | isTreeIntilized | Check If tree is initialized or not as per Tree ID | | getAllNodes | To get all nodes of Any Tree ID | | clearTree | It clears the tree by destroying it and then recreating it. | | getSelectedNodes | Get the selected nodes from the tree object. |

Library Models

The library contains the following Models:

• IEventCard

• CustomOption

• treeToolbarButtonModel

• ZTreeModel

• FilterModel

• NotificationModel

• ViewListModel