FaSTTUBe/charger-display-svelte
56
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

colors for temps and voltages

Browse Source
This commit is contained in:
Karlsson Winkels 2024-07-23 21:40:46 +02:00
parent 971d6380e0
commit 333939df87
4 changed files with 72 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/defs.ts
View File

@ -1,2 +1,2 @@
export const N_CELLS_PER_SLAVE = 15;
export const N_TEMP_SENSORS_PER_SLAVE = 44;
export const N_TEMP_SENSORS_PER_SLAVE = 44;

1
src/routes/+page.svelte
View File

@ -47,7 +47,6 @@
});
</script>
<h1>FaSTTUBe Charger</h1>
<div class="wrapper">
<MasterErrorDisplay {error} />
<MasterStatusDisplay status={amsStatus} />

41
src/routes/master-status-display.svelte
View File

@ -5,25 +5,34 @@
</script>
<div class="master-content">
{#if status}
<h2>Master Status</h2>
<div class="status-table">
<div>State:</div>
<div>{status.state}</div>
<div>SDC Closed:</div>
<div>{status.sdcClosed}</div>
<div>SoC:</div>
<div>{status.soc}</div>
<div>Min. cell voltage:</div>
<div>{Math.round(status.minCellVolt*100)/100}</div>
<div>Max. cell temperature:</div>
<div>{Math.round(status.maxCellTemp*100)/100}</div>
</div>
{/if}
{#if status}
<h2><b>Master Status</b></h2>
<div class="log-collumn">
<div>State: {status.state}</div>
<div>SDC Closed: {status.sdcClosed}</div>
<div>SoC: {status.soc}</div>
<div>Min. cell voltage: {Math.round(status.minCellVolt * 100) / 100}</div>
<div>Max. cell temperature: {Math.round(status.maxCellTemp * 100) / 100}</div>
</div>
{/if}
</div>
<style>
.master-content {
width:12vw
display: flex;
flex-direction: column;
width: 12vw;
border: 2px solid black;
padding: 2px;
margin: 2px;
}
.log-collumn {
display: flex;
flex-direction: column;
}
h2 {
text-align: center;
}
</style>

71
src/routes/slave-status-display.svelte
View File

@ -1,42 +1,40 @@
<script lang="ts">
import type { SlaveStatus } from '$lib/messages';
import type { SlaveLogData } from '$lib/slave-log';
export let id: number;
export let status: SlaveStatus;
export let logData: SlaveLogData | undefined;
</script>
<div class="slave-content">
<h2>Slave #{id}</h2>
<div class="status-table">
<div>Error</div>
<div>{status.error}</div>
<div>Min. cell voltage</div>
<div>{Math.round(status.minCellVolt*100)/100}</div>
<div>Max. cell voltage</div>
<div>{Math.round(status.maxCellVolt*100)/100}</div>
<div>Max. temperature</div>
<div>{Math.round(status.maxTemp*100)/100}</div>
<!-- <div>SoC</div>
<div>{status.soc}</div> -->
<!-- <div>Failed temperature sensors</div>
<div>{logData?.failedTempSensors ?? 0}</div> -->
</div>
<div class="slave-content" style:--lightness={status.error ? "60%" : "100%"}>
<h2><b>Slave #{id}</b></h2>
<div class="log-collumn">
<div class="log-entry"><div>Error:</div><div>{status.error}</div></div>
<div class="log-entry"><div>Min. cell voltage:</div><div>{Math.round(status.minCellVolt*100)/100}V</div></div>
<div class="log-entry"><div>Max. cell voltage:</div><div>{Math.round(status.maxCellVolt*100)/100}V</div></div>
<div class="log-entry"><div>Max. temperature:</div><div>{Math.round(status.maxTemp*100)/100}°</div></div>
<!-- <div>SoC</div>
<div>{status.soc}</div> -->
<!-- <div>Failed temperature sensors</div>
<div>{logData?.failedTempSensors ?? 0}</div> -->
</div>
{#if logData}
<div class="status-table">
<div class="log-collumn">
{#each logData.voltages as volt, i}
{#if i < 15}
<div>V_{i}</div>
<div>{Math.round(volt*100)/100}</div>
<div class="log-entry" style:--hue={Math.max(((volt-2.5)*70.5), 0)}>
<div>V{i}:</div><div>{Math.round(volt*100)/100}V</div>
</div>
{/if}
{/each}
{#each logData.temperatures as temp, i}
{#if i > 33 && i < 43}
<div>T_{i}</div>
<div>{temp}</div>
{#if i > 33 && i < 44}
<div class="log-entry" style:--hue={180-(temp*3)}>
<div>T{i}:</div><div>{temp}°</div>
</div>
{/if}
{/each}
</div>
@ -48,5 +46,28 @@
display: flex;
flex-direction: column;
width: 12vw;
padding: 2px;
margin: 2px;
border: 2px solid black;
font-size: 14px;
margin-top: 10px;
background-color: hsl(0, 60%, --lightness);
}
.log-entry {
display: grid;
grid-template-columns: 5fr 3fr;
margin: 2px;
padding: 2px;
background-color: hsl(var(--hue), 80%, 80%);
}
.log-collumn {
display: flex;
flex-direction: column;
}
h2 {
text-align: center;
}
</style>