Background composition

[yatli]

TODO

• [x] Custom titlebar ( #83 )
• [x] background transparency without blur (Moved to #95)
• [x] background picture? (Moved to #95)
• [x] font overflow
• [x] custom titlebar buttons not reliable (Moved to #94)
• [x] keep last states in fvim config file so that the startup process is smoother
• [x] osx: Figure out how to add vibrancy to a window
• [x] osx: Build a C binding to the vibrancy helper
• [x] linux: Figure out how to add blur bg

[yatli]

related:

https://github.com/arkenthera/electron-vibrancy/blob/master/src/vibrancy_mac.cc

very inspiring!

[yatli]

@TylerLeonhardt the POC is up, you'll have to test it yourself as my VM is not capable of rendering this fancy stuff :)

pull this branch, then: cd lib; dotnet run -p ../fvim.fsproj

[Kethku]

I'd like to try this out. What settings do I have to set or commands do I have to call to get it running?

[yatli]

try this:

    FVimBackgroundOpacity 0.75
    FVimBackgroundComposition 'acrylic'
    FVimFontLcdRender v:false

note, FVimFontLcdRender should be disabled, because subpixel rendering is not supported on a transparent background.

[Kethku]

Very cool! Couple of notes that come to mind:

1. The blur spreads past the edge of the window

2. With this background I almost feel like the standard windows title bar detracts from the overall look. Maybe some way to disable the title bar so that the window is raw, or implement your own somehow would make it look more consistent and push the appearance over the top.

3. This could be a huge mind-share boost for you. An awesome looking neovim client which is as close to gvim as possible while having some extra useful features is sorely lacking. At least on windows your options are confined to this and sorta nvim-qt which looks pretty bad in my opinion. The ligature and high dpi support in fvim is pretty awesome, and this would I think make it one of the prettiest neovim clients.

Btw, hijacking the thread a bit, but I've been absolutely thrilled with fvim. It just works. Fantastic stuff

[Kethku]

Another issue I noticed, not sure how to best fix it:

Looks like only the main background color becomes transparent.

[yatli]

There's another kind of background composition 'blur' which does not suffer from 1), but it's just a gaussian blur of a small kernel, not that fancy :)

[Kethku]

Changing to blur didn't fix the issue:

Nevermind its just stuck now. Setting it from the start worked

[yatli]

looks like you have to restart fvim first, or first switch into 'none' then 'blur'. the API is undocumented and I think I'm just scratching the surface

[yatli]

wrt the title bar: on Windows it's doable, and I'd also like something like VSCode does (at least proper theming!)

on other platforms maybe need to be more careful not to break the UX too much.

[Kethku]

Yeah I'd agree with that. Its somewhat more acceptable on windows.

[yatli]

wrt the opaque non-default background: I did it intentionally as an experiment to put emphasis on the highlighted elements ;)

you can tweak EditorViewModel.fs and change GetDrawAttrs to see what is fit for you. maybe another setting option for that?

[yatli]

wrt PR: yeah I can totally understand what you mean, something like "gVim+". we can target 0.3 and do more PR when it's stable enough :)

[codehz]

Suggestion about Linux support

An option is just leave it transparent, and let the compositor to build the blur effect...

(the x,y is the offset from window left-top corner to actual content left-top corner, it is only useful for client side shadow)

For KDE

_KDE_NET_WM_BLUR_BEHIND_REGION (4 uint32 values) x, y, width, height

For Deepin WM

_NET_WM_DEEPIN_BLUR_REGION_ROUNDED to (6 uint32 values) x, y, width, height, radius-x, radius-y

For other compositor

I don't know, but it may not need to do anything

[yatli]

thanks @codehz! are these routines from a dynamic library, or some kind of settings?

[codehz]

@yatli low-level api: Xlib reference: https://www.x.org/releases/X11R7.6/doc/libX11/specs/libX11/libX11.html

XChangeProperty(Display *display, Window w, Atom property, type, int format, int mode, unsigned char *data, int nelements);

which Atom property is from

Atom XInternAtom(Display *display, const char *atom_name, Bool only_if_exists);

but I think there some high level api...

[codehz]

PS: for testing, you can use those command in your shell to set properties to window

# KDE
xprop -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION '0,0,1920,1080'
# DeepinWM
xprop -f _NET_WM_DEEPIN_BLUR_REGION_ROUNDED 32c -set _NET_WM_DEEPIN_BLUR_REGION_ROUNDED '0,0,1920,1080,0,0'

Unfortunately, gnome 3 is not supported (but they may add blur support in GTK4 https://wiki.gnome.org/Projects/GTK/Roadmap/GTK4)

[yatli]

@Kethku try FVimBackgroundAltOpacity 0.3

[yatli]

@codehz POC is functional for KDE. Please have a try :)

If I want the blur behind region to fit the whole window, I have to actively track the resize events?

[codehz]

If I want the blur behind region to fit the whole window, I have to actively track the resize events?

In fact, if you want to blur the whole window, you can just put a single 0 to _KDE_NET_WM_BLUR_BEHIND_REGION...

xprop -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION '0'

[yatli]

thanks! tidying up.

[yatli]

the deepin params additionally control rx, ry -- not sure if it works with a single [| 0 |]

[codehz]

the deepin params additionally control rx, ry -- not sure if it works with a single [| 0 |]

Yes, it works as expected..

[yatli]

Great. In this case we're mostly done with the Linux side :) Thanks for the help!

[yatli]

Some updates on osx: unfortunately currently there's no easy way to obtain the native NSView* from Avalonia -- talked to them, they may add support for this later.

[TylerLeonhardt]

Oh no :( so no luck for macOS then? :(

[Kethku]

Finally got a chance to try this stuff. The alt opacity helps, but is still pretty jarring

Especially with powerline characters since the powerline drawing just uses the full opacity foreground colors. At this point I don't know if the altbackground opacity is worth the added implementation complexity

[Kethku]

Honestly the most jarring place is the gutter. If I set the gutter background color to not be different it looks great. Amazing work :)

[Kethku]

Re-powerline characters, adding a setting to use the alt background transparency for them as well would fix the issue I think.

[yatli]

@Kethku Note that the painted area for powerline symbols is foreground, not background. When drawing symbols with a semi-transparent foreground, it will end up blending in some background color -- unless the background color is fully transparent.

[yatli]

@Kethku turning off window decorators & borders fix the blurred edges:

[yatli]

@Kethku try it now with :FVimCustomTitleBar v:true ;)

Should look like this:

The blur overflow is muted.

[Kethku]

:O I'll try right away

Thanks, Keith

---

From: Yatao Li notifications@github.com Sent: Monday, October 7, 2019 9:21:08 AM To: yatli/fvim fvim@noreply.github.com Cc: Keith Simmons keith@the-simmons.net; Mention mention@noreply.github.com Subject: Re: [yatli/fvim] Background composition (#74)

@Kethkuhttps://github.com/Kethku try it now with :FVimCustomTitleBar v:true ;)

Should look like this:

[image]https://user-images.githubusercontent.com/20684720/66329695-8260eb00-e961-11e9-91d6-ad000ba0f0af.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/yatli/fvim/pull/74?email_source=notifications&email_token=AAZLN34PXNB4MNY4PVMM3EDQNNOXJA5CNFSM4IYVC2PKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAQ6MTA#issuecomment-539092556, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AAZLN36XH7BZI7G5IOT3IXDQNNOXJANCNFSM4IYVC2PA.

[Kethku]

Beautiful. My only complaint is that since the buttons are somewhat jank when it comes to starting the app after it was maximized. A couple of notes:

1. Since the style is set in vimscript, the window moves somewhat on startup from the restored position. Not sure there is anything to be done here other than some hacks to record whether the custom style was set and then restore that style on reboot
2. If the app was maximized, closed, and restarted, the buttons don't work properly
3. Minimize button doesn't work all the time when the window is maximized

These are super minor though and I think it goes a long way toward making the view look consistent. Honestly I might even be interested in a no chrome experience if you exposed the functions for maximize minimize and drag to vimscript. I could imagine modifying tab bar functions to do similar things and then it would all look perfectly consistent.

[Kethku]

Also minor in current version of this branch I get weird left over artifacts:

Fvim settings I have set:

if exists('g:fvim_loaded')
  FVimCustomTitleBar v:true
  FVimFontLcdRender v:false
  FVimFontHintLevel 'full'
  FVimFontAutoSnap v:true
  FVimUIPopupMenu v:false

  FVimBackgroundOpacity 0.8
  FVimBackgroundComposition 'acrylic'
endif

[yatli]

noted. added to TODOs