From aa2f536a4dc8a3a16783225407b2be6e87745f24 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Mon, 7 Apr 2025 16:52:17 +0100 Subject: [PATCH 01/11] Replaced divs with LinearProgress --- src/ui/widgets/ProgressBar/progressBar.tsx | 89 +++++++++++++--------- 1 file changed, 51 insertions(+), 38 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index 699de427..8e04159e 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -13,6 +13,7 @@ import { ColorPropOpt, BorderPropOpt } from "../propTypes"; +import { LinearProgress } from "@mui/material"; export const ProgressBarProps = { min: FloatPropOpt, @@ -22,6 +23,7 @@ export const ProgressBarProps = { horizontal: BoolPropOpt, showLabel: BoolPropOpt, fillColor: ColorPropOpt, + backgroundColor: ColorPropOpt, precision: IntPropOpt, font: FontPropOpt, border: BorderPropOpt @@ -37,50 +39,46 @@ export const ProgressBarComponent = ( showLabel = false, font, horizontal = true, - fillColor = "#00aa00", + fillColor = "#3CFF3C", + backgroundColor = "#FAFAFA", precision = undefined, logScale = false } = props; - let { min = 1e-10, max = 100 } = props; + let { min = 0, max = 100 } = props; if (limitsFromPv && value?.display.controlRange) { min = value.display.controlRange?.min; max = value.display.controlRange?.max; } const numValue = value?.getDoubleValue() || 0; - let fraction = 0; - if (logScale) { - fraction = - (Math.log10(numValue) - Math.log10(min)) / - (Math.log10(max) - Math.log10(min)); - } else { - fraction = (numValue - min) / (max - min); - } + const progress = logScale + ? (Math.log10(numValue) - Math.log10(min)) / + (Math.log10(max) - Math.log10(min)) + : (numValue - min) / (max - min); - const onPercent = numValue < min ? 0 : numValue > max ? 100 : fraction * 100; // Store styles in these variables // Change the direction of the gradient depending on wehether the bar is vertical - const direction = horizontal ? "to top" : "to left"; - let fillStyle: CSSProperties = { - left: style.borderWidth, - bottom: style.borderWidth, - backgroundImage: `linear-gradient(${direction}, ${fillColor.toString()} 50%, #ffffff 130%)` - }; - if (horizontal) { - fillStyle = { - ...fillStyle, - height: "100%", - top: style.borderWidth, - width: `${onPercent}%` - }; - } else { - fillStyle = { - ...fillStyle, - width: "100%", - left: style.borderWidth, - height: `${onPercent}%` - }; - } + // const direction = horizontal ? "to top" : "to left"; + // let fillStyle: CSSProperties = { + // left: style.borderWidth, + // bottom: style.borderWidth, + // backgroundImage: `linear-gradient(${direction}, ${fillColor.toString()} 50%, #ffffff 130%)` + // }; + // if (horizontal) { + // fillStyle = { + // ...fillStyle, + // height: "100%", + // top: style.borderWidth, + // width: `${onPercent}%` + // }; + // } else { + // fillStyle = { + // ...fillStyle, + // width: "100%", + // left: style.borderWidth, + // height: `${onPercent}%` + // }; + // } // Show a warning if min is bigger than max and apply precision if provided let label = ""; @@ -97,12 +95,27 @@ export const ProgressBarComponent = ( } return ( -
-
-
- {label} -
-
+ + //
+ //
+ //
+ // {label} + //
+ //
); }; From e95b6a5b8d43a2a669a65735a3178a775357e77e Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Tue, 8 Apr 2025 08:55:46 +0100 Subject: [PATCH 02/11] Added width and height to parser --- src/ui/widgets/EmbeddedDisplay/bobParser.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index 4526beb0..ffa32ed2 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -380,7 +380,9 @@ export function parseBob( rotation: ["rotation", bobParseNumber], styleOpt: ["style", bobParseNumber], lineColor: ["line_color", opiParseColor], - rotationStep: ["rotation_step", bobParseNumber] + rotationStep: ["rotation_step", bobParseNumber], + width: ["width", bobParseNumber], + height: ["height", bobParseNumber] }; const complexParsers = { From 96b4489311cb91436b873b8132ce0e1bdd054f95 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Tue, 8 Apr 2025 09:45:53 +0100 Subject: [PATCH 03/11] Implemented vertical orientation --- src/ui/widgets/ProgressBar/progressBar.tsx | 24 ++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index 8e04159e..feafb921 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -6,6 +6,7 @@ import { PVComponent, PVWidgetPropType } from "../widgetProps"; import { registerWidget } from "../register"; import { FloatPropOpt, + FloatProp, BoolPropOpt, IntPropOpt, InferWidgetProps, @@ -14,6 +15,7 @@ import { BorderPropOpt } from "../propTypes"; import { LinearProgress } from "@mui/material"; +import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; export const ProgressBarProps = { min: FloatPropOpt, @@ -26,7 +28,9 @@ export const ProgressBarProps = { backgroundColor: ColorPropOpt, precision: IntPropOpt, font: FontPropOpt, - border: BorderPropOpt + border: BorderPropOpt, + height: FloatPropOpt, + width: FloatPropOpt }; export const ProgressBarComponent = ( @@ -35,6 +39,8 @@ export const ProgressBarComponent = ( const style = commonCss(props); const { value, + width = WIDGET_DEFAULT_SIZES["progressbar"][0], + height = WIDGET_DEFAULT_SIZES["progressbar"][1], limitsFromPv = false, showLabel = false, font, @@ -44,18 +50,23 @@ export const ProgressBarComponent = ( precision = undefined, logScale = false } = props; + let { min = 0, max = 100 } = props; if (limitsFromPv && value?.display.controlRange) { min = value.display.controlRange?.min; max = value.display.controlRange?.max; } - const numValue = value?.getDoubleValue() || 0; - const progress = logScale + const numValue = value?.getDoubleValue() ?? 0; + const percent = logScale ? (Math.log10(numValue) - Math.log10(min)) / (Math.log10(max) - Math.log10(min)) : (numValue - min) / (max - min); + const transform = horizontal + ? null + : `translateY(${100 - percent}%)!important`.toString(); + // Store styles in these variables // Change the direction of the gradient depending on wehether the bar is vertical // const direction = horizontal ? "to top" : "to left"; @@ -97,15 +108,16 @@ export const ProgressBarComponent = ( return ( Date: Tue, 8 Apr 2025 10:53:49 +0100 Subject: [PATCH 04/11] Implements default width and height if not provided --- src/ui/widgets/ProgressBar/progressBar.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index feafb921..57ac3f13 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -39,8 +39,6 @@ export const ProgressBarComponent = ( const style = commonCss(props); const { value, - width = WIDGET_DEFAULT_SIZES["progressbar"][0], - height = WIDGET_DEFAULT_SIZES["progressbar"][1], limitsFromPv = false, showLabel = false, font, @@ -51,6 +49,22 @@ export const ProgressBarComponent = ( logScale = false } = props; + const width = !props.width + ? horizontal + ? WIDGET_DEFAULT_SIZES["progressbar"][0] + : WIDGET_DEFAULT_SIZES["progressbar"][1] + : horizontal + ? props.width + : props.height; + + const height = !props.height + ? horizontal + ? WIDGET_DEFAULT_SIZES["progressbar"][1] + : WIDGET_DEFAULT_SIZES["progressbar"][0] + : horizontal + ? props.height + : props.width; + let { min = 0, max = 100 } = props; if (limitsFromPv && value?.display.controlRange) { From 47473ed44a0900d4d76e4ffc244cb81ecf6e9377 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Tue, 8 Apr 2025 11:11:16 +0100 Subject: [PATCH 05/11] Fixed width and height checking --- src/ui/widgets/ProgressBar/progressBar.tsx | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index 57ac3f13..5144d4be 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -49,21 +49,13 @@ export const ProgressBarComponent = ( logScale = false } = props; - const width = !props.width - ? horizontal - ? WIDGET_DEFAULT_SIZES["progressbar"][0] - : WIDGET_DEFAULT_SIZES["progressbar"][1] - : horizontal - ? props.width - : props.height; + const width = props.width + ? props.width + : WIDGET_DEFAULT_SIZES["progressbar"][0]; - const height = !props.height - ? horizontal - ? WIDGET_DEFAULT_SIZES["progressbar"][1] - : WIDGET_DEFAULT_SIZES["progressbar"][0] - : horizontal - ? props.height - : props.width; + const height = props.height + ? props.height + : WIDGET_DEFAULT_SIZES["progressbar"][1]; let { min = 0, max = 100 } = props; From 807a16c5303f018fb5673fd4f92c555e4e7ff7ce Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Wed, 9 Apr 2025 11:40:33 +0100 Subject: [PATCH 06/11] Fixed label and removed redundant css file --- .../ProgressBar/progressBar.module.css | 25 ------ src/ui/widgets/ProgressBar/progressBar.tsx | 86 ++++++++----------- 2 files changed, 34 insertions(+), 77 deletions(-) delete mode 100644 src/ui/widgets/ProgressBar/progressBar.module.css diff --git a/src/ui/widgets/ProgressBar/progressBar.module.css b/src/ui/widgets/ProgressBar/progressBar.module.css deleted file mode 100644 index e8331cb7..00000000 --- a/src/ui/widgets/ProgressBar/progressBar.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.bar { - text-align: center; - font-weight: bold; - font-size: 1.25em; - height: 100%; - width: 100%; -} - -.fill { - position: absolute; - max-width: 100%; - min-width: 0%; - max-height: 100%; - bottom: 0px; - left: 0px; - display: inline-block; -} - -.label { - position: relative; - max-width: 100%; - max-height: 100%; - height: 80%; - width: 100%; -} diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index 5144d4be..dd0f09e3 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -1,12 +1,9 @@ -import React, { CSSProperties } from "react"; - -import classes from "./progressBar.module.css"; -import { commonCss, Widget } from "../widget"; +import React from "react"; +import { Widget } from "../widget"; import { PVComponent, PVWidgetPropType } from "../widgetProps"; import { registerWidget } from "../register"; import { FloatPropOpt, - FloatProp, BoolPropOpt, IntPropOpt, InferWidgetProps, @@ -36,7 +33,6 @@ export const ProgressBarProps = { export const ProgressBarComponent = ( props: InferWidgetProps & PVComponent ): JSX.Element => { - const style = commonCss(props); const { value, limitsFromPv = false, @@ -73,30 +69,6 @@ export const ProgressBarComponent = ( ? null : `translateY(${100 - percent}%)!important`.toString(); - // Store styles in these variables - // Change the direction of the gradient depending on wehether the bar is vertical - // const direction = horizontal ? "to top" : "to left"; - // let fillStyle: CSSProperties = { - // left: style.borderWidth, - // bottom: style.borderWidth, - // backgroundImage: `linear-gradient(${direction}, ${fillColor.toString()} 50%, #ffffff 130%)` - // }; - // if (horizontal) { - // fillStyle = { - // ...fillStyle, - // height: "100%", - // top: style.borderWidth, - // width: `${onPercent}%` - // }; - // } else { - // fillStyle = { - // ...fillStyle, - // width: "100%", - // left: style.borderWidth, - // height: `${onPercent}%` - // }; - // } - // Show a warning if min is bigger than max and apply precision if provided let label = ""; if (showLabel) { @@ -112,28 +84,38 @@ export const ProgressBarComponent = ( } return ( - - //
- //
- //
- // {label} - //
- //
+ <> + +
+ {label} +
+ ); }; From 0cd952e1c2b0708a87e2d6ff544ba0e62bb984c4 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Wed, 9 Apr 2025 11:59:56 +0100 Subject: [PATCH 07/11] Moved default width and height declarations to function head --- src/ui/widgets/ProgressBar/progressBar.tsx | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index dd0f09e3..299e43c4 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -42,19 +42,12 @@ export const ProgressBarComponent = ( fillColor = "#3CFF3C", backgroundColor = "#FAFAFA", precision = undefined, - logScale = false + logScale = false, + width = WIDGET_DEFAULT_SIZES["progressbar"][0], + height = WIDGET_DEFAULT_SIZES["progressbar"][1] } = props; - const width = props.width - ? props.width - : WIDGET_DEFAULT_SIZES["progressbar"][0]; - - const height = props.height - ? props.height - : WIDGET_DEFAULT_SIZES["progressbar"][1]; - let { min = 0, max = 100 } = props; - if (limitsFromPv && value?.display.controlRange) { min = value.display.controlRange?.min; max = value.display.controlRange?.max; @@ -65,10 +58,6 @@ export const ProgressBarComponent = ( (Math.log10(max) - Math.log10(min)) : (numValue - min) / (max - min); - const transform = horizontal - ? null - : `translateY(${100 - percent}%)!important`.toString(); - // Show a warning if min is bigger than max and apply precision if provided let label = ""; if (showLabel) { @@ -97,7 +86,9 @@ export const ProgressBarComponent = ( borderRadius: "4px", backgroundColor: backgroundColor.toString(), "& .MuiLinearProgress-bar": { - transform: transform, + transform: horizontal + ? null + : `translateY(${100 - percent}%)!important`.toString(), backgroundColor: fillColor.toString() } }} From bdca9dded8aa101a331bd9a20d3fb773e754583a Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 10 Apr 2025 16:18:55 +0100 Subject: [PATCH 08/11] Removed redundant height and width from bob parser --- src/ui/widgets/EmbeddedDisplay/bobParser.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index ffa32ed2..4526beb0 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -380,9 +380,7 @@ export function parseBob( rotation: ["rotation", bobParseNumber], styleOpt: ["style", bobParseNumber], lineColor: ["line_color", opiParseColor], - rotationStep: ["rotation_step", bobParseNumber], - width: ["width", bobParseNumber], - height: ["height", bobParseNumber] + rotationStep: ["rotation_step", bobParseNumber] }; const complexParsers = { From 4d2d63c87f588e2156f8673820dc641b0ae1b3d2 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 10 Apr 2025 16:20:16 +0100 Subject: [PATCH 09/11] Corrected percentage calculation --- src/ui/widgets/ProgressBar/progressBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index 299e43c4..dfb39238 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -54,9 +54,9 @@ export const ProgressBarComponent = ( } const numValue = value?.getDoubleValue() ?? 0; const percent = logScale - ? (Math.log10(numValue) - Math.log10(min)) / + ? ((Math.log10(numValue) - Math.log10(min)) * 100) / (Math.log10(max) - Math.log10(min)) - : (numValue - min) / (max - min); + : ((numValue - min) * 100) / (max - min); // Show a warning if min is bigger than max and apply precision if provided let label = ""; From 83dccacf893419ed4c8823747613c90242e9bce3 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 10 Apr 2025 16:30:59 +0100 Subject: [PATCH 10/11] Added transparency option --- src/ui/widgets/ProgressBar/progressBar.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index dfb39238..b37c2037 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -27,7 +27,8 @@ export const ProgressBarProps = { font: FontPropOpt, border: BorderPropOpt, height: FloatPropOpt, - width: FloatPropOpt + width: FloatPropOpt, + transparent: BoolPropOpt }; export const ProgressBarComponent = ( @@ -40,13 +41,17 @@ export const ProgressBarComponent = ( font, horizontal = true, fillColor = "#3CFF3C", - backgroundColor = "#FAFAFA", precision = undefined, logScale = false, width = WIDGET_DEFAULT_SIZES["progressbar"][0], - height = WIDGET_DEFAULT_SIZES["progressbar"][1] + height = WIDGET_DEFAULT_SIZES["progressbar"][1], + transparent = true } = props; + const backgroundColor = transparent + ? "transparent" + : (props.backgroundColor?.toString() ?? "#FAFAFA"); + let { min = 0, max = 100 } = props; if (limitsFromPv && value?.display.controlRange) { min = value.display.controlRange?.min; @@ -82,9 +87,9 @@ export const ProgressBarComponent = ( height: height, width: width, border: 1, - borderColor: "#000000", + borderColor: "#D2D2D2", borderRadius: "4px", - backgroundColor: backgroundColor.toString(), + backgroundColor: backgroundColor, "& .MuiLinearProgress-bar": { transform: horizontal ? null From 49867791fad390448c6080d3bf60e4fd534325f5 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 11 Apr 2025 14:34:20 +0100 Subject: [PATCH 11/11] Added check for out of range values --- src/ui/widgets/ProgressBar/progressBar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/widgets/ProgressBar/progressBar.tsx b/src/ui/widgets/ProgressBar/progressBar.tsx index b37c2037..4901eb75 100644 --- a/src/ui/widgets/ProgressBar/progressBar.tsx +++ b/src/ui/widgets/ProgressBar/progressBar.tsx @@ -58,11 +58,13 @@ export const ProgressBarComponent = ( max = value.display.controlRange?.max; } const numValue = value?.getDoubleValue() ?? 0; - const percent = logScale + const percentCalc = logScale ? ((Math.log10(numValue) - Math.log10(min)) * 100) / (Math.log10(max) - Math.log10(min)) : ((numValue - min) * 100) / (max - min); + const percent = numValue < min ? 0 : numValue > max ? 100 : percentCalc; + // Show a warning if min is bigger than max and apply precision if provided let label = ""; if (showLabel) {