search

webui-dev / webui

Use any web browser or WebView as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.
https://webui.me
MIT License
2.35k stars 144 forks source link

Frameless windows #417

Open its-mr-kin opened 2 weeks ago

its-mr-kin commented 2 weeks ago

Describe the Feature

The ability to hide the default title bar in browsers, thus enabling the possibility of creating a custom one.

Use Case

I'm currently trying to develop a desktop web app. It's not my first time building one, as I've start by using frameworks like Electron and Tauri.

If I understand correctly, this is not a framework but a library that enables the developer to create such apps with pretty much any backend language. Its mission is not to try and add all the functionalities that exist in the previously mentioned frameworks (or any others for that matter).

I've seen this commented on before (discussion and some comment on an issue found on the same discussion), but I can't seem to make it work on my end.

I've also seen that the feature "kiosk mode" is already available, but I also think that this one could enhance the desktop app, making it feel more like a desktop app rather than a fancy web browser (which it still is), and there are already multiple apps that have this feature (Teams, Discord, VS Code, and others).

But if the frame/title bar is hidden, we also need API calls to minimize, maximize, and close the app. I know I can close the app by binding a call from the backend, but I'm not sure about the other ones.

Proposed Solution

I guess it can be done the same way as with kiosk mode: void webui_set_frameless(bool status).

I'm not sure how the other three calls should be implemented, but I would like to have the calls available in webui.js as well, the same way as webui.isConnected().

Other Information

No response

Implementation

Version

WebUI v2.4.2

Environment details (OS name and version, etc.)

AMD64 Family 25 Model 33 Stepping 0 (???)
hassandraga commented 2 weeks ago

WebUI uses a web browser as GUI, making your app lightweight and not depend on anything except a web browser (which is installed pretty much on every system). This is great, but the limitation is that the window belongs to the web browser and not to the backend app, I mean by that, custom options can be available only if the web browser provides it, in this case, hiding the title bar can be done in Firefox, and not in other web browsers for now.

If a developer needs the app to function as a default desktop window, lightweight and portable as possible, then using the web browser window is the best option. However, if more custom options are required, the recently added WebView window in WebUI v2.5 Beta is the ideal choice.

In conclusion, your proposal can be made using WebView (WebUI +2.5) and some web browsers (Firefox for now).

This is an excellent feature to have. We will try to implement it. Thank you for the proposition @its-mr-kin.

its-mr-kin commented 2 weeks ago

I didn't know that it was possible with that version and with Firefox. When I find more time, I'll try it out.

To be honest, I would try to implement it myself and make a PR, but I have a problem: I don't understand the code, in the sense that I didn't write it, and I don't have a good grasp of the architecture/project.

The only way I can think of to learn how to understand the project is by reading it from start to finish and then trying to do things, but I don't think I have enough understanding to keep up with the project. So, sorry I can't help now (I really wish I could, since I like the project so far).

If it's of any help, or if it sounds useful, I could publish the template I'm building for my app. It's just Solid-ts as the frontend, and I'm using zig-webui as backend. I'll also be creating the webui.d.ts (since it's needed for TypeScript projects) that could allow building apps with any TypeScript framework. But, once again, I'm creating this for myself and to learn, so I'm not sure if it will be useful.

Anyway, thank you for considering implementing it, and if the idea of publishing the template or the d.ts sounds useful, I could do it.

malisipi commented 2 weeks ago

I may work about an external C/C++ library that manipulates windows on Windows. (It will not be related directly with the WebUI to avoid harming the portability of WebUI, however WebUI will be first class citizen). Technically I would support changing title, icon, opacity, appearance (including with the borders/frames) and placement Windows internal APIs. Even more if I find a way to adjust the background, I may support DWM effects like Mica or Acrylic.

It would be good to support fluent web components on Mica background. It also may increase the interest of WebUI.