Draw preview in Serial.server

Src/Serial.Server/ClientApp/src/app/app.module.ts

@@ -35,6 +35,9 @@ import { LocalCNCLibLoggedinService } from './services/local-CNCLib-loggedin.ser
 import { SerialPortHistoryComponent } from './serialporthistory/serialporthistory.component';
 import { machineControlRoutes, machineControlComponents } from './machinecontrol/machinecontrol.routing';
 
+import { PreviewGlobal } from "./preview/preview.global";
+import { previewComponents } from './preview/preview.routing';
+
 import { SerialServerService } from './services/serialserver.service';
 import { LocalSerialServerService } from './services/local-serialserver.service';
 
@@ -51,6 +54,7 @@ import { faHome, faSync, faPlug } from '@fortawesome/free-solid-svg-icons';
     LoginComponent,
     SerialPortHistoryComponent,
     ...machineControlComponents,
+    ...previewComponents,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -71,7 +75,8 @@ import { faHome, faSync, faPlug } from '@fortawesome/free-solid-svg-icons';
     { provide: CNCLibInfoService, useClass: LocalCNCLibInfoService },
     { provide: CNCLibLoggedinService, useClass: LocalCNCLibLoggedinService },
     { provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
+    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+    PreviewGlobal,
   ],
   bootstrap: [AppComponent]
 })

Src/Serial.Server/ClientApp/src/app/machinecontrol/machinecontrol.routing.ts

@@ -20,6 +20,7 @@ import { MachineControlConnectComponent } from './machinecontrol-connect/machine
 import { MachineControlDetailComponent } from './machinecontrol-detail/machinecontrol-detail.component';
 import { MachineControlComponent } from './machinecontrol.component';
 import { Routes, RouterModule } from '@angular/router';
+import { PreviewViewComponent } from "../preview/preview-view/preview-view.component";
 
 export const machinecontrolURL = '/machinecontrol';
 
@@ -32,6 +33,7 @@ export const machineControlRoutes =
     [
       { path: '', component: MachineControlOverviewComponent },
       { path: ':id', component: MachineControlDetailComponent },
+      { path: ':id/preview', component: PreviewViewComponent },
     ]
   }
 ];

Src/Serial.Server/ClientApp/src/app/material.module.ts

@@ -34,6 +34,7 @@ import { MatSortModule } from "@angular/material/sort";
 import { MatTableModule } from "@angular/material/table";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { MatMomentDateModule } from "@angular/material-moment-adapter";
+import { MatSliderModule } from '@angular/material/slider';
 
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
@@ -62,7 +63,8 @@ import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
     MatDatepickerModule,
     MatMomentDateModule,
     FormsModule,
