example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core';
   2
   3 import {MatTableDataSource} from '@angular/material/table';
   4
   5 import { MatPaginator } from '@angular/material/paginator';
   6
   7 import { cameraData,monitorinfo, monitorDetails } from './../datainterface'
   8 import { RoboService } from './../../app/robo.service';
   9
  10 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
  11
  12 @Component({
  13   selector: 'app-data-monitor',
  14   templateUrl: './data-monitor.component.html',
  15   styleUrls: ['./data-monitor.component.scss']
  16 })
  17 export class DataMonitorComponent implements OnInit {
  18
  19   monitorColumns: string [] = ['shelfName','objType','currentCount','totalCount','time'];
  20   monitorDataSource = new MatTableDataSource<monitorinfo>(MONITOR_INFO_LIST);
  21
  22   monitorArrayList = [];
  23
  24   imageBlobUrl : any;
  25   image: any;
  26   thumbnail: any;
  27
  28   monitorInfo = {} as monitorDetails;
  29
  30   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  31
  32   constructor(
  33     private roboService: RoboService,
  34     private sanitizer: DomSanitizer
  35     ) { }
  36
  37   ngOnInit(): void {
  38     this.monitorDetails();
  39     this.inventoryDetails();
  40   }
  41
  42   refreshPage() {
  43     this.inventoryDetails();
  44     this.monitorDetails();
  45   }
  46
  47   monitorDetails() {
  48     debugger;
  49     this.roboService.getMonitorImage()
  50         .subscribe( (data:any) => {
  51
  52       debugger;
  53       console.log(data);
  54       // referred https://stackoverflow.com/questions/55591871/view-blob-response-as-image-in-angular
  55
  56       let objectURL = 'data:image/jpeg;base64,' + data.image;
  57       this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  58
  59      },
  60      error => console.log(error));
  61
  62   }
  63
  64   inventoryDetails() {
  65     this.roboService.getMonitorInfo()
  66       .subscribe(data => {
  67       console.log(data);
  68       this.monitorInfo = data;
  69
  70       this.monitorArrayList = data.InventryData;
  71       this.monitorDataSource = new MatTableDataSource(this.monitorArrayList);
  72       this.monitorDataSource.paginator = this.paginator;
  73      },
  74      error => console.log(error));
  75    }
  76
  77 }
  78
  79 const MONITOR_INFO_LIST: monitorinfo[] = [
  80   { shelfName: '', ObjType: '', currentCount: '', totalCount: '', time: '' }
  81 ];