@oicl/openbridge-webcomponents 0.0.13 → 0.0.15

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

@@ -0,0 +1,68 @@
+import {SVGTemplateResult, svg} from 'lit';
+
+export enum PropellerType {
+  none = 'none',
+  cap = 'cap',
+  single = 'single',
+}
+
+function arrowTop(height: number, arrowColor: string) {
+  const y = -height - 22;
+  return svg`
+  <path transform="translate(-15 ${y})" d="M0.707007 14.2929L14.9999 0L29.2928 14.2929C29.9228 14.9229 29.4766 16 28.5857 16H1.41412C0.523211 16 0.0770419 14.9229 0.707007 14.2929Z" fill=${arrowColor}/>`;
+}
+
+export function topPropeller(
+  height: number,
+  arrowColor: string,
+  type: PropellerType
+): SVGTemplateResult | null {
+  if (type === PropellerType.none) {
+    return arrowTop(height, arrowColor);
+  } else if (type === PropellerType.cap) {
+    const y = -height - 50 - 1;
+    return svg`
+        <g transform="translate(-80 ${y})">
+        <path d="M60.0016 49L60.001 37.0005C60.0004 25.9547 68.9547 17 80.0005 17C91.0459 17 100 25.9541 100 36.9995V49H60.0016Z" stroke="var(--instrument-frame-tertiary-color)" fill="var(--instrument-frame-primary-color)" vector-effect="non-scaling-stroke"/>
+        <path d="M90.3784 10.889L79.9991 1.00391L69.6198 10.889C68.3125 12.1341 69.1937 14.3372 70.9991 14.3372H88.9991C90.8046 14.3372 91.6858 12.1341 90.3784 10.889Z" fill=${arrowColor} stroke-linecap="square"/>
+        </g>`;
+  } else if (type === PropellerType.single) {
+    const y = -height - 50 - 1;
+    return svg`
+        <g transform="translate(-80 ${y})">
+<path d="M60.0016 49L60.0016 23C60.0007 19.6866 62.6865 17 66 17L94 17C97.3137 17 100 19.6863 100 23L100 49L60.0016 49Z" fill="var(--instrument-frame-primary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+<path d="M9 33.2643C9.00007 42.0397 60.2667 45 60.2667 45C60.2667 37.2905 62.8316 29.87 67.4405 24.2456L70.1 21C56.8343 21 8.99993 24.489 9 33.2643Z" fill="var(--instrument-frame-primary-color)"  stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+<path d="M151 32.7357C151 23.9604 99.7333 21 99.7333 21C99.7333 28.7095 97.1684 36.1301 92.5595 41.7544L89.9 45C103.166 45 151 41.511 151 32.7357Z" stroke="var(--instrument-frame-tertiary-color)" fill="var(--instrument-frame-primary-color)" vector-effect="non-scaling-stroke"/>
+<path d="M90.3784 10.889L79.9991 1.00391L69.6198 10.889C68.3125 12.1341 69.1937 14.3372 70.9991 14.3372H88.9991C90.8046 14.3372 91.6858 12.1341 90.3784 10.889Z" fill=${arrowColor} stroke-linecap="square" vector-effect="non-scaling-stroke"/>
+</g>
+`;
+  } else {
+    return null;
+  }
+}
+
+export function bottomPropeller(
+  height: number,
+  type: PropellerType
+): SVGTemplateResult | null {
+  if (type === PropellerType.none) {
+    return null;
+  } else if (type === PropellerType.cap) {
+    const y = height + 1;
+    return svg`
+        <g transform="translate(-80 ${y})">
+<path d="M60.0016 1C60.0006 17.7823 67.4013 33.9132 80 45C92.5988 33.9131 100 17.7824 100 1L60.0016 1Z" stroke="var(--instrument-frame-tertiary-color)" fill="var(--instrument-frame-primary-color)" vector-effect="non-scaling-stroke"/>
+</g>`;
+  } else if (type === PropellerType.single) {
+    const y = height + 1;
+    return svg`
+        <g transform="translate(-80 ${y})">
+        <svg width="160" height="49" viewBox="0 0 160 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.0016 1C60.0006 17.7823 67.4013 33.9132 80 45C92.5988 33.9131 100 17.7824 100 1L60.0016 1Z" stroke="var(--instrument-frame-tertiary-color)" fill="var(--instrument-frame-primary-color)" vector-effect="non-scaling-stroke" />
+<path d="M151 16.7357C151 7.96035 99.7333 5 99.7333 5C98.5 13.5 92 24 81.9 29C95.1657 29 151 25.511 151 16.7357Z" stroke="var(--instrument-frame-tertiary-color)" fill="var(--instrument-frame-primary-color)" vector-effect="non-scaling-stroke" />
+<path d="M9 17.2643C9.00007 26.0397 67.2667 29 67.2667 29C63.5 22 69.5 8.5 82.1 5C68.8343 5 8.99993 8.48898 9 17.2643Z" stroke="var(--instrument-frame-tertiary-color)" fill="var(--instrument-frame-primary-color)" vector-effect="non-scaling-stroke" />
+</g>`;
+  } else {
+    return null;
+  }
+}

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

