Update widget props

src/ui/widgets/DynamicPage/dynamicPage.tsx

@@ -16,7 +16,8 @@ import {
   StringProp,
   InferWidgetProps,
   BorderPropOpt,
-  StringPropOpt
+  StringPropOpt,
+  BoolPropOpt
 } from "../propTypes";
 import { EmbeddedDisplay } from "../EmbeddedDisplay/embeddedDisplay";
 import { Color } from "../../../types/color";
@@ -26,7 +27,8 @@ import { ExitFileContext, FileContext } from "../../../misc/fileContext";
 const DynamicPageProps = {
   location: StringProp,
   border: BorderPropOpt,
-  showCloseButton: StringPropOpt
+  showCloseButton: StringPropOpt,
+  scroll: BoolPropOpt
 };
 
 // Generic display widget to put other things inside
@@ -70,6 +72,7 @@ export const DynamicPageComponent = (
             file={file}
             position={new RelativePosition()}
             scalingOrigin={"0 0"}
+            scroll={props.scroll ?? false}
           />
           <div
             style={{
@@ -115,6 +118,7 @@ export const DynamicPageComponent = (
             file={file}
             position={new RelativePosition()}
             scalingOrigin={"0 0"}
+            scroll={props.scroll ?? false}
           />
         </div>
       </ExitFileContext.Provider>

src/ui/widgets/Ellipse/ellipse.test.tsx

@@ -23,7 +23,7 @@ describe("<EllipseComponent />", (): void => {
     const fillOptions = { ...DEFAULT_FILL_OPTIONS, gradient: true };
     style = setFillOptions(style, fillOptions);
     expect(style.background).toEqual(
-      "-webkit-linear-gradient(bottom, rgba(0,0,0,255) 0%, rgba(0,0,255,255))"
+      "-webkit-linear-gradient(left, rgba(0,0,0,255) 0%, rgba(0,255,255,255))"
     );
   });
   test("set gradient color fill horizontal", (): void => {
@@ -36,7 +36,7 @@ describe("<EllipseComponent />", (): void => {
     };
     style = setFillOptions(style, fillOptions);
     expect(style.background).toEqual(
-      "-webkit-linear-gradient(left, rgba(0,0,0,255) 50%%, rgba(0,0,255,255))"
+      "-webkit-linear-gradient(bottom, rgba(0,255,255,255) 50%%, rgba(0,0,0,255))"
     );
   });
   test("set transparent", (): void => {

src/ui/widgets/Ellipse/ellipse.tsx

@@ -69,15 +69,19 @@ export function setFillOptions(
   fillOpts: FillOptions
 ): CSSProperties {
   // Set filling options
-  let fillDirection = "bottom";
-  if (fillOpts.horizontalFill) fillDirection = "left";
   if (fillOpts.transparent) {
     style.background = "transparent";
   } else if (fillOpts.gradient) {
-    // to do - figure out default colours for fill
-    style.background = `-webkit-linear-gradient(${fillDirection}, ${fillOpts.bgGradientColor?.toString()} ${
-      fillOpts.level
-    }%, ${fillOpts.fgGradientColor?.toString()})`;
+    let fillDirection = "left";
+    let firstGradientColor: string | undefined =
+      fillOpts.bgGradientColor?.toString();
+    let secondGradientColor: string | undefined = fillOpts.bgColor.toString();
+    if (fillOpts.horizontalFill) {
+      fillDirection = "bottom";
+      firstGradientColor = fillOpts.bgColor.toString();
+      secondGradientColor = fillOpts.bgGradientColor?.toString();
+    }
+    style.background = `-webkit-linear-gradient(${fillDirection}, ${firstGradientColor} ${fillOpts.level}%, ${secondGradientColor})`;
   } else {
     style.background = fillOpts.bgColor.toString();
   }

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -58,6 +58,7 @@ const OPI_WIDGET_MAPPING: { [key: string]: any } = {
   "org.csstudio.opibuilder.widgets.Label": "label",
   "org.csstudio.opibuilder.widgets.groupingContainer": "groupingcontainer",
   "org.csstudio.opibuilder.widgets.Rectangle": "shape",
+  "org.csstudio.opibuilder.widgets.RoundedRectangle": "shape",
   "org.csstudio.opibuilder.widgets.ActionButton": "actionbutton",
   "org.csstudio.opibuilder.widgets.BoolButton": "boolbutton",
   "org.csstudio.opibuilder.widgets.MenuButton": "menubutton",
@@ -634,8 +635,8 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
   showLegend: ["show_legend", opiParseBoolean],
   showPlotBorder: ["show_plot_area_border", opiParseBoolean],
   showToolbar: ["show_toolbar", opiParseBoolean],
-  bgGradientColor: ["background_color", opiParseColor],
-  fgGradientColor: ["foreground_color", opiParseColor],
+  bgGradientColor: ["bg_gradient_color", opiParseColor],
+  fgGradientColor: ["fg_gradient_color", opiParseColor],
   gradient: ["gradient", opiParseBoolean],
   fillLevel: ["fill_level", opiParseNumber],
   horizontalFill: ["horizontal_fill", opiParseBoolean],
@@ -655,7 +656,9 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
   squareLed: ["square_led", opiParseBoolean],
   squareButton: ["square_button", opiParseBoolean],
   effect3d: ["effect_3d", opiParseBoolean],
-  showLed: ["show_led", opiParseBoolean]
+  showLed: ["show_led", opiParseBoolean],
+  cornerWidth: ["corner_width", opiParseString],
+  cornerHeight: ["corner_height", opiParseString]
 };
 
 /**

src/ui/widgets/Image/image.tsx

@@ -77,7 +77,8 @@ export const ImageComponent = (
           display: "block",
           transform: `rotate(${rotation}deg) scaleX(${
             flipHorizontal ? -1 : 1
-          }) scaleY(${flipVertical ? -1 : 1})`
+          }) scaleY(${flipVertical ? -1 : 1})`,
+          objectFit: props.stretchToFit ? "fill" : "none"
         }}
       />
     </div>

src/ui/widgets/Line/__snapshots__/line.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<LineComponent /> matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    style="background-color: rgb(0, 255, 255); width: 50px; height: 4px; transform: rotate(45deg);"
+    style="background-color: rgb(0, 255, 255); width: 50px; height: 4px; border-radius: 0; transform: rotate(45deg);"
   />
 </DocumentFragment>
 `;

src/ui/widgets/Shape/shape.tsx

@@ -15,8 +15,9 @@ const ShapeProps = {
   pvName: PvPropOpt,
   shapeWidth: StringPropOpt,
   shapeHeight: StringPropOpt,
-  shapeRadius: StringPropOpt,
   shapeTransform: StringPropOpt,
+  cornerWidth: StringPropOpt,
+  cornerHeight: StringPropOpt,
   transparent: BoolPropOpt,
   backgroundColor: ColorPropOpt,
   border: BorderPropOpt
@@ -25,11 +26,16 @@ const ShapeProps = {
 export const ShapeComponent = (
   props: InferWidgetProps<typeof ShapeProps>
 ): JSX.Element => {
+  // Calculate radii of corners
+  let cornerRadius = "0";
+  if (props.cornerHeight && props.cornerWidth) {
+    cornerRadius = `${props.cornerWidth}px / ${props.cornerHeight}px`;
+  }
   const style = {
     ...commonCss(props),
     width: props.shapeWidth ?? "100%",
     height: props.shapeHeight ?? "100%",
-    borderRadius: props.shapeRadius ?? "",
+    borderRadius: cornerRadius,
     transform: props.shapeTransform ?? ""
   };
   return <div style={style} />;

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<Symbol /> matches snapshot 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1);"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none;"
     />
   </div>
   <div