WIP - [Mouse Jump] - Customisable appearance - borders, margins, colours, etc

[mikeclayton]

Summary of the Pull Request

This is a follow-up to #32838 and #27511 to introduce some style settings to control the visual appearance of the Mouse Jump preview popup - previous work in #32838 added the style rendering code but didn't surface it in the Settings UI project and left the visual appearance as it was previously, but generated using some new rendering code.

This PR adds Settings UI options - it shows a live preview in the "Appearance and behaviour" section of the Mouse Jump settings which updates dynamically as colour and layout options are edited.

It's a Work In Progress, but I'd appreciate a review of the functionality in this PR so far, primarily in terms of whether the overall approach fits in with general PowerToys design guidelines, or whether it needs a major rethink before I spend a lot of time refining it. I'm not so worried about the code right now - mostly just the visual appearance and functionality of the new Mouse Jump Settings UI options.

Here's a (slightly rubbish) capture of it in action for reference:

mousejump-styles.mp4

To Do

Things left to do / consider:

• update installer to include new "MouseJump.Common.dll"
• check behaviour with old config files - upgrading and default config
  • default "custom" style looks unfinished when loading v1 config - can we assign some prettier initial values when v1 config is loaded?
• possibly add a confirmation prompt when clicking "copy to custom style" to confirm overwriting current "custom" settings?

[htcfreek]

@mikeclayton
Regarding the live preview panel: I don't think that we need a live preview of the screen. A fake image should be enough. And I think we should only show one desktop in the preview. Reasons for my thoughts are performance and visibility.

[mikeclayton]

@htcfreek - I can change the preview to use a static image as a fake desktop - the most recent unit tests do this anyway, so I can just re-use that. It might be worth leaving two screens though - the setting currently labelled "Screen Margin" defines the spacing between the individual screens - if there was just one screen the effect of this setting wouldn't be visible in the preview.

