Carridge images

DepartureBoardWeb/ClientApp/src/app/Pages/boards/board-modern-rgb/board-modern-rgb.css

@@ -1,12 +1,20 @@
 .board {
   width: 300px;
-  height: 500px;
+  height: 510px;
   padding: 0;
   padding-left: 5px;
-  font-family: 'Railway', sans-serif;
+  font-family: ellipsis-font, Railway, sans-serif;
   margin: 0;
 }
 
+@font-face {
+  font-family: 'ellipsis-font';
+  src: url('../../../fonts/ledfont3/DotMatrix.woff') format('woff');
+  font-style: normal;
+  unicode-range: U+2026;
+}
+
+
 .top-card-section {
   height: 135px;
   padding: 6px;
@@ -28,3 +36,9 @@
 .top-card-cancelled {
   background-color: #d21010;
 }
+
+.carImage {
+  position: absolute;
+  bottom: 40px;
+  font-size: 18px;
+}

DepartureBoardWeb/ClientApp/src/app/Pages/boards/board-modern-rgb/board-modern-rgb.html

@@ -1,32 +1,34 @@
 <div class="board col">
-  <div class="board-row">
-    <div class="top-card-section"
-         [ngClass]="{ 'top-card-normal': Status=='On Time', 'top-card-late': Status?.includes('Exp'), 'top-card-arrived': Status=='Arrived', 'top-card-cancelled': Status=='Cancelled'}">
-      <h5 style="margin-bottom: 0">{{DepartureTime | date: 'HH:mm'}}</h5>
-      <h4
-        class="clickable"
-      >
-        {{Destination}}
-      </h4>
+  <div class="top-card-section"
+       [ngClass]="{ 'top-card-normal': Status=='On Time', 'top-card-late': Status?.includes('Exp'), 'top-card-arrived': Status=='Arrived', 'top-card-cancelled': Status=='Cancelled'}">
+    <h5 class="inline-row" style="right: 5px;position:absolute;">{{Status}}</h5>
+    <h5 style="margin-bottom: 0">{{DepartureTime | date: 'HH:mm'}}</h5>
+    <h3
+      style="margin-bottom: 0; white-space: nowrap; text-overflow: ellipsis;"
+      class="clickable"
+    >
+      {{Destination}}
+    </h3>
 
-      <h6>Platform</h6>
-      <h3 class="inline-row">{{Platform}}</h3>
-    </div>
-    <table class="stops">
-      <tr class="board-row">
-        <td class="inline-row stop" style="color:#ffd128">Calling at:</td>
-        <td class="inline-row status stop">{{CurrentPage}}/{{TotalPages}}</td>
-      </tr>
-      <tr class="board-row stop-row" *ngFor="let stop of DisplayedStops">
-        <td class="inline-row stopname-cell stopname clickable stop" (click)="ChangeStation(stop.StationName)">
-          {{stop.StationName}}
-        </td>
-        <td class="inline-row status stop stop-time">
-          {{stop.Time | date: 'HH:mm'}}
-        </td>
-      </tr>
-    </table>
-    <div class="board-row bottom" style="background-color: #6e766f; padding: 2px; width: 100%">
-      <div class="operator" [innerHtml]="information"></div>
-    </div>
+    <h6 style="margin-bottom: 0">Platform</h6>
+    <h1 style="margin-top: 0" class="inline-row clickable" (click)="FilterPlatform(Platform)">{{Platform}}</h1>
   </div>
+  <table class="stops">
+    <tr class="board-row">
+      <td class="inline-row stop" style="color:#ffd128">Calling at:</td>
+      <td class="inline-row status stop">{{CurrentPage}}/{{TotalPages}}</td>
+    </tr>
+    <tr class="board-row stop-row" *ngFor="let stop of DisplayedStops">
+      <td class="inline-row stopname-cell stopname clickable stop" (click)="ChangeStation(stop.StationName)">
+        {{stop.StationName}}
+      </td>
+      <td class="inline-row status stop stop-time">
+        {{stop.Time | date: 'HH:mm'}}
+      </td>
+    </tr>
+  </table>
+  <canvas class="carImage" #carImage height="20px" width="300px"></canvas>
+  <div class="board-row bottom" style="background-color: #6e766f; padding: 2px; width: 100%">
+    <div class="operator" [innerHtml]="information"></div>
+  </div>
+</div>

DepartureBoardWeb/ClientApp/src/app/Pages/boards/board-modern-rgb/board-modern-rgb.ts

@@ -1,4 +1,4 @@
-import {Component} from "@angular/core";
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {Router} from "@angular/router";
 import {DatePipe} from "@angular/common";
@@ -12,7 +12,9 @@ import {Board} from "../board/board";
     "./board-modern-rgb.css"
   ],
 })