@@ -2,25 +2,20 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcThruster} from './thruster';
 import './thruster';
 import {InstrumentState} from '../types';
-import {html} from 'lit';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {AdviceType} from '../watch/advice';
+import {PropellerType} from './propeller';
 
 const meta: Meta<typeof ObcThruster> = {
   title: 'Navigation instruments/Thruster',
   tags: ['autodocs'],
   component: 'obc-thruster',
-  args: {containerSize: 320},
+  args: {width: 320},
   argTypes: {
+    thrust: {control: {type: 'range', min: -100, max: 100, step: 1}},
     setpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
   },
-  decorators: [
-    (story, contex) => {
-      return html`<div
-        style="height: ${contex.args.containerSize}px; width: fit-content;"
-      >
-        ${story()}
-      </div>`;
-    },
-  ],
+  decorators: [widthDecorator, beta6Decorator],
 } satisfies Meta<ObcThruster>;
 
 export default meta;
@@ -34,6 +29,83 @@ export const InCommand: Story = {
   },
 };
 
+export const SingleSided: Story = {
+  args: {
+    thrust: 50,
+    setpoint: 30,
+    state: InstrumentState.inCommand,
+    singleSided: true,
+  },
+};
+
+export const PullingPod: Story = {
+  args: {
+    thrust: 50,
+    setpoint: 30,
+    state: InstrumentState.inCommand,
+    singleSided: true,
+    topPropeller: PropellerType.single,
+    bottomPropeller: PropellerType.cap,
+  },
+};
+
+export const PushingPod: Story = {
+  args: {
+    thrust: 50,
+    setpoint: 30,
+    state: InstrumentState.inCommand,
+    singleSided: true,
+    topPropeller: PropellerType.cap,
+    bottomPropeller: PropellerType.single,
+  },
+};
+
+export const SingleSidedWithAdvice: Story = {
+  args: {
+    thrust: 50,
+    setpoint: 30,
+    state: InstrumentState.inCommand,
+    singleSided: true,
+    advices: [
+      {min: 20, max: 50, type: AdviceType.advice, hinted: true},
+      {min: 60, max: 100, type: AdviceType.caution, hinted: true},
+      {min: -100, max: -60, type: AdviceType.caution, hinted: true},
+    ],
+  },
+};
+
+export const SingleDirection: Story = {
+  args: {
+    singleDirection: true,
+    thrust: 50,
+    setpoint: 30,
+    state: InstrumentState.inCommand,
+  },
+};
+
+export const SingleDirectionSingleSidedWithAdvice: Story = {
+  args: {
+    singleDirection: true,
+    singleSided: true,
+    thrust: 50,
+    setpoint: 30,
+    state: InstrumentState.inCommand,
+    advices: [
+      {min: 20, max: 50, type: AdviceType.advice, hinted: true},
+      {min: 60, max: 100, type: AdviceType.caution, hinted: true},
+    ],
+  },
+};
+
+/** Set setpoint to undefined to hide the setpoint */
+export const NoSetpoint: Story = {
+  args: {
+    thrust: 50,
+    setpoint: undefined,
+    state: InstrumentState.inCommand,
+  },
+};
+
 export const Tunnel: Story = {
   args: {
     thrust: 50,
@@ -41,24 +113,39 @@ export const Tunnel: Story = {
     state: InstrumentState.inCommand,
     tunnel: true,
   },
-  decorators: [
-    (story, contex) => {
-      return html`<div style="width: ${contex.args.containerSize}px">
-        ${story()}
-      </div>`;
-    },
-  ],
 };
 
 export const InCommandAtSetpoint: Story = {
   args: {
     thrust: 50,
     setpoint: 50,
-    atSetpoint: true,
     state: InstrumentState.inCommand,
   },
 };
 
+/**
+ *  Mode is used to highlight that the controller (lever) is being touched by the operator
+ * This is used to make it easy for the operator to see which thruster is connected to the controller.
+ */
+export const InCommandTouching: Story = {
+  args: {
+    thrust: 50,
+    setpoint: 50,
+    state: InstrumentState.inCommand,
+    touching: true,
+  },
+};
+
+export const InCommandAtSetpointManual: Story = {
+  args: {
+    thrust: 50,
+    setpoint: 50,
+    state: InstrumentState.inCommand,
+    atSetpoint: true,
+    disableAutoAtSetpoint: true,
+  },
+};
+
 export const Active: Story = {
   args: {
     thrust: 50,

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

@@ -1,33 +1,53 @@
 import {LitElement, svg, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {Size, InstrumentState} from '../types';
+import {LinearAdvice, LinearAdviceRaw, renderAdvice} from './advice';
+import {AdviceState} from '../watch/advice';
+import {TickmarkStyle} from '../watch/tickmark';
+import {singleSidedTickmark} from './tickmark';
+import {PropellerType, bottomPropeller, topPropeller} from './propeller';
 
 /**
  * @element obc-thruster
  *
  * @prop {Size} size - The size of the thruster
  * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)
+ * @prop {boolean} touching - Highlight the thruster when the lever is being touched
  */
 @customElement('obc-thruster')
 export class ObcThruster extends LitElement {
   @property({type: String}) size: Size = Size.medium;
   @property({type: Number}) thrust: number = 0;
   @property({type: Number}) setpoint: number | undefined;
-  @property({type: Boolean, attribute: 'at-setpoint'}) atSetpoint: boolean =
-    false;
-  @property({type: Boolean, attribute: 'setpoint-at-zero'})
-  setpointAtZero: boolean = false;
+  @property({type: Boolean}) touching: boolean = false;
+  @property({type: Boolean}) atSetpoint: boolean = false;
+  @property({type: Boolean}) disableAutoAtSetpoint: boolean = false;
+  @property({type: Number}) autoAtSetpointDeadband: number = 1;
+  @property({type: Number}) setpointAtZeroDeadband: number = 0.5;
   @property({type: String}) state: InstrumentState = InstrumentState.inCommand;
   @property({type: Boolean}) tunnel: boolean = false;
-  @property({type: Boolean}) loading: boolean = false;
-  @property({type: Boolean}) off: boolean = false;
+  @property({type: Boolean}) singleSided: boolean = false;
+  @property({type: Boolean}) singleDirection: boolean = false;
+  @property({type: Boolean}) singleDirectionHalfSize: boolean = false;
+  @property({type: Array}) advices: LinearAdvice[] = [];
+  @property({type: String}) topPropeller: PropellerType = PropellerType.none;
+  @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;
 
   override render() {
     return html`<div class="container">
       ${thruster(this.thrust, this.setpoint, this.state, {
         atSetpoint: this.atSetpoint,
         tunnel: this.tunnel,
-        setpointAtZero: this.setpointAtZero,
+        setpointAtZeroDeadband: this.setpointAtZeroDeadband,
+        autoAtSetpoint: !this.disableAutoAtSetpoint,
+        autoSetpointDeadband: this.autoAtSetpointDeadband,
+        touching: this.touching,
+        singleSided: this.singleSided,
+        advices: this.advices,
+        singleDirection: this.singleDirection,
+        singleDirectionHalfSize: this.singleDirectionHalfSize,
+        topPropeller: this.topPropeller,
+        bottomPropeller: this.bottomPropeller,
       })}
     </div>`;
   }
@@ -44,102 +64,203 @@ export class ObcThruster extends LitElement {
     }
   `;
 }
-const containerHeight = 134;
 
 function thrusterTop(
+  height: number,
   value: number,
   colors: {box: string; container: string},
   hideTicks: boolean
 ) {
   const container = svg`
-      <path transform="translate(-33 -137)" d="M1 9C1 4.58172 4.58172 1 9 1H57C61.4183 1 65 4.58172 65 9V135H1V9Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+      <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"/>
   `;
-  const track = svg`<rect width="32" height="134" x="-16" y="-136" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>`;
+  const track = svg`<rect width="40" height=${height} x="-20" y=${-2 - height} fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>`;
 
   const tickmarks = [];
 
-  const nTicks = 4;
-  const delta = containerHeight / nTicks;
+  const nTicks = 2;
+  const delta = height / nTicks;
   if (!hideTicks) {
     for (let i = 1; i < nTicks; i++) {
       tickmarks.push(
-        svg`<line x1="-20" x2="-28" y1=${-i * delta - 2}  y2=${
+        svg`<line x1="-24" x2="-44" y1=${-i * delta - 2}  y2=${
           -i * delta - 2
         } stroke="var(--instrument-frame-tertiary-color)" stroke-width="1" vector-effect="non-scaling-stroke"/>`
       );
       tickmarks.push(
-        svg`<line  x1="20"  x2="28" y1=${-i * delta - 2}  y2=${
+        svg`<line  x1="24"  x2="44" y1=${-i * delta - 2}  y2=${
           -i * delta - 2
         } stroke="var(--instrument-frame-tertiary-color)" stroke-width="1" vector-effect="non-scaling-stroke"/>`
       );
     }
   }
 
-  const barHeight = (134 * value) / 100;
-  const barY = -136 + 134 - barHeight;
-  const bar = svg`<rect width="32" height=${barHeight} x="-16" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
+  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];
 }
 
+function thrusterTopSingleSided(
+  height: number,
+  value: number,
+  colors: {box: string; container: string},
+  hideTicks: boolean,
+  advice: LinearAdviceRaw[],
+  flipAdicePattern: boolean = false
+) {
+  const container = 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"/>
+  `;
+  const track = 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"/>
+  `;
+
+  const tickmarks = hideTicks
+    ? []
+    : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];
+
+  const barHeight = (height * value) / 100;
+  const barY = -2 - barHeight;
+  const maskId = flipAdicePattern ? 'thrusterBarMask1' : 'thrusterBarMask2';
+  const bar = 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"/>`;
+  const advicesSvg = advice.map((a) =>
+    renderAdvice(height, a, flipAdicePattern)
+  );
+
+  return [container, track, tickmarks, bar, advicesSvg];
+}
+
 function thrusterBottom(
+  height: number,
   value: number,
   colors: {box: string; container: string},
   hideTicks: boolean
 ) {
   const container = svg`
       <g transform="rotate(180)">
-        ${thrusterTop(value, colors, hideTicks)}
+        ${thrusterTop(height, value, colors, hideTicks)}
       </g>
   `;
   return container;
 }
 
-function arrowTop(arrowColor: string) {
-  return svg`
-<path transform="translate(-15 -156)" d="M0.707007 14.2929L14.9999 0L29.2928 14.2929C29.9228 14.9229 29.4766 16 28.5857 16H1.41412C0.523211 16 0.0770419 14.9229 0.707007 14.2929Z" fill=${arrowColor}/>`;
+function thrusterBottomSingleSided(
+  height: number,
+  value: number,
+  colors: {box: string; container: string},
+  hideTicks: boolean,
+  advices: LinearAdviceRaw[]
+) {
+  const container = svg`
+      <g transform="rotate(180) scale(-1,1)">
+        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}
+      </g>
+  `;
+  return container;
 }
 
 function setpointSvg(
+  height: number,
   value: number,
   setpointAtZero: boolean,
-  colors: {fill: string; stroke: string}
+  colors: {fill: string; stroke: string},
+  options: {
+    inCommand: boolean;
+    singleSided: boolean;
+  }
 ) {
-  const y =
-    -12 +
-    -(setpointAtZero
-      ? 0
-      : Math.sign(value) * ((containerHeight * Math.abs(value)) / 100 + 2));
+  const y = -(setpointAtZero
+    ? 0
+    : Math.sign(value) * ((height * Math.abs(value)) / 100 + 2));
+  const extra = options.singleSided ? -12 : 0;
+  let path;
+  if (options.inCommand) {
+    path =
+      'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';
+  } else {
+    path =
+      'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';
+  }
   return svg`
-  <g transform="translate(-40 ${y})">
-    <path d="M59.4001 11.1999C59.1483 11.3887 59 11.6852 59 12C59 12.3148 59.1483 12.6113 59.4001 12.8001L72.2001 22.3966C74.1773 23.879 77 22.4692 77 19.9971L77 4.0029C77 1.53076 74.1773 0.121035 72.2001 1.60338L59.4001 11.1999Z" fill=${colors.fill} stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
-    <path d="M20.5999 12.8001C20.8517 12.6113 21 12.3148 21 12C21 11.6852 20.8517 11.3887 20.5999 11.1999L7.79986 1.60338C5.82268 0.121036 3 1.53075 3 4.0029L3 19.9971C3 22.4692 5.82268 23.879 7.79986 22.3966L20.5999 12.8001Z" fill=${colors.fill} stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+    <defs>
+      <g id="thrusterSetpoint">
+        <path fill-rule="evenodd" clip-rule="evenodd" transform="translate(24 -12) rotate(90)" d=${path} vector-effect="non-scaling-stroke"/>
+      </g>
+      <mask id="thrusterSetpointMask">
+        <rect x="-20" y="-20" width="50" height="50" fill="white" />
+        <use href="#thrusterSetpoint" fill="black" />
+      </mask>
+    </defs>
+  <g transform="translate(0 ${y})">
+    <use href="#thrusterSetpoint" fill=${colors.fill} stroke="none" transform="translate(${28 + extra} 0)"/>
+    <use href="#thrusterSetpoint" mask="url(#thrusterSetpointMask)" transform="translate(${28 + extra} 0)" fill="none" stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+    ${
+      options.singleSided
+        ? null
+        : svg`
+    <use href="#thrusterSetpoint" transform="rotate(180) translate(28 0)" fill=${colors.fill} stroke="none"/>
+    <use href="#thrusterSetpoint" transform="rotate(180) translate(28 0)" mask="url(#thrusterSetpointMask)" fill="none" stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+      `
+    }
   </g>
-`;
+  `;
 }
 
 export function thruster(
   thrust: number,
   setpoint: number | undefined,
   state: InstrumentState,
-  options: {atSetpoint: boolean; tunnel: boolean; setpointAtZero: boolean}
+  options: {
+    atSetpoint: boolean;
+    tunnel: boolean;
+    singleSided: boolean;
+    singleDirection: boolean;
+    singleDirectionHalfSize: boolean;
+    setpointAtZeroDeadband: number;
+    autoAtSetpoint: boolean;
+    autoSetpointDeadband: number;
+    touching: boolean;
+    advices: LinearAdvice[];
+    topPropeller: PropellerType;
+    bottomPropeller: PropellerType;
+  }
 ) {
+  if (!options.singleSided && options.advices.length > 0) {
+    throw new Error('Double sided thruster does not support advice');
+  }
+
+  if (options.autoAtSetpoint && setpoint !== undefined) {
+    options.atSetpoint =
+      Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
+  }
+
+  if (options.touching) {
+    options.atSetpoint = false;
+  }
+
   let boxColor = 'var(--instrument-enhanced-secondary-color)';
-  let setPointColor = boxColor;
-  let arrowColor = 'var(--instrument-tick-mark-primary-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 = 'var(--instrument-frame-tertiary-color)';
+    setPointColor = boxColor;
   }
   if (state === InstrumentState.active) {
     boxColor = 'var(--instrument-regular-secondary-color)';
     zeroLineColor = 'var(--instrument-regular-secondary-color)';
-    setPointColor = boxColor;
+    setPointColor = 'var(--instrument-regular-primary-color)';
     arrowColor = 'var(--instrument-regular-secondary-color)';
     if (options.atSetpoint) {
-      setPointColor = 'var(--instrument-frame-tertiary-color)';
+      setPointColor = boxColor;
     }
   } else if (state === InstrumentState.loading) {
     boxColor = 'transparent';
@@ -164,29 +285,99 @@ export function thruster(
     }
   }
 
-  const centerLine = svg`
-    <rect x="-32" y="-2" width="64" height="4" fill=${zeroLineColor} stroke=${zeroLineColor}/>
+  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"/>
   `;
 
-  const thrusterSvg = [
-    thrusterTop(
-      Math.max(thrust, 0),
-      {box: boxColor, container: containerBackgroundColor},
-      hideTicks
-    ),
-    thrusterBottom(
-      Math.max(-thrust, 0),
-      {box: boxColor, container: containerBackgroundColor},
-      hideTicks
-    ),
-    centerLine,
-  ];
+  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 thrusterSvg = [];
+  const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;
+  const height = options.singleDirection ? baseheight * 2 : baseheight;
+  if (options.singleSided) {
+    thrusterSvg.push(
+      thrusterTopSingleSided(
+        height,
+        Math.max(thrust, 0),
+        {box: boxColor, container: containerBackgroundColor},
+        hideTicks,
+        topAdvices
+      )
+    );
+    if (!(options.singleDirection || options.singleDirectionHalfSize)) {
+      thrusterSvg.push(
+        thrusterBottomSingleSided(
+          height,
+          Math.max(-thrust, 0),
+          {box: boxColor, container: containerBackgroundColor},
+          hideTicks,
+          bottomAdvices
+        )
+      );
+    }
+    thrusterSvg.push(centerLine);
+  } else {
+    thrusterSvg.push(
+      thrusterTop(
+        height,
+        Math.max(thrust, 0),
+        {box: boxColor, container: containerBackgroundColor},
+        hideTicks
+      )
+    );
+    if (!options.singleDirection) {
+      thrusterSvg.push(
+        thrusterBottom(
+          height,
+          Math.max(-thrust, 0),
+          {box: boxColor, container: containerBackgroundColor},
+          hideTicks
+        )
+      );
+    }
+    thrusterSvg.push(centerLine);
+  }
   if (setpoint !== undefined) {
     thrusterSvg.push(
-      setpointSvg(setpoint, options.setpointAtZero, {
-        fill: setPointColor,
-        stroke: 'var(--border-silhouette-color)',
-      })
+      setpointSvg(
+        height,
+        setpoint,
+        setpointAtZero,
+        {
+          fill: setPointColor,
+          stroke: 'var(--border-silhouette-color)',
+        },
+        {
+          inCommand: state === InstrumentState.inCommand,
+          singleSided: options.singleSided,
+        }
+      )
     );
   }
 
@@ -198,9 +389,21 @@ export function thruster(
         </g>
       </svg>`;
   } else {
-    thrusterSvg.push(arrowTop(arrowColor));
+    let viewBox = '-80 -160 160 320';
+    let y = -160;
+    if (options.singleDirection) {
+      viewBox = '-80 -300 160 320';
+      y = -320;
+    }
+    const top = topPropeller(height, arrowColor, options.topPropeller);
+    const bottom = bottomPropeller(
+      options.singleDirectionHalfSize ? 0.5 : height,
+      options.bottomPropeller
+    );
     return svg`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -160 128 320" x="-64" y="-160">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox=${viewBox} x="-80" y=${y} width="160" height="320">
+      ${top}
+      ${bottom}
       ${thrusterSvg}
     </svg>
   `;

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

@@ -0,0 +1,15 @@
+import {svg} from 'lit';
+import {TickmarkStyle, tickmarkColor} from '../watch/tickmark';
+
+export function singleSidedTickmark(
+  height: number,
+  value: number,
+  style: TickmarkStyle
+) {
+  if (value >= 100) {
+    return null;
+  }
+  const color = tickmarkColor(style);
+  const y = (-value * height) / 100 - 2;
+  return svg`<line x1="12" x2="32" y1=${y}  y2=${y} stroke=${color} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+}