How to make a modern GUI?

Everything else that doesn't fall into one of the other PB categories.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: How to make a modern GUI?

Post 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
User avatar
Kukulkan
Addict
Addict
Posts: 1352
Joined: Mon Jun 06, 2005 2:35 pm
Location: germany
Contact:

Re: How to make a modern GUI?

Post 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.
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: How to make a modern GUI?

Post 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.
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: How to make a modern GUI?

Post 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?
tored
User
User
Posts: 60
Joined: Wed Feb 16, 2022 12:47 pm
Location: Sweden

Re: How to make a modern GUI?

Post 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.
tored
User
User
Posts: 60
Joined: Wed Feb 16, 2022 12:47 pm
Location: Sweden

Re: How to make a modern GUI?

Post 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
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: How to make a modern GUI?

Post 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.
tored
User
User
Posts: 60
Joined: Wed Feb 16, 2022 12:47 pm
Location: Sweden

Re: How to make a modern GUI?

Post 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?
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: How to make a modern GUI?

Post 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.
User avatar
Caronte3D
Addict
Addict
Posts: 1027
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: How to make a modern GUI?

Post 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
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: How to make a modern GUI?

Post 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.
User avatar
Caronte3D
Addict
Addict
Posts: 1027
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: How to make a modern GUI?

Post 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).
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: How to make a modern GUI?

Post 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 ?
User avatar
skywalk
Addict
Addict
Posts: 3972
Joined: Wed Dec 23, 2009 10:14 pm
Location: Boston, MA

Re: How to make a modern GUI?

Post 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?
The nice thing about standards is there are so many to choose from. ~ Andrew Tanenbaum
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: How to make a modern GUI?

Post 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 👍️
Post Reply