#394 at a glance redesign

angular-client/src/components/info-value-dispaly/info-value-display.component.html

@@ -1,16 +1,20 @@
 <vstack spacing="0px" [style]="containerStyle()">
   <hstack spacing="5px" [style]="valueUnitContainerStyle()">
     @if (this.boolValue() !== undefined) {
-      <typography variant="info-value" [content]="this.boolValue() ? 'YES' : 'NO'" [additionalStyles]="this.valueStyle()" />
-      <typography variant="info-unit" [content]="this.unit()" />
+      <typography
+        [variant]="getInfoValueVariant()"
+        [content]="this.boolValue() ? 'YES' : 'NO'"
+        [additionalStyles]="this.valueStyle()"
+      />
+      <typography [variant]="getInfoUnitVariant()" [content]="this.unit()" />
     } @else {
       <typography
-        variant="info-value"
+        [variant]="getInfoValueVariant()"
         [content]="this.formattedValue"
         style="margin-bottom: -10px"
         [additionalStyles]="this.valueStyle()"
       />
-      <typography variant="info-unit" [content]="this.unit()" />
+      <typography [variant]="getInfoUnitVariant()" [content]="this.unit()" />
     }
 
     @if (this.enableWidget() && this.widget(); as widget) {

angular-client/src/components/info-value-dispaly/info-value-display.component.ts

@@ -5,6 +5,7 @@ import TypographyComponent from '../typography/typography.component';
 import ThermometerComponent from '../thermometer/thermometer.component';
 import HStackComponent from '../hstack/hstack.component';
 import VStackComponent from '../vstack/vstack.component';
+import { StyleVariant } from 'src/utils/style-variant';
 
 export interface ThermometerConfig {
   type: 'thermometer-config';
@@ -56,6 +57,7 @@ export class InfoValueDisplayComponent implements OnChanges {
   subtitleStyle = input<string>('');
   unit = input<string>('');
   formattedValue = '-';
+  size = input<'small' | 'medium' | 'large'>('medium');
 
   // Consolidated widget input
   widget = input<WidgetConfig>();
@@ -71,4 +73,28 @@ export class InfoValueDisplayComponent implements OnChanges {
     }
     return this.subtitleStyle();
   };
+
+  getInfoValueVariant(): StyleVariant {
+    switch (this.size()) {
+      case 'small':
+        return 'info-value-small';
+      case 'large':
+        return 'info-value-large';
+      case 'medium':
+      default:
+        return 'info-value';
+    }
+  }
+
+  getInfoUnitVariant(): StyleVariant {
+    switch (this.size()) {
+      case 'small':
+        return 'info-unit-small';
+      case 'large':
+        return 'info-unit-large';
+      case 'medium':
+      default:
+        return 'info-unit';
+    }
+  }
 }

angular-client/src/components/typography/typography.component.ts

@@ -58,9 +58,21 @@ export default class TypographyComponent implements OnInit {
       case 'info-value':
         this.style = Theme.infoValue;
         break;
+      case 'info-value-small':
+        this.style = Theme.infoValueSmall;
+        break;
+      case 'info-value-large':
+        this.style = Theme.infoValueLarge;
+        break;
       case 'info-unit':
         this.style = Theme.infoUnit;
         break;
+      case 'info-unit-small':
+        this.style = Theme.infoUnitSmall;
+        break;
+      case 'info-unit-large':
+        this.style = Theme.infoUnitLarge;
+        break;
       case 'sidebar-label':
         this.style = Theme.sidebarLabel;
         break;

angular-client/src/pages/bms-debug-page/bms-debug-page.component.html

@@ -8,7 +8,7 @@
         <bms-header style="width: 100%" [pageTitle]="this.windowSize < 1200 ? 'ACCU' : 'Accumulator'" />
       </mat-grid-tile>
       <mat-grid-tile [colspan]="6" rowspan="5">
-        <bms-at-a-glance style="height: 100%; width: 100%" />
+        <bms-at-a-glance-redesign style="height: 100%; width: 100%" />
       </mat-grid-tile>
       <mat-grid-tile [colspan]="windowSize > 1300 ? 1 : 2" [rowspan]="16">
         <div style="display: flex; flex-direction: column; width: 100%; height: 100%; gap: 3%">

angular-client/src/pages/bms-debug-page/bms-debug-page.component.ts

@@ -8,6 +8,7 @@ import { AccLowVoltageComponent } from './components/acc-low-voltage/acc-low-vol
 import { AccHighTempComponent } from './components/acc-high-temp/acc-high-temp.component';
 import { SegmentSummaryComponent } from './components/segment-summary/segment-summary.component';
 import { CellByCellHeatMapComponent } from './components/cell-by-cell-heat-map/cell-by-cell-heat-map.component';
+import { BmsAtAGlanceReDesignComponent } from './components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component';
 
 @Component({
   selector: 'app-bms-debug-page',
@@ -19,11 +20,13 @@ import { CellByCellHeatMapComponent } from './components/cell-by-cell-heat-map/c
     MatGridTile,
     BmsHeaderComponent,
     BmsAtAGlanceComponent,
+    BmsAtAGlanceReDesignComponent,
     AccHighVoltageComponent,
     AccLowVoltageComponent,
     AccHighTempComponent,
     SegmentSummaryComponent,
-    CellByCellHeatMapComponent
+    CellByCellHeatMapComponent,
+    BmsAtAGlanceReDesignComponent
   ]
 })
 export class BmsDebugPageComponent {

angular-client/src/pages/bms-debug-page/components/acc-high-temp/acc-high-temp.component.html

@@ -1,3 +1,9 @@
 <info-background [title]="this.getInfoBackgroundTitle()" svgIcon="battery_charging_2">
-  <info-value-display [value]="this.highTemp" [unit]="'C'" subtitle="High Temp." [precision]="2"></info-value-display>
+  <info-value-display
+    [value]="this.highTemp"
+    [unit]="'C'"
+    subtitle="High Temp."
+    [precision]="2"
+    size="small"
+  ></info-value-display>
 </info-background>

angular-client/src/pages/bms-debug-page/components/acc-high-voltage/acc-high-voltage.component.html

@@ -4,5 +4,6 @@
     [unit]="'V'"
     subtitle="High Voltage"
     [precision]="3"
+    size="small"
   ></info-value-display>
 </info-background>

angular-client/src/pages/bms-debug-page/components/acc-low-voltage/acc-low-voltage.component.html

@@ -1,3 +1,9 @@
 <info-background [title]="this.getInfoBackgroundTitle()" svgIcon="battery_charging_2">
-  <info-value-display [value]="this.voltsLowValue" [unit]="'V'" subtitle="Low Voltage" [precision]="3"></info-value-display>
+  <info-value-display
+    [value]="this.voltsLowValue"
+    [unit]="'V'"
+    subtitle="Low Voltage"
+    [precision]="3"
+    size="small"
+  ></info-value-display>
 </info-background>

angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.css

@@ -0,0 +1,15 @@
+.divider {
+  width: 2px;
+  height: 50px;
+  background-color: #555;
+}
+
+.thermometer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  margin-left: -20px;
+  height: 90px;
+  width: 35px;
+}

angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html

@@ -0,0 +1,55 @@
+<info-background title="At A Glance" svgIcon="battery_charging_2">
+  <hstack justifyContent="space-evenly" class="bms-container">
+    <!-- Voltage -->
+    <info-value-display
+      [value]="voltage"
+      unit="V"
+      subtitle="Average Voltage"
+      [widget]="this.connectionDotConfig"
+      [enableWidget]="this.enableWidgets"
+      size="small"
+    />
+    <div class="divider"></div>
+
+    <!-- Temperature -->
+    <info-value-display
+      [value]="temperature"
+      unit="C"
+      subtitle="Average Temperature"
+      [widget]="this.thermometerConfig"
+      [enableWidget]="this.enableWidgets"
+      size="small"
+    />
+    <div class="divider"></div>
+
+    <!-- Charge State -->
+    <info-value-display
+      [value]="chargeState"
+      unit="%"
+      subtitle="Charge State"
+      [widget]="this.batteryConfig"
+      [enableWidget]="this.enableWidgets"
+      size="small"
+    />
+    <div class="divider"></div>
+
+    <!-- CCL -->
+    <info-value-display [value]="this.ccl" unit="A" subtitle="CCL" size="small" />
+    <div class="divider"></div>
+
+    <!-- DCL -->
+    <info-value-display [value]="this.dcl" unit="A" subtitle="DCL" size="small" />
+    <div class="divider"></div>
+
+    <!-- Volts High Value -->
+    <acc-high-voltage />
+    <div class="divider"></div>
+
+    <!-- Volts Low Value -->
+    <acc-low-voltage />
+    <div class="divider"></div>
+
+    <!-- High Temp -->
+    <acc-high-temp />
+  </hstack>
+</info-background>

angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BmsAtAGlanceReDesignComponent } from './bms-at-a-glance-redesign.component';
+
+describe('BmsAtAGlanceReDesignComponent', () => {
+  let component: BmsAtAGlanceReDesignComponent;
+  let fixture: ComponentFixture<BmsAtAGlanceReDesignComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BmsAtAGlanceReDesignComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BmsAtAGlanceReDesignComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.ts

@@ -0,0 +1,93 @@
+import { Component, HostListener, inject, OnInit } from '@angular/core';
+import {
+  BatteryConfig,
+  ConnectionDotConfig,
+  ThermometerConfig
+} from 'src/components/info-value-dispaly/info-value-display.component';
+import { DataTypeEnum } from 'src/data-type.enum';
+import Storage from 'src/services/storage.service';
+import { getConnectionDotStatusColor } from 'src/utils/bms.utils';
+import { topics } from 'src/utils/topic.utils';
+import { InfoBackgroundComponent } from '../../../../components/info-background/info-background.component';
+
+import { InfoValueDisplayComponent } from '../../../../components/info-value-dispaly/info-value-display.component';
+import HStackComponent from 'src/components/hstack/hstack.component';
+import { AccHighVoltageComponent } from '../acc-high-voltage/acc-high-voltage.component';
+import { AccLowVoltageComponent } from '../acc-low-voltage/acc-low-voltage.component';
+import { AccHighTempComponent } from '../acc-high-temp/acc-high-temp.component';
+
+@Component({
+  selector: 'bms-at-a-glance-redesign',
+  templateUrl: './bms-at-a-glance-redesign.component.html',
+  styleUrl: './bms-at-a-glance-redesign.component.css',
+  standalone: true,
+  imports: [
+    InfoBackgroundComponent,
+    InfoValueDisplayComponent,
+    HStackComponent,
+    AccHighVoltageComponent,
+    AccLowVoltageComponent,
+    AccHighTempComponent
+  ]
+})
+export class BmsAtAGlanceReDesignComponent implements OnInit {
+  private storage = inject(Storage);
+  voltage: number = 0;
+  temperature: number = 0;
+  chargeState: number = 0;
+  ccl: number = 0;
+  dcl: number = 0;
+  voltsHighValue: number = 0;
+  voltsLowValue: number = 0;
+  highTemp: number = 0;
+  thermometerConfig: ThermometerConfig = { type: 'thermometer-config', currentValue: 0, min: -15, max: 30 };
+  batteryConfig: BatteryConfig = { type: 'battery-config', percentage: 0, height: 50, width: 25 };
+  getStatusColor = (): string => {
+    return getConnectionDotStatusColor(this.voltage);
+  };
+  connectionDotConfig: ConnectionDotConfig = {
+    type: 'connection-dot-config',
+    getStatusColor: this.getStatusColor
+  };
+  enableWidgets = window.innerWidth >= 1000;
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.enableWidgets = window.innerWidth >= 1000;
+  }
+
+  ngOnInit(): void {
+    this.storage.get(DataTypeEnum.PACK_VOLTAGE).subscribe((value) => {
+      this.voltage = parseInt(value.values[0]);
+    });
+
+    this.storage.get(DataTypeEnum.PACK_TEMP).subscribe((value) => {
+      this.temperature = parseInt(value.values[0]);
+      this.thermometerConfig.currentValue = this.temperature;
+    });
+
+    this.storage.get(DataTypeEnum.STATE_OF_CHARGE).subscribe((value) => {
+      this.chargeState = parseInt(value.values[0]);
+      this.batteryConfig.percentage = this.chargeState;
+    });
+
+    this.storage.get(topics.accCCL()).subscribe((value) => {
+      this.ccl = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.accDCL()).subscribe((value) => {
+      this.dcl = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.highVoltsCell()).subscribe((value) => {
+      this.voltsHighValue = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.lowVoltsCell()).subscribe((value) => {
+      this.voltsLowValue = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.highTempCell()).subscribe((value) => {
+      this.highTemp = parseInt(value.values[0]);
+    });
+  }
+}

angular-client/src/services/theme.service.ts

@@ -21,6 +21,10 @@ export default class Theme {
   static readonly infoValueMobile: string = this.boldedText + 'fontSize: 25px; margin: 0; align-self: center;';
   static readonly infoUnit: string = this.textStyle + 'font-size: 1.5rem; color: gray; padding-top: 22px;';
   static readonly sidebarLabel: string = this.font + 'font-weight: bold; font-size: 16px; margin: 0;';
+  static readonly infoValueSmall: string = this.boldedText + 'fontSize: 2.5rem; margin: 0; align-self: center;';
+  static readonly infoValueLarge: string = this.boldedText + 'fontSize: 5rem; margin: 0; align-self: center;';
+  static readonly infoUnitSmall: string = this.textStyle + 'font-size: 1rem; color: gray; padding-top: 17px;';
+  static readonly infoUnitLarge: string = this.textStyle + 'font-size: 2.5rem; color: gray; padding-top: 41px;';
 
   static readonly battteryLow: string = '#f50905';
   static readonly battteryMed: string = '#FFEA00';

angular-client/src/utils/style-variant.ts

@@ -15,4 +15,8 @@ export type StyleVariant =
   | 'info-value'
   | 'info-unit'
   | 'sidebar-label'
-  | 'x-large-title';
+  | 'x-large-title'
+  | 'info-value-small'
+  | 'info-value-large'
+  | 'info-unit-small'
+  | 'info-unit-large';