Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Everything else that doesn't fall into one of the other PB categories.
nsstudios
Enthusiast
Enthusiast
Posts: 274
Joined: Wed Aug 28, 2019 1:01 pm
Location: Serbia
Contact:

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by nsstudios »

Thank you for considering accessibility and sharing an example program.
Right now (at least with NVDA screen reader and Windows 10 22h2), the only thing I can access is the title bar, and the text "Any standard PB gadgets here". Everything else just reads as "Unknown" with NVDA, or "pain" with Narrator.
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

nsstudios wrote: ↑Sun May 21, 2023 10:27 pm Thank you for considering accessibility and sharing an example program.
Right now (at least with NVDA screen reader and Windows 10 22h2), the only thing I can access is the title bar, and the text "Any standard PB gadgets here". Everything else just reads as "Unknown" with NVDA, or "pain" with Narrator.
Thanks for your feedback! I've posted a new version of the demo. Hopefully more components should be readable?
Anyway implementing better accessibility is on my to-do list.
nsstudios
Enthusiast
Enthusiast
Posts: 274
Joined: Wed Aug 28, 2019 1:01 pm
Location: Serbia
Contact:

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by nsstudios »

Thank you once more for having accessibility in mind.
The situation is a little better: in order, when I open the app and tab:
  1. Says literally nothing.
  2. Says nothing again.
  3. πŸ”₯ Main
  4. πŸ”§ Tools
  5. πŸ”” Alerts
  6. Unknown
  7. Unknown
  8. Unknown
  9. Unknown
  10. unknown
  11. πŸŒ™ About
  12. Unknown
  13. Unknown
  14. Unknown
  15. Unknown
  16. Analyze
  17. Quit
And then it wraps back to two first controls that say nothing.
I can seem to activate controls with space, or at least the quit button works that way, for others I can't tell that anything is happening.
Also if I simulate a left click/left double click, the title changes from button pressed to side menu event.
It's awesome to see improvement, thank you for having accessibility in mind once again, and feel free to take your time, I understand that there's other areas that demand your attention as well. It means a lot that you're even considering it. :)
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

nsstudios wrote: ↑Mon May 22, 2023 8:42 am Thank you once more for having accessibility in mind.
The situation is a little better: in order, when I open the app and tab:
  1. Says literally nothing.
  2. Says nothing again.
  3. πŸ”₯ Main
  4. πŸ”§ Tools
  5. πŸ”” Alerts
  6. Unknown
  7. Unknown
  8. Unknown
  9. Unknown
  10. unknown
  11. πŸŒ™ About
  12. Unknown
  13. Unknown
  14. Unknown
  15. Unknown
  16. Analyze
  17. Quit
And then it wraps back to two first controls that say nothing.
I can seem to activate controls with space, or at least the quit button works that way, for others I can't tell that anything is happening.
Also if I simulate a left click/left double click, the title changes from button pressed to side menu event.
It's awesome to see improvement, thank you for having accessibility in mind once again, and feel free to take your time, I understand that there's other areas that demand your attention as well. It means a lot that you're even considering it. :)
Thanks for your excellent feedback! I've posted a new build, which hopefully fixes some of the issues you have reported.
Narrator should detect 6 readable items in this demo.
nsstudios
Enthusiast
Enthusiast
Posts: 274
Joined: Wed Aug 28, 2019 1:01 pm
Location: Serbia
Contact:

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by nsstudios »

I can report improvement, yes. :)
  1. Main
  2. Tools
  3. Alerts
  4. About
  5. Analyze
  6. Quit
The only thing now is that it doesn't recognize the type of the control. Usually it would say Main link, or main button. I think it's quite obvious here that the control is button, but it worries me for other controls like checkboxes, radio buttons, etc. where it wouldn't be super obvious.
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

Here's what the code for a simple "Hello World" betterlook app looks like.
Ease of use was a top priority throughout the creation of the pbi.

Code: Select all

IncludeFile "betterlook.pbi"

;; simply define the side menu layout in one single line, as follows: 

SideMenuLayout$ = "πŸ”₯    Main |πŸ”§    Tools |πŸ””    Alerts | | | | |πŸŒ™    About"   ;; icons are actually part of the Segoe Windows font! And '|' is the item separator

OpenWindowML(0, 40, 90, 650, 430, "Hello World", $F1F1F1, $121212, SideMenuLayout$, 160, $5C1200)  


;; if converting an existing app: insert your GUI code here 
;; tip: by encapsulating your GUI code inside a ContainerGadget, you won't need to adapt 
;;      all existing gadget coordinates to account for the extra space occupied by the sidemenu

ButtonGadgetML(46, 520 , 415,  120, 32,  "Button 1",   $F3F3F3, $4535DC)  

Repeat 
  Event = WaitWindowEvent()
  WindowHandlerML(0, Event)     
Until Event = #PB_Event_CloseWindow

This is the result:

Image
Last edited by firace on Fri Jun 02, 2023 3:09 pm, edited 4 times in total.
User avatar
blueb
Addict
Addict
Posts: 1041
Joined: Sat Apr 26, 2003 2:15 pm
Location: Cuernavaca, Mexico

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by blueb »

Looks good.

Will you be able to control colors?