-    MatFormFieldModule
+    MatFormFieldModule,
+    MatSliderModule,
   ]
 })
 export class MaterialModule {

Src/Serial.Server/ClientApp/src/app/models/preview-input.ts

@@ -0,0 +1,70 @@
+/*
+  This file is part of CNCLib - A library for stepper motors.
+
+  Copyright (c) Herbert Aitenbichler
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
+  to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+  and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+  WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+export class PreviewGCode {
+
+  sizeX: number = 200;
+
+  sizeY: number = 200;
+
+  sizeZ: number = 200;
+
+  keepRatio: boolean = true;
+
+  zoom: number = 1;
+
+  offsetX: number = 0;
+
+  offsetY: number = 0;
+
+  offsetZ: number = 0;
+
+  cutterSize: number = 0.254;
+
+  laserSize: number = 0;
+
+  machineColor: number;
+
+  laserOnColor: number;
+
+  laserOffColor: number;
+
+  cutColor: number;
+
+  cutDotColor: number;
+
+  cutEllipseColor: number;
+
+  cutArcColor: number;
+
+  fastMoveColor: number;
+
+  helpLineColor: number;
+
+// public Rotate3D Rotate
+
+  rotate3DAngle: number = 0;
+
+  rotate3DVectX: number = 0;
+  rotate3DVectY: number = 0;
+  rotate3DVectZ: number = 1.0;
+
+  rotate3DVect: number[] = [this.rotate3DVectX, this.rotate3DVectY, this.rotate3DVectZ];
+
+  renderSizeX: number = 800;
+
+  renderSizeY: number = 800;
+}

Src/Serial.Server/ClientApp/src/app/nav-menu/nav-menu.component.css

@@ -4,3 +4,4 @@
 
 
 
+

Src/Serial.Server/ClientApp/src/app/preview/preview-input/preview-input.component.css

@@ -0,0 +1,3 @@
+.form-group { margin-bottom: 2px }
+
+.input-group-addon { width: 150px; }

Src/Serial.Server/ClientApp/src/app/preview/preview-input/preview-input.component.html

@@ -0,0 +1,86 @@
+<form novalidate [formGroup]="previewOptForm" (ngSubmit)="savegCode(previewOptForm.value)">
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">RenderSizeX</span>
+    <input matInput class="form-control" type="number" min="10" max="2500" step="10" formControlName="renderSizeX"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">RenderSizeY</span>
+    <input matInput class="form-control" type="number" min="10" max="2500" step="10" formControlName="renderSizeY"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">SizeX</span>
+    <input matInput class="form-control" type="number" min="10" max="2500" step="10" formControlName="sizeX"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">SizeY</span>
+    <input matInput class="form-control" type="number" min="10" max="2500" step="10" formControlName="sizeY"/>
+  </div>
+  <div class="form-group input-group">
+    <span class="input-group-addon">SizeZ</span>
+    <input matInput class="form-control" type="number" min="10" max="2500" step="10" formControlName="sizeZ"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">OffsetX</span>
+    <input matInput class="form-control" type="number" min="-2500" max="2500" step="10" formControlName="offsetX"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">OffsetY</span>
+    <input matInput class="form-control" type="number" min="-2500" max="2500" step="10" formControlName="offsetY"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">OffsetZ</span>
+    <input matInput class="form-control" type="number" min="-2500" max="2500" step="10" formControlName="offsetZ"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">Rotate Angle</span>
+    <input matInput class="form-control" type="number" min="-10" max="+10" step="0.1" formControlName="rotate3DAngle"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">Rotate Vect X</span>
+    <input matInput class="form-control" type="number" min="-10" max="+10" step="0.1" formControlName="rotate3DVectX"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">Rotate Vect Y</span>
+    <input matInput class="form-control" type="number" min="-10" max="+10" step="0.1" formControlName="rotate3DVectY"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">Rotate Vect Z</span>
+    <input matInput class="form-control" type="number" min="-10" max="+10" step="0.1" formControlName="rotate3DVectZ"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">KeepRatio</span>
+    <mat-checkbox class="form-control" formControlName="keepRatio"></mat-checkbox>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">Zoom</span>
+    <input matInput class="form-control" type="number" min="0.1" step="0.1" formControlName="zoom"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">CutterSize</span>
+    <input matInput class="form-control" formControlName="cutterSize"/>
+  </div>
+
+  <div class="form-group input-group">
+    <span class="input-group-addon">LaserSize</span>
+    <input matInput class="form-control" formControlName="laserSize"/>
+  </div>
+
+  <button mat-stroked-button class="btn btn-default" (click)='rotate1()'>Rotate 1</button>
+
+  <!--<button mat-stroked-button type="submit" class="btn btn-default" [disabled]="!gCodeForm.valid">Run</button>-->
+
+</form>

Src/Serial.Server/ClientApp/src/app/preview/preview-input/preview-input.component.ts

@@ -0,0 +1,91 @@
+/*
+  This file is part of CNCLib - A library for stepper motors.
+
+  Copyright (c) Herbert Aitenbichler
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
+  to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+  and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+  WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup, FormArray, FormControl, FormBuilder, Validators } from '@angular/forms';
+import { PreviewGCode } from '../../models/preview-input';
+
+@Component(
+  {
+    selector: 'preview-input',
+    templateUrl: './preview-input.component.html',
+    styleUrls: ['./preview-input.component.css']
+  })
+export class PreviewInputComponent implements OnInit {
+  @Input()
+  previewOpt: PreviewGCode;
+  previewOptForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder
+  ) {
+
+    this.previewOptForm = fb.group(
+      {
+        sizeX: [0.0, [Validators.required]],
+        sizeY: [0.0, [Validators.required]],
+        sizeZ: [0.0, [Validators.required]],
+        keepRatio: [true, [Validators.required]],
+        zoom: [0.0, [Validators.required]],
+        offsetX: [0.0, [Validators.required]],
+        offsetY: [0.0, [Validators.required]],
+        offsetZ: [0.0, [Validators.required]],
+        cutterSize: [0.0, [Validators.required]],
+        laserSize: [0.0, [Validators.required]],
+        machineColor: [0, [Validators.required]],
+        laserOnColor: [0, [Validators.required]],
+        laserOffColor: [0, [Validators.required]],
+        cutColor: [0, [Validators.required]],
+        cutDotColor: [0, [Validators.required]],
+        cutEllipseColor: [0, [Validators.required]],
+        cutArcColor: [0, [Validators.required]],
+        fastMoveColor: [0, [Validators.required]],
+        helpLineColor: [0, [Validators.required]],
+
+        rotate3DAngle: [0.0, [Validators.required]],
+
+        rotate3DVectX: [0.0, [Validators.required]],
+        rotate3DVectY: [0.0, [Validators.required]],
+        rotate3DVectZ: [1.0, [Validators.required]],
+
+        renderSizeX: [0, [Validators.required]],
+        renderSizeY: [0, [Validators.required]],
+      });
+
+    this.previewOptForm.valueChanges.subscribe((
+      value) => {
+      Object.assign(this.previewOpt, value);
+    });
+  }
+
+  rotate1() {
+    this.previewOptForm.patchValue({
+      rotate3DAngle: -1.0407742907225024,
+      rotate3DVectX: 101,
+      rotate3DVectY: -13,
+      rotate3DVectZ: 1,
+      offsetX: -10,
+      offsetY: 10,
+    });
+  }
+
+  async savegCode(value: any): Promise<void> {
+  }
+
+  async ngOnInit() {
+    this.previewOptForm.patchValue(this.previewOpt);
+  }
+}

Src/Serial.Server/ClientApp/src/app/preview/preview-view/preview-view.component.css

@@ -0,0 +1,10 @@
+.previewinput {
+  -ms-flex: 0 0 200px;
+  flex: 0 0 200px;
+}
+
+.reloadbuttons { float: right }
+
+.hmyslider { width: 200px; }
+
+.vyslider { }

Src/Serial.Server/ClientApp/src/app/preview/preview-view/preview-view.component.html

@@ -0,0 +1,22 @@
+<div class="container-fluid">
+
+  <div class="col previewinput">
+    <div class="row">
+      <div *ngIf="previewGlobal.isShowParam">
+        <preview-input [previewOpt]="previewOpt"> </preview-input>
+        <button mat-stroked-button class="btn btn-default" (click)='refreshImage()'>Refresh</button>
+      </div>
+      <div class="col">
+        <img [src]="imageBlobUrl"/>
+      </div>
+      <mat-slider class="hmyslider" min="-200" max="200" step="1" [value]="previewOpt.offsetX" (valueChange)="this.previewOpt.offsetX= $event; this.refreshImage()"></mat-slider>
+      <mat-slider class="vmyslider" vertical min="-200" max="200" step="1" [value]="previewOpt.offsetY" (valueChange)="this.previewOpt.offsetY= $event; this.refreshImage()"></mat-slider>
+      <mat-slider class="hmyslider" min="0.1" max="10" step="0-1" [value]="previewOpt.zoom" (valueChange)="this.previewOpt.zoom= $event; this.refreshImage()"></mat-slider>
+    </div>
+  </div>
+
+  <span class="reloadbuttons">
+    <button mat-stroked-button (click)="previewGlobal.isShowParam = !previewGlobal.isShowParam">Show/Hide</button>
+  </span>
+
+</div>