Updates and style modifications

node_config/nginx.conf

-location ~ /(start|stop|move|random) {
+server {
+
+    listen      80;
+    server_name kittylaser;
+
+    root /opt/KTS/htdocs;
+    index index.html;
+    server_name _;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+
+    location ~ /(start|stop|move|random)* {
         proxy_read_timeout      300;
         proxy_connect_timeout   300;
 
@@ -12,9 +26,11 @@ location ~ /(start|stop|move|random) {
         proxy_set_header    X-Frame-Options      SAMEORIGIN;
 
         # Forward WebSocket.
-    proxy_http_version  1.1;
-    proxy_set_header    Upgrade              $http_upgrade;
-    proxy_set_header    Connection           $connection_upgrade;
+        # proxy_http_version  1.1;
+        # proxy_set_header    Upgrade              $http_upgrade;
+        # proxy_set_header    Connection           $connection_upgrade;
 
         proxy_pass                              http://<esp-ip-address>:80;
+        proxy_pass_request_headers              on;
     }
+}
\ No newline at end of file

website/lasercat-ui/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.config.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

website/lasercat-ui/proxy.config.json

+{
+    "/move*": {
+        "target": "http://IP:80",
+        "secure": false,
+        "logLevel": "debug"
+    },
+    "/random*": {
+        "target": "http://IP:80",
+        "secure": false,
+        "logLevel": "debug"
+    },
+    "/start": {
+        "target": "http://IP:80",
+        "secure": false,
+        "logLevel": "debug"
+    },
+    "/stop": {
+        "target": "http://IP:80",
+        "secure": false,
+        "logLevel": "debug"
+    }
+}
\ No newline at end of file

website/lasercat-ui/src/app/app.component.css

@@ -17,3 +17,24 @@
 .btn {
     margin: auto 1em;
 }
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+
+    .centered {
+        width: 100%;
+    }
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) {
+
+}
\ No newline at end of file

website/lasercat-ui/src/app/app.component.html

@@ -24,4 +24,9 @@
     </div>
   </div>
 </div>
+<div class="centered">
+  <div class="freedraw">
+    <app-free-canvas></app-free-canvas>
+  </div>
+</div>
 <router-outlet></router-outlet>

website/lasercat-ui/src/app/app.module.ts

@@ -5,10 +5,12 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { FreeCanvasComponent } from './free-canvas/free-canvas.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    FreeCanvasComponent
   ],
   imports: [
     BrowserModule,

website/lasercat-ui/src/app/free-canvas/free-canvas.component.html

+<p>
+  free-canvas works!
+</p>

website/lasercat-ui/src/app/free-canvas/free-canvas.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FreeCanvasComponent } from './free-canvas.component';
+
+describe('FreeCanvasComponent', () => {
+  let component: FreeCanvasComponent;
+  let fixture: ComponentFixture<FreeCanvasComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FreeCanvasComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FreeCanvasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

website/lasercat-ui/src/app/free-canvas/free-canvas.component.ts

+import {
+  Component, Input, ElementRef, AfterViewInit, ViewChild
+} from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { switchMap, takeUntil, pairwise } from 'rxjs/operators'
+
+@Component({
+  selector: 'app-free-canvas',
+  template: '<canvas #canvas></canvas>',
+  styles: ['canvas { border: 1px solid #000; }']
+})
+export class FreeCanvasComponent implements AfterViewInit {
+
+  @ViewChild('canvas') public canvas: ElementRef;
+
+  private cx: CanvasRenderingContext2D;
+
+  public ngAfterViewInit() {
+    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
+    this.cx = canvasEl.getContext('2d');
+
+    canvasEl.width = 180;
+    canvasEl.height = 180;
+
+    this.cx.lineWidth = 3;
+    this.cx.lineCap = 'round';
+    this.cx.strokeStyle = '#000';
+
+    this.captureEvents(canvasEl);
+  }
+
+  private captureEvents(canvasEl: HTMLCanvasElement) {
+    // this will capture all mousedown events from the canvas element
+    fromEvent(canvasEl, 'mousedown')
+      .pipe(
+        switchMap((e) => {
+          // after a mouse down, we'll record all mouse moves
+          return fromEvent(canvasEl, 'mousemove')
+            .pipe(
+              // we'll stop (and unsubscribe) once the user releases the mouse
+              // this will trigger a 'mouseup' event    
+              takeUntil(fromEvent(canvasEl, 'mouseup')),
+              // we'll also stop (and unsubscribe) once the mouse leaves the canvas (mouseleave event)
+              takeUntil(fromEvent(canvasEl, 'mouseleave')),
+              // pairwise lets us get the previous value to draw a line from
+              // the previous point to the current point    
+              pairwise()
+            )
+        })
+      )
+      .subscribe((res: [MouseEvent, MouseEvent]) => {
+        const rect = canvasEl.getBoundingClientRect();
+  
+        // previous and current position with the offset
+        const prevPos = {
+          x: res[0].clientX - rect.left,
+          y: res[0].clientY - rect.top
+        };
+  
+        const currentPos = {
+          x: res[1].clientX - rect.left,
+          y: res[1].clientY - rect.top
+        };
+  
+        // this method we'll implement soon to do the actual drawing
+        this.drawOnCanvas(prevPos, currentPos);
+      });
+  }
+
+  private drawOnCanvas(prevPos: { x: number, y: number }, currentPos: { x: number, y: number }) {
+    if (!this.cx) { return; }
+
+    this.cx.beginPath();
+
+    if (prevPos) {
+      this.cx.moveTo(prevPos.x, prevPos.y); // from
+      this.cx.lineTo(currentPos.x, currentPos.y);
+      this.cx.stroke();
+    }
+  }
+}