@oicl/openbridge-webcomponents 0.0.15-dev-20240916083108 → 0.0.15-dev-20240916185711

package/src/navigation-instruments/main-engine/main-engine.ts

@@ -0,0 +1,160 @@
+import {LitElement, html, unsafeCSS, svg, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './main-engine.css?inline';
+import {InstrumentState} from '../types';
+import {
+  atSetpoint,
+  convertThrustAdvices,
+  thrusterColors,
+  thrusterTopSingleSided,
+  setpointSvg,
+} from '../thruster/thruster';
+import {LinearAdvice} from '../thruster/advice';
+
+@customElement('obc-main-engine')
+export class ObcMainEngine extends LitElement {
+  @property({type: Number}) thrust: number = 0;
+  @property({type: Number}) thrustSetpoint: number | undefined;
+  @property({type: Boolean}) thrustTouching: boolean = false;
+  @property({type: Boolean}) atThrustSetpoint: boolean = false;
+  @property({type: Number}) speed: number = 0;
+  @property({type: Number}) speedSetpoint: number | undefined;
+  @property({type: Boolean}) speedTouching: boolean = false;
+  @property({type: Boolean}) atSpeedSetpoint: boolean = false;
+  @property({type: Boolean}) disableAutoAtThrustSetpoint: boolean = false;
+  @property({type: Boolean}) disableAutoAtSpeedSetpoint: boolean = false;
+  @property({type: Number}) autoAtThrustSetpointDeadband: number = 1;
+  @property({type: Number}) autoAtSpeedSetpointDeadband: number = 1;
+  @property({type: Number}) thrustSetpointAtZeroDeadband: number = 0.5;
+  @property({type: Number}) speedSetpointAtZeroDeadband: number = 0.5;
+  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;
+  @property({type: Array}) thrustAdvices: LinearAdvice[] = [];
+
+  override render() {
+    const thrustSetpointAtZero =
+      Math.abs(this.thrustSetpoint || 0) < this.thrustSetpointAtZeroDeadband;
+    const speedSetpointAtZero =
+      Math.abs(this.speedSetpoint || 0) < this.speedSetpointAtZeroDeadband;
+    const thrustAtSetpoint = atSetpoint(this.thrust, this.thrustSetpoint, {
+      atSetpoint: this.atThrustSetpoint,
+      autoAtSetpoint: !this.disableAutoAtThrustSetpoint,
+      autoSetpointDeadband: this.autoAtThrustSetpointDeadband,
+      touching: this.thrustTouching,
+    });
+    const cThrust = thrusterColors(
+      {
+        atSetpoint: thrustAtSetpoint,
+        touching: this.thrustTouching,
+      },
+      this.state
+    );
+    const speedAtSetpoint = atSetpoint(this.speed, this.speedSetpoint, {
+      atSetpoint: this.atSpeedSetpoint,
+      autoAtSetpoint: !this.disableAutoAtSpeedSetpoint,
+      autoSetpointDeadband: this.autoAtSpeedSetpointDeadband,
+      touching: this.speedTouching,
+    });
+    const cSpeed = thrusterColors(
+      {
+        atSetpoint: speedAtSetpoint,
+        touching: this.speedTouching,
+      },
+      this.state
+    );
+    const container = svg`<rect x="-80" y="-176" width="160" height="352" fill="var(--instrument-frame-primary-color)" stroke="var(--instrument-frame-tertiary-color)" rx="8"/>`;
+    const border = svg`<rect x="-80" y="-176" width="160" height="352" fill="none" stroke="var(--instrument-frame-tertiary-color)" rx="8" vector-effect="non-scaling-stroke"/>`;
+    const frameLeft = svg`<rect x="-56" y="-176" width="48" height="352" fill="var(--instrument-frame-secondary-color)" vector-effect="non-scaling-stroke" stroke="var(--instrument-frame-secondary-color)"/>`;
+    const frameRight = svg`<rect x="8" y="-176" width="48" height="352" fill="var(--instrument-frame-secondary-color)" vector-effect="non-scaling-stroke" stroke="var(--instrument-frame-secondary-color)"/>`;
+    const thrustCenter = svg`<rect x="8" y="-2" height="4" width="72" fill="${cThrust.zeroLineColor}" stroke=${cThrust.zeroLineColor} vector-effect="non-scaling-stroke"/>`;
+    const {topAdvices: topThrustAdvice, bottomAdvices: bottomThrustAdvice} =
+      convertThrustAdvices(this.thrustAdvices, this.thrust);
+    const thrustTop = svg`<g transform="translate(44, 0)">
+      ${thrusterTopSingleSided(
+        174,
+        Math.max(this.thrust, 0),
+        {box: cThrust.boxColor, container: ''},
+        {
+          hideContainer: true,
+          hideTicks: cThrust.hideTicks,
+          flipAdicePattern: false,
+          narrow: false,
+        },
+        topThrustAdvice
+      )}</g>`;
+    const thrusterBottom = svg`<g transform="rotate(180) scale(-1,1) translate(44)">
+     ${thrusterTopSingleSided(
+       174,
+       Math.max(-this.thrust, 0),
+       {box: cThrust.boxColor, container: ''},
+       {
+         hideContainer: true,
+         hideTicks: cThrust.hideTicks,
+         flipAdicePattern: false,
+         narrow: false,
+       },
+       bottomThrustAdvice
+     )}</g>`;
+    const thrustSetpoint =
+      this.thrustSetpoint !== undefined
+        ? svg`<g transform="translate(44, 0)">${setpointSvg(
+            174,
+            this.thrustSetpoint,
+            thrustSetpointAtZero,
+            {
+              fill: cThrust.setPointColor,
+              stroke: 'var(--border-silhouette-color)',
+            },
+            {
+              inCommand: this.state === InstrumentState.inCommand,
+              singleSided: true,
+              narrow: false,
+            }
+          )}</g>`
+        : nothing;
+
+    const speedHeight = 352 * (this.speed / 100) + 2;
+    const speedY = 176 - speedHeight;
+    const speedBoxColor =
+      this.state === InstrumentState.inCommand
+        ? 'var(--instrument-enhanced-tertiary-color)'
+        : 'var(--instrument-regular-tertiary-color)';
+    const speedBox = svg`<rect x="-56" y=${speedY} width="48" height=${speedHeight} fill=${speedBoxColor} stroke=${speedBoxColor} vector-effect="non-scaling-stroke">`;
+    const speedLine = svg`<rect x="-56" y=${speedY - 2} width="48" height="4" rx="2" fill=${cSpeed.boxColor} stroke=${cSpeed.boxColor}/>
+`;
+    const speedSetpoint =
+      this.speedSetpoint !== undefined
+        ? svg`<g transform="scale(-1 1) translate(44, 176)">${setpointSvg(
+            350,
+            this.speedSetpoint,
+            speedSetpointAtZero,
+            {
+              fill: cSpeed.setPointColor,
+              stroke: 'var(--border-silhouette-color)',
+            },
+            {
+              inCommand: this.state === InstrumentState.inCommand,
+              singleSided: true,
+              narrow: false,
+            }
+          )}</g>`
+        : nothing;
+
+    return html`
+      <div class="container">
+        <svg viewbox="-100 -200 200 400">
+          ${container} ${frameLeft} ${frameRight} ${thrustCenter} ${thrustTop}
+          ${thrusterBottom} ${speedBox} ${speedLine} ${border} ${thrustSetpoint}
+          ${speedSetpoint}
+        </svg>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-main-engine': ObcMainEngine;
+  }
+}

package/src/navigation-instruments/thruster/thruster.stories.ts

@@ -12,6 +12,7 @@ const meta: Meta<typeof ObcThruster> = {
   component: 'obc-thruster',
   args: {width: 320},
   argTypes: {
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
     thrust: {control: {type: 'range', min: -100, max: 100, step: 1}},
     setpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
     state: {

package/src/navigation-instruments/thruster/thruster.ts

@@ -1,4 +1,4 @@
-import {LitElement, svg, html, css} from 'lit';
+import {LitElement, svg, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {InstrumentState} from '../types';
 import {LinearAdvice, LinearAdviceRaw, renderAdvice} from './advice';
@@ -46,6 +46,7 @@ export class ObcThruster extends LitElement {
         singleDirectionHalfSize: this.singleDirectionHalfSize,
         topPropeller: this.topPropeller,
         bottomPropeller: this.bottomPropeller,
+        narrow: !this.tunnel,
       })}
     </div>`;
   }
@@ -63,11 +64,11 @@ export class ObcThruster extends LitElement {
   `;
 }
 
-function thrusterTop(
+export function thrusterTop(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean
+  options: {hideTicks: boolean; hideContainer: boolean}
 ) {
   const container = svg`
       <path transform="translate(0 -2)" d="M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
@@ -78,7 +79,7 @@ function thrusterTop(
 
   const nTicks = 2;
   const delta = height / nTicks;
-  if (!hideTicks) {
+  if (!options.hideTicks) {
     for (let i = 1; i < nTicks; i++) {
       tickmarks.push(
         svg`<line x1="-24" x2="-44" y1=${-i * delta - 2}  y2=${
@@ -96,54 +97,86 @@ function thrusterTop(
   const barHeight = (height * value) / 100;
   const barY = -2 - barHeight;
   const bar = svg`<rect width="40" height=${barHeight} x="-20" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
-
-  return [container, track, tickmarks, bar];
+  if (options.hideContainer) {
+    return [track, tickmarks, bar];
+  } else {
+    return [container, track, tickmarks, bar];
+  }
 }
 
-function thrusterTopSingleSided(
+export function thrusterTopSingleSided(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean,
-  advice: LinearAdviceRaw[],
-  flipAdicePattern: boolean = false
+  options: {
+    hideTicks: boolean;
+    flipAdicePattern: boolean;
+    hideContainer: boolean;
+    narrow: boolean;
+  },
+  advice: LinearAdviceRaw[]
 ) {
-  const container = svg`
+  const container = options.narrow
+    ? svg`
       <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `
+    : svg`
+      <path transform="translate(0 -2)" d="M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 56 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
-  const track = svg`
+  const track = options.narrow
+    ? svg`
       <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `
+    : svg`
+      <path transform="translate(0 -2)" d="M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 40 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
 
-  const tickmarks = hideTicks
+  const tickmarks = options.hideTicks
     ? []
     : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];
 
   const barHeight = (height * value) / 100;
+  const barWidth = options.narrow ? 40 : 48;
+  const barX = options.narrow ? -32 : -40;
   const barY = -2 - barHeight;
-  const maskId = flipAdicePattern ? 'thrusterBarMask1' : 'thrusterBarMask2';
-  const bar = svg`
+  const maskId = options.flipAdicePattern
+    ? 'thrusterBarMask1'
+    : 'thrusterBarMask2';
+  // The mask is used to clip the bar to the container shape
+  const mask = options.hideContainer
+    ? nothing
+    : svg`
   <defs>
   <mask id=${maskId}>
-  <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
-  </defs>
-  <rect mask="url(#${maskId})" width="40" height=${barHeight} x="-32" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
+  <path transform="translate(0 -2)" d="M ${barX} 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h ${barWidth} V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
+  </defs>`;
+  const maskAttr = options.hideContainer ? '' : `mask="url(#${maskId})"`;
+  const bar = svg`
+    ${mask}
+    <rect ${maskAttr} width=${barWidth} height=${barHeight} x=${barX} y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
   const advicesSvg = advice.map((a) =>
-    renderAdvice(height, a, flipAdicePattern)
+    renderAdvice(height, a, options.flipAdicePattern)
   );
-
-  return [container, track, tickmarks, bar, advicesSvg];
+  const all = [tickmarks, bar, advicesSvg];
+  if (!options.hideContainer) {
+    all.splice(0, 0, [container, track]);
+  }
+  if (!options.narrow) {
+    return svg`<g transform="translate(4 0)">${all}</g>`;
+  } else {
+    return all;
+  }
 }
 
-function thrusterBottom(
+export function thrusterBottom(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean
+  options: {hideTicks: boolean; hideContainer: boolean}
 ) {
   const container = svg`
       <g transform="rotate(180)">
-        ${thrusterTop(height, value, colors, hideTicks)}
+        ${thrusterTop(height, value, colors, options)}
       </g>
   `;
   return container;
@@ -153,18 +186,23 @@ function thrusterBottomSingleSided(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean,
-  advices: LinearAdviceRaw[]
+  options: {
+    hideTicks: boolean;
+    flipAdicePattern: boolean;
+    hideContainer: boolean;
+    narrow: boolean;
+  },
+  advice: LinearAdviceRaw[]
 ) {
   const container = svg`
       <g transform="rotate(180) scale(-1,1)">
-        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}
+        ${thrusterTopSingleSided(height, value, colors, {hideTicks: options.hideTicks, flipAdicePattern: options.flipAdicePattern, hideContainer: options.hideContainer, narrow: options.narrow}, advice)}
       </g>
   `;
   return container;
 }
 
-function setpointSvg(
+export function setpointSvg(
   height: number,
   value: number,
   setpointAtZero: boolean,
@@ -172,12 +210,13 @@ function setpointSvg(
   options: {
     inCommand: boolean;
     singleSided: boolean;
+    narrow: boolean;
   }
 ) {
   const y = -(setpointAtZero
     ? 0
     : Math.sign(value) * ((height * Math.abs(value)) / 100 + 2));
-  const extra = options.singleSided ? -12 : 0;
+  const extra = (options.singleSided ? -12 : 0) + (options.narrow ? 0 : 4);
   let path;
   if (options.inCommand) {
     path =
@@ -211,6 +250,27 @@ function setpointSvg(
   `;
 }
 
+export function atSetpoint(
+  thrust: number,
+  setpoint: number | undefined,
+  options: {
+    autoAtSetpoint: boolean;
+    autoSetpointDeadband: number;
+    touching: boolean;
+    atSetpoint: boolean;
+  }
+): boolean {
+  if (options.touching) {
+    return false;
+  }
+
+  if (options.autoAtSetpoint && setpoint !== undefined) {
+    return Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
+  }
+
+  return options.atSetpoint;
+}
+
 export function thruster(
   thrust: number,
   setpoint: number | undefined,
@@ -228,92 +288,38 @@ export function thruster(
     advices: LinearAdvice[];
     topPropeller: PropellerType;
     bottomPropeller: PropellerType;
+    narrow: boolean;
   }
 ) {
-  if (!options.singleSided && options.advices.length > 0) {
-    throw new Error('Double sided thruster does not support advice');
+  if (options.tunnel) {
+    thrust = -thrust;
+    setpoint = setpoint === undefined ? undefined : -setpoint;
   }
 
-  if (options.autoAtSetpoint && setpoint !== undefined) {
-    options.atSetpoint =
-      Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
+  if (!options.singleSided && options.advices.length > 0) {
+    throw new Error('Double sided thruster does not support advice');
   }
 
-  if (options.touching) {
-    options.atSetpoint = false;
-  }
+  options.atSetpoint = atSetpoint(thrust, setpoint, options);
 
-  let boxColor = 'var(--instrument-enhanced-secondary-color)';
-  let setPointColor = 'var(--instrument-enhanced-primary-color)';
-  let arrowColor = 'var(--instrument-regular-secondary-color)';
-  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';
-  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';
-  let hideTicks = false;
-  if (options.atSetpoint) {
-    setPointColor = boxColor;
-  }
-  if (state === InstrumentState.active) {
-    boxColor = 'var(--instrument-regular-secondary-color)';
-    zeroLineColor = 'var(--instrument-regular-secondary-color)';
-    setPointColor = 'var(--instrument-regular-primary-color)';
-    arrowColor = 'var(--instrument-regular-secondary-color)';
-    if (options.atSetpoint) {
-      setPointColor = boxColor;
-    }
-  } else if (state === InstrumentState.loading) {
-    boxColor = 'transparent';
-    setPointColor = 'var(--instrument-frame-tertiary-color)';
-    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
-    arrowColor = 'var(--instrument-regular-secondary-color)';
-    thrust = 0;
-    hideTicks = true;
-    if (setpoint !== undefined) {
-      setpoint = 0;
-    }
-  } else if (state === InstrumentState.off) {
-    boxColor = 'transparent';
-    setPointColor = 'var(--instrument-frame-tertiary-color)';
-    arrowColor = 'var(--instrument-frame-tertiary-color)';
-    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
-    thrust = 0;
-    hideTicks = true;
-    containerBackgroundColor = 'transparent';
-    if (setpoint !== undefined) {
-      setpoint = 0;
-    }
-  }
+  const tc = thrusterColors(options, state);
 
-  const centerLine = options.singleSided
-    ? svg`<rect x="-32" y="-2" width="64" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>`
-    : svg`
-    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>
+  let centerLine = svg`
+    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect="non-scaling-stroke"/>
   `;
+  if (options.singleSided) {
+    const width = options.narrow ? 64 : 72;
+    const x = options.narrow ? -32 : -36;
+    centerLine = svg`<rect x=${x} y="-2" width=${width} height="4" stroke-width="1" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect="non-scaling-stroke"/>`;
+  }
 
   const setpointAtZero =
     Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;
 
-  const advices: LinearAdviceRaw[] = options.advices.map((a) => {
-    const triggered = thrust >= a.min && thrust <= a.max;
-    let state: AdviceState;
-    if (triggered) {
-      state = AdviceState.triggered;
-    } else if (a.hinted) {
-      state = AdviceState.hinted;
-    } else {
-      state = AdviceState.regular;
-    }
-    return {
-      min: a.min,
-      max: a.max,
-      type: a.type,
-      state,
-    };
-  });
-
-  const topAdvices = advices.filter((a) => a.min >= 0);
-  const bottomAdvices = advices
-    .filter((a) => a.max <= 0)
-    .map((a) => ({...a, min: -a.max, max: -a.min}));
+  const {topAdvices, bottomAdvices} = convertThrustAdvices(
+    options.advices,
+    thrust
+  );
 
   const thrusterSvg = [];
   const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;
@@ -323,8 +329,13 @@ export function thruster(
       thrusterTopSingleSided(
         height,
         Math.max(thrust, 0),
-        {box: boxColor, container: containerBackgroundColor},
-        hideTicks,
+        {box: tc.boxColor, container: tc.containerBackgroundColor},
+        {
+          hideTicks: tc.hideTicks,
+          flipAdicePattern: false,
+          hideContainer: false,
+          narrow: options.narrow,
+        },
         topAdvices
       )
     );
@@ -333,8 +344,13 @@ export function thruster(
         thrusterBottomSingleSided(
           height,
           Math.max(-thrust, 0),
-          {box: boxColor, container: containerBackgroundColor},
-          hideTicks,
+          {box: tc.boxColor, container: tc.containerBackgroundColor},
+          {
+            hideTicks: tc.hideTicks,
+            flipAdicePattern: true,
+            hideContainer: false,
+            narrow: options.narrow,
+          },
           bottomAdvices
         )
       );
@@ -345,8 +361,8 @@ export function thruster(
       thrusterTop(
         height,
         Math.max(thrust, 0),
-        {box: boxColor, container: containerBackgroundColor},
-        hideTicks
+        {box: tc.boxColor, container: tc.containerBackgroundColor},
+        {hideTicks: tc.hideTicks, hideContainer: false}
       )
     );
     if (!options.singleDirection) {
@@ -354,8 +370,8 @@ export function thruster(
         thrusterBottom(
           height,
           Math.max(-thrust, 0),
-          {box: boxColor, container: containerBackgroundColor},
-          hideTicks
+          {box: tc.boxColor, container: tc.containerBackgroundColor},
+          {hideTicks: tc.hideTicks, hideContainer: false}
         )
       );
     }
@@ -368,12 +384,13 @@ export function thruster(
         setpoint,
         setpointAtZero,
         {
-          fill: setPointColor,
+          fill: tc.setPointColor,
           stroke: 'var(--border-silhouette-color)',
         },
         {
           inCommand: state === InstrumentState.inCommand,
           singleSided: options.singleSided,
+          narrow: options.narrow,
         }
       )
     );
@@ -382,7 +399,7 @@ export function thruster(
   if (options.tunnel) {
     return svg`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64  320 128" x="-160" y="-64">
-        <g transform="rotate(90)">
+        <g transform="rotate(-90)">
           ${thrusterSvg}
         </g>
       </svg>`;
@@ -393,7 +410,7 @@ export function thruster(
       viewBox = '-80 -300 160 320';
       y = -320;
     }
-    const top = topPropeller(height, arrowColor, options.topPropeller);
+    const top = topPropeller(height, tc.arrowColor, options.topPropeller);
     const bottom = bottomPropeller(
       options.singleDirectionHalfSize ? 0.5 : height,
       options.bottomPropeller
@@ -413,3 +430,78 @@ declare global {
     'obc-thruster': ObcThruster;
   }
 }
+
+export function convertThrustAdvices(
+  advices: LinearAdvice[],
+  thrust: number
+): {topAdvices: LinearAdviceRaw[]; bottomAdvices: LinearAdviceRaw[]} {
+  const rawAdvices: LinearAdviceRaw[] = advices.map((a) => {
+    const triggered = thrust >= a.min && thrust <= a.max;
+    let state: AdviceState;
+    if (triggered) {
+      state = AdviceState.triggered;
+    } else if (a.hinted) {
+      state = AdviceState.hinted;
+    } else {
+      state = AdviceState.regular;
+    }
+    return {
+      min: a.min,
+      max: a.max,
+      type: a.type,
+      state,
+      hinted: a.hinted,
+    };
+  });
+
+  const topAdvices = rawAdvices.filter((a) => a.min >= 0);
+  const bottomAdvices = rawAdvices
+    .filter((a) => a.max <= 0)
+    .map((a) => ({...a, min: -a.max, max: -a.min}));
+  return {topAdvices, bottomAdvices};
+}
+
+export function thrusterColors(
+  options: {atSetpoint: boolean; touching: boolean},
+  state: InstrumentState
+) {
+  let boxColor = 'var(--instrument-enhanced-secondary-color)';
+  let setPointColor = 'var(--instrument-enhanced-primary-color)';
+  let arrowColor = 'var(--instrument-regular-secondary-color)';
+  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';
+  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';
+  let hideTicks = false;
+  if (options.atSetpoint) {
+    setPointColor = boxColor;
+  }
+  if (state === InstrumentState.active) {
+    boxColor = 'var(--instrument-regular-secondary-color)';
+    zeroLineColor = 'var(--instrument-regular-secondary-color)';
+    setPointColor = 'var(--instrument-regular-primary-color)';
+    arrowColor = 'var(--instrument-regular-secondary-color)';
+    if (options.atSetpoint) {
+      setPointColor = boxColor;
+    }
+  } else if (state === InstrumentState.loading) {
+    boxColor = 'transparent';
+    setPointColor = 'var(--instrument-frame-tertiary-color)';
+    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
+    arrowColor = 'var(--instrument-regular-secondary-color)';
+    hideTicks = true;
+  } else if (state === InstrumentState.off) {
+    boxColor = 'transparent';
+    setPointColor = 'var(--instrument-frame-tertiary-color)';
+    arrowColor = 'var(--instrument-frame-tertiary-color)';
+    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
+    hideTicks = true;
+    containerBackgroundColor = 'transparent';
+  }
+  return {
+    zeroLineColor,
+    boxColor,
+    containerBackgroundColor,
+    hideTicks,
+    setPointColor,
+    arrowColor,
+  };
+}