example-apps/PDD/frontend-src/src/app/pcb/pcb.component.ts

   1 import { Component, OnInit, TemplateRef, ViewChild, AfterViewInit } from '@angular/core';
   2 import { FormBuilder, FormGroup } from '@angular/forms';
   3 import { ToolbarService } from './../toolbar/toolbar.service';
   4 import { ToastService } from './toast.service';
   5
   6 import { uploadImageData } from './../datainterface'
   7 import { EaltserviceService } from '../ealtservice.service'
   8
   9 import { PcbimagesComponent } from './../pcbimages/pcbimages.component'
  10
  11
  12 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
  13
  14 export interface Edgesites {
  15   value: string;
  16   viewValue: string;
  17 }
  18
  19 export interface Defects {
  20   value: string;
  21   viewValue: string;
  22 }
  23
  24 export interface Cameras {
  25   value: string;
  26   viewValue: string;
  27 }
  28
  29 @Component({
  30   selector: 'app-pcb',
  31   templateUrl: './pcb.component.html',
  32   styleUrls: ['./pcb.component.scss']
  33 })
  34 export class PcbComponent implements OnInit {
  35
  36   imageDeployForm: FormGroup;
  37   modelDeployForm: FormGroup;
  38   url;
  39   msg = "";
  40
  41   modelBool = false;
  42   imageBool = false;
  43   detectBool = false;
  44   detectPendingBool = false;
  45   selectedEdgeSite: String;
  46   selectedDefect: String;
  47   selectedCamera: String;
  48
  49   parentData: String;
  50   detectData: String;
  51
  52   uploadImageData = {} as uploadImageData;
  53   isTemplate(toast) { return toast.textOrTpl instanceof TemplateRef; }
  54
  55   pcbInfo = {} ;
  56
  57   edgesites: Edgesites[] = [
  58     {value: 'beijinglab', viewValue: 'beijinglab'},
  59     {value: 'shenzhenlab', viewValue: 'shenzhenlab'},
  60     {value: 'shanghailab', viewValue: 'shanghailab'}
  61   ];
  62
  63   defects: Defects[] = [
  64     {value: 'all', viewValue: 'All Defects'},
  65     {value: 'missing_hole', viewValue: 'Missing Hole'},
  66     {value: 'mouse_bite', viewValue: 'Mouse Bite'},
  67     {value: 'open_circuit', viewValue: 'Open Circuit'},
  68     {value: 'short', viewValue: 'Short'},
  69     {value: 'spur', viewValue: 'Spur'},
  70     {value: 'spurious_copper', viewValue: 'Spurious Copper'}
  71   ];
  72
  73   cameras: Cameras[] = [
  74     {value: 'camera1', viewValue: 'camera1'},
  75     {value: 'camera2', viewValue: 'camera2'},
  76     {value: 'camera3', viewValue: 'camera3'}
  77   ];
  78
  79   @ViewChild(PcbimagesComponent) pcbchild;
  80
  81   constructor(
  82     private formBuilder: FormBuilder,
  83     public toolbarService: ToolbarService,
  84     public toastService: ToastService,
  85     private serviceobj: EaltserviceService,
  86     private sanitizer: DomSanitizer
  87   ) { }
  88
  89   ngOnInit(): void {
  90
  91     // let pcbimagesObj = new PcbimagesComponent();
  92
  93     this.imageDeployForm = this.formBuilder.group(
  94       {
  95         deployzipfile: ['']
  96       }
  97     );
  98     this.modelDeployForm = this.formBuilder.group(
  99       {
 100         deploymodelfile: ['']
 101       }
 102     );
 103
 104     this.selectedCamera = JSON.parse(localStorage.getItem('camera'));
 105     this.selectedEdgeSite = JSON.parse(localStorage.getItem('edgesite'));
 106
 107   }
 108
 109   ngOnDestroy(): void {
 110     // localStorage.removeItem('camera')
 111     // localStorage.removeItem('edgesite')
 112   }
 113
 114   fileProgress(event) {
 115     console.log("Inside fileProgress...")
 116     debugger;
 117     if(event.target.files.length > 0 ){
 118       const deployfile = event.target.files[0];
 119       let filee = event.target.files[0];
 120       this.imageDeployForm.get('deployzipfile').setValue(deployfile);
 121       debugger;
 122       let filecon: string = '';
 123       let fileReader: FileReader = new FileReader();
 124       // console.log(YAML.parse(deployfile));
 125       debugger;
 126     }
 127
 128     var reader = new FileReader();
 129                 reader.readAsDataURL(event.target.files[0]);
 130
 131                 reader.onload = (_event) => {
 132                         this.msg = "";
 133                         this.url = reader.result;
 134                 }
 135     console.log("Ends fileProgress...")
 136   }
 137
 138   modelFileProgress(event) {
 139     console.log("Inside fileProgress...")
 140     debugger;
 141     if(event.target.files.length > 0 ){
 142       const deployfile = event.target.files[0];
 143       let filee = event.target.files[0];
 144       this.modelDeployForm.get('deploymodelfilefile').setValue(deployfile);
 145       debugger;
 146       let filecon: string = '';
 147       let fileReader: FileReader = new FileReader();
 148       // console.log(YAML.parse(deployfile));
 149       debugger;
 150     }
 151     console.log("Ends modelFileProgress...")
 152   }
 153
 154   onSubmit() {
 155     console.log("Inside onSubmit() ....")
 156     const formData = new FormData();
 157
 158     formData.append('deployfile',this.imageDeployForm.get('deployzipfile').value);
 159     debugger;
 160
 161     this.uploadImageData.uploadFile = this.imageDeployForm.value.deployzipfile;
 162
 163     console.log("uploadImagedata...");
 164     console.log(this.uploadImageData);
 165     console.log("formData....");
 166     console.log(formData);
 167     // formData.append('file', this.fileData);
 168     // this.deployData.deployFile = formData.get('yamlfile')
 169     console.log(this.imageDeployForm.value);
 170     this.imageBool = true;
 171     this.modelBool = false;
 172     this.detectBool = false;
 173     debugger;
 174     this.showSuccess();
 175
 176     localStorage.setItem('camera',JSON.stringify(this.selectedCamera))
 177     localStorage.setItem('edgesite',JSON.stringify(this.selectedEdgeSite))
 178
 179     debugger;
 180
 181     // this.imageBool = false;
 182     this.serviceobj.postDeploymentPackage(formData)
 183         .subscribe(data => {
 184           console.log(data);
 185           this.showSuccess();
 186           // console.log(data);
 187         }
 188       ,error => console.log(error)
 189       );
 190   }
 191
 192   onModelSubmit() {
 193     console.log("Inside onSubmit() ....")
 194     const formData = new FormData();
 195
 196     formData.append('deployfile',this.modelDeployForm.get('deploymodelfile').value);
 197
 198     this.uploadImageData.uploadFile = this.modelDeployForm.value.deploymodelfile;
 199
 200     console.log(this.uploadImageData);
 201     // formData.append('file', this.fileData);
 202     // this.deployData.deployFile = formData.get('yamlfile')
 203     console.log(this.modelDeployForm.value);
 204     this.modelBool = true;
 205     this.imageBool = false;
 206     this.detectBool = false;
 207     this.showSuccess();
 208     // this.modelBool = false;
 209
 210     this.serviceobj.postDeploymentPackage(formData)
 211         .subscribe(data => {
 212           console.log(data);
 213           this.showSuccess();
 214           // console.log(data);
 215         }
 216       ,error => console.log(error)
 217       );
 218   }
 219
 220   onDetect() {
 221
 222     this.detectBool = false;
 223     this.modelBool = false;
 224     this.imageBool = false;
 225
 226     this.toastService.show('Defect Detection in PCB images In progress', { classname: 'bg-warning text-dark', delay: 10000 });
 227
 228     this.detectData = this.selectedEdgeSite + '/' + this.selectedCamera;
 229     debugger;
 230
 231     this.serviceobj.pcbDetect(this.detectData)
 232         .subscribe(data => {
 233           console.log(data);
 234           if(data.responce == "success"){
 235             this.detectBool = true;
 236             this.detectPendingBool = false;
 237             this.showSuccess();
 238           }
 239         }
 240       ,error => console.log(error)
 241       );
 242
 243     this.detectData = '';
 244     debugger;
 245   }
 246
 247
 248   // Success message display
 249
 250   private async showSuccess() {
 251
 252     //wait for 3 seconds
 253     await this.delay(3000);
 254     console.log("Inside showSuccess...")
 255
 256     if(this.imageBool == true){
 257       this.toastService.show('PCB images from cameras uploaded successfully', { classname: 'bg-success text-light', delay: 9000 });
 258     }
 259
 260     if(this.modelBool == true){
 261       this.toastService.show('PCB Trained model uploaded Successfully', { classname: 'bg-success text-light', delay: 9000 });
 262     }
 263
 264     if(this.detectBool == true){
 265       // this.toastService.show('Defect Detection in PCB images In progress', { classname: 'bg-warning text-dark', delay: 3000 });
 266       // await this.delay(3000);
 267       this.toastService.show('Defect Detection in PCB images Completed', { classname: 'bg-success text-light', delay: 9000 });
 268     }
 269
 270     if(this.detectPendingBool == true ){
 271       this.toastService.show('Defect Detection in PCB images In progress', { classname: 'bg-warning text-dark', delay: 9000 });
 272       // await this.delay(9000);
 273     }
 274
 275   }
 276
 277   private delay(ms: number)
 278   {
 279     return new Promise(resolve => setTimeout(resolve, ms));
 280   }
 281
 282   onEdgeSiteSelection() {
 283     console.log("on Edge Site Selection triggered....");
 284     console.log(this.selectedEdgeSite);
 285   }
 286
 287   onDefectSelection() {
 288     debugger;
 289     console.log("on Defect Selection triggered....");
 290     console.log(this.selectedDefect);
 291   }
 292
 293   onCameraSelection() {
 294     debugger;
 295     console.log("on Camera Selection triggered....");
 296     console.log(this.selectedCamera);
 297   }
 298
 299   onPreview() {
 300     console.log("Inside onPreview.....")
 301     debugger;
 302     this.parentData = this.selectedEdgeSite + '/' + this.selectedCamera;
 303     debugger;
 304     let pcbInputObj = new PcbimagesComponent(this.serviceobj, this.sanitizer);
 305   }
 306
 307 }