e.g. Panels, Buttons, and other objects ( text and background )
- It was too lonely at the top.

System : PB 6.10 Beta 9 (x64) and Win Pro 11 (x64)
Hardware: AMD Ryzen 9 5900X w/64 gigs Ram, AMD RX 6950 XT Graphics w/16gigs Mem
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

blueb wrote: ↑Mon May 22, 2023 2:21 pm Looks good.

Will you be able to control colors?

e.g. Panels, Buttons, and other objects ( text and background )
Sure - See below screenshot.
However, I personally tend to leave the main window color unchanged, as customizing the colors of some standard PB gadgets can be a hassle :)

Image
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

Getting ready to share the kit with a first group of users!

I have decided to share the full source code to allow for a proper evaluation.
Also I chose to go for an early release and allow people to give it a try already, rather than waiting for a 'perfect' product.

Important: You must agree not to share the source code publicly without my prior approval.

During the first few weeks, priority will be given to users who have been active on this forum for at least 2 years.


To obtain a download link, please PM me and I will try to get back to you promptly (within 24-36 hours).
The package includes the full source code, and a couple example programs.

The evaluation period is 45 days. Then:

For use in commercial apps, please contact me to purchase a license at a reasonable cost.

For use in personal/family/freeware apps:
FREE forever! (Donations are optional but welcome and will definitely encourage me to keep improving the library.)
Also, if you build nice-looking programs using the library, I would love to see some screenshots!


Note: Procedure names and parameters are still likely to change during the next few weeks.

I am planning to rename the library to one of the below options. Which one do you prefer?
  • betterlook.pbi (current)
  • modernlook.pbi
  • freshlook.pbi
  • modernkit.pbi
  • altlook.pbi
  • prolook.pbi
Last edited by firace on Thu Jun 01, 2023 8:43 am, edited 5 times in total.
Axolotl
Enthusiast
Enthusiast
Posts: 435
Joined: Wed Dec 31, 2008 3:36 pm

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by Axolotl »

just my spontaneous idea ...

I always prefer meaningful names.
This is an App UI Kit for designing user interfaces, right?
Maybe something like
-- ModernAppUIKit .. modern it is but maybe only today in 2023?
Mostly running PureBasic <latest stable version and current alpha/beta> (x64) on Windows 11 Home
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

Here's another screenshot of a possible GUI using this library.
Will send out the package to those who requested it later this week (possibly as early as tomorrow).
Apologies for not replying to all PMs so far, due to time constraints...

Image
ebs
Enthusiast
Enthusiast
Posts: 530
Joined: Fri Apr 25, 2003 11:08 pm

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by ebs »

@firace,

I got your BetterLook source code - thank you!!

I started experimenting and noticed that the path to the IncludeFile in the two examples contains an elaborate folder structure. Since I put the PBI file in the same folder, I changed it to:

Code: Select all

IncludeFile "betterlook.pbi"
for convenience.

My first question/comment: I would love a way to specify the font used for OpenWindowML(), InfoGadgetML(), and ButtonGadgetML(). I went through and manually changed the font from "Segoe UI"/"Segoe UI Symbol" to "Tahoma". It looks very much the same, but I think it has some better Unicode glyph characters.

Thanks again for the chance to get an advance look at your excellent work!
User avatar
Bisonte
Addict
Addict
Posts: 1226
Joined: Tue Oct 09, 2007 2:15 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by Bisonte »

ebs wrote: ↑Wed May 31, 2023 7:46 pm @firace,

I got your BetterLook source code - thank you!!
...
Missed I something ? Where did you find it ?
PureBasic 6.04 LTS (Windows x86/x64) | Windows10 Pro x64 | Asus TUF X570 Gaming Plus | R9 5900X | 64GB RAM | GeForce RTX 3080 TI iChill X4 | HAF XF Evo | build by vannicom​​
English is not my native language... (I often use DeepL to translate my texts.)
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

ebs wrote: ↑Wed May 31, 2023 7:46 pm @firace,

I got your BetterLook source code - thank you!!

I started experimenting and noticed that the path to the IncludeFile in the two examples contains an elaborate folder structure. Since I put the PBI file in the same folder, I changed it to:

Code: Select all

IncludeFile "betterlook.pbi"
for convenience.

My first question/comment: I would love a way to specify the font used for OpenWindowML(), InfoGadgetML(), and ButtonGadgetML(). I went through and manually changed the font from "Segoe UI"/"Segoe UI Symbol" to "Tahoma". It looks very much the same, but I think it has some better Unicode glyph characters.

Thanks again for the chance to get an advance look at your excellent work!
Thanks for your nice feedback!
- I've posted a new version fixing the path issue and including a new example file demonstrating how to handle events
- Will consider making the font an easy to modify parameter in a later release
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Betterlook.pbi - Make your PB app UI better-looking (WIP - Windows x64)

Post by firace »

Bisonte wrote: ↑Thu Jun 01, 2023 7:07 am
ebs wrote: ↑Wed May 31, 2023 7:46 pm @firace,

I got your BetterLook source code - thank you!!
...
Missed I something ? Where did you find it ?
Please see the May 29 post higher on this page :)
When I have a minute I will also update the top post with that information to make it easier to find.
Post Reply