(I think the setting names and descriptions probably all need some thought as well, but I'm keen to get the layout and functionality right first...)

[htcfreek]

@htcfreek - I can change the preview to use a static image as a fake desktop - the most recent unit tests do this anyway, so I can just re-use that. It might be worth leaving two screens though - the setting currently labelled "Screen Margin" defines the spacing between the individual screens - if there was just one screen the effect of this setting wouldn't be visible in the preview.

Sounds both good to me. Saw that point with the two screens late.

(I think the setting names and descriptions probably all need some thought as well, but I'm keen to get the layout and functionality right first...)

Sounds good.

[mikeclayton]

@htcfreek - I've replaced the live preview of the current desktop with a static image: - see below.

The static "fake desktop" image it uses is is here: https://github.com/microsoft/PowerToys/pull/33486/files#diff-7fa63c54234718f0f78bb369b5da042242265e8487e4fa2e8cdca1107c57b5ac and it's based on my original animation at https://github.com/mikeclayton/FancyMouse. If it's not really suitable (e.g. doesn't meet UI guidelines / colours / logos / similarity to real products / etc ) would you be able to ask someone in the core team to create one we can use as that might be quicker than me trying to meet the design criteria.

It would be good to hear if there's any other UI feedback as well...

[mikeclayton]

@htcfreek - I'm also having a bit of trouble with the Azure DevOps pipeline. I've added a new project - MouseJump.Common - but I'm getting an error about the target framework version - I've had a dig, but I can't see what's different compared to other projects that are building successfully before it (e.g. ImageResizer).

Are you able to take a look and see if you can see what the issue is?

For reference, the pipeline error is:

https://dev.azure.com/ms/PowerToys/_build/results?buildId=589043&view=logs&j=b6b44f60-477e-5b36-eeeb-589df0c177de&t=f5043f15-036d-5d3b-8695-92dff4115778

##[error]C:\hostedtoolcache\windows\dotnet\sdk\8.0.302\Sdks\Microsoft.NET.Sdk\targets\Microsoft.PackageDependencyResolution.targets(266,5): Error NETSDK1047: Assets file 'D:\a_work\1\s\src\modules\MouseUtils\MouseJump.Common\obj\project.assets.json' doesn't have a target for 'net8.0-windows10.0.20348.0/win-x64'. Ensure that restore has run and that you have included 'net8.0-windows10.0.20348.0' in the TargetFrameworks for your project. You may also need to include 'win-x64' in your project's RuntimeIdentifiers. [D:\a_work\1\s\src\modules\MouseUtils\MouseJump.Common\MouseJump.Common.csproj]

[htcfreek]

@htcfreek - I'm also having a bit of trouble with the Azure DevOps pipeline. I've added a new project - MouseJump.Common - but I'm getting an error about the target framework version - I've had a dig, but I can't see what's different compared to other projects that are building successfully before it (e.g. ImageResizer).

Are you able to take a look and see if you can see what the issue is?

For reference, the pipeline error is:

https://dev.azure.com/ms/PowerToys/_build/results?buildId=589043&view=logs&j=b6b44f60-477e-5b36-eeeb-589df0c177de&t=f5043f15-036d-5d3b-8695-92dff4115778

(...)

The order/structure of the two "common" .csproject files is different. Maybe that is the reason. 🤔🤷🏻‍♂️ But for such problems I am the wrong person to ask. 😅

[mikeclayton]

@htcfreek - no worries.

I'm at a bit of a loss as to what else to try though - is there someone on the core team that I could @ mention who might be able to help?

[htcfreek]

@htcfreek - no worries.

I'm at a bit of a loss as to what else to try though - is there someone on the core team that I could @ mention who might be able to help?

Jaime (jaimecbernardo) I think.

[mikeclayton]

@jaimecbernardo - I'm having some problems with the Azure DevOps Pipeline that I've not been able to resolve - is this something you're able to take a look at?

In this PR I've moved some of the MouseJumpUI code into a new project - MouseJump.Common - which lets me re-use some of the code in the SettingsUI project for configuring options.

However, when the build runs I get this error:

https://dev.azure.com/ms/PowerToys/_build/results?buildId=589043&view=logs&j=b6b44f60-477e-5b36-eeeb-589df0c177de&t=f5043f15-036d-5d3b-8695-92dff4115778

##[error]C:\hostedtoolcache\windows\dotnet\sdk\8.0.302\Sdks\Microsoft.NET.Sdk\targets\Microsoft.PackageDependencyResolution.targets(266,5): Error NETSDK1047: Assets file 'D:\a_work\1\s\src\modules\MouseUtils\MouseJump.Common\obj\project.assets.json' doesn't have a target for 'net8.0-windows10.0.20348.0/win-x64'. Ensure that restore has run and that you have included 'net8.0-windows10.0.20348.0' in the TargetFrameworks for your project. You may also need to include 'win-x64' in your project's RuntimeIdentifiers. [D:\a_work\1\s\src\modules\MouseUtils\MouseJump.Common\MouseJump.Common.csproj]

I've tried comparing the MouseJump.Common to other projects and I can't see any differences that might cause the problem, so I'm a bit stuck with what else to try. If you're able to shed any light it would be massively appreciated...

[mikeclayton]

@htcfreek @jaimecbernardo @Herry0092 - apologies for @'ing everyone.

I'm at a bit of a dead-end now with the verifyDepsJsonLibraryVersions.ps1 ci pipeline issue above. I've tried a few different things which don't seem to have worked, and I'm at the point where I'm just randomly changing things to see if they make any difference.

I'm not really sure what to do to unblock this - could anyone suggest where to go with it?

[jaimecbernardo]

@mikeclayton I'll try to take a look. I'll be mostly looking at deps.json files to double check where the difference might come from. Can you please revert the changes you've made to try to fix that build so I can start from before any tries to fix it? Thank you!

[mikeclayton]

Thanks @jaimecbernardo - I'll push an update later today and let you know when it's ready.

[mikeclayton]

Latest commit is still a WIP, but adds an initial "Preview Style" setting that lets the user choose between:

• Compact - the current preview style with no spacing or bezels around individual screens on the preview image
• Bezelled - the default "FancyMouse" style with bezels around individual screens on the preview image
• Custom - display additional settings that give fine-grained control over the appearance of the preview image

Also adds a "Copy to custom preview style" button that lets the user copy the "Compact" and "Bezelled" settings to "Custom" so they can be used as a starting point for "Custom" settings.

Compact preview style

Bezelled preview style

Custom preview style

[htcfreek]

Suggestion: Why not replacing the expander header with the buttons and text content of the "preview style" settings card and collapsing the expander ny default?

[mikeclayton]

Apart from a couple of small things that I still need to clean up (see the "To Do" section below), I think this is mostly ready for review now.

It would be good if this PR could be added to the review queue so I can start getting some feedback on anything that might still need to be changed to get it into a releaseable state...

---

To Do

Things left to do / consider:

• update installer to include new "MouseJump.Common.dll"
• check behaviour with old config files - upgrading and default config
  • default "custom" style looks unfinished when loading v1 config - can we assign some prettier initial values when v1 config is loaded?
• preview image settings card - problems horizontally centering image - see Problems centering Image inside in a SettingsCard CommunityToolkit/Windows#459
• possibly add a confirmation prompt when clicking "copy to custom style" to confirm overwriting current "custom" settings?
• move some hardcoded strings to resources

---

Notes:

The bulk of the changes (100ish files) are a wholesale move of all files the in the "MouseJumpUI\Common" folder into a separate project so it can be referenced in Settings UI to draw the preview image. The rest of the changes are updating Settings UI to expose the additional style settings.

Things that might need a proper review:

• Adding a reference to the "CommunityToolkit.WinUI.Controls.Segmented" package for the "Preview style" setting's "[Compact] [Bezelled] [Custom]" display

• Folder structure in SettingsUI project for new files - e.g "Images\MouseJump-Desktop.png" and "SettingsXaml\Panels\MouseJumpPanel.xaml" (I separated the latter out as it was getting difficult to work with the large "MouseUtilsPage.xaml" .

• All other files changed in SettingsUI

[htcfreek]

@mikeclayton

preview image settings card - problems horizontally centering image - see Problems centering Image inside in a SettingsCard CommunityToolkit/Windows#459

Did you try to set padding to 0,0,0,0?

[mikeclayton]

@mikeclayton

preview image settings card - problems horizontally centering image - see Problems centering Image inside in a SettingsCard CommunityToolkit/Windows#459

Did you try to set padding to 0,0,0,0?

I tried setting it to 8,8,8,8 and that didn't work :-(

It had an 8 pixel padding on the top, right and bottom, but 32 (=8+24) pixel padding on the left.

I think the header icon is 24 pixels, so it's adding extra spacing for that - I think I read somewhere this happens automatically if the SettingCard is inside a SettingsExpander, but I can't find the reference now...

---

Update

Looks like the 24px is coming from the SettingsCard's Header margin:

https://github.com/CommunityToolkit/Windows/blob/9c7642ff35eaaa51a404f9bcd04b10c7cf851921/components/SettingsControls/src/SettingsCard/SettingsCard.xaml#L398-L402

but I'm still not quite sure how to remove it...

Tbh, I'm not sure what I'm trying to do is possible with a SettingsCard...

[mikeclayton]

I think I've solved the centering problem, although I'm not sure I've done it the way you're supposed to solve it...

185b7ab#diff-dd14cd8373d019dc6d8a8b90c219b1904ee49da9300bfc39358b290a532a2821R27-R69

This reaches into the SettingsCard internals and applies some styling to the private controls inside it.

The result is:

[mikeclayton]

Suggestion: Why not replacing the expander header with the buttons and text content of the "preview style" settings card and collapsing the expander ny default?

@htcfreek - The expander is collapsed by default anyway, with the preview image and all the style controls hidden - I've been expanding it for my screenshots :-). The "custom" controls are also only visible when the "Custom" option is selected - they get hidden when you choose "Compact" or "Bezelled".

I'm not a UI guy, but I think it kind of works ok as it is - if I moved the "Preview style" buttons into the expander row they'd be separated from the rest of the settings when it's expanded (the preview image would be in the middle of them all).

[mikeclayton]

@jaimecbernardo - this PR has turned into a bit of a mess due to its age and the number of changes / reverts, and Clint's excellent solution-wide *.csproj cleanup is starting to bleed in as merge conflicts. I'm thinking of closing my PR and splitting the changes into two much smaller PRs based of the latest main branch:

• Separate the "MouseJumpUI/Common" files into a separate library so it can be referenced by Settings UI. This is quite high churn (moving about 70 files) but very little change needed in the files themselves (just namespaces)

• Once that's done and merged, re-apply the actual style setting changes as a new PR.

Any concerns with this approach?