Page 2 of 3

Re: How to make a modern GUI?

Posted: Fri Feb 03, 2023 5:03 pm
by ChrisR
I guess Kukulkan as others, me too, would like to be able to use a native solution with a proven, robust and easy to use rendering engine, to develop modern UI natively in PB.
It would be nice, WebView2 is maybe a way to go. It seems, they are actively working (not sure) on the WebView2 support for MacOS and Linux.

An interface like this one would be awesome.
Developed here, with difficulty, with Justin's Webview2 control and Bootstrap v5.3.0-alpha1 which brings dark or light mode and color modes.

Image

Re: How to make a modern GUI?

Posted: Fri Feb 03, 2023 5:05 pm
by Kukulkan
ChrisR wrote: Fri Feb 03, 2023 5:03 pm I guess Kukulkan as others, me too, would like to be able to use a native solution with a proven, robust and easy to use rendering engine, to develop modern UI natively in PB.
Yes, exactly! :) This is 100% what I need.

Re: How to make a modern GUI?

Posted: Fri Feb 03, 2023 5:48 pm
by the.weavster
ChrisR wrote: Fri Feb 03, 2023 5:03 pm It would be nice, WebView2 is maybe a way to go. It seems, they are actively working (not sure) on the WebView2 support for MacOS and Linux.
Why would WebView2 be needed for Linux / Mac OS, isn't it only the WebGagdet() for Windows that's stuck in the stone age? Or are you hoping for a PB <-> JS bridge rather than using WebSockets as infratec suggested?

I'd certainly love to see a modern x-platform WebGadget(), especially if that means Fred will take the shackles off SpiderBasic and stop trying to make the Gadgets uniform across PB and SB.

Re: How to make a modern GUI?

Posted: Fri Feb 03, 2023 5:59 pm
by the.weavster
There's some C code here that creates a uniform abstraction layer to the webview on each supported platform including a bridge to/from JS. Maybe a C whizz could port this to PB?

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 9:07 am
by tored
Kukulkan wrote: Fri Feb 03, 2023 9:20 am
punak wrote: Fri Feb 03, 2023 9:15 am Have you tried to use Thorsten1867 modules?(AllOS, Modern, DPI, x64 and x86)

https://u.pcloud.link/publink/show?code ... oyJQ56HXg7
Hi punak, no because I switched all dialogs to use XMLDialog because of layout and resizing. As far as I know you can not easily use owner drawn gadgets together with XMLDialog. But maybe, if I do the resizing manually, it would be an option... Thanks for the hint.
I guess you have already seen

viewtopic.php?p=584524#p584524

It would be nice if hbox, vbox, gridbox, multibox and singlebox was accessible directly from Purebasic instead of going thru the XML Dialog API

viewtopic.php?t=79119


wxWidgets is not something I used myself, but it seems keep going strong over they years. However it is written in C++, which makes it a bit more complex to bind. The Lua editor ZeroBrane Studio is written in Lua + wxWidgets and it looks okay.

https://studio.zerobrane.com/screenshots

Personally I'm not that fond of doing web gui as a desktop application because I'm normally a web developer, thus I rather do a full web stack for that.

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 11:19 am
by tored
Fred wrote: Wed Feb 01, 2023 11:37 am The fact the Microsoft is not sharing its new UI toolkit for Win32 apps is beyond my understanding.
Sadly Rust for WinUI3/UWP/XAML for Windows GUI - actually modern UIs on Windows - was abandoned or explicitly removed from Rust API bindings by MS.

The listed library only uses the ancient win32 api
https://news.ycombinator.com/item?id=33981380
We yanked it because, sadly, XAML/WinUI is squarely designed to be used with C# and Visual Studio.
https://news.ycombinator.com/item?id=33982611

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 11:22 am
by infratec
Sorry for the late reply.

WebGadget on macOS and linux (gtk3) was no problem.
For windows I used my own written Webview2Gadget() (provided here in the forum)

On windows and linux it is a single file. The js file is included.
On macOS the js file is inside of the app folder.
I made a dmg file and used an installer wher you drag the app to the app folder.

For communication between PB and JS I use a websocket. I switched to JSON for the messages.

It works stable and relieable on all 3 platforms.
Up to now no one required the extra installation of the webview2 sdk on windows.

The files are much much smaller than a comparable electron app.

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 11:36 am
by tored
infratec wrote: Mon Feb 06, 2023 11:22 am For communication between PB and JS I use a websocket. I switched to JSON for the messages.
Is it possible to communicate with a webview without sockets? Like exposing functions to and from webview that can be called by the other side?

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 1:09 pm
by infratec
You can also use a 'normal' UDP connection.
You should use localhost or 127.0.0.1, because else you will be blocked by some restrictive browsers.

Since it is on the same PC, TCP makes not really sense.

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 1:26 pm
by Caronte3D
tored wrote: Mon Feb 06, 2023 11:36 am Is it possible to communicate with a webview without sockets? Like exposing functions to and from webview that can be called by the other side?
If you mean directly without a communication protocol, I think it's not possible

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 2:24 pm
by the.weavster
Caronte3D wrote: Mon Feb 06, 2023 1:26 pmIf you mean directly without a communication protocol, I think it's not possible
pywebview offers a Python / JS bridge on every platform and as I understand it that just utilizes each platform's native webview.

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 3:41 pm
by Caronte3D
My answer was related to do it directly in PB, so I think it's not possible at the moment (at least, easily).

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 4:52 pm
by ChrisR
infratec wrote: Mon Feb 06, 2023 11:22 am For communication between PB and JS I use a websocket. I switched to JSON for the messages.

It works stable and relieable on all 3 platforms.
Up to now no one required the extra installation of the webview2 sdk on windows.

The files are much much smaller than a comparable electron app.
It seems very interesting, unfortunately I don't know much about it and I would like to learn a bit more to test and see if it can be a way to go for possible future apps.
I don't usually ask for this kind of thing but could it be possible to share a small example, if you have some free time ?

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 6:16 pm
by skywalk
While my apps are not required to be so pretty, I am interested in the different approaches for a modern look.
Has anyone considered lvgl on the desktop?

Re: How to make a modern GUI?

Posted: Mon Feb 06, 2023 9:08 pm
by the.weavster
Mozilla have a forum where you can suggest new features for future versions of Firefox. I proposed this idea to make Firefox double as a webview. How about giving it some votes 👍️