How to make a modern GUI?
How to make a modern GUI?
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?
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?
Re: How to make a modern GUI?
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.
I think you best bet is for DIY as you like with CanvasGadget. It's more work at beginning, but the freedom is total.
Re: How to make a modern GUI?
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?
Re: How to make a modern GUI?
The fact the Microsoft is not sharing its new UI toolkit for Win32 apps is beyond my understanding.
Re: How to make a modern GUI?
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/
That was the reason why I needed webview2 webgadget in windows.
https://reactjs.org/
Re: How to make a modern GUI?
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?
Re: How to make a modern GUI?
here is a good alternative.
https://github.com/mestnyi33/widget
Kukulkan can you show or draw what kind of gadgets you would like?
https://github.com/mestnyi33/widget
Kukulkan can you show or draw what kind of gadgets you would like?
Re: How to make a modern GUI?
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.
Re: How to make a modern GUI?
Your app looks good, at least on Windows, the only thing is those blue buttons don't look right.
Re: How to make a modern GUI?
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?).
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?).
Re: How to make a modern GUI?
Have you tried to use Thorsten1867 modules?(AllOS, Modern, DPI, x64 and x86)
https://u.pcloud.link/publink/show?code ... oyJQ56HXg7
https://u.pcloud.link/publink/show?code ... oyJQ56HXg7
Re: How to make a modern GUI?
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.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
Re: How to make a modern GUI?
Not buttons, but Toolbar button image + text exist since 5.60As PB does not offer buttons with image + text, [...].
History
2nd March 2017 : Version 5.60
- Added: Large icons and text support to ToolBar library
Re: How to make a modern GUI?
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?
- the.weavster
- Addict
- Posts: 1537
- Joined: Thu Jul 03, 2003 6:53 pm
- Location: England
Re: How to make a modern GUI?
One of the things that's really nice about Thorsten1867's gadgets is that they make resizing so easy:
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.
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)
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.