@oicl/openbridge-webcomponents 0.0.14 → 0.0.15

package/src/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.css

@@ -9,7 +9,7 @@
         "angle azimuth"
         "power azimuth";
     grid-template-columns: min-content 1fr;
-    grid-template-rows: min-content 1fr 1fr;
+    grid-template-rows: min-content min-content 1fr;
     width: 100%;
     height: 100%;
 }
@@ -37,7 +37,7 @@
 
 .instrument-field-power {
     grid-area: power;
-    align-self: end;
+    align-self: start;
     padding-top: 4px;
     padding-bottom: 11px;
 }
@@ -48,6 +48,6 @@
     justify-self: start;
     align-self: stretch;
     max-width: 100%;
-    padding-left: 8px;
+    padding-left: 16px;
     padding-right: 8px;
 }

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

@@ -4,8 +4,9 @@ import {
   ObcAzimuthThrusterLabeled,
 } from './azimuth-thruster-labeled';
 import './azimuth-thruster-labeled';
-import {html} from 'lit';
 import {CommandStatus} from '../badge-command/badge-command';
+import {AdviceType} from '../watch/advice';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcAzimuthThrusterLabeled> = {
   title: 'Navigation instruments/Azimuth thruster labeled',
@@ -18,15 +19,18 @@ const meta: Meta<typeof ObcAzimuthThrusterLabeled> = {
     thrustSetpoint: 70,
     label: '3. Thruster',
     size: 'medium',
-    containerSize: 300,
+    width: 300,
+    angleAdvices: [
+      {minAngle: 20, maxAngle: 50, type: AdviceType.advice, hinted: true},
+      {minAngle: 60, maxAngle: 100, type: AdviceType.caution, hinted: true},
+    ],
+    thrustAdvices: [
+      {min: 20, max: 50, type: AdviceType.advice, hinted: true},
+      {min: 75, max: 100, type: AdviceType.caution, hinted: true},
+      {min: -100, max: -75, type: AdviceType.caution, hinted: true},
+    ],
   },
-  decorators: [
-    (story, contex) => {
-      return html`<div style="height: ${contex.args.containerSize}px">
-        ${story()}
-      </div>`;
-    },
-  ],
+  decorators: [widthDecorator, beta6Decorator],
   argTypes: {
     commandStatus: {
       control: {

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

@@ -9,6 +9,9 @@ import '../azimuth-thruster/azimuth-thruster';
 import {InstrumentFieldSize} from '../instrument-field/instrument-field';
 import {InstrumentState, Size} from '../types';
 import {ifDefined} from 'lit/directives/if-defined.js';
+import {AngleAdvice} from '../watch/advice';
+import {LinearAdvice} from '../thruster/advice';
+import {PropellerType} from '../thruster/propeller';
 
 export enum AzimuthThrusterLabeledSize {
   medium = 'medium',
@@ -18,25 +21,32 @@ export enum AzimuthThrusterLabeledSize {
 @customElement('obc-azimuth-thruster-labeled')
 export class ObcAzimuthThrusterLabeled extends LitElement {
   @property({type: String}) label = '';
-  @property({type: String, attribute: 'command-status'})
+  @property({type: String})
   commandStatus: CommandStatus = CommandStatus.InCommand;
   @property({type: String}) size: AzimuthThrusterLabeledSize =
     AzimuthThrusterLabeledSize.medium;
   @property({type: Number}) angle = 0;
-  @property({type: Number, attribute: 'angle-setpoint'}) angleSetpoint:
-    | number
-    | undefined;
-  @property({type: Boolean, attribute: 'at-angle-setpoint'})
+  @property({type: Number}) angleSetpoint: number | undefined;
+  @property({type: Boolean})
   atAngleSetpoint: boolean = false;
+  @property({type: Boolean}) disableAutoAtAngleSetpoint: boolean = false;
+  @property({type: Number}) autoAtAngleSetpointDeadband: number = 2;
+  @property({type: Boolean}) touching: boolean = false;
 
   @property({type: Number}) thrust = 0;
-  @property({type: Number, attribute: 'thrust-setpoint'}) thrustSetpoint:
-    | number
-    | undefined;
-  @property({type: Boolean, attribute: 'at-thrust-setpoint'})
+  @property({type: Number}) thrustSetpoint: number | undefined;
+  @property({type: Boolean})
   atThrustSetpoint: boolean = false;
-  @property({type: Boolean, attribute: 'thrust-setpoint-at-zero'})
+  @property({type: Boolean})
   thrustSetpointAtZero: boolean = false;
+  @property({type: Boolean}) disableAutoAtThrustSetpoint: boolean = false;
+  @property({type: Number}) autoAtThrustSetpointDeadband: number = 1;
+  @property({type: Number}) thrustSetpointAtZeroDeadband: number = 0.1;
+  @property({type: Array, attribute: false}) angleAdvices: AngleAdvice[] = [];
+  @property({type: Array, attribute: false}) thrustAdvices: LinearAdvice[] = [];
+  @property({type: Boolean}) singleDirection: boolean = false;
+  @property({type: String}) topPropeller: PropellerType = PropellerType.none;
+  @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;
 
   override render() {
     const fieldSize =
@@ -73,7 +83,7 @@ export class ObcAzimuthThrusterLabeled extends LitElement {
           tag="Angle"
           unit=""
           degree
-          has-setpoint
+          hasSetpoint
           size=${fieldSize}
         ></obc-instrument-field>
         <obc-instrument-field
@@ -82,20 +92,31 @@ export class ObcAzimuthThrusterLabeled extends LitElement {
           setpoint=${ifDefined(this.thrustSetpoint)}
           tag="Power"
           unit="%"
-          has-setpoint
+          hasSetpoint
           size=${fieldSize}
         ></obc-instrument-field>
         <obc-azimuth-thruster
           class="azimuth-thruster"
-          no-padding
+          nopadding
           .size=${azimuthSize}
           .thrust=${this.thrust}
           .thrustSetpoint=${this.thrustSetpoint}
+          .disableAutoAtThrustSetpoint=${this.disableAutoAtThrustSetpoint}
+          .autoAtThrustSetpointDeadband=${this.autoAtThrustSetpointDeadband}
           .angle=${this.angle}
           .angleSetpoint=${this.angleSetpoint}
+          .disableAutoAtAngleSetpoint=${this.disableAutoAtAngleSetpoint}
+          .autoAtAngleSetpointDeadband=${this.autoAtAngleSetpointDeadband}
           .atThrustSetpoint=${this.atThrustSetpoint}
           .atAngleSetpoint=${this.atAngleSetpoint}
+          .thrustSetpointAtZeroDeadband=${this.thrustSetpointAtZeroDeadband}
           .state=${state}
+          .touching=${this.touching}
+          .angleAdvices=${this.angleAdvices}
+          .thrustAdvices=${this.thrustAdvices}
+          .singleDirection=${this.singleDirection}
+          .topPropeller=${this.topPropeller}
+          .bottomPropeller=${this.bottomPropeller}
         ></obc-azimuth-thruster>
       </div>
     `;

package/src/navigation-instruments/badge-command/badge-command.ts

@@ -33,13 +33,13 @@ export class ObcBadgeCommand extends LitElement {
         />
         <path
           d="M11.9997 14.5C13.3804 14.5 14.4997 13.3807 14.4997 12C14.4997 10.6193 13.3804 9.5 11.9997 9.5C10.619 9.5 9.49967 10.6193 9.49967 12C9.49967 13.3807 10.619 14.5 11.9997 14.5Z"
-          fill="var(--on-selected-active-color)"
+          fill="var(--normal-enabled-background-color)"
         />
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
           d="M8.52165 4.40645C8.31274 4.00338 7.80966 3.85626 7.4165 4.08325C7.02333 4.31024 6.8992 4.81949 7.14381 5.20194L8.51393 7.34412C7.26015 8.27992 6.39526 9.70793 6.20556 11.3419L3.66548 11.2264C3.21196 11.2058 2.83301 11.5679 2.83301 12.0219C2.83301 12.4759 3.21196 12.838 3.66548 12.8174L6.20556 12.7019C6.39526 14.3358 7.26012 15.7638 8.51387 16.6996L7.14381 18.8417C6.8992 19.2241 7.02333 19.7334 7.41649 19.9604C7.80966 20.1874 8.31274 20.0403 8.52165 19.6372L9.69121 17.3806C10.3992 17.686 11.1797 17.8552 11.9997 17.8552C12.8198 17.8552 13.6004 17.686 14.3084 17.3805L15.478 19.6372C15.6869 20.0403 16.19 20.1874 16.5832 19.9604C16.9763 19.7334 17.1005 19.2241 16.8558 18.8417L15.4857 16.6995C16.7393 15.7637 17.6041 14.3357 17.7938 12.7019L20.3339 12.8174C20.7874 12.838 21.1663 12.4759 21.1663 12.0219C21.1663 11.5679 20.7874 11.2058 20.3339 11.2264L17.7938 11.3419C17.6041 9.70802 16.7393 8.28008 15.4856 7.34428L16.8558 5.20194C17.1005 4.81949 16.9763 4.31024 16.5832 4.08325C16.19 3.85626 15.6869 4.00338 15.478 4.40645L14.3083 6.66323C13.6003 6.35779 12.8198 6.18856 11.9997 6.18856C11.1797 6.18856 10.3992 6.35775 9.69127 6.66312L8.52165 4.40645ZM16.1663 12.0218C16.1663 14.323 14.3009 16.1885 11.9997 16.1885C9.69849 16.1885 7.83301 14.323 7.83301 12.0218C7.83301 9.72066 9.69849 7.85518 11.9997 7.85518C14.3009 7.85518 16.1663 9.72066 16.1663 12.0218Z"
-          fill="var(--on-selected-active-color)"
+          fill="var(--normal-enabled-background-color)"
         />
       </svg>`;
     } else if (this.status === CommandStatus.NoCommand) {

package/src/navigation-instruments/instrument-field/instrument-field.ts

@@ -22,14 +22,14 @@ export class ObcInstrumentField extends LitElement {
   @property({type: String}) size: InstrumentFieldSizeType =
     InstrumentFieldSize.regular;
   @property({type: Number}) setpoint = 0;
-  @property({type: Boolean, attribute: 'has-setpoint'}) hasSetpoint = false;
+  @property({type: Boolean}) hasSetpoint = false;
   @property({type: Number}) value = 0;
   @property({type: Boolean}) degree = false;
-  @property({type: Number, attribute: 'max-digits'}) maxDigits = 3;
+  @property({type: Number}) maxDigits = 3;
   @property({type: String}) tag = '';
   @property({type: String}) unit = '';
   @property({type: String}) source = '';
-  @property({type: Boolean, attribute: 'has-source'}) hasSource = false;
+  @property({type: Boolean}) hasSource = false;
 
   override render() {
     return html`

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

@@ -0,0 +1,30 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcRudder} from './rudder';
+import './rudder';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcRudder> = {
+  title: 'Navigation Instruments/Rudder',
+  tags: ['autodocs'],
+  component: 'obc-rudder',
+  args: {
+    width: 512,
+    angle: 30,
+    setpoint: 45,
+    maxAngle: 90,
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    angle: {control: {type: 'range', min: -90, max: 90, step: 1}},
+    maxAngle: {control: {type: 'range', min: 1, max: 90, step: 1}},
+    setpoint: {control: {type: 'range', min: -90, max: 90, step: 1}},
+  },
+  decorators: [widthDecorator, beta6Decorator],
+} satisfies Meta<ObcRudder>;
+
+export default meta;
+type Story = StoryObj<ObcRudder>;
+
+export const Primary: Story = {
+  args: {},
+};

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

@@ -0,0 +1,149 @@
+import {LitElement, css, html, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import '../watch/watch';
+import {roundedArch} from '../../svghelpers/roundedArch';
+import {Tickmark, TickmarkType} from '../watch/tickmark';
+
+@customElement('obc-rudder')
+export class ObcRudder extends LitElement {
+  @property({type: Number}) angle = 0;
+  @property({type: Number}) setpoint: number | undefined;
+  @property({type: Boolean}) atSetpoint: boolean = false;
+  @property({type: Boolean}) touching: boolean = false;
+  @property({type: Boolean}) disableAutoAtSetpoint: boolean = false;
+  @property({type: Number}) autoAtSetpointDeadband: number = 2;
+  @property({type: Number}) maxAngle = 90;
+
+  atSetpointCalc(): boolean {
+    if (this.setpoint === undefined) {
+      return false;
+    }
+
+    if (this.touching) {
+      return false;
+    }
+
+    if (!this.disableAutoAtSetpoint) {
+      return Math.abs(this.angle - this.setpoint) < this.autoAtSetpointDeadband;
+    }
+    return this.atSetpoint;
+  }
+
+  override render() {
+    const barStartAngle = this.angle > 0 ? 180 - this.angle : 180;
+    const barEndAngle = this.angle > 0 ? 180 : 180 - this.angle;
+    const bar = svg`
+        <mask id="clipBar">
+              <path d=${roundedArch({
+                r: 160 - 48,
+                R: 160,
+                startAngle: 180 - this.maxAngle,
+                endAngle: 180 + this.maxAngle,
+                roundInsideCut: true,
+                roundOutsideCut: false,
+              })}
+              fill="white"
+              stroke="white"
+              />
+            </mask>
+      <path d=${roundedArch({
+        r: 160 - 48,
+        R: 160,
+        startAngle: barStartAngle,
+        endAngle: barEndAngle,
+        roundInsideCut: false,
+        roundOutsideCut: false,
+      })} 
+    fill="var(--instrument-enhanced-secondary-color)"
+    stroke="var(--instrument-enhanced-secondary-color)"
+    mask="url(#clipBar)"
+    />`;
+    const setpointAngle =
+      this.setpoint !== undefined ? 180 - this.setpoint : undefined;
+
+    const tickmarks: Tickmark[] = [
+      {angle: 180, type: TickmarkType.primary, text: '0'},
+      {
+        angle: 180 - this.maxAngle,
+        type: TickmarkType.secondary,
+        text: this.maxAngle.toFixed(0),
+      },
+      {
+        angle: 180 + this.maxAngle,
+        type: TickmarkType.secondary,
+        text: (-this.maxAngle).toFixed(0),
+      },
+    ];
+
+    let helpAngle: null | number = null;
+    if (this.maxAngle > 70) {
+      helpAngle = 45;
+    } else if (this.maxAngle > 50) {
+      helpAngle = 30;
+    } else if (this.maxAngle > 40) {
+      helpAngle = 22.5;
+    }
+
+    if (helpAngle !== null) {
+      tickmarks.push({angle: 180 - helpAngle, type: TickmarkType.primary});
+      tickmarks.push({angle: 180 + helpAngle, type: TickmarkType.primary});
+    }
+
+    return html`
+      <div class="container">
+        <obc-watch
+          .cutAngleStart=${180 - this.maxAngle}
+          .cutAngleEnd=${180 + this.maxAngle}
+          .angleSetpoint=${setpointAngle}
+          .atAngleSetpoint=${this.atSetpointCalc()}
+          .padding=${48}
+          .tickmarks=${tickmarks}
+          roundOutsideCut
+        ></obc-watch>
+        <svg class="rudder" viewBox="-224 -224 448 448">
+          <path
+            d=${roundedArch({
+              r: 160 - 48,
+              R: 160,
+              startAngle: 180 - this.maxAngle,
+              endAngle: 180 + this.maxAngle,
+              roundInsideCut: true,
+              roundOutsideCut: false,
+            })}
+            fill="var(--instrument-frame-secondary-color)"
+            stroke="var(--instrument-frame-tertiary-color)"
+            vector-effect="non-scaling-stroke"
+            stroke-width="1"
+          ></path>
+          ${bar}
+        </svg>
+      </div>
+    `;
+  }
+
+  static override styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-rudder': ObcRudder;
+  }
+}

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;
+  }
+}