Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code Quality - Added StorageBar and StorageRing Controls #16001

Open
wants to merge 31 commits into
base: main
Choose a base branch
from

Conversation

mdtauk
Copy link
Contributor

@mdtauk mdtauk commented Aug 12, 2024

Resolved / Related Issues
This adds StorageBar and StorageRing controls to the Files.App.Controls project for future use, as well as a test page in the UITests app for testing behaviour.

image

image

image

I am no expert when it comes to coding let alone making Controls, so I would appreciate these be given a thorough review to ensure there are no edge cases I have not anticipated, as well as general changes to improve the code by those with the expertise and experience. I will call out @yaira2 and @0x5bfa who have been seeing my progress via Discord as I was working on them. But also anyone with control and or mathematics experience who can ensure I am using the most optimal calculations for the angles and size calculations. @marcelwgn has contributed to the Community Toolkit so will be able to make some comments on my properties and general code quality.

I also want to indicate I took great inspiration from the RadialGuage control in the Toolkit, as well as the blogposts and sample code from Diederik Krols and his blog posts.

As well as Co-Pilot for maths queries and interpolation code suggestions, here are other posts I found helpful

This is a Primitive Shape based on a Path, which will be used by the Storage Ring control
It may need more tests added and other edge cases mitigated.  This is not just adding the control, but refactored and refined.
Also ensured the control value updates as other values change with the control
Added ToDo notes to better handle the interpolation between 0% - 1% and 99% - 100%
I changed the interpolation to be based on percentage rather than value between min and max - this is consistent with the StorageBar's interpolation at the start and end.

Storage Ring's track interpolation at the end is still done with value to angle conversions as the Angle is the best way to know when the start and end angles meet.
@mdtauk
Copy link
Contributor Author

mdtauk commented Aug 12, 2024

A final round of cleaning up or adding comments to parts of the controls can be done soon, but I wanted to get the functional code in after working on it on and off outside of the repo and adding it to the repo over the past week or so

I have made Percent a non-protected DependencyProperty so you can do binding to it.  That way any text label you wish to display the Percentage, will be able to bind to it.

I have made it so changing the value externally does nothing, and it will update it again as the value changes.

Also added a Percent TextBlock to the examples on the Testing Page
Added comments to those methods that were missing them
@mdtauk
Copy link
Contributor Author

mdtauk commented Aug 15, 2024

A final round of cleaning up or adding comments to parts of the controls can be done soon, but I wanted to get the functional code in after working on it on and off outside of the repo and adding it to the repo over the past week or so

This is done now

/// <summary>
/// Updates the RingShape path
/// </summary>
private void UpdatePath()
Copy link
Contributor

Choose a reason for hiding this comment

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

This method should be split into multiple smaller functions. Also, I think the comment is kind of redundant and can be left out.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I am breaking this up into smaller functions and updated comments

var result = number % divider;

// Ensure the result is positive or zero
result = result < 0 ? result + divider : result;
Copy link
Contributor

Choose a reason for hiding this comment

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

Technically, this only works if number > -divider

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@0x5bfa How do you suggest I change the method to ensure it works correctly?

Copy link
Member

Choose a reason for hiding this comment

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

If you're ensuring it be positive or zero, can't it be 'result < 0 ? 0 : result'?

Comment on lines +566 to +567
//var easedT = EaseInOutFunction(t);
var easedT = EaseOutCubic(t);
Copy link
Contributor

Choose a reason for hiding this comment

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

I assume one of those two lines with the accompanying functions will be cleaned up?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was testing the two easing functions, we can remove the commented out one

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will remove the comment, but keep the other easing method in case we can use it later. Unless you think we should remove the method even if it is unused in the short term?

src/Files.App.Controls/Storage/StorageRing/StorageRing.cs Outdated Show resolved Hide resolved
src/Files.App.Controls/Storage/StorageRing/StorageRing.cs Outdated Show resolved Hide resolved
/// <param name="minValue">The minimum value of the input range.</param>
/// <param name="maxValue">The maximum value of the input range.</param>
/// <returns>The percentage value (between 0 and 100).</returns>
private double DoubleToPercentage(double value, double minValue, double maxValue)
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should introduce a separate Math util file given we have multiple math "add-ons" across controls.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will do this in a future commit. @0x5bfa If you can help me go through the various calculation methods, and separate them into their own code file, I would greatly appreciate it.

src/Files.App.Controls/Storage/StorageRing/StorageRing.cs Outdated Show resolved Hide resolved
Resolving suggestions made by Marcel in code review
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants