Merge pull request #142 from HyperloopUPV-H8/develop

Merge logger fix

Author: jmaralo

backend/pkg/logger/logger.go

@@ -12,7 +12,7 @@ import (
 const (
 	Name            = "loggerHandler"
 	HandlerName     = "logger"
-	TimestampFormat = "01-Jan-2006_15-04-05.000"
+  TimestampFormat = "02-Jan-2006_15-04-05.000"
 )
 
 // Logger is a struct that implements the abstraction.Logger interface

control-station/index.html

@@ -7,6 +7,9 @@
             type="image/svg+xml"
             href="/vite.svg"
         />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1.0"

control-station/package-lock.json

@@ -0,0 +1,40 @@
+.background {
+    position: relative;
+    height: 3rem;
+    width: 100%;
+    background-color: #000;
+    overflow: hidden;
+}
+
+.infoContainer {
+    position: absolute;
+    padding: 0rem 2rem;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bar {
+    position: absolute;
+    top: -25%;
+    left: -2%;
+    filter: blur(10px);
+    background-color: red;
+    width: 40%;
+    height: 150%;
+    transition: width 0.1s ease-in-out;
+}
+
+.title {
+    opacity: .8;
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 300;
+}
+
+.value {
+    opacity: .8;
+    font-size: 32px;
+}

control-station/src/components/BarIndicator/BarIndicator.module.scss

@@ -0,0 +1,38 @@
+import { NumericMeasurement, useMeasurementsStore } from "common";
+import styles from "./BarIndicator.module.scss";
+import { getPercentFromRange, getState, stateToColor, stateToColorBackground } from "state";
+
+interface Props {
+    icon?: string;
+    title: string;
+    measurement: NumericMeasurement;
+}
+
+export const BarIndicator = ({icon, title, measurement}: Props) => {
+    
+    const state = getState(measurement);
+    const percentage = getPercentFromRange(measurement.value.last, measurement.safeRange[0]!!, measurement.safeRange[1]!!)
+    
+    return (
+        <div 
+            className={styles.background}
+            style={{backgroundColor: stateToColorBackground[state]}}
+        >
+            <div 
+                className={styles.bar}
+                style={{width: percentage + "%", backgroundColor: stateToColor[state]}}
+            ></div>
+
+            <div className={styles.infoContainer}>
+                <div>
+                    <div className={styles.icon}>{icon}</div>
+                    <div className={styles.title}>{title}</div>
+                </div>
+                <div>
+                    <div className={styles.value}>{measurement.value.last}</div>
+                    <div className={styles.unit}>{measurement.units}</div>
+                </div>
+            </div>
+        </div>
+    )
+}

control-station/src/components/BarIndicator/BarIndicator.tsx

@@ -1,5 +1,5 @@
 .backgroundArc {
-    stroke: rgba(0, 0, 0, 0.049);
+    stroke: #c4d7e5a1;
 }
 
 .radialShadowArc {
@@ -9,16 +9,16 @@
 .rainbowArc {
     background: conic-gradient(
         from 220deg,
-        #7295ef,
-        60deg,
-        #7aefcc,
-        130deg,
-        #efe84a,
-        190deg,
-        #ffab2c,
-        240deg,
-        #ff1e1e,
-        330deg,
-        #7295ef
+        #91e473,
+        40deg,
+        #9BF37C,
+        80deg,
+        #F4E55E,
+        120deg,
+        #F4E55E,
+        220deg,
+        #F3785C,
+        310deg,
+        #F3785C
     );
 }

control-station/src/components/GaugeTag/Gauge/Gauge.module.scss

@@ -45,14 +45,6 @@ export const Gauge = ({
                 radius={radius}
                 strokeWidth={strokeWidth}
             ></BackgroundArc>
-
-            {/* <BackgroundArc
-                sweep={sweep}
-                className={styles.radialShadowArc}
-                percentage={percentage}
-                radius={radius}
-                strokeWidth={strokeWidth}
-            ></BackgroundArc> */}
         </svg>
     );
 };

control-station/src/components/GaugeTag/Gauge/Gauge.tsx

@@ -1,9 +1,14 @@
+@use "../../styles/colors";
+
 .gaugeTagWrapper {
     display: grid;
     grid-template-columns: min-content;
     justify-items: center;
     align-items: center;
     margin-bottom: -1.87em;
+    background-color: map-get($map: colors.$key-colors, $key: lightskyblue);
+    padding: 1rem;
+    border-radius: 100%;
 }
 
 .gauge {

control-station/src/components/GaugeTag/GaugeTag.module.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/fonts.scss";
+
 .textData {
     display: flex;
     flex-direction: column;
@@ -10,19 +12,22 @@
 
     .name {
         font-weight: inherit;
-        font-size: 0.7em;
-        font-weight: 400;
+        font-family: map-get($map: fonts.$font-families, $key: roboto);
+        font-size: map-get($map: fonts.$font-sizes, $key: x-small);
+        font-weight: map-get($map: fonts.$font-weights, $key: light);
+        font-style: italic;
     }
 
     .value {
-        font-family: var(--font-mono);
+        font-family: map-get($map: fonts.$font-families, $key: roboto);
         font-size: 1.8em;
-        font-weight: 600;
+        font-weight: map-get($map: fonts.$font-weights, $key: bold);
     }
 
     .units {
         font-weight: inherit;
-        font-size: 1em;
-        font-weight: 400;
+        font-family: map-get($map: fonts.$font-families, $key: roboto);
+        font-size: map-get($map: fonts.$font-sizes, $key: small);
+        font-weight: map-get($map: fonts.$font-weights, $key: normal);
     }
 }

control-station/src/components/GaugeTag/TextData/TextData.module.scss

@@ -19,6 +19,12 @@ export const stateToColor = {
     fault: "hsl(356, 90%, 61%)",
 };
 
+export const stateToColorBackground = {
+    stable: "hsl(92, 82%, 86%)",
+    warning: "hsl(52, 90%, 86%)",
+    fault: "hsl(356, 90%, 86%)",
+};
+
 export function getState(meas: Measurement): State {
     if (isNumericMeasurement(meas)) {
         return getStateFromRange(
@@ -63,3 +69,8 @@ export function getStateFromRange(
 
     return "fault";
 }
+
+export function getPercentFromRange(value: number, min: number, max: number): number {
+    const normValue = Math.max(Math.min(value, max), min);
+    return ((normValue - min) / (max - min)) * 100;
+}