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

1
src/routes/+page.svelte
View File

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

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

@ -5,25 +5,34 @@
</script> </script>
<div class="master-content"> <div class="master-content">
{#if status} {#if status}
<h2>Master Status</h2> <h2><b>Master Status</b></h2>
<div class="status-table"> <div class="log-collumn">
<div>State:</div> <div>State: {status.state}</div>
<div>{status.state}</div> <div>SDC Closed: {status.sdcClosed}</div>
<div>SDC Closed:</div> <div>SoC: {status.soc}</div>
<div>{status.sdcClosed}</div> <div>Min. cell voltage: {Math.round(status.minCellVolt * 100) / 100}</div>
<div>SoC:</div> <div>Max. cell temperature: {Math.round(status.maxCellTemp * 100) / 100}</div>
<div>{status.soc}</div> </div>
<div>Min. cell voltage:</div> {/if}
<div>{Math.round(status.minCellVolt*100)/100}</div>
<div>Max. cell temperature:</div>
<div>{Math.round(status.maxCellTemp*100)/100}</div>
</div>
{/if}
</div> </div>
<style> <style>
.master-content { .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> </style>

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

@ -7,36 +7,34 @@
export let logData: SlaveLogData | undefined; export let logData: SlaveLogData | undefined;
</script> </script>
<div class="slave-content"> <div class="slave-content" style:--lightness={status.error ? "60%" : "100%"}>
<h2>Slave #{id}</h2> <h2><b>Slave #{id}</b></h2>
<div class="status-table"> <div class="log-collumn">
<div>Error</div> <div class="log-entry"><div>Error:</div><div>{status.error}</div></div>
<div>{status.error}</div> <div class="log-entry"><div>Min. cell voltage:</div><div>{Math.round(status.minCellVolt*100)/100}V</div></div>
<div>Min. cell voltage</div> <div class="log-entry"><div>Max. cell voltage:</div><div>{Math.round(status.maxCellVolt*100)/100}V</div></div>
<div>{Math.round(status.minCellVolt*100)/100}</div> <div class="log-entry"><div>Max. temperature:</div><div>{Math.round(status.maxTemp*100)/100}°</div></div>
<div>Max. cell voltage</div> <!-- <div>SoC</div>
<div>{Math.round(status.maxCellVolt*100)/100}</div> <div>{status.soc}</div> -->
<div>Max. temperature</div> <!-- <div>Failed temperature sensors</div>
<div>{Math.round(status.maxTemp*100)/100}</div> <div>{logData?.failedTempSensors ?? 0}</div> -->
<!-- <div>SoC</div> </div>
<div>{status.soc}</div> -->
<!-- <div>Failed temperature sensors</div>
<div>{logData?.failedTempSensors ?? 0}</div> -->
</div>
{#if logData} {#if logData}
<div class="status-table"> <div class="log-collumn">
{#each logData.voltages as volt, i} {#each logData.voltages as volt, i}
{#if i < 15} {#if i < 15}
<div>V_{i}</div> <div class="log-entry" style:--hue={Math.max(((volt-2.5)*70.5), 0)}>
<div>{Math.round(volt*100)/100}</div> <div>V{i}:</div><div>{Math.round(volt*100)/100}V</div>
</div>
{/if} {/if}
{/each} {/each}
{#each logData.temperatures as temp, i} {#each logData.temperatures as temp, i}
{#if i > 33 && i < 43} {#if i > 33 && i < 44}
<div>T_{i}</div> <div class="log-entry" style:--hue={180-(temp*3)}>
<div>{temp}</div> <div>T{i}:</div><div>{temp}°</div>
</div>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -48,5 +46,28 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 12vw; 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> </style>