Skip to content

Conversation

@GregJHarris
Copy link
Collaborator

Add a meter widget, this uses react-gauge-component.

  • We use a semi-circular gauge for all width / height ratios.

Some examples:
image

and corresponding Phoebus screens:
image

@GregJHarris GregJHarris linked an issue Sep 25, 2025 that may be closed by this pull request
Copy link
Collaborator

@abigailalexander abigailalexander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great overall, the scales seem good. I agree with not stretching the meter to odd proportions and maintaining the width/height ratio. One small fix - it seems like scaledWidth isn't being properly applied sometimes and the widget isn't taking up the full space available (nor being centered in the available space). I've attached a picture to show the difference between Phoebus and cs-web-lib for a widget with dimensions w: 440, h:370
Screenshot from 2025-09-26 10-23-52
Screenshot from 2025-09-26 10-28-43
As a result of the widget being smaller than expected, the scale is quite bunched up.

@GregJHarris
Copy link
Collaborator Author

Thanks @abigailalexander. I've fixed the sizing and improved the formatting of the tick labels, so that if the number strings are 4 characters or more long, every other tick has a label.

Copy link
Collaborator

@abigailalexander abigailalexander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great now, thanks for making that change!

@GregJHarris GregJHarris merged commit 902f99d into master Oct 1, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add meter widget

3 participants