FaSTTUBe/charger-display-svelte
51
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
Download Patch File Download Diff File Expand all files Collapse all files

1
src/routes/+page.svelte
View File

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

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

@ -6,24 +6,33 @@
<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>
<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>

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

@ -7,18 +7,14 @@
export let logData: SlaveLogData | undefined;
</script>
<div class="slave-content">
<h2>Slave #{id}</h2>
<div class="slave-content" style:--lightness={status.error ? "60%" : "100%"}>
<h2><b>Slave #{id}</b></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 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>
@ -26,17 +22,19 @@
</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>