diff --git a/src/ui/widgets/Ellipse/ellipse.tsx b/src/ui/widgets/Ellipse/ellipse.tsx index 54fbd6cb..2a098065 100644 --- a/src/ui/widgets/Ellipse/ellipse.tsx +++ b/src/ui/widgets/Ellipse/ellipse.tsx @@ -30,6 +30,7 @@ export const EllipseProps = { fgGradientColor: ColorPropOpt, lineWidth: IntPropOpt, lineColor: ColorPropOpt, + lineStyle: IntPropOpt, transparent: BoolPropOpt, backgroundColor: ColorPropOpt, border: BorderPropOpt, @@ -44,11 +45,24 @@ export const EllipseComponent = ( let style: CSSProperties = { width: "100%", height: "100%", - borderStyle: "solid", borderWidth: 3, borderColor: props.lineColor?.toString() || Color.fromRgba(0, 0, 255).toString() }; + + style.borderStyle = (function () { + switch (props.lineStyle) { + case 1: // Dashed + case 3: // Dash-Dot + return "dashed"; + case 2: // Dot + case 4: // Dash-Dot-Dot + return "dotted"; + default: + return "solid"; + } + })(); + // This has to be done separately because otherwise if width = 0, default // border width of 3 is set if (props.lineWidth !== undefined) style.borderWidth = props.lineWidth; diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index ba5b4b30..d6fc2e22 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -391,7 +391,8 @@ export function parseBob( showLolo: ["show_lolo", opiParseBoolean], showLow: ["show_low", opiParseBoolean], increment: ["increment", bobParseNumber], - multiLine: ["multi_line", opiParseBoolean] + multiLine: ["multi_line", opiParseBoolean], + lineStyle: ["line_style", bobParseNumber] }; const complexParsers = {