Make LEDs square

Author: abigailalexander

src/ui/widgets/ByteMonitor/byteMonitor.test.tsx

@@ -54,7 +54,7 @@ describe("<ByteMonitorComponent />", (): void => {
       startBit: 8,
       numBits: 16,
       horizontal: false,
-      squareLed: true,
+      square: true,
       bitReverse: true,
       effect3d: false,
       onColor: Color.fromRgba(200, 200, 200),

src/ui/widgets/ByteMonitor/byteMonitor.tsx

@@ -22,7 +22,7 @@ export const ByteMonitorProps = {
   startBit: IntPropOpt,
   horizontal: BoolPropOpt,
   bitReverse: BoolPropOpt,
-  squareLed: BoolPropOpt,
+  square: BoolPropOpt,
   ledBorder: IntPropOpt,
   ledBorderColor: ColorPropOpt,
   effect3d: BoolPropOpt
@@ -49,8 +49,8 @@ export const ByteMonitorComponent = (
     onColor = Color.fromRgba(0, 255, 0),
     offColor = Color.fromRgba(0, 100, 0),
     ledBorder = 2,
-    ledBorderColor = Color.fromRgba(150, 150, 150), // dark grey
-    squareLed = false,
+    ledBorderColor = Color.fromRgba(50, 50, 50, 178), // dark grey
+    square = false,
     effect3d = false,
     width = WIDGET_DEFAULT_SIZES["byte_monitor"][0],
     height = WIDGET_DEFAULT_SIZES["byte_monitor"][1]
@@ -73,7 +73,7 @@ export const ByteMonitorComponent = (
     height,
     border,
     horizontal,
-    squareLed
+    square
   );
   const ledArray: Array<JSX.Element> = [];
   dataValues.forEach((data: number, idx: number) => {
@@ -94,7 +94,7 @@ export const ByteMonitorComponent = (
     style["borderColor"] = ledBorderColor.toString();
     style["borderWidth"] = `${borderWidth}px`;
     // Set shape as square or circular
-    if (squareLed) {
+    if (square) {
       style.width = `${bitWidth + borderWidth}px`;
       style.height = `${bitHeight + borderWidth}px`;
     } else {
@@ -113,7 +113,7 @@ export const ByteMonitorComponent = (
       style["backgroundImage"] = `radial-gradient(circle at top left, white, ${
         data ? onColor?.toString() : offColor?.toString()
       })`;
-      if (!squareLed) {
+      if (!square) {
         style["borderColor"] = "transparent";
         style["backgroundImage"] +=
           ", radial-gradient(circle at top left, black,white)";

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -421,7 +421,7 @@ const BOB_SIMPLE_PARSERS: ParserDict = {
   imageFile: ["file", opiParseString],
   points: ["points", bobParsePoints],
   resize: ["resize", bobParseResizing],
-  squareLed: ["square", opiParseBoolean],
+  square: ["square", opiParseBoolean],
   formatType: ["format", bobParseFormatType],
   stretchToFit: ["stretch_image", opiParseBoolean],
   macros: ["macros", opiParseMacros],

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -706,6 +706,7 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
   ledBorder: ["led_border", opiParseNumber],
   ledBorderColor: ["led_border_color", opiParseColor],
   bitReverse: ["bitReverse", opiParseBoolean],
+  square: ["square", opiParseBoolean],
   squareLed: ["square_led", opiParseBoolean],
   squareButton: ["square_button", opiParseBoolean],
   effect3d: ["effect_3d", opiParseBoolean],

src/ui/widgets/LED/led.module.css

@@ -1,7 +1,6 @@
 .Led {
   width: 11px;
   height: 11px;
-  border-radius: 50%;
   background-color: #00ee00;
 }
 

src/ui/widgets/LED/led.test.tsx

@@ -86,19 +86,24 @@ describe("width property is used", (): void => {
     // Width in CS-Studio doesn't quite match width in the browser,
     // so whatever is input has 5 subtracted from it, this makes it
     // look more like CS-Studio
-    expect(renderedLed.props.style.width).toBe("5px");
-    expect(renderedLed.props.style.height).toBe("15px");
+    expect(renderedLed.props.style.width).toBe("10px");
+    expect(renderedLed.props.style.height).toBe("20px");
   });
 });
 
 describe("height property is used", (): void => {
   it("height changes the size of the LED", (): void => {
-    const renderedLed = renderLed({ ...DEFAULT_PROPS, height: 10 });
+    const renderedLed = renderLed({
+      ...DEFAULT_PROPS,
+      height: 10,
+      square: true
+    });
 
     // Width in CS-Studio doesn't quite match width in the browser,
     // so whatever is input has 5 subtracted from it, this makes it
     // look more like CS-Studio
-    expect(renderedLed.props.style.width).toBe("15px");
-    expect(renderedLed.props.style.height).toBe("5px");
+    expect(renderedLed.props.style.width).toBe("20px");
+    expect(renderedLed.props.style.height).toBe("10px");
+    expect(renderedLed.props.style.borderRadius).toBe("0%");
   });
 });

src/ui/widgets/LED/led.tsx

@@ -25,7 +25,8 @@ export const LedProps = {
   offColor: ColorPropOpt,
   lineColor: ColorPropOpt,
   alarmSensitive: BoolPropOpt,
-  bit: IntPropOpt
+  bit: IntPropOpt,
+  square: BoolPropOpt
 };
 
 export type LedComponentProps = InferWidgetProps<typeof LedProps> & PVComponent;
@@ -45,7 +46,8 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
     width = WIDGET_DEFAULT_SIZES["led"][0],
     height = WIDGET_DEFAULT_SIZES["led"][1],
     alarmSensitive = false,
-    bit = -1
+    bit = -1,
+    square = false
   } = props;
 
   const { value } = getPvValueAndName(pvData);
@@ -65,11 +67,12 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
   }
   style["backgroundColor"] = ledOn ? onColor?.toString() : offColor?.toString();
   style["border"] = `2px solid ${lineColor.toString()}`;
+  style["borderRadius"] = square ? "0%" : "50%";
 
   // make sizes similar to size in CS-Studio, five taken
   // away from default in css file too
-  style.width = `${width - 5}px`;
-  style.height = `${height - 5}px`;
+  style.width = `${width}px`;
+  style.height = `${height}px`;
 
   let className = classes.Led;
   if (alarmSensitive) {