Compass

import {
  AdviceType,
  CogArrowStyle,
  Compass,
  CompassDirection,
  CompassPriorityElement,
  CompassReadoutSource,
  HdgArrowStyle,
  InstrumentState,
  Priority,
  RotPosition,
  RotType,
  VesselImage,
  type AngleAdvice,
  type CompassCenterReadout,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A passage under autopilot on a live feed: the heading wanders around the setpoint and into a caution sector, " +
  "the rate of turn, course over ground, wind and current follow, and the setpoint is adjusted and confirmed " +
  "every eight seconds, on a north-up, a heading-up and a course-up card.";

const CENTER_READOUTS: CompassCenterReadout[] = [
  { source: CompassReadoutSource.hdg },
  { source: CompassReadoutSource.cog },
  { source: CompassReadoutSource.rot, fractionDigits: 0 },
];

/** Port of the setpoint is open water; the starboard sector closes on the shoal off the headland. */
const ADVICES: AngleAdvice[] = [
  { minAngle: 196, maxAngle: 214, type: AdviceType.advice, hinted: true },
  { minAngle: 236, maxAngle: 262, type: AdviceType.caution, hinted: true },
];

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

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

/** The heading the feed reports at a given second: a slow swing with a faster yaw on top. */
function headingAt(second: number): number {
  return 228 + 9 * Math.sin(second / 20) + 2 * Math.sin(second / 4);
}

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 heading: number = (headingAt(second) + 360) % 360;
  const rateOfTurn: number = (headingAt(second + 0.5) - headingAt(second - 0.5)) * 60;
  const courseOverGround: number = (heading + 4 + Math.sin(second / 5) + 360) % 360;
  const windFrom: number = 300 + 6 * Math.sin(second / 11);
  const windKnots: number = 18 + 3 * Math.sin(second / 4);

  // The setpoint alternates between 225 and 232 degrees. In the two seconds before each change the helmsman is
  // turning the knob, so the new value shows as a second marker; on release the marker slides across.
  const phase: number = second % 8;
  const confirmed: number = Math.floor(second / 8) % 2 === 0 ? 225 : 232;
  const next: number = confirmed === 225 ? 232 : 225;
  const adjusting: boolean = phase >= 6;

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <Compass
          heading={heading}
          courseOverGround={courseOverGround}
          headingSetpoint={confirmed}
          newHeadingSetpoint={adjusting ? next : undefined}
          touching={adjusting}
          autoAtHeadingSetpoint
          autoAtHeadingSetpointDeadband={3}
          headingSetpointAtZeroDeadband={0.5}
          animateSetpoint
          headingAdvices={ADVICES}
          currentWindSpeedKnots={windKnots}
          windFromDirection={windFrom}
          currentSpeed={2}
          currentFromDirection={160}
          rateOfTurnDegreesPerMinute={rateOfTurn}
          rotType={RotType.bar}
          rotPosition={RotPosition.scale}
          rotMaxValue={60}
          rotArcExtent={45}
          rotPortStarboard
          rotAtZeroDeadband={0.5}
          centerReadouts={CENTER_READOUTS}
          hdgArrowStyle={HdgArrowStyle.vector}
          cogArrowStyle={CogArrowStyle.velocityVector}
          direction={CompassDirection.NorthUp}
          priority={Priority.enhanced}
          priorityElements={[
            CompassPriorityElement.hdg,
            CompassPriorityElement.cog,
            CompassPriorityElement.rot,
            CompassPriorityElement.wind,
          ]}
          showLabels
          faceDiameter={250}
        />
        <figcaption style={CAPTION}>
          Autopilot, north up: readouts, rate-of-turn bar by side, advice and caution sectors
        </figcaption>
      </figure>

      <figure style={FIGURE}>
        <Compass
          heading={heading}
          courseOverGround={courseOverGround}
          headingSetpoint={confirmed}
          newHeadingSetpoint={adjusting ? next : undefined}
          touching={adjusting}
          autoAtHeadingSetpoint
          animateSetpoint
          headingAdvices={ADVICES}
          currentWindSpeedKnots={windKnots}
          windFromDirection={windFrom}
          currentSpeed={2}
          currentFromDirection={160}
          rateOfTurnDegreesPerMinute={rateOfTurn}
          rotDotAnimationFactor={12}
          rotType={RotType.dots}
          rotPosition={RotPosition.innerCircle}
          vesselImage={VesselImage.genericTop}
          hdgArrowStyle={HdgArrowStyle.needle}
          cogArrowStyle={CogArrowStyle.needle}
          direction={CompassDirection.HeadingUp}
          priority={Priority.regular}
          showLabels
          tickmarksInside
          faceDiameter={170}
        />
        <figcaption style={CAPTION}>Helm, heading up: the vessel, needles and circling rate-of-turn dots</figcaption>
      </figure>

      <figure style={FIGURE}>
        <Compass
          heading={heading}
          courseOverGround={courseOverGround}
          headingSetpoint={confirmed}
          headingSetpointOverride
          atHeadingSetpoint={false}
          hdgArrowStyle={HdgArrowStyle.beamLine}
          cogArrowStyle={CogArrowStyle.arrowHead}
          direction={CompassDirection.CourseUp}
          state={InstrumentState.loading}
          faceDiameter={110}
        />
        <figcaption style={CAPTION}>Chart table repeater, course up, while the heading sensor starts</figcaption>
      </figure>
    </div>
  );
}

import { Compass, CompassDirection, VesselImage } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "The card with north at the top, the heading and course over ground arrows, the wind and current arrows, and the rate-of-turn dots.";

export default function NorthUp(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Compass
        heading={47}
        courseOverGround={52}
        currentWindSpeedKnots={14}
        windFromDirection={310}
        currentSpeed={1.2}
        currentFromDirection={190}
        rateOfTurnDegreesPerMinute={8}
        direction={CompassDirection.NorthUp}
        vesselImage={VesselImage.genericTop}
        showLabels
      />
    </div>
  );
}

import { Compass, CompassDirection, CompassReadoutSource, type CompassCenterReadout } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "Heading, course over ground and rate of turn as readouts in the center, on a face pinned to 240 pixels.";

const CENTER_READOUTS: CompassCenterReadout[] = [
  { source: CompassReadoutSource.hdg },
  { source: CompassReadoutSource.cog },
  { source: CompassReadoutSource.rot },
];

export default function WithReadouts(): ReactElement {
  return (
    <Compass
      heading={47}
      courseOverGround={52}
      rateOfTurnDegreesPerMinute={8}
      direction={CompassDirection.NorthUp}
      centerReadouts={CENTER_READOUTS}
      showLabels
      faceDiameter={240}
    />
  );
}

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

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

export default function SmallFace(): ReactElement {
  return <Compass heading={47} courseOverGround={52} rateOfTurnDegreesPerMinute={8} showLabels faceDiameter={180} />;
}