From 333939df875d16be671d8378f846d7ff3666b336 Mon Sep 17 00:00:00 2001
From: Karlsson Winkels <k.winkels@fasttube.de>
Date: Tue, 23 Jul 2024 21:40:46 +0200
Subject: [PATCH] colors for temps and voltages

---
 src/lib/defs.ts                         |  2 +-
 src/routes/+page.svelte                 |  1 -
 src/routes/master-status-display.svelte | 41 ++++++++------
 src/routes/slave-status-display.svelte  | 71 ++++++++++++++++---------
 4 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/src/lib/defs.ts b/src/lib/defs.ts
index 7af89ae..b37cefd 100644
--- a/src/lib/defs.ts
+++ b/src/lib/defs.ts
@@ -1,2 +1,2 @@
 export const N_CELLS_PER_SLAVE = 15;
-export const N_TEMP_SENSORS_PER_SLAVE = 44;
\ No newline at end of file
+export const N_TEMP_SENSORS_PER_SLAVE = 44;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9a07502..1488739 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -47,7 +47,6 @@
 		});
 </script>
 
-<h1>FaSTTUBe Charger</h1>
 <div class="wrapper">
 	<MasterErrorDisplay {error} />
 	<MasterStatusDisplay status={amsStatus} />
diff --git a/src/routes/master-status-display.svelte b/src/routes/master-status-display.svelte
index 95c0fd8..09fbdf1 100644
--- a/src/routes/master-status-display.svelte
+++ b/src/routes/master-status-display.svelte
@@ -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>
diff --git a/src/routes/slave-status-display.svelte b/src/routes/slave-status-display.svelte
index 44ef0c3..918d637 100644
--- a/src/routes/slave-status-display.svelte
+++ b/src/routes/slave-status-display.svelte
@@ -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>
\ No newline at end of file