Configurable display borders

[mdrejhon]

Hello,

I'd love to see the following configurability:

• Configurable display border color (priority for me)
• Configurable display border thickness (nice-to-have)
• Whether you want only one boundary around all multimonitor, or each individual monitor

Preferably, I'd love to see it have boundaries around each monitor, maybe even with a tiny amount of spacing between them (so they're a series of unique rectangles). But I'll go with what UX compromises you make to simplify the number of settings -- just want good visibility. I want to use a blatant color, like yellow or near-whites.

Inspired from #14

[mikeclayton]

I thought about doing this a while ago with "realistic" screen bezels - something like this:

which could have had colour (and thickness) settings added to make high-contrast variations like this:

but it started falling apart a bit when I tried to work through some more complicated scenarios - e.g. this screen layout:

Working out how to space out the monitors to make room for the bezels around each screenshot melted my brain a bit, and even if you did it, the result didn't look very pretty because the alignment was all messed up:

So I thought maybe you could draw the bezels inside the existing screen areas which solved the distorted alignment:

but that reduces the size of each screen thumbnail image by 2 x the thickness of the bezel in each direction, which alters the aspect ratio of each screenshot- e.g. a 200 x 150 thumbnail of a 4:3 screen would now be a 180 x 130 thumbnail inside a 10-pixel thick surrounding bezel, making the aspect ratio roughly 4:2.89 instead, and you'd have to distort the screenshot slightly to fit it inside the bezel.

I don't know if that would really matter visually in the scheme of things, tbh, but it also complicated mapping the mouse click back to a desktop location because now you've got invalid click areas (e.g. the bezel) and you can't just scale the click location relative to the popup form - you need to track a number of different hit-boxes and map those back individually, bearing in mind each screen's thumbnail might have wonky (and different) aspect ratios.

Ultimately it's all just basic maths and it's doable, but I wasn't quite ready to try to bite off this piece of work just yet. It's something I'd like to tackle, but it'll need a fairly big rewrite of some of the scaling and drawing code to calculate the layout and map thumbnail clicks back to desktop locations...

[mdrejhon]

You could compromise, for development simplicity:

Instead of being a screen-bezel approach, you could simply use a highlighter-overlay approach:

(A) Don't scale.
(B) Just overlay the border ON TOP (no thumbnail distortion)
(C) Use a slight alpha (maybe 25% transparent, 75% opaque) so you can see-through in a thick-border situation if need to click at the very edge;
(D) In the "border for every screen" mode, inset the border slightly, for the border gaps.
The thumbnails would continue to have no gaps, but the overlaid border would.
(E) Don't need to allow borders to become that thick (limit thickness adjustment range from 1 pixel to 10 pixels)

That way, the border has no effect on click positions or screenshot scaling.

For (A) you could even use variable alpha depending on mouseover, if desired. Basically, make it slightly more opaque everytime you mouseover'd a specific screen, as highlighting feedback.

I actually would use thinner borders -- approximately 3-to-5 pixel border thicknesses usually.

Personally I'd probably end up going with maybe 1 pixel inset + 3-5 pixels thickness + alpha 0.75 + no scaling for graphics

[mikeclayton]

@mdrejhon - I've been working on this here - #24

It basically works and lets you specify a bunch of settings (margins, borders, padding, colours) in the config file but I need to write a bunch of tests to verify the layout logic before I'm ready to release it.

I'll also send a PR to the PowerToys repo at some point once it's released here, but it depends on whether they like it when they see it as to whether it'll get merged or not...

[mdrejhon]

Thank you! It looks like you went with your original approach to abberate away from pixel-relative accuracy in order to add a border.

Nice -- that's algorithmically much harder than my suggested KISS/simpler approach to simply overlay a single solid-color (per screen) translucent see-through border (alphablend) inside the screenshot rectangle -- and also make bezels clickable. This originally would have avoided the need for adding any distortions / pixel shifting the thumbnails to make room for an outside-of-edge border.

I presume you're achieving this by slightly shrinking the "screenshot thumbnail" within each border (to keep math simple)?

(Oh one other comment -- I don't necessarily want same-resolution screens to be bordered seamlessly, so hopefully there's an option to have borders for all monitors, even if the same size. A desktop 1080p monitor may be in an awkward position relative to a laptop 1080p screen, so seamlessness between two screens is very confusing/unintuitive to my specific use cases. And sometimes I have two 4K screens across the room, facing each other from opposite walls). Like an RTINGS display-testing warehouse, sometimes I activate storage displays on racks / tables / desks for specific-unit testing without moving them next to each other...)

Appreciate the work you're doing on this issue!

[mikeclayton]

Each sreenshot will have its own bezel (depending on whether there's one configured) - it'll end up looking like the last image above, i.e.:

You'll be able to adjust the color / thickness of the border and the spacing between each screenshot in the config file.

And the screenshot thumbnails will be stretched (not scaled) to fit inside the border, which might distort the aspect ratio but it doesn't really make much difference when you actually see it unless you're using extremely large borders on extremely small screenshots (in which case, don't blame me - blame the way maths works :-) )...

[mikeclayton]

@mdrejhon - Btw, the plan was always to have borders around individual screens, so you're in luck :-).

I was trying to work out why you mentioned "I don't necessarily want same-resolution screens to be bordered seamlessly" and I think it's because of this screenshot:

I've got an ultrawide on the left with applications docked left and right on that single screen which sorta looks like it could be two "normal" widescreens screens welded together in the preview image, but if you zoom in you can see the Windows 11 taskbar in the centre of that whole screenshot.

It looks like this in Display Settings:

[mikeclayton]

@mdrejhon - Released in FancyMouse v0.0.15-preview - see https://github.com/mikeclayton/FancyMouse/releases/tag/v0.0.15-preview

[mdrejhon]

Thank you! If you don't hear from me, that means I'm happy.

(Probably will take a few weeks to discover any nits, if no bugs)

[mdrejhon]

I have one new change request, #33

Question.... Has Microsoft accepted this change upstream?

1. I am curious, simply because the Microsoft version is less useful for those "I just wanna teleport my mouse pointer to a specific screen, without worrying about configuring multimonitor positioning" use cases. Especially in conjunction with the new issue at Make FancyMouse menu show on ALL displays (for powered-off monitors in multimonitor) #33

2. Are you using a HTML renderer for the borders?

If you are using a HTML renderer for the borders, may you do a quick change to add a config file setting to be added for bonus CSS settings? This allow tweaking like rounded-rectangles etc. (e.g. CSS "border-radius:")

This will allow end users to create more custom appearance, and might make Microsoft more willing to accept upstream (because they can just style default to their preference, while letting users manually aberrate via editing the settings)

[mikeclayton]

Development has stalled a little bit, tbh.

It's still on my todo list, but I've not really got an ETA for it I'm afraid.

I'll create a new issue for pushing it upstream and then it might give me a nudge to get round to it :-)