Just cleanup of the interface

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

@@ -10,6 +10,10 @@
     margin-left: 5px;
 }
 .centered {
-    margin: auto;
+    text-align: center;
+    margin: 1em auto;
     width: 50%;
+}
+.btn {
+    margin: auto 1em;
 }
\ No newline at end of file

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

@@ -6,21 +6,21 @@
   <img width="500" alt="laser cat xkcd" src="https://imgs.xkcd.com/comics/laser_pointer.png">
 </div>
 <div class="centered">
-  <div class="btn-group">
+  <div class="btn-block">
     <button (click)="triggerLaser()" class="btn" [ngClass]="{ 'btn-outline-danger': laserState === 'on', 'btn-outline-info': laserState === 'off'}">Turn {{ laserState }} Laser</button>
-    <button class="btn btn-warning">Start Random Patterns</button>
+    <button class="btn btn-warning" [disabled]="randomRuns">Start Random Patterns</button>
   </div>
-  <div class="btn-group">
+  <div class="btn-block">
     <div class="inline">
       <div class="pos">
-        <label for="xPos">X:</label>
-        <input class="mini" maxlength="3" id="xPos" type="number" min="0" max="180" />
+        <label for="xPos"><strong>X</strong>: </label>
+        <input class="mini" maxlength="3" id="xPos" type="number" min="0" max="180" [formControl]="xCtrl" />
       </div>
       <div class="pos">
-        <label for="yPos">Y:</label>
-        <input class="mini" maxlength="3" id="yPos" type="number" min="0" max="180" />
+        <label for="yPos"><strong>Y</strong>: </label>
+        <input class="mini" maxlength="3" id="yPos" type="number" min="0" max="180" [formControl]="yCtrl" />
       </div>
-      <button class="btn btn-sm btn-link" (click)="moveLaser()">Move</button>
+      <button class="btn btn-sm btn-outline-info" (click)="moveLaser()">Move</button>
     </div>
   </div>
 </div>

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

 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { FormControl, FormGroup } from '@angular/forms';
 import { Esp12Service } from './services/esp12.service';
 
 @Component({
@@ -10,23 +10,41 @@ import { Esp12Service } from './services/esp12.service';
 export class AppComponent {
   title = 'lasercat-ui';
   laserState = 'on';
+  randomRuns: boolean;
+  xCtrl: FormControl;
+  yCtrl: FormControl;
+
+  protected form: FormGroup;
 
   constructor(private esp: Esp12Service) {}
 
+  ngOnInit() {
+    this.form = new FormGroup({
+      xPosition: new FormControl(''),
+      yPosition: new FormControl('')
+    });
+
+    this.xCtrl = this.form.get('xPosition') as FormControl;
+    this.yCtrl = this.form.get('yPosition') as FormControl;
+  }
   public triggerLaser() {
     if (this.laserState === 'on') {
       this.esp.start().subscribe();
     } else {
       this.esp.stop().subscribe();
+      this.randomRuns = false;
     }
     this.laserState = this.laserState === 'on' ? 'off' : 'on'; // value is inversed;
   }
 
   public moveLaser() {
-    this.esp.move(100, 100);
+    const xy = this.form.value;
+    this.esp.move(xy.xPosition, xy.yPosition);
   }
 
   public randomizeLaser() {
+    this.laserState = 'off';
+    this.randomRuns = true;
     this.esp.random().subscribe();
   }
 }

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

@@ -16,7 +16,6 @@ import { HttpClientModule } from '@angular/common/http';
     FormsModule,
     HttpClientModule,
     ReactiveFormsModule,
-
   ],
   providers: [],
   bootstrap: [AppComponent]

website/lasercat-ui/src/app/services/esp12.service.ts

@@ -10,8 +10,8 @@ export class Esp12Service {
 
   constructor(private httpCli: HttpClient) { }
 
-  move(x: number, y: number): Observable<any> {
-    return this.httpCli.get(`/move?x=${x}&y=${y}`);
+  move(x: string, y: string): Observable<any> {
+    return this.httpCli.get(`/move`, { params : { x, y }});
   }
 
   random(): Observable<any> {