pcb demo code.

[ealt-edge.git] / example-apps / PDD / frontend-src / src / app / pcb / pcb.component.html

diff --git a/example-apps/PDD/frontend-src/src/app/pcb/pcb.component.html b/example-apps/PDD/frontend-src/src/app/pcb/pcb.component.html
new file mode 100644 (file)
index 0000000..d8e9335
--- /dev/null
+++ b/example-apps/PDD/frontend-src/src/app/pcb/pcb.component.html
@@ -0,0 +1,234 @@
+<div class="maindiv">
+    <div class="toolbar">
+        <app-toolbar></app-toolbar>
+    </div>
+    <!-- <div class="container"> -->
+    <div class="toaster">
+        <ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" [autohide]="true"
+            [delay]="toast.delay || 5000" (hide)="toastService.remove(toast)" aria-live="polite" aria-atomic="true">
+            <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text">
+                <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
+            </ng-template>
+
+            <ng-template #text>{{ toast.textOrTpl }}</ng-template>
+        </ngb-toast>
+    </div>
+
+    <div class="upload-accordion">
+
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Upload PCB images Input
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        Upload
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                <div>
+                    <mat-label>Please select an Edge Site
+                    </mat-label>
+                    <mat-form-field style="padding-left: 60px;">
+                        <mat-select placeholder="Select EdgeSite" [(ngModel)]="selectedEdgeSite"
+                            (ngModelChange)="onEdgeSiteSelection()">
+                            <mat-option *ngFor="let edgesite of edgesites" [value]="edgesite.value">
+                                {{edgesite.viewValue}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <div>
+                    <mat-label>Please select PCB Camera Input
+                    </mat-label>
+                    <mat-form-field style="padding-left: 20px;">
+                        <mat-select placeholder="Select Camera Input" [(ngModel)]="selectedCamera"
+                            (ngModelChange)="onCameraSelection()">
+                            <mat-option *ngFor="let camera of cameras" [value]="camera.value">
+                                {{camera.viewValue}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                
+                
+                <div class="submit-button text-center">
+                    <button type="button" class="btn btn-outline-primary" (click)="onSubmit()">Image
+                        Upload</button>
+                </div>
+
+                <div style="padding-top:20px;" class="submit-button text-center">
+                    <button type="button" class="btn btn-outline-primary" (click)="onPreview()" [routerLink]="'/displayimage'">Preview
+                        Input Images</button>
+                </div>
+
+                <!-- <form [formGroup]="imageDeployForm" (ngSubmit)="onSubmit()">
+                    <div>
+                        <p>Please upload zip file contains the pcb images input
+                            below...</p>
+                        <mat-label>PCB input images zip
+                        </mat-label>
+                        
+                        <input type="file" formControlname="deployzipfile" (change)="fileProgress($event)" />
+                        <div class="submit-button text-center">
+                            <button type="button" class="btn btn-outline-primary" (click)="onSubmit()">Image
+                                Upload</button>
+                        </div>
+
+                        <div style="padding-top:20px;" class="submit-button text-center">
+                            <button type="button" class="btn btn-outline-primary" [routerLink]="'/displayimage'">Preview
+                                Input Images</button>
+                        </div>
+                    </div>
+                </form> -->
+
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+
+    <div class="model-upload-accordion">
+
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Upload PCB Trained Model
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        Trained Model Upload
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <div>
+                    <mat-label>Please select Defect Category
+                    </mat-label>
+                    <mat-form-field style="padding-left: 20px;">
+                        <mat-select placeholder="Select Defect Category" [(ngModel)]="selectedDefect"
+                            (ngModelChange)="onDefectSelection()">
+                            <mat-option *ngFor="let defect of defects" [value]="defect.value">
+                                {{defect.viewValue}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+
+                <div>
+                    <mat-label>Please select an Edge Site
+                    </mat-label>
+                    <mat-form-field style="padding-left: 40px;">
+                        <mat-select placeholder="Select EdgeSite" [(ngModel)]="selectedEdgeSite"
+                            (ngModelChange)="onEdgeSiteSelection()">
+                            <mat-option *ngFor="let edgesite of edgesites" [value]="edgesite.value">
+                                {{edgesite.viewValue}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <div class="submit-button text-center">
+                    <button type="button" class="btn btn-outline-primary" (click)="onModelSubmit()">Model
+                        Upload</button>
+                </div>
+
+                <!-- <form [formGroup]="modelDeployForm" (ngSubmit)="onSubmit()">
+                    <div>
+                        <p>Please Upload PCB trained model
+                            below...</p>
+                        <input type="file" formControlname="deploymodelfile" (change)="fileProgress($event)" />
+                        <div class="submit-button text-center">
+                            <button type="button" class="btn btn-outline-primary" (click)="onModelSubmit()">Model
+                                Upload</button>
+                        </div>
+                    </div>
+                </form> -->
+
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+
+    <!-- PCB detect -->
+
+    <div class="pcb-detect-accordion">
+
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        PCB Images Defect Detection
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        Expand Below to detect defects in PCB
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                    <div>
+                        <p>Click Below to Detect Defects in PCB images</p>
+
+                        <div>
+                            <mat-label>Please select an Edge Site
+                            </mat-label>
+                            <mat-form-field style="padding-left: 60px;">
+                                <mat-select placeholder="Select EdgeSite" [(ngModel)]="selectedEdgeSite"
+                                    (ngModelChange)="onEdgeSiteSelection()">
+                                    <mat-option *ngFor="let edgesite of edgesites" [value]="edgesite.value">
+                                        {{edgesite.viewValue}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
+
+                        <div>
+                            <mat-label>Please select PCB Camera Input
+                            </mat-label>
+                            <mat-form-field style="padding-left: 20px;">
+                                <mat-select placeholder="Select Camera Input" [(ngModel)]="selectedCamera"
+                                    (ngModelChange)="onCameraSelection()">
+                                    <mat-option *ngFor="let camera of cameras" [value]="camera.value">
+                                        {{camera.viewValue}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
+                        
+                        
+                        
+                        <div class="submit-button text-center">
+                            <button type="button" class="btn btn-outline-primary" (click)="onDetect()">PCB Detect</button>
+                        </div>
+                    </div>
+
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+    
+    <!-- pcb results -->
+
+    <div class="pcb-results-accordion">
+
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Results showing PCB defects
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        Expand Below to view defects in PCB
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                    <div>
+                        <p>Click Below to Detect Defects in PCB images</p>
+                        
+                        <div class="submit-button text-center">
+                            <button type="button" class="btn btn-outline-primary"
+                                [routerLink]="'/results'" >Result Images</button>
+                        </div>
+                    </div>
+
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+
+    <div style="padding-top: 20px;padding-bottom:185px;"class="submit-button text-center">
+        <!-- <button type="button" class="btn btn-outline-primary"
+            [routerLink]="'/results'">Result Images</button> -->
+    </div>
+
+</div>
\ No newline at end of file