Some minor changes to include bootstrap and a funny laser cat image;

website/lasercat-ui/angular.json

@@ -23,6 +23,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
             "scripts": [],

website/lasercat-ui/package.json

@@ -19,6 +19,8 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
+    "bootstrap": "^4.6.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
@@ -29,9 +31,9 @@
     "@angular/cli": "~7.3.9",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

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

@@ -3,8 +3,13 @@
 }
 .pos {
     display: inline;
+    margin: 5px;
 }
-
 .mini {
     max-width: 75px;
+    margin-left: 5px;
+}
+.centered {
+    margin: auto;
+    width: 50%;
 }
\ No newline at end of file

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

@@ -3,21 +3,25 @@
   <h1>
     Welcome to {{ title }}!
   </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  <img width="500" alt="laser cat xkcd" src="https://imgs.xkcd.com/comics/laser_pointer.png">
 </div>
 <div class="centered">
-  <button (click)="alterState()">Turn {{ laserState }} Laser</button>
-  <button>Start Random Patterns</button>
-  <div class="inline">
-    <div class="pos">
-      <label for="xPos">X:</label>
-      <input class="mini" maxlength="3" d="XPos" type="number" />
-    </div>
-    <div class="pos">
-      <label for="yPos">Y:</label>
-      <input class="mini" maxlength="3" id="yPos" type="number" />
+  <div class="btn-group">
+    <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>
+  </div>
+  <div class="btn-group">
+    <div class="inline">
+      <div class="pos">
+        <label for="xPos">X:</label>
+        <input class="mini" maxlength="3" id="xPos" type="number" min="0" max="180" />
+      </div>
+      <div class="pos">
+        <label for="yPos">Y:</label>
+        <input class="mini" maxlength="3" id="yPos" type="number" min="0" max="180" />
+      </div>
+      <button class="btn btn-sm btn-link" (click)="moveLaser()">Move</button>
     </div>
-    <button (click)="moveLaser()">Move</button>
   </div>
 </div>
 <router-outlet></router-outlet>

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

@@ -12,7 +12,8 @@ export class AppComponent {
   laserState = 'on';
 
   constructor(private esp: Esp12Service) {}
-  public alterState() {
+
+  public triggerLaser() {
     if (this.laserState === 'on') {
       this.esp.start().subscribe();
     } else {