add fsr position indicators

Author: noahm

ui/common/panel-meters.tsx

@@ -18,6 +18,7 @@ export function PanelMeters() {
     { id: 3, activationThreshold: 80, releaseThreshold: 40 },
     { id: 4, activationThreshold: 75, releaseThreshold: 25 },
   ]);
+  const isFsr = stage?.config?.flags.PlatformFlags_FSR;
 
   const [isLocked, setIsLocked] = useState(false);
 
@@ -68,12 +69,13 @@ export function PanelMeters() {
           <SensorMeterInput
             key={sensor.id}
             value={panelData?.sensor_level[index]}
-            id={sensor.id}
+            id={index}
             activationThreshold={sensor.activationThreshold}
             releaseThreshold={sensor.releaseThreshold}
             maxValue={255}
             updateThreshold={updateSensorThreshold}
             showControls={!isLocked || index === sensors.length - 1}
+            forFsr={isFsr}
           />
         ))}
       </div>

ui/common/sensor-meter-input.module.css

@@ -1,7 +1,8 @@
 .root {
   display: flex;
   flex-direction: column;
-  place-items: center;
+  place-items: left;
+  --meter-width: 64px;
 }
 
 .control {
@@ -12,7 +13,7 @@
 
 .meterContainer {
   position: relative;
-  width: 64px;
+  width: var(--meter-width);
   height: 256px;
   background-color: var(--color-gray-200);
   border-radius: 5px;
@@ -81,6 +82,19 @@
 }
 
 .bottomLabel {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  width: var(--meter-width);
   font-size: 80%;
 }
+
+.bottomLabel p {
+  margin: 0.4em 0;
+}
+
+.fsrIndicator {
+  align-self: center;
+  height: 2em;
+  width: 2em;
+  border: 1px solid var(--color-gray-500);
+}

ui/common/sensor-meter-input.tsx

@@ -14,6 +14,7 @@ interface SensorProps {
   maxValue: number;
   updateThreshold?: (id: number, type: "activation" | "release", value: number) => void;
   showControls?: boolean;
+  forFsr?: boolean;
 }
 
 function useSensorActive(value: number, atk: number, rls: number) {
@@ -41,6 +42,7 @@ export function SensorMeterInput({
   activationThreshold,
   updateThreshold,
   showControls,
+  forFsr,
 }: SensorProps) {
   const valuePct = (100 * (value || 0)) / maxValue;
   const releaseThresholdPct = (100 * releaseThreshold) / maxValue;
@@ -111,7 +113,22 @@ export function SensorMeterInput({
           </div>
         )}
       </div>
-      <div className={classes.bottomLabel}>{value === undefined ? null : <p>Value: {value}</p>}</div>
+      <div className={classes.bottomLabel}>
+        {forFsr && <FsrIndicator index={id} />}
+        <p>Value: {value === undefined ? "--" : value}</p>
+      </div>
     </div>
   );
 }
+
+const fsrSidesByIndex = ["Left", "Right", "Top", "Bottom"] as const;
+
+function FsrIndicator({ index }: { index: number }) {
+  const side = fsrSidesByIndex[index];
+  return (
+    <div
+      className={classes.fsrIndicator}
+      style={{ [`border${side}Width`]: "4px", [`border${side}Color`]: "var(--color-gray-700)" }}
+    />
+  );
+}