transparent background/boxes not required to be inside primary window

[josephdadams]

It would be cool to be able to have floating windows on top of my desktop wherever I wanted them - and have them ignore click events etc. but stay always on top. Sort of like my screendeck project but geared toward showing variables like companion-dashboard.

[tomhillmeyer]

Hmm....I definitely see what you're asking here. I think my solution might be to create a canvas background option that is transparent, sets the window to always on top, then add a lock/unlock somewhere for mouse interactions.

I don't think I want the boxes as their own windows, as that changes the scheme of how they understand their size and position. But if the dashboard window is now borderless and covers the entire screen, that means the boxes act just like they always have.

This was primarily thought of as it's own, standalone dashboard to display information, rather than widgets over other things. But I could see the benefit!

I'll explore this, certainly isn't one of the use cases I thought of! Thanks!

[josephdadams]

Sure thing! It’s a great app and I’m looking forward to seeing what all you come up with. I may even send a PR or two but don’t get your hopes up 😅😅

[tomhillmeyer]

I tried two different methods here, and actually shifted my thinking on this in the process.

The first was to pop out an existing box into their own windows. They would simply mirror a box in the main app, so settings and whatnot still work as normal. You would edit the version of the box that's in the main app and the popped-out version would mirror that. I ran into some challenges with resolving the Companion variables in the pop-out.

The second was to simply add the option for the background of the app to go transparent and pass through clicks except for a toggle button that turns this setting on and off. Ran into plenty of hurdles there with how Electron handles transparency, especially transparency that is enabled and disabled.

I think the pop-out option is the best option and more intuitive with how React + Electron seem to want to behave. By mirroring a box that still exists in the main window, the rest of the settings, functionality, etc. stays the same.

At some point I'll take another stab at it! If you or anyone else wants to try and implement something like that feel free!