How to make a modern GUI?

Everything else that doesn't fall into one of the other PB categories.
User avatar
Kukulkan
Addict
Addict
Posts: 1352
Joined: Mon Jun 06, 2005 2:35 pm
Location: germany
Contact:

How to make a modern GUI?

Post by Kukulkan »

Hi,

I was long time not active with PB and we still run some PB software at the customers (Windows, Linux, MacOS). I think about keeping the existing PB code and just renew the GUI because it is no longer acceptable (see my 2018 post about Users complain boring user interface of my apps).

Now, it is 4.5 years later and I wonder what the current options are. This are the requirements I need:

(1) Cross platform (Windows, Linux and current MacOS).
(2) DPI aware (MacOS Retina Display, Windows, Linux).
(3) Dark mode support (if OS is set to use dark mode, my app should be dark, too).
(4) Somehow modern looking like MS Teams or MS Excel.
(5) Actively supported.

The XMLDialog and built-in gadgets do not work, as they lack the requirements 2, 3 and 4.

I don't want to use Sciter because of the reasons I lined out in this post.

The Webgadget based attempts for HTML/CSS/JS dialogs I found by searching the forum were either discontinued (requirement 5) or not cross platform (1).

I can't rely on some specific Webbrowser being installed and up to date (eg Chrome). I can deliver some DLL or such, but except of Sciter I found nothing? Should not be too big also (max 40MB, Electron is >170MB).

Any skinning solutions only work for Windows and therefore do not match requirement 1 and 2 (and sometimes 3, 4 or 5).

I wonder if anyone here did some commercial software with up to date GUI using PureBasic? What did you use?
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 »

I also wish to see a good and modern GUI library some day :(
I think you best bet is for DIY as you like with CanvasGadget. It's more work at beginning, but the freedom is total.
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 »

Caronte3D wrote: Wed Feb 01, 2023 11:17 am I think you best bet is for DIY as you like with CanvasGadget. It's more work at beginning, but the freedom is total.
I already tried to solve several issues by developing my own gadgets: My own Button, My own Treeview, My own Pie-Chart etc... But integration of such into a XML dialogue for layout is hard. Just try it and you will find out (try it on all three OS and also try to switch DPI ;-) ) It is also a matter of time. If I really want to re-develop all needed gadgets (buttons, panels, dropdowns, text, label, menus etc) I will have a job for a year... Isn't this the job of the programming language or GUI toolkit?
Fred
Administrator
Administrator
Posts: 16619
Joined: Fri May 17, 2002 4:39 pm
Location: France
Contact:

Re: How to make a modern GUI?

Post by Fred »

The fact the Microsoft is not sharing its new UI toolkit for Win32 apps is beyond my understanding.
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 »

For our last project (crossplatform) I used ReactUI (javascript) and websocket.
That was the reason why I needed webview2 webgadget in windows.

https://reactjs.org/
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 »

infratec wrote: Wed Feb 01, 2023 1:26 pm That was the reason why I needed webview2 webgadget in windows.
Interesting. How did you handle JS->PB and PB->JS calling reliable on all three platforms?

How did you transfer data between front- and backend? Did you send/receive JSON string only? Or did you handle several data types (int, long, array, list etc)?

Did you experience any issues delivering that product to customers? Did some of them miss the webgadget (eg on MacOS) or similar issues?

Did you have to deliver something special using your setups? Eg some browser DLL or separate setup?
mestnyi
Addict
Addict
Posts: 995
Joined: Mon Nov 25, 2013 6:41 am

Re: How to make a modern GUI?

Post by mestnyi »

here is a good alternative. :)
https://github.com/mestnyi33/widget
Kukulkan can you show or draw what kind of gadgets you would like?
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 »

mestnyi wrote: Thu Feb 02, 2023 3:44 pm Kukulkan can you show or draw what kind of gadgets you would like?
This is the current application. The blue buttons are owner drawn.

This is neither DPI aware (on Mac) nor aware of dark mode. I also want it to look more modern. Eg panel with left side tabs etc...

Also important that I need a WebGadget to run a WYSIWYG HTML editor for the message.

Image
mestnyi
Addict
Addict
Posts: 995
Joined: Mon Nov 25, 2013 6:41 am

Re: How to make a modern GUI?

Post by mestnyi »

Your app looks good, at least on Windows, the only thing is those blue buttons don't look right.
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 »

Thanks. But it stops looking good on High-DPI and/or dark mode. It looks horrible then. On Linux and Mac, TextGadgets and StringGadgets and others do not align correctly. On Linux, sometimes they overlap themselves. Before using XMLDialog I worked around these issues by encapsulating all gadgets in my own gadget functions and do the corrections (eg manipulate coordinates depending on platform to look good again or set background color and frames etc). But it became a nightmare with layout and resizing etc. After switching to XMLDialog, some issues went away but others appeared (eg can no longer fix the gap between TextGadgets and StringGadgets, using self drawn canvas gadgets in XMLDialog is not simple and restricted etc). In summary, this was all one big piece of crap. This is all fine for some testing projects and some self used tools. But when it comes to professional end-user products, you quickly realize that customers expect your apps looking like similar apps. They tell you. Directly ("Your app looks like crap" or "Design from 2004" etc). A few moments later, your marketing and sales complains. And then find that this is not to become fixed with plain PB today.

As PB does not offer buttons with image + text, the self drawn ones were needed. We found blue good, but that is a matter of taste (GUI is always a matter of taste, right?).
punak
User
User
Posts: 63
Joined: Tue Sep 07, 2021 12:08 pm

Re: How to make a modern GUI?

Post by punak »

Have you tried to use Thorsten1867 modules?(AllOS, Modern, DPI, x64 and x86)

https://u.pcloud.link/publink/show?code ... oyJQ56HXg7
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 »

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.
Marc56us
Addict
Addict
Posts: 1477
Joined: Sat Feb 08, 2014 3:26 pm

Re: How to make a modern GUI?

Post by Marc56us »

As PB does not offer buttons with image + text, [...].
Not buttons, but Toolbar button image + text exist since 5.60

History
2nd March 2017 : Version 5.60
- Added: Large icons and text support to ToolBar library

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 »

Marc56us wrote: Fri Feb 03, 2023 9:21 am Not buttons, but Toolbar button image + text exist since 5.60
Yeah, I know. But at this time, the app was already there for 6 years and already used owner drawn buttons. The app in this configuration started in 2011 with PB 4.61. I also remember that the team later argued that right-aligning an image or button was not possible(?). So the right space was both wasted and not usable. Not sure if this still is an issue?
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 »

One of the things that's really nice about Thorsten1867's gadgets is that they make resizing so easy:

Code: Select all

ListEx::Gadget(#frmMain_lstHeader, 10, 70, 350, 510, "", 25, "", ListEx::#GridLines|ListEx::#AutoResize, #frmMain)
ListEx::SetAutoResizeFlags(#frmMain_lstHeader, ListEx::#Width|ListEx::#Height)
ListEx::SetAutoResizeColumn(#frmMain_lstHeader, 1)
ListEx::SetColorTheme(#frmMain_lstHeader, ListEx::#Theme_Blue)
I'm using some of Thorsten's modules on Pop!_OS and not seeing any issues of alignment / overlapping.

For buttons you have the choice of TileButton or ButtonEx

You can find his modules here

* edit *
As an after thought...
Although I've never tried it I believe you can use ModuleEx to load themes for the gadgets.
Last edited by the.weavster on Fri Feb 03, 2023 11:08 am, edited 1 time in total.
Post Reply