Feedback wanted - [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:

https://github.com/microsoft/PowerToys/assets/1193763/7fd0885e-71d9-46b1-a6ee-0b9e8c4086ed

[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]

@jaimecbernardo - I've reverted the change: I made to add this to the *.csproj:

<RuntimeIdentifiers>win-x64;win-arm64</RuntimeIdentifiers>

Adding this originally seemed to fix the NETSDK1047 error (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'), in the new MouseJump.Common project, so that error is currently back in the build.

MouseJump.Common.csproj is basically a copy of MouseJumpUI.csproj just as a Library rather than a WinExe, and doesn't have <UseWindowsFOrms>true</UseWindowsForms>, so I'm not sure why MouseJumpUI.csproj builds but MouseJump.Common.csproj doesn't.

Once the above error is fixed, the build then fails on the verifyDepsJsonLibraryVersions.ps1 step with a mismatch between assembly version references in the various *.deps.json files:

System.Drawing.dll
	 8.0.624.26909
		 PowerToys.ImageResizer.deps.json
                 ...
		 PowerToys.MouseJumpUI.deps.json
                 ...
	 8.0.624.26715
		 PowerToys.MouseJump.Common.deps.json
Detected  4  libraries that are mentioned with different version across the dependencies.

Again, I haven't done anything special to MouseJumpUI so I'm not sure why that is different to the new MouseJump.Common project. I had some help originally with adding MouseJump to the installer, so there might be some settings outside the project files that I've never seen affect how they build...

One thing I haven't reverted is correcting the project guids in PowerToys.sln - I removed and re-added the MouseJumpUI and MouseJump.Common projects which corrected the guids in the PowerToys.sln file:

-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MouseJump.Common", "src\modules\MouseUtils\MouseJump.Common\MouseJump.Common.csproj", "{F35E1EF3-C2AE-4407-8029-92B8F2B4A382}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MouseJump.Common", "src\modules\MouseUtils\MouseJump.Common\MouseJump.Common.csproj", "{923DF87C-CA99-4D1C-B1D2-959174E95BFA}"

-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MouseJump.Common.UnitTests", "src\modules\MouseUtils\MouseJump.Common.UnitTests\MouseJump.Common.UnitTests.csproj", "{6A10C2B0-92AE-4928-996B-FCF55D2E3F39}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MouseJump.Common.UnitTests", "src\modules\MouseUtils\MouseJump.Common.UnitTests\MouseJump.Common.UnitTests.csproj", "{D5E42C63-57C5-4EF6-AECE-1E2FCA725B77}"

Any light you can shed would be appreciated.

[jaimecbernardo]

Looks like a tough one 🤔 It should be picking up the right one, but for some reason it's detecting dlls with different versions. I'll start by trying to fix it locally and then I'll go from there. There's a hack we did on some of them to only look for some dlls at runtime and I think that should help in the last case. Thank you for the info.

[mikeclayton]

@jaimecbernardo

This might be a red herring, but I noticed this file does something with the projects for each app (awake, hosts, colorpicker,etc) but not mousejump.

https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/generateAllFileComponents.ps1

I haven't looks in detail at what it's doing, or tried to add mousejump, but figured it was worth mentioning in case it's part of the problem...

[mikeclayton]

@jaimecbernardo - have you had any luck with the dll version problem?

[jaimecbernardo]

Sorry @mikeclayton , got diverted to other tasks in the meanwhile. Basically I think it's because we're saying this Library is self contained, when we usually really usually only do that on Apps. The latest changes I've pushed help here. Locally they seem to do the trick. Although I think I still need to do something for the tests, since they need Microsoft.Win32.SystemEvents.

[jaimecbernardo]

I've ended up excluding the tests from the deps.json checks, since the tests dependencies won't be pushed to production :) This should fix it.

[jaimecbernardo]

I think that's it @mikeclayton . Hope that helps :)

[mikeclayton]

@jaimecbernardo - Amazing thanks - I don't think I'd have ever got that combination of changes by myself.

There's a little bit more work I want to do with the UI for the settings - I'll put the PR in "ready for review" mode when I'm happy with it...

[github-actions[bot]]

@check-spelling-bot Report

:red_circle: Please review

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

Unrecognized words (1)

bezelled

Previously acknowledged words that are now absent

COMMANDTITLE FILELOCKSMITHLIB gdnbaselines GPT interactable JArray ksh localport OOBEPT Pathto qwertyuiopasdfghjklzxcvbnm qwrtyuiopsghjklzxvnm redirectedfrom runsettings runspace testhost toggleswitch 🫥

Some files were automatically ignored :see_no_evil:

These sample patterns would exclude them:

^src/modules/launcher/Plugins/Microsoft\.PowerToys\.Run\.Plugin\.TimeDate/Properties/

You should consider adding them to:

.github/actions/spell-check/excludes.txt

File matching is via Perl regular expressions.

To check these files, more of their words need to be in the dictionary than not. You can use patterns.txt to exclude portions, add items to the dictionary (e.g. by adding them to allow.txt), or fix typos.

To accept these unrecognized words as correct and remove the previously acknowledged and now absent words and update file exclusions, you could run the following commands

... in a clone of the [email protected]:mikeclayton/PowerToys.git repository on the dev/mikeclayton/mousejump-styles branch (:information_source: how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/v0.0.22/apply.pl' |
perl - 'https://github.com/microsoft/PowerToys/actions/runs/10135747351/attempts/1'

Available :books: dictionaries could cover words (expected and unrecognized) not in the :blue_book: dictionary

This includes both expected items (1882) from .github/actions/spell-check/expect.txt and unrecognized words (1)

Dictionary	Entries	Covers	Uniquely
cspell:r/src/r.txt	543	1	1
cspell:cpp/src/people.txt	23	1
cspell:cpp/src/ecosystem.txt	51	1

Consider adding them (in .github/workflows/spelling2.yml) for uses: check-spelling/[email protected] in its with:

      with:
        extra_dictionaries:
          cspell:r/src/r.txt
          cspell:cpp/src/people.txt
          cspell:cpp/src/ecosystem.txt

To stop checking additional dictionaries, add (in .github/workflows/spelling2.yml) for uses: check-spelling/[email protected] in its with:

check_extra_dictionaries: ''

Warnings (1)

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

:information_source: Warnings	Count
:information_source: binary-file	2

See :information_source: Event descriptions for more information.

If the flagged items are :exploding_head: false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it, try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.

[github-actions[bot]]

@check-spelling-bot Report

:red_circle: Please review

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

Unrecognized words (1)

bezelled

Some files were automatically ignored :see_no_evil:

These sample patterns would exclude them:

^src/modules/launcher/Plugins/Microsoft\.PowerToys\.Run\.Plugin\.TimeDate/Properties/

You should consider adding them to:

.github/actions/spell-check/excludes.txt

File matching is via Perl regular expressions.

To check these files, more of their words need to be in the dictionary than not. You can use patterns.txt to exclude portions, add items to the dictionary (e.g. by adding them to allow.txt), or fix typos.

To accept these unrecognized words as correct and update file exclusions, you could run the following commands

... in a clone of the [email protected]:mikeclayton/PowerToys.git repository on the dev/mikeclayton/mousejump-styles branch (:information_source: how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/v0.0.22/apply.pl' |
perl - 'https://github.com/microsoft/PowerToys/actions/runs/10135878822/attempts/1'

Available :books: dictionaries could cover words (expected and unrecognized) not in the :blue_book: dictionary

This includes both expected items (1882) from .github/actions/spell-check/expect.txt and unrecognized words (1)

Dictionary	Entries	Covers	Uniquely
cspell:r/src/r.txt	543	1	1
cspell:cpp/src/people.txt	23	1
cspell:cpp/src/ecosystem.txt	51	1

Consider adding them (in .github/workflows/spelling2.yml) for uses: check-spelling/[email protected] in its with:

      with:
        extra_dictionaries:
          cspell:r/src/r.txt
          cspell:cpp/src/people.txt
          cspell:cpp/src/ecosystem.txt

To stop checking additional dictionaries, add (in .github/workflows/spelling2.yml) for uses: check-spelling/[email protected] in its with:

check_extra_dictionaries: ''

Warnings (2)

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

:information_source: Warnings	Count
:information_source: binary-file	2
:information_source: non-alpha-in-dictionary	1

See :information_source: Event descriptions for more information.

If the flagged items are :exploding_head: false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it, try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.

[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 https://github.com/CommunityToolkit/Windows/discussions/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...

https://github.com/microsoft/PowerToys/pull/33486/commits/185b7ab82035fa0df6ed2063785b20caae0f15f6#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?