Visual Window Snapping

I created this little preset which shows a floating web view when pressing cmd+shift+w. This webview allows you to choose various window positions to snap to.




You can get it here: https://share.folivora.ai/sharedPreset/0e66931a-d68b-4b12-b00c-98344df0d713

If you like it I could add options to move between connected displays etc.

This is awesome! Would you mind if I polished up the graphics for clarity and included it in my preset?

That would be great!
I is a very quick & dirty implementation, so there is probably much that can be improved. (For example I'd like to add keyboard support)

1 Like

I'll handle the GUI then if you extend the functionality :smile: I'll get started this afternoon on something.

1 Like

looks like fun! good job :slight_smile:

I created a preset to manage snapping with the keyboard. My post is here: https://community.folivora.ai/t/multiple-monitor-window-snapping-mainly-using-keyboard/2894

I added a link my post to here to try and keep all the similar solutions together. Cheers!

1 Like

AWESOME. Great implementation! I love how it pops up right where the cursor is at!

You'd mentioned multiple displays, how might you tackle that? My preferred / previous way was through an app called Divvy, which would just cycle through the displays in order when repeating the shortcut.

That was a simple solution for different display setups. Not sure how it would work in this situation.

My specific context, I use 3 monitors normally. So, would it be possible to hold down a modifier when selecting a section of the web view? Holding down 1,2 or 3 and then clicking perhaps to send it to that specific display?

How are you tweaking this!?

haven't started yet, will post results when I do :stuck_out_tongue:

I had thought about adding two more boxes to show up (one left of the current one, and one right of it). It would allow the same positions just on the left or right monitor. This can be achieved using BetterTouchTool's "Custom Move and Resize" predefined action.

Awesome. Would there be any way to have to happen automatically? Meaning if you have 1, 2, or 3 screens it would detect that and handle it appropriately?

First things first: @panda I absolutely love this! Thank you for sharing it.

The second thing is after reading @GoldenChaos's comment on handling GUI from awhile ago, I saw that the functionality was implemented into his touch bar preset, but I was really hoping for more of a separate interface due to the fact that I don't have a touch bar.

Anyways, this is what I have so far!
image

That said, I am afraid that I am not exactly a deft hand at javascript. My goal is for the specific 'button' to have a slightly darker shade to it, while the representation of the position on the screen is a lighter gray. I am not the greatest with words, so allow me to present my quick and dirty Illustrator mockup to illustrate my point:

image
I got half way to my goal by using :hover in CSS for the corner buttons, but ultimately my lack of javascript knowledge did me in. :frowning:

I definitely still plan on working on this in the future, I just haven't gotten around to it - but it looks like you've made some solid progress! Mind posting yours here?

1 Like

That is fantastic news. I was initially going to post mine but I wasn't 100% sure on the rules around that. I will attach it!

VisualSnapping.bttpreset (20.4 KB)

1 Like

Hi!

This works quite well and is pretty useful! I've assigned it to show up when you right click the green window button, and additionally rounded the corners a bit more.

@Panda, I was wondering if I could feature @Jerosh's edit within my public preset AquaTouch, would you mind if I merge this in? I'll be sure to link this forum post within it's code and feature you two in the changelog!

1 Like

Just want to notify;

@panda, @Jerosh, I've just released a new AquaTouch version with this preset implemented. If you'd like to have it removed, then please let me know! Otherwise, a quick thumbs up would be helpful for me. Thanks!

1 Like

Definitely fine with me! Sorry I haven't made any modifications to this after posting here, I have been quite busy lately. In case you need any changes, please let me know.

2 Likes

Thanks for the permission!

1 Like

FINALLY cleaned this up!

I'm still getting things to highlight correctly, but it's about done. Coming next experimental release :metal:

11%20AM

Visual Window Snapping has evolved once again.

19%20pm 22%20pm 24%20pm 48%20pm

  • Edge and Centre highlighting done!

  • Refined GoldenChaos's Translucency to better match the macOS transparency

  • Fade animations now use the EaseOutExpo curve, which feels more responsive than a linear curve but has the same duration.

  • Completley redid how the borders are displayed. They now use actual borders instead of gridgaps. (the gridgaps faded away when you opened it up on a dark background. Hard to see.)

  • More rounded corners (i just like it rounder)

I'm not planning to release this as of yet, as I want to make it dynamically switch to a light style if the user is using light mode.

I also want to make two buttons appear automatically if a display is connected for move to display buttons.

It's visually not exactly as I wanted, sometimes the highlight can overexpose it's backgrounds and I'd like to fix and refine that over more time.

1 Like