@oicl/openbridge-webcomponents 0.0.13 → 0.0.15-dev-20240814145458

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

@@ -0,0 +1,105 @@
+import {SVGTemplateResult, nothing, svg} from 'lit';
+import {AdviceState, AdviceType} from '../watch/advice';
+import {TickmarkStyle} from '../watch/tickmark';
+import {singleSidedTickmark} from './tickmark';
+
+export interface LinearAdviceRaw {
+  min: number;
+  max: number;
+  type: AdviceType;
+  state: AdviceState;
+}
+
+export interface LinearAdvice {
+  min: number;
+  max: number;
+  type: AdviceType;
+  hinted: boolean;
+}
+
+function adviceMask(
+  height: number,
+  min: number,
+  max: number,
+  fill: string,
+  stroke: string
+): SVGTemplateResult {
+  const width = 8;
+  const x1 = 12;
+  const x2 = x1 + width;
+  const r = width / 2;
+  const yL = (-min * height) / 100 - 2 * r - 2;
+  const yH = (-max * height) / 100 + 2 * r - 2;
+
+  const path = `M ${x1} ${yL} 
+                    A ${r} ${r} 0 0 0 ${x2} ${yL}
+                    V ${yH}
+                    A ${r} ${r} 0 0 0 ${x1} ${yH}
+                    Z`;
+  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
+}
+
+export function renderAdvice(
+  height: number,
+  advice: LinearAdviceRaw,
+  flipDirection: boolean
+): SVGTemplateResult {
+  if (advice.type === AdviceType.caution) {
+    let mainColor;
+    let fillColor: string | null = null;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-tick-mark-tertiary-color)';
+    } else {
+      mainColor = 'var(--on-caution-active-color)';
+      fillColor = 'var(--alert-caution-color)';
+    }
+    const pattern = [];
+    const ypattern = flipDirection ? 50 : -50;
+    for (let i = -100; i < 300; i += 16) {
+      pattern.push(svg`<g transform="translate(0 ${-i}) ">
+            <path d="M 50 0 L 0 ${ypattern}" stroke=${mainColor} stroke-width="6"/>
+            </g>
+            `);
+    }
+    const maskId = `adviceMask-${advice.min}-${advice.max}`;
+    let tickmarkStyle = TickmarkStyle.hinted;
+    if (advice.state === AdviceState.regular) {
+      tickmarkStyle = TickmarkStyle.regular;
+    } else if (advice.state === AdviceState.triggered) {
+      tickmarkStyle = TickmarkStyle.enhanced;
+    }
+
+    return svg`
+            <mask id=${maskId}>
+                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}
+            </mask>
+            <g mask="url(#${maskId})">
+                ${fillColor ? svg`<rect x="-256" y="-512" width="512" height="1024" fill="${fillColor}"/>` : nothing}
+                ${pattern}
+            </g>
+            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}
+            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
+            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
+        `;
+  } else {
+    let mainColor;
+    let tickmarkStyle;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+      tickmarkStyle = TickmarkStyle.hinted;
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-regular-secondary-color)';
+      tickmarkStyle = TickmarkStyle.regular;
+    } else {
+      mainColor = 'var(--instrument-enhanced-secondary-color)';
+      tickmarkStyle = TickmarkStyle.regular;
+    }
+    return svg`
+            ${adviceMask(height, advice.min, advice.max, mainColor, mainColor)}
+            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
+            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
+        `;
+  }
+}

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,29 @@ 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>`;
+    state: {
+      options: Object.values(InstrumentState),
+    },
+    topPropeller: {
+      options: Object.values(PropellerType),
+    },
+    bottomPropeller: {
+      options: Object.values(PropellerType),
     },
-  ],
+  },
+  decorators: [widthDecorator, beta6Decorator],
 } satisfies Meta<ObcThruster>;
 
 export default meta;
@@ -34,6 +38,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 +122,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,