Reduce the padding around the tank, fix tank colors, different bob/opi mapping for emptyColor.

Author: GregJHarris

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -82,7 +82,7 @@ export const WIDGET_DEFAULT_SIZES: { [key: string]: [number, number] } = {
   polyline: [100, 20],
   progressbar: [100, 20],
   rectangle: [100, 20],
-  tank: [200, 150],
+  tank: [150, 200],
   scaledslider: [400, 55],
   symbol: [100, 100]
 };
@@ -398,7 +398,8 @@ export function parseBob(
     lineStyle: ["line_style", bobParseNumber],
     majorTickStepHint: ["major_tick_step_hint", bobParseNumber],
     maximum: ["maximum", bobParseNumber],
-    minimum: ["minimum", bobParseNumber]
+    minimum: ["minimum", bobParseNumber],
+    emptyColor: ["empty_color", opiParseColor]
   };
 
   const complexParsers = {

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -637,7 +637,7 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
   textAlignV: ["vertical_alignment", opiParseVerticalAlignment],
   backgroundColor: ["background_color", opiParseColor],
   foregroundColor: ["foreground_color", opiParseColor],
-  emptyColor: ["empty_color", opiParseColor],
+  emptyColor: ["color_fillbackground", opiParseColor],
   onColor: ["on_color", opiParseColor],
   offColor: ["off_color", opiParseColor],
   fillColor: ["fill_color", opiParseColor],

src/ui/widgets/Tank/tank.tsx

@@ -44,8 +44,8 @@ export const TankComponent = (
     showLabel = false,
     font,
     horizontal = false,
-    fillColor = Color.fromRgba(0, 0, 255, 255),
-    emptyColor = Color.fromRgba(250, 250, 250, 255),
+    fillColor = Color.fromRgba(0, 0, 255, 1),
+    emptyColor = Color.fromRgba(192, 192, 192, 1),
     precision = undefined,
     scaleVisible = true,
     logScale = false,
@@ -55,7 +55,7 @@ export const TankComponent = (
 
   const backgroundColor = transparent
     ? "transparent"
-    : (props.backgroundColor?.toString() ?? "rgba(250, 250, 250, 255)");
+    : (props.backgroundColor?.toString() ?? "rgba(250, 250, 250, 1)");
 
   let { minimum = 0, maximum = 100 } = props;
   if (limitsFromPv && value?.display.controlRange) {
@@ -85,15 +85,13 @@ export const TankComponent = (
     scalePosition = horizontal ? "top" : "left";
   }
 
-  const scaleAxisProps = [
-    {
-      min: minimum,
-      max: maximum,
-      data: scaleVisible ? undefined : [""],
-      position: scalePosition,
-      scaleType: logScale ? "symlog" : "linear"
-    }
-  ];
+  const scaleAxisProps = {
+    min: minimum,
+    max: maximum,
+    data: scaleVisible ? undefined : [""],
+    position: scalePosition,
+    scaleType: logScale ? "symlog" : "linear"
+  };
 
   const disabledAxisProps = [
     {
@@ -111,16 +109,22 @@ export const TankComponent = (
         skipAnimation
         borderRadius={4}
         hideLegend
+        margin={{
+          left: horizontal ? 10 : 2,
+          right: horizontal ? 10 : 2,
+          top: horizontal ? 2 : 10,
+          bottom: horizontal ? 2 : 10
+        }}
         layout={horizontal ? "horizontal" : "vertical"}
         xAxis={
           horizontal
-            ? (scaleAxisProps as ReadonlyArray<XAxis<any>>)
+            ? ([{ ...scaleAxisProps, height: 25 }] as ReadonlyArray<XAxis<any>>)
             : (disabledAxisProps as ReadonlyArray<XAxis<any>>)
         }
         yAxis={
           horizontal
             ? (disabledAxisProps as ReadonlyArray<YAxis<any>>)
-            : (scaleAxisProps as ReadonlyArray<YAxis<any>>)
+            : ([{ ...scaleAxisProps, width: 25 }] as ReadonlyArray<YAxis<any>>)
         }
         series={[
           {