-export class BoardModernRgb extends Board {
+export class BoardModernRgb extends Board implements AfterViewInit {
+  @ViewChild('carImage') carImage: ElementRef;
+
   constructor(
     http: HttpClient,
     router: Router,
@@ -21,4 +23,55 @@ export class BoardModernRgb extends Board {
     super(http, router, datePipe);
     this.AmountPerPage = 11;
   }
+
+  ngAfterViewInit() {
+    if (this.Length) {
+      this.drawCarImage();
+    }
+  }
+
+  drawCarImage() {
+    const canvas = this.carImage.nativeElement as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d");
+
+    if (!ctx) {
+      console.error("Failed to get carImage context")
+      return;
+    }
+
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 2;
+
+    ctx.beginPath();
+    this.drawFrontCarriage(ctx);
+
+    for (let i = 1; i < this.Length; i++) {
+      this.drawCarriage(ctx, 20 * i);
+    }
+
+    ctx.stroke();
+
+    ctx.font = "bold 18px Railway";
+    ctx.fillStyle = "white";
+    ctx.fillText(`x${this.Length}`, 20 * this.Length + 5, 15)
+  }
+
+  drawFrontCarriage(ctx: CanvasRenderingContext2D) {
+    const lineLength = 15;
+    //ctx.setLineDash([1.5, 0.5]);
+    ctx.moveTo(0, lineLength);
+    ctx.lineTo(lineLength, 0);
+    ctx.lineTo(lineLength, lineLength);
+    ctx.lineTo(0, lineLength);
+  }
+
+  drawCarriage(ctx: CanvasRenderingContext2D, startX: number) {
+    const lineLength = 15;
+    //ctx.setLineDash([1.5, 0.5]);
+    ctx.moveTo(startX, 0);
+    ctx.lineTo(startX + lineLength, 0);
+    ctx.lineTo(startX + lineLength, lineLength);
+    ctx.lineTo(startX, lineLength);
+    ctx.lineTo(startX, 0);
+  }
 }

DepartureBoardWeb/ClientApp/src/app/Pages/boards/board/board.css

@@ -31,7 +31,7 @@ div .bottom {
 }
 
 .stopname {
-  width: 200px;
+  width: 210px;
   white-space: nowrap;
   display: inline-block;
   overflow: hidden;

DepartureBoardWeb/ClientApp/src/app/Pages/boards/boards.component.html

@@ -1,18 +1,18 @@
 <div class="boards">
   <h1 class="led centre-text" *ngIf="showStationName">{{ stationName }}</h1>
-  <table>
-    <tr class="row">
+  <div [ngClass]="{'boards-center': boardsCenter}">
+    <div class="row">
       <template #Boards></template>
-    </tr>
-  </table>
+    </div>
+  </div>
 
-  <table *ngIf="isLoading">
-    <tr class="row">
+  <div *ngIf="isLoading">
+    <div class="row" [ngClass]="{'boards-center': boardsCenter}">
       <div *ngFor="let i of ' '.repeat(displays).split('')">
         <app-board-skeleton></app-board-skeleton>
       </div>
-    </tr>
-  </table>
+    </div>
+  </div>
 
   <h1 class="led centre-text" *ngIf="noBoardsDisplay">
     No Departures Found for {{ stationName || stationCode }}

DepartureBoardWeb/ClientApp/src/app/Pages/boards/boards.component.ts

@@ -41,6 +41,7 @@ export class BoardsComponent implements OnInit, OnDestroy {
   isCustomData: boolean = false;
   showClock: boolean = true;
   showStationName: boolean = false;
+  boardsCenter: boolean = false;
   stationName;
   toCrsCode;
   previousData;
@@ -119,6 +120,13 @@ export class BoardsComponent implements OnInit, OnDestroy {
       this.showStationName = queryParams["showStationName"] == "true";
     }
 
+    if (localStorage.getItem("settings_mainboard_boardsCenter")) {
+      this.boardsCenter =
+        localStorage
+          .getItem("settings_mainboard_boardsCenter")
+          .toLowerCase() == "true";
+    }
+
     if (this.isNumber(this.route.snapshot.paramMap.get("displays"))) {
       this.displays = Number(this.route.snapshot.paramMap.get("displays"));
     } else {

DepartureBoardWeb/ClientApp/src/app/Pages/boards/boards.styling.css

@@ -1,3 +1,9 @@
 .boards {
-  padding-left: 10px
+  padding-left: 10px;
+  margin: auto!important;
+}
+
+.boards-center {
+  display: flex;
+  justify-content: center;
 }

DepartureBoardWeb/ClientApp/src/app/fonts/railway/stylesheet.css

@@ -1,5 +1,5 @@
 @font-face {
   font-family: 'Railway';
-  src: url('britrln_.woff') format('woff');
+  src: url('./britrln_.woff') format('woff');
   font-style: normal;
 }

DepartureBoardWeb/ClientApp/src/app/settings/settings-mainboard.component.ts

@@ -33,6 +33,14 @@ import { ControlContainer, FormGroup } from "@angular/forms";
         >Show Station Name</mat-slide-toggle
       >
       <br />
+      <mat-slide-toggle
+        [checked]="form.controls.mainboard_boardsCenter.value"
+        (change)="
+          form.controls.mainboard_boardsCenter.setValue($event.checked)
+        "
+      >Show boards in the center of screen</mat-slide-toggle
+      >
+      <br />
     </form>
   `,
 })

DepartureBoardWeb/ClientApp/src/app/settings/settings.component.ts

@@ -36,6 +36,7 @@ export class SettingsComponent implements OnInit {
   settingsForm = new FormGroup({
     mainboard_count: new FormControl("6"),
     mainboard_showStationName: new FormControl(false),
+    mainboard_boardsCenter: new FormControl(false),
 
     general_mainColour: new FormControl("#ff9729"),
     general_backgroundColour: new FormControl("black"),
@@ -96,6 +97,7 @@ export class SettingsComponent implements OnInit {
     this.settingsForm.reset({
       mainboard_count: "6",
       mainboard_showStationName: false,
+      mainboard_boardsCenter: false,
       general_mainColour: "#ff9729",
       general_backgroundColour: "black",
       general_dataSource: "REALTIMETRAINS",