Support for Window Transparency

[nhhollander]

It would be nice to have support for background transparency to support use cases such as splash screens, desktop widgets, and allow for greater customization of window appearance.

I did a bit of tinkering and was able to get this working in both Gtk and Qt, and I believe it is possible to extend this functionality to other platforms. Currently I have support for transparency included as an optional flag in the window constructor, which can be called as window.create_window("title","url",transparent=True)

I've pushed my code to https://github.com/nhhollander/pywebview/tree/transparent_windows, and my changes are visible at https://github.com/nhhollander/pywebview/commit/cb939401e742ca9c38386229b6b8c90061b3802e.

I have included a couple examples I made quickly to demonstrate potential use cases.

Examples

Practicalities

I am willing to work in this issue myself, however I do not have a Windows or Mac OS system to test on at this time.

[r0x0r]

Looks good to me. Please go ahead. I will take a look at Windows or macOS whenever I get a chance.

[r0x0r]

@nhhollander Would you happen to have samplecode for a transparent window example. Like the one in your screenshots?

[nhhollander]

https://gist.github.com/nhhollander/69f15236b6f5c8c9f67d222b196e6dd3

[r0x0r]

Implemented Cocoa. As a side-effect transparent window cannot be moved around (as toolbar is hidden as well). Maybe easy drag move should be turned on by default for transparent windows.

[martinlombana]

Implemented Cocoa. As a side-effect transparent window cannot be moved around (as toolbar is hidden as well). Maybe easy drag move should be turned on by default for transparent windows.

I think it should be optional and there should be (if there isn't already) a function to initDrag and StopDrag. That way we could create titlebars in HTML/CSS in order to have a custom design for the whole window, while maintaining the ability to drag it in a "native" way.

What do you think?

[martinlombana]

@r0x0r , or is there, maybe, a way to disable the drag in all the window and add it to an specific area already?

[r0x0r]

No there is not. Disabling easy_drag would be easy via a param, but adding a specific drag area is a whole different matter.

…

On Tue, 21 Apr 2020 at 16:25, martinlombana ***@***.***> wrote: @r0x0r <https://github.com/r0x0r> , or is there, maybe, a way to disable the drag in all the window and add it to an specific area already? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#488 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAL2KWPSVP6PUZG33ISXDF3RNWNEXANCNFSM4LOHC2EA> .

[martinlombana]

I see. Then it would be impossible, as of now, to create a 100% custom titlebar, with dragging capabilities, right? What would be the changes necessary to do that? (I might look into it to collaborate for a future PR).

[martinlombana]

As a point of reference, Electron does it. Whatsapp Desktop, Slack and Skype are all built using electron. And Visual Studio Code. They do have this feature, because all of their apps have a custom titlebar and are using a framelesss window. Maybe I should create a new issue and reference it here?

[martinlombana]

Wouldn't if be doable just with this?

1. Listen to HTML drag event in a specific zone
2. Get the global position of the window
3. Move the window: https://pywebview.flowrl.com/examples/move_window.html

I didn't try it out though.

[r0x0r]

This might do a trick. Another way would be to intercept DOM events directly in Python, but I am afraid support for this is renderer specific.

I see two ways to implement this

a) Add a magic class (.pywebview-drag-area or similar) that would indicate that an element is draggable. I think Electron implements it like this.
b) Add a draggable rectangle to a window constructor (either in pixels or relative units). Seems clunky, but could be implemented natively.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days