search

andrewbaxter / wongus

Desktop widgets at the speed of internet standards
ISC License
3 stars 0 forks source link

Transparent Background #1

Closed darman96 closed 3 months ago

darman96 commented 3 months ago

Is it possible to make the background of the window transparent?

I tried adding this to the GtkWindow code but it didn't work:

gtk_window.connect_draw(|_window, ctx| {
    ctx.set_source_rgba(1.0, 1.0, 1.0, 0.0);
    ctx.set_operator(cairo::Operator::Screen);
    ctx.paint().unwrap();
    Propagation::Proceed
});

Edit: Propagation::Stop didn't work either

andrewbaxter commented 3 months ago

Oh! I'm really excited you tried this!

I did some testing with sway and I had transparent backgrounds, no code changes were needed (just CSS?). I mean, I think the code should already be configured in a way that transparency works.

Actually I just checked some test css I was working with and I don't touch the background at all - it seems like html/body/divs should be transparent by default. Is it possibly something to do with your compositor or something else in the css?

If you don't mind sharing I could try reproducing on my end too.

andrewbaxter commented 3 months ago

Oh, just for some background:

IIRC I followed this for transparency: https://github.com/tauri-apps/wry/blob/dev/examples/transparent.rs

Since in order to use the desktop extensions I needed to inline some of those functions it doesn't 100% match up, but I think I made sure all the stuff related to the transparent flags were copied over. I might have messed things up while tweaking stuff for https://github.com/tauri-apps/tao/pull/938 though (pending release here: https://github.com/tauri-apps/tao/pull/944)

darman96 commented 3 months ago

I'm really excited you made this :D I tried using EWW and Ags but I just can't stand GTK. I was looking for a widgeting system that uses web tech for months now.

I just tried again on a fresh arch install with Hyprland and still no transparency.

config.json

{
  "attach_top": true,
  "width": {
    "percent": 100
  },
  "height": {
    "logical": 30
  }
}

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
    </head>

    <body></body>
</html>

The Stylesheet is empty.

darman96 commented 3 months ago

image

My guess is that hyprland is doing something here since it's a gradient and not a flat color

Edit: I was right, it's the blur feature of hyprland, when I disable it the background is gone.

andrewbaxter commented 3 months ago

Oh dang, uhh. Maybe there's a way to exclude it from blur? I'll read up about that.

andrewbaxter commented 3 months ago

Oh thanks for poking at it! I doubt I would have figured this out alone... That's blurring the background that shows through partially transparent windows?

I think hyprland probably blurs the entire region the panel occupies, even if most of that is fully transparent "background" - i.e. if you have a 100% width panel and only a small opaque div on the right hyprland would try to blur the whole 100%.

I guess it's a very diffuse blur? Does the blur look correct otherwise? I'm not sure what the best thing to do would be here. I think the webview probably needs to be one simple contiguous rectangle, so you can't ex: make a complex shape or multiple rectangles with gaps between them for hyprland to blur.

So probably the options to avoid blurring areas where nothing is drawn are:

  1. Use a <100% width region (in the wongus config json) and have the css use 100% of it, rely on hyprland for adding rounded corners if necessary or
  2. Use css with multiple transparent and non-transparent islands, but disable hyprland background blurring for the panel?

Is my read on this accurate? Not sure if there's something else we can do here. IIRC X11 allowed complex window shapes, but I'm not sure how easy that is in wayland and even if possible the webview itself probably doesn't allow it (i.e. would need to dig into webkit code and somehow expose each top level element as a separate window and ignore the html/body elements)

darman96 commented 3 months ago

I feel stupid now :D It seems that some setting must have not properly refreshed in my hyprland config. I just started Hyprland and now there is no blur on the layer shell bar.

andrewbaxter commented 3 months ago

Oh great! And no, I'm really glad you opened this. I really have no idea about hyprland so this was a good intro for me and more than anything I'm happy that you even tried it out!

Let me know if you have any other issues (or come up with a design you'd like to share... my own attempts with this ended up like 3-year old ms paint art).