Skip to content

Commit

Permalink
#172 - requested improvements(mainly sizing stuff)
Browse files Browse the repository at this point in the history
  • Loading branch information
bracyw committed Sep 19, 2024
1 parent fae1612 commit a2a13f6
Show file tree
Hide file tree
Showing 28 changed files with 285 additions and 127 deletions.
8 changes: 7 additions & 1 deletion angular-client/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,9 @@ import FaultedStatus from 'src/pages/charging-page/components/faulted-status/fau
import ActiveStatus from 'src/pages/charging-page/components/active-status/active-status.component';
import CombinedStatusDisplay from 'src/pages/charging-page/components/combined-status-display/combined-status-display.component';
import CombinedStatusMobile from 'src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component';
import PackVoltageMobileDisplay from 'src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component';
import HighLowCellMobile from 'src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component';
import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component';

@NgModule({
declarations: [
Expand Down Expand Up @@ -185,7 +188,10 @@ import CombinedStatusMobile from 'src/pages/charging-page/components/combined-st
BalancingStatus,
FaultedStatus,
ActiveStatus,
CombinedStatusMobile
CombinedStatusMobile,
PackVoltageMobileDisplay,
HighLowCellMobile,
CellTempMobile
],
imports: [
BrowserModule,
Expand Down
2 changes: 1 addition & 1 deletion angular-client/src/components/graph/graph.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class GraphComponent implements OnInit {
updateChart = () => {
this.chart.updateSeries([
{
name: 'Data Series',
name: this.title,
data: Array.from(this.data)
}
]);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
<vstack style="width: 100%" spacing="20px">
<typography variant="x-large-title" content="Argos"></typography>
<typography variant="x-large-title" content="Argos" additionalStyles="fontSize:40px"></typography>
<hstack>
<typography variant="large-header" [content]="time | date: 'HH:mm:ss'"></typography>
<typography variant="large-header" [content]="time | date: 'HH:mm:ss'" additionalStyles="fontSize:25px"></typography>
<divider style="height: 40px"></divider>
<typography variant="large-header" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
<typography
variant="large-header"
content="{{ time | date: 'MM/dd/yyyy' }}"
additionalStyles="fontSize:25px"
></typography>
</hstack>
<latency-display style="padding-bottom: 20px; margin-top: -10px" />
<vstack style="width: 100%" spacing="15px">
<combined-status-mobile style="width: 80%; height: 720px" />
<state-of-charge-display style="width: 80%; height: 123px" />
<current-display style="width: 80%; height: 122px" />
<pack-temp style="width: 80%; height: 122px" />
<cell-temp-display style="width: 80%; height: 210px" />
<high-low-cell-display style="width: 80%; height: 200px" />
<info-background style="width: 80%">
<high-low-cell-graph></high-low-cell-graph>
</info-background>
<pack-voltage-display style="width: 80%; height: 120px" />
<info-background style="width: 80%">
<pack-voltage-graph></pack-voltage-graph>
</info-background>
<cell-temp-display style="width: 80%; height: 325px" />
<high-low-cell-display style="width: 80%; height: 325px" />
<pack-voltage-display style="width: 80%; height: 275px" />
<fault-display style="width: 80%; height: 375px" />
</vstack>
</vstack>
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default class ChargingPageMobile {
@Input() time = new Date();
location: string = 'No Location Set';
constructor(private storage: Storage) {}
mobileThreshold = 1200;
mobileThreshold = 1070;
isMobile = window.innerWidth < this.mobileThreshold;

ngOnInit() {
Expand Down
20 changes: 10 additions & 10 deletions angular-client/src/pages/charging-page/charging-page.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<charging-page-mobile style="width: 100%" *ngIf="isMobile; else isDesktop" [time]="time" />
<ng-template #isDesktop>
<vstack style="width: 100%; min-width: 1290px" spacing="15px">
<vstack style="width: 100%" spacing="15px">
<div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
<typography
style="margin-bottom: -30px; margin-top: -10px"
Expand All @@ -17,19 +17,19 @@
/>
<latency-display style="margin-bottom: -30px; margin-top: -10px" />
</div>
<vstack style="width: 100%; min-width: 1290px">
<vstack style="width: 100%">
<hstack spacing="10px" style="width: 100%; height: 50%">
<combined-status-display style="min-width: 620px; width: 45%; height: 380px" />
<combined-status-display style="min-width: 590px; width: 45%; height: 380px" />
<vstack style="width: 15%">
<state-of-charge-display style="min-width: 200px; width: 100%; height: 123px" />
<current-display style="min-width: 200px; width: 100%; height: 122px" />
<pack-temp style="min-width: 200px; width: 100%; height: 122px" />
<state-of-charge-display style="min-width: 160px; width: 100%; height: 123px" />
<current-display style="min-width: 160px; width: 100%; height: 122px" />
<pack-temp style="min-width: 160px; width: 100%; height: 122px" />
</vstack>
<fault-display style="height: 380px; min-width: 500px; width: 40%" />
<fault-display style="height: 380px; min-width: 300px; width: 40%" />
</hstack>
<cell-temp-display style="min-width: 1300px; width: 100%; height: 175px" />
<high-low-cell-display style="min-width: 1300px; width: 100%; height: 175px" />
<pack-voltage-display style="min-width: 1300px; width: 100%; height: 175px" />
<cell-temp-display style="min-width: 1070px; width: 100%; height: 175px" />
<high-low-cell-display style="min-width: 1070px; width: 100%; height: 175px" />
<pack-voltage-display style="min-width: 1070px; width: 100%; height: 175px" />
</vstack>
</vstack>
</ng-template>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default class ChargingPage implements OnInit {
time = new Date();
location: string = 'No Location Set';
constructor(private storage: Storage) {}
mobileThreshold = 1200;
mobileThreshold = 1070;
isMobile = window.innerWidth < this.mobileThreshold;

ngOnInit() {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
<div *ngIf="!isDesktop" style="padding-top: 20px"></div>
<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton" *ngIf="isDesktop">
<hstack>
<vstack style="width: 10%; padding-bottom: 30px">
<typography variant="info-value" [content]="avgTemp.toString() + '°'" />
<typography variant="info-subtitle" content="Avg. Temp" />
</vstack>

<div *ngIf="!isDesktop" style="padding-left: 20px"></div>
<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>
<div *ngIf="!isDesktop" style="padding-right: 20px"></div>

<vstack style="width: 10%; padding-bottom: 30px">
<typography variant="info-value" [content]="maxTemp.toString() + '°'" />
Expand All @@ -18,10 +15,12 @@
<!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
<!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done...
or just don't enforce -->
<cell-temp-graph
style="width: 85%; padding-bottom: 30px"
[maxCellTempData]="cellTempData"
*ngIf="isDesktop"
></cell-temp-graph>
<cell-temp-graph style="width: 85%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
</hstack>
</info-background>
<cell-temp-mobile
*ngIf="!isDesktop"
[cellTempData]="cellTempData"
[avgTemp]="avgTemp"
[maxTemp]="maxTemp"
></cell-temp-mobile>
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,14 @@ import { GraphData } from 'src/utils/types.utils';
export default class CellTempDisplay {
avgTemp: number = 0;
maxTemp: number = 0;
resetGraph: boolean = false;
resetGraphButton = {
onClick: () => {
this.cellTempData = [];
},
icon: 'restart_alt'
};
cellTempData: GraphData[] = [];
mobileThreshold = 1200;
mobileThreshold = 1070;
isDesktop = window.innerWidth > this.mobileThreshold;

@HostListener('window:resize', ['$event'])
Expand All @@ -36,7 +35,6 @@ export default class CellTempDisplay {
this.cellTempData.push({ x: new Date().getTime(), y: this.maxTemp });
});
this.storage.get(IdentifierDataType.CELL_TEMP_AVG).subscribe((value) => {
this.resetGraph = false;
this.avgTemp = floatPipe(value.values[0]);
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.connection-dot {
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 20px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
<div style="padding-top: 20px"></div>
<vstack>
<hstack>
<vstack style="width: 10%; padding-bottom: 10px">
<typography variant="info-value" [content]="avgTemp.toString() + '°'" additionalStyles="fontSize:30px" />
<typography variant="info-subtitle" content="Avg. Temp" additionalStyles="fontSize:15px" />
</vstack>

<div style="padding-left: 20px"></div>
<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>
<div style="padding-right: 20px"></div>

<vstack style="width: 10%; padding-bottom: 10px">
<typography variant="info-value" [content]="maxTemp.toString() + '°'" additionalStyles="fontSize:30px" />
<typography variant="info-subtitle" content="Max. Temp" additionalStyles="fontSize:15px" />
</vstack>
</hstack>
<cell-temp-graph style="width: 100%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
</vstack>
</info-background>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Component, Input } from '@angular/core';
import Storage from 'src/services/storage.service';

import { GraphData } from 'src/utils/types.utils';

@Component({
selector: 'cell-temp-mobile',
templateUrl: './cell-temp-mobile.component.html',
styleUrls: ['./cell-temp-mobile.component.css']
})
export default class CellTempMobile {
@Input() avgTemp: number = 0;
@Input() maxTemp: number = 0;
@Input() resetGraphButton = {
onClick: () => {
this.cellTempData = [];
},
icon: 'restart_alt'
};
@Input() cellTempData: GraphData[] = [];
constructor(private storage: Storage) {}

ngOnInit() {}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Component, HostListener } from '@angular/core';
styleUrls: ['./combined-status-display.component.css']
})
export default class CombinedStatusDisplay {
mobileThreshold = 1200;
mobileThreshold = 1070;
isMobile = window.innerWidth < this.mobileThreshold;

@HostListener('window:resize', ['$event'])
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,16 @@
: 'background-color: #4d453c; width: 100%; border-radius: 2px'
"
>
<hstack>
<typography
variant="info-subtitle"
[content]="fault.type"
style="width: 33%; height: 40px; padding-top: 10px"
></typography>
<div style="display: flex; flex-direction: row; justify-content: space-between; height: 45px; padding: 3px">
<typography variant="info-subtitle" [content]="fault.type" style="align-self: center"></typography>
<typography
variant="info-subtitle"
[content]="fault.name"
additionalStyles="font-weight: bold;"
style="width: 33%; height: 40px; padding-top: 10px; width: 400px"
></typography>
<typography
variant="info-subtitle"
[content]="fault.time"
style="width: 33%; height: 40px; padding-top: 10px"
style="align-self: center; padding-left: 5px"
></typography>
</hstack>
<typography variant="info-subtitle" [content]="fault.time" style="align-self: center"></typography>
</div>
</div>
<div style="height: 2px"></div>
</ng-container>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,31 +46,28 @@ export default class FaultDisplay {

ngOnInit() {
this.storage.get(IdentifierDataType.COMM_TIMEOUT_FAULT).subscribe((value) => {
this.addFault(value.values[0], 'Comm Timeout', FaultType.Charger);
this.addFault(parseInt(value.values[0]), 'Comm Timeout', FaultType.Charger);
});

this.storage.get(IdentifierDataType.HARDWARE_FAILURE_FAULT).subscribe((value) => {
this.addFault(value.values[0], 'Hardware Failure', FaultType.Charger);
this.addFault(parseInt(value.values[0]), 'Hardware Failure', FaultType.Charger);
});

this.storage.get(IdentifierDataType.OVER_TEMP_FAULT).subscribe((value) => {
this.addFault(value.values[0], 'Over Temp', FaultType.Charger);
this.addFault(parseInt(value.values[0]), 'Over Temp', FaultType.Charger);
});

this.storage.get(IdentifierDataType.VOLTAGE_WRONG_FAULT).subscribe((value) => {
this.addFault(value.values[0], 'Voltage Wrong', FaultType.Charger);
this.addFault(parseInt(value.values[0]), 'Voltage Wrong', FaultType.Charger);
});

this.storage.get(IdentifierDataType.WRONG_BAT_CONNECT_FAULT).subscribe((value) => {
this.addFault(value.values[0], 'Wrong Battery Connect', FaultType.Charger);
this.addFault(parseInt(value.values[0]), 'Wrong Battery Connect', FaultType.Charger);
});

/**
* This is based on the shepard enum for faults:
* https://github.com/Northeastern-Electric-Racing/ShepherdBMS-2/blob/6eb3f863ed131a15bdf98665532cb7807bbd2920/Core/Inc/datastructs.h#L39
*/
this.storage.get(IdentifierDataType.BMS_FAULTS).subscribe((value) => {
this.addFault(value.values[0], 'MASSIVE L, Should not be a fault hahaha', FaultType.BMS);
const bmsFaultID = parseInt(value.values[0]);
this.addFault(bmsFaultID, this.getBMSFaultName(bmsFaultID), FaultType.BMS);
});
}

Expand All @@ -81,11 +78,8 @@ export default class FaultDisplay {
* @param faultValue an string with an integer value.
* @param faultName the name of the fault, to be displayed.
*/
addFault(faultValue: string, faultName: string, faultType: FaultType) {
if (parseInt(faultValue) !== 0) {
if (faultType === FaultType.BMS) {
faultName = this.getBMSFaultName(parseInt(faultValue));
}
addFault(faultValue: number, faultName: string, faultType: FaultType) {
if (faultValue !== 0) {
if (this.faults.length >= 50) {
this.faults.pop();
}
Expand All @@ -95,9 +89,15 @@ export default class FaultDisplay {
}
}

/**
* This is based on the shepard enum for faults:
* https://github.com/Northeastern-Electric-Racing/ShepherdBMS-2/blob/6eb3f863ed131a15bdf98665532cb7807bbd2920/Core/Inc/datastructs.h#L39
*/
getBMSFaultName(faultValue: number): string {
let faultName = '';
switch (faultValue) {
case 0:
break;
case BMS_FAULTS_TYPES.CELLS_NOT_BALANCING:
faultName = 'Cells Not Balancing';
break;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
<info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton" *ngIf="isDesktop">
<hstack spacing="30px">
<vstack style="width: 10%">
<hstack>
Expand Down Expand Up @@ -58,7 +58,20 @@
<typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
</vstack>

<high-low-cell-graph style="width: 75%; padding-bottom: 35px" [resetGraph]="resetGraph" *ngIf="isDesktop">
<high-low-cell-graph
style="width: 75%; padding-bottom: 35px"
[highVoltsData]="highVoltsData"
[lowVoltsData]="lowVoltsData"
>
</high-low-cell-graph>
</hstack>
</info-background>
<high-low-cell-mobile
*ngIf="!isDesktop"
[delta]="delta"
[lowCellVoltage]="lowCellVoltage"
[highCellVoltage]="highCellVoltage"
[highVoltsData]="highVoltsData"
[lowVoltsData]="lowVoltsData"
[resetGraphButton]="resetGraphButton"
></high-low-cell-mobile>
Loading

0 comments on commit a2a13f6

Please sign in to comment.