Rudder

import {
  AdviceType,
  InstrumentState,
  ObcRudderVariant,
  Priority,
  Rudder,
  TickmarkStyle,
  type AngleAdvice,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The autopilot steering downwind in a quartering sea on a live feed: the commanded angle swings to meet each wave, " +
  "the rudder follows it, the caution zone near the stops triggers when the command goes past 25 degrees, and the " +
  "helmsman adjusts the setpoint on a second dial while the emergency tiller's sensor starts up.";

/** Hard over on a Hanse 460 is about 38 degrees; past 25 the rudder stalls and the pilot is losing the boat. */
const MAX_ANGLE: number = 40;

const ADVICES: AngleAdvice[] = [
  { minAngle: -8, maxAngle: 8, type: AdviceType.advice, hinted: true },
  { minAngle: 25, maxAngle: 40, type: AdviceType.caution, hinted: true },
  { minAngle: -40, maxAngle: -25, type: AdviceType.caution, hinted: true },
];

const PANEL: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
  alignItems: "flex-end",
  justifyContent: "center",
  gap: 24,
  width: "100%",
  maxWidth: 660,
};

const FIGURE: CSSProperties = { display: "flex", flexDirection: "column", alignItems: "center", gap: 6, margin: 0 };
const CAPTION: CSSProperties = { fontSize: 13, color: "var(--text-dim)", textAlign: "center", maxWidth: 240 };

/** The pilot's commanded angle in degrees at a time in seconds, positive to starboard. */
function commandAt(time: number): number {
  const set: number = Math.max(0, Math.sin(time / 9)) ** 4;
  return 14 * Math.sin((2 * Math.PI * time) / 8) + 14 * set * Math.sign(Math.sin((2 * Math.PI * time) / 8));
}

export default function Showcase(): ReactElement {
  const [second, setSecond]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);

  useEffect((): (() => void) => {
    const interval: number = window.setInterval((): void => {
      setSecond((previous: number): number => previous + 1);
    }, 1000);
    return (): void => {
      window.clearInterval(interval);
    };
  }, []);

  const command: number = Math.round(commandAt(second));
  // The hydraulic drive takes about a second to reach the command.
  const angle: number = commandAt(second - 1);

  // On the helm dial the helmsman moves the setpoint between 5 and 15 degrees to starboard every ten seconds,
  // turning the knob for the last two.
  const helmSetpoint: number = Math.floor(second / 10) % 2 === 0 ? 5 : 15;
  const adjusting: boolean = second % 10 >= 8;

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <div style={{ width: 300, height: 170 }}>
          <Rudder
            angle={angle}
            variant={ObcRudderVariant.Bar}
            maxAngle={MAX_ANGLE}
            setpoint={command}
            autoAtSetpoint
            autoAtSetpointDeadband={2}
            setpointAtZeroDeadband={0.5}
            animateSetpoint
            advices={ADVICES}
            priority={Priority.enhanced}
            tickmarkStyle={TickmarkStyle.enhanced}
            showLabels
            zoomToFitArc
          />
        </div>
        <figcaption style={CAPTION}>Autopilot: the bar, its command and the zones, zoomed onto the arc</figcaption>
      </figure>

      <figure style={FIGURE}>
        <Rudder
          angle={angle}
          variant={ObcRudderVariant.Needle}
          maxAngle={MAX_ANGLE}
          setpoint={helmSetpoint}
          newSetpoint={adjusting ? (helmSetpoint === 5 ? 15 : 5) : undefined}
          touching={adjusting}
          animateSetpoint
          advices={ADVICES}
          tickmarksInside
          showLabels
          faceDiameter={150}
        />
        <figcaption style={CAPTION}>Helm: the needle and a setpoint being adjusted</figcaption>
      </figure>

      <figure style={FIGURE}>
        <Rudder
          angle={0}
          maxAngle={MAX_ANGLE}
          setpoint={0}
          setpointOverride
          atSetpoint
          state={InstrumentState.loading}
          faceDiameter={110}
        />
        <figcaption style={CAPTION}>Emergency tiller, sensor starting</figcaption>
      </figure>
    </div>
  );
}

import { Rudder } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "The rudder 12 degrees to port, filled from the zero mark at the bottom.";

export default function RudderExample(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Rudder angle={-12} />
    </div>
  );
}

import { Rudder } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "A rudder on a face pinned to 180 pixels, which sizes itself and needs no surrounding box.";

export default function SmallFace(): ReactElement {
  return <Rudder angle={-12} faceDiameter={180} />;
}