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

   1 <div class="maindiv">
   2     <div class="toolbar">
   3         <app-toolbar></app-toolbar>
   4     </div>
   5     <!-- <div class="container"> -->
   6     <div class="toaster">
   7         <ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" [autohide]="true"
   8             [delay]="toast.delay || 5000" (hide)="toastService.remove(toast)" aria-live="polite" aria-atomic="true">
   9             <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text">
  10                 <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
  11             </ng-template>
  12
  13             <ng-template #text>{{ toast.textOrTpl }}</ng-template>
  14         </ngb-toast>
  15     </div>
  16
  17     <div class="upload-accordion">
  18
  19         <mat-accordion>
  20             <mat-expansion-panel>
  21                 <mat-expansion-panel-header>
  22                     <mat-panel-title>
  23                         Upload PCB images Input
  24                     </mat-panel-title>
  25                     <mat-panel-description>
  26                         Upload
  27                     </mat-panel-description>
  28                 </mat-expansion-panel-header>
  29                 <div>
  30                     <mat-label>Please select an Edge Site
  31                     </mat-label>
  32                     <mat-form-field style="padding-left: 60px;">
  33                         <mat-select placeholder="Select EdgeSite" [(ngModel)]="selectedEdgeSite"
  34                             (ngModelChange)="onEdgeSiteSelection()">
  35                             <mat-option *ngFor="let edgesite of edgesites" [value]="edgesite.value">
  36                                 {{edgesite.viewValue}}
  37                             </mat-option>
  38                         </mat-select>
  39                     </mat-form-field>
  40                 </div>
  41                 <div>
  42                     <mat-label>Please select PCB Camera Input
  43                     </mat-label>
  44                     <mat-form-field style="padding-left: 20px;">
  45                         <mat-select placeholder="Select Camera Input" [(ngModel)]="selectedCamera"
  46                             (ngModelChange)="onCameraSelection()">
  47                             <mat-option *ngFor="let camera of cameras" [value]="camera.value">
  48                                 {{camera.viewValue}}
  49                             </mat-option>
  50                         </mat-select>
  51                     </mat-form-field>
  52                 </div>
  53
  54
  55                 <div class="submit-button text-center">
  56                     <button type="button" class="btn btn-outline-primary" (click)="onSubmit()">Image
  57                         Upload</button>
  58                 </div>
  59
  60                 <div style="padding-top:20px;" class="submit-button text-center">
  61                     <button type="button" class="btn btn-outline-primary" (click)="onPreview()" [routerLink]="'/displayimage'">Preview
  62                         Input Images</button>
  63                 </div>
  64
  65                 <!-- <form [formGroup]="imageDeployForm" (ngSubmit)="onSubmit()">
  66                     <div>
  67                         <p>Please upload zip file contains the pcb images input
  68                             below...</p>
  69                         <mat-label>PCB input images zip
  70                         </mat-label>
  71
  72                         <input type="file" formControlname="deployzipfile" (change)="fileProgress($event)" />
  73                         <div class="submit-button text-center">
  74                             <button type="button" class="btn btn-outline-primary" (click)="onSubmit()">Image
  75                                 Upload</button>
  76                         </div>
  77
  78                         <div style="padding-top:20px;" class="submit-button text-center">
  79                             <button type="button" class="btn btn-outline-primary" [routerLink]="'/displayimage'">Preview
  80                                 Input Images</button>
  81                         </div>
  82                     </div>
  83                 </form> -->
  84
  85             </mat-expansion-panel>
  86         </mat-accordion>
  87     </div>
  88
  89     <div class="model-upload-accordion">
  90
  91         <mat-accordion>
  92             <mat-expansion-panel>
  93                 <mat-expansion-panel-header>
  94                     <mat-panel-title>
  95                         Upload PCB Trained Model
  96                     </mat-panel-title>
  97                     <mat-panel-description>
  98                         Trained Model Upload
  99                     </mat-panel-description>
 100                 </mat-expansion-panel-header>
 101
 102                 <div>
 103                     <mat-label>Please select Defect Category
 104                     </mat-label>
 105                     <mat-form-field style="padding-left: 20px;">
 106                         <mat-select placeholder="Select Defect Category" [(ngModel)]="selectedDefect"
 107                             (ngModelChange)="onDefectSelection()">
 108                             <mat-option *ngFor="let defect of defects" [value]="defect.value">
 109                                 {{defect.viewValue}}
 110                             </mat-option>
 111                         </mat-select>
 112                     </mat-form-field>
 113                 </div>
 114
 115                 <div>
 116                     <mat-label>Please select an Edge Site
 117                     </mat-label>
 118                     <mat-form-field style="padding-left: 40px;">
 119                         <mat-select placeholder="Select EdgeSite" [(ngModel)]="selectedEdgeSite"
 120                             (ngModelChange)="onEdgeSiteSelection()">
 121                             <mat-option *ngFor="let edgesite of edgesites" [value]="edgesite.value">
 122                                 {{edgesite.viewValue}}
 123                             </mat-option>
 124                         </mat-select>
 125                     </mat-form-field>
 126                 </div>
 127                 <div class="submit-button text-center">
 128                     <button type="button" class="btn btn-outline-primary" (click)="onModelSubmit()">Model
 129                         Upload</button>
 130                 </div>
 131
 132                 <!-- <form [formGroup]="modelDeployForm" (ngSubmit)="onSubmit()">
 133                     <div>
 134                         <p>Please Upload PCB trained model
 135                             below...</p>
 136                         <input type="file" formControlname="deploymodelfile" (change)="fileProgress($event)" />
 137                         <div class="submit-button text-center">
 138                             <button type="button" class="btn btn-outline-primary" (click)="onModelSubmit()">Model
 139                                 Upload</button>
 140                         </div>
 141                     </div>
 142                 </form> -->
 143
 144             </mat-expansion-panel>
 145         </mat-accordion>
 146     </div>
 147
 148     <!-- PCB detect -->
 149
 150     <div class="pcb-detect-accordion">
 151
 152         <mat-accordion>
 153             <mat-expansion-panel>
 154                 <mat-expansion-panel-header>
 155                     <mat-panel-title>
 156                         PCB Images Defect Detection
 157                     </mat-panel-title>
 158                     <mat-panel-description>
 159                         Expand Below to detect defects in PCB
 160                     </mat-panel-description>
 161                 </mat-expansion-panel-header>
 162                     <div>
 163                         <p>Click Below to Detect Defects in PCB images</p>
 164
 165                         <div>
 166                             <mat-label>Please select an Edge Site
 167                             </mat-label>
 168                             <mat-form-field style="padding-left: 60px;">
 169                                 <mat-select placeholder="Select EdgeSite" [(ngModel)]="selectedEdgeSite"
 170                                     (ngModelChange)="onEdgeSiteSelection()">
 171                                     <mat-option *ngFor="let edgesite of edgesites" [value]="edgesite.value">
 172                                         {{edgesite.viewValue}}
 173                                     </mat-option>
 174                                 </mat-select>
 175                             </mat-form-field>
 176                         </div>
 177
 178                         <div>
 179                             <mat-label>Please select PCB Camera Input
 180                             </mat-label>
 181                             <mat-form-field style="padding-left: 20px;">
 182                                 <mat-select placeholder="Select Camera Input" [(ngModel)]="selectedCamera"
 183                                     (ngModelChange)="onCameraSelection()">
 184                                     <mat-option *ngFor="let camera of cameras" [value]="camera.value">
 185                                         {{camera.viewValue}}
 186                                     </mat-option>
 187                                 </mat-select>
 188                             </mat-form-field>
 189                         </div>
 190
 191
 192
 193                         <div class="submit-button text-center">
 194                             <button type="button" class="btn btn-outline-primary" (click)="onDetect()">PCB Detect</button>
 195                         </div>
 196                     </div>
 197
 198             </mat-expansion-panel>
 199         </mat-accordion>
 200     </div>
 201
 202     <!-- pcb results -->
 203
 204     <div class="pcb-results-accordion">
 205
 206         <mat-accordion>
 207             <mat-expansion-panel>
 208                 <mat-expansion-panel-header>
 209                     <mat-panel-title>
 210                         Results showing PCB defects
 211                     </mat-panel-title>
 212                     <mat-panel-description>
 213                         Expand Below to view defects in PCB
 214                     </mat-panel-description>
 215                 </mat-expansion-panel-header>
 216                     <div>
 217                         <p>Click Below to Detect Defects in PCB images</p>
 218
 219                         <div class="submit-button text-center">
 220                             <button type="button" class="btn btn-outline-primary"
 221                                 [routerLink]="'/results'" >Result Images</button>
 222                         </div>
 223                     </div>
 224
 225             </mat-expansion-panel>
 226         </mat-accordion>
 227     </div>
 228
 229     <div style="padding-top: 20px;padding-bottom:185px;"class="submit-button text-center">
 230         <!-- <button type="button" class="btn btn-outline-primary"
 231             [routerLink]="'/results'">Result Images</button> -->
 232     </div>
 233
 234 </div>