[program-l] Re: GUI app layout with wxpython.

  • From: <jordyydeweer@xxxxxxxxx>
  • To: <program-l@xxxxxxxxxxxxx>
  • Date: Wed, 26 Jun 2019 09:24:05 +0200

Hey

Under preferences, you need to enable the feature which shows labels and hides 
icons.

Hope that helps.

Kind regards

Jordy Deweer



 <mailto:info@xxxxxxxxxxxxx> info@xxxxxxxxxxxxx
+32 473 39 27 50
 <http://www.dewsystems.be/> www.dewsystems.be

 

Van: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx> Namens 
Andy Borka
Verzonden: Wednesday, June 26, 2019 2:28 AM
Aan: program-l@xxxxxxxxxxxxx
Onderwerp: [program-l] Re: GUI app layout with wxpython.

 

Hi,

 

Unfortunately, this completely fails to be accessible, even with accessibility 
branch checked out. I use NVDA, and hoped it would work. The only thing I end 
up with is a ton of unlabeled buttons and checkbuttons with no text

The thread talked about enabling labels, but I see no way of doing that.

 

From: Stefan Moisei <mailto:vortex37@xxxxxxxxx> 
Sent: Tuesday, June 25, 2019 5:46 PM
To: program-l@xxxxxxxxxxxxx <mailto:program-l@xxxxxxxxxxxxx> 
Subject: [program-l] Re: GUI app layout with wxpython.

 

And, recently, defining events has been made accessible in wxGlade. It 

wasn't previously. Now It's ready for professional use, in my view.

 

-----Original Message----- 

From: Jim Homme

Sent: Monday, June 24, 2019 9:09 PM

To: program-l@xxxxxxxxxxxxx <mailto:program-l@xxxxxxxxxxxxx> 

Subject: [program-l] Re: GUI app layout with wxpython.

 

Hi,

I was lucky enough to have saved the emails from most of the thread on this 

topic. I took that information, removed some of the repeating text, added a 

little background, and came up with the below content. I hope this is 

accurate.

 

I strongly advise you to first go through basic tutorial of wx python to 

understand the concept of sizer and containers.

once you have good understanding of wx python, you can resume the wxGlade 

tutorial.

remember, there is 0 shortcut in learning map. you have to understand the 

basics concepts first.

I don’t think there is any accessible tutorial for wxGlade.

 

Here is the link to wxpython tutorial:

http://zetcode.com/wxpython/

 

One of the really nice things with WXWidgets/WXPython is that you don't need 

to use a GUI builder, nor to set manually the position and size of the GUI 

components. All positionning stuff is done with sizers, and in fact the only 

thing you need to learn is how to use these sizers.

 

The basic principles behind sizers is very simple, you don't give actual 

positions and sizes but just tell a few simple indications. The indications 

you need to give depends on the sizer you have chosen and its logic.

 

For example, the simplest sizer, wx.BoxSizer, place elements horizontally or 

vertically just one after the other, and the size is set to be at least 

enough to see all the text/icon. You only give two

indications: the orientation, and how each element has to deal with extra 

available space (take it or not, or share across all components).

 

The next step is grid-based sizers, which defines a 2D grid and each element 

occupies a cell; the size of the rows and columns are whether 

fixed/constant/all the same  (wx.GridSizer) or flexible/variable/adjusted 

depending on the contents  (wx.FlexGridSizer).

 

wx.BoxSizer and wx.FlexGridSizer are the most useful sizers and you can 

already do quite a lot only with these two. And the result will almost 

always be at least usable by a sighted person.

 

Yes, you’re right. I do know that wx python uses sizer to handle app layout. 

Even fix positioning of UI elements is discouraged in wx widget.

But the only reason for recommending wxGlade instead of manual coding; 

because how it handles creating of UI.

WxGlade uses the same techniques that you mention in your last E-mail.

The interface is specially optimized for screen reader users.

 

 

]Inserted by Jim]

The repository for WXGlade is here:

https://github.com/wxGlade/wxGlade

 

From here you can make your own copy of the repository on Github, if you 

have a Github account, by pressing the Fork button, or you can press the 

Clone button and put the repository on your computer. You would press the 

Fork button if you think you want to play around with the code and possibly 

contribute.

 

Check out the Readme file for links to documentation and information about 

reporting bugs and so on.

 

Once you have it on your computer, from what I can tell about the email 

thread to this point, you would want to have Git installed, so you can point 

to the ACCESSIBILITY branch and run WXGlade once you have switched to that 

branch. If you do not have Git on your computer, you can read all about it 

here.

 

https://git-scm.com/book/en/v2

 

Chapter 1 of the book tells you the basics for getting Git installed and set 

up. Chapter 2 gives you the foundation you need on basic commands. Chapter 3 

talks about branches.

 

Continuing through the email thread.

 

[End of Jim insert]

 

 

Run Git CMD on your computer.

 

Run:git checkout ACCESSIBILITY

 

This puts you in the Accessibility branch.

 

You should get a prompt something like: “Switched to branch 'ACCESSIBILITY'

Your branch is up to date with 'origin/ACCESSIBILITY'.”

to find out the current branch, run the command git branch.

the current branch should be highlighted with *.

 

E. G. run: git branch

 

*ACCESSIBILITY

Master

 

Once you are in the ACCESSIBILITY branch, type the following command. Take 

note of the exact case of the letters:

 

py wxGlade.py

 

Once WXGlade is running, you can do the following among other things.

 

To create a window with a frame and a panel,

Check the frame from available widgets (all widgets are available as 

checkboxes)

Press f2 to navigate to tree view (here sizer, frame, panel etc are added)

Press enter to drop the selected widget

Then do the same for  a sizer and a panel.

When you drop the sizer in tree view, it should prompt you to select the 

sizer type. and an edit box is available to you to specify the required 

number of slots.

 

WxGlade truly shines when it comes to generating code because it can 

generate code in python (2 and 3 are supported), C++, purl, XRC and lisp.

 

The link for the tutorial on creating a calculator app is

 

http://wxglade.sourceforge.net/docs/tutorial.html

 

Here is the link to the issue on GitHub for the ACCESSIBILITY branch:

 

https://github.com/wxGlade/wxGlade/issues/317

 

Other tips:

 

Besides turning on lables, try disableing show icons and maximizing the 

window.

 

Here are some keyboard shortcuts that I use frequently with wxGlade.

 

In tree view when any widget is focus:

1. F2 to rename

2. F3 for common property

3. F9 for layout

4. F10 for widget

5. F11 for events

6. F12 for code

7. Del for deleting widget or empty slot

8. CTRL +a to add slot

9. Standard copy paste command also works for widget

 

Additionally, f2 to go to tree view and f5 to see preview

 

Information About Making The Calculator App

 

Create the basic structure:

1. Select “File->New” to create a new file and “File->Save” to save a .wx 

file to a directory.

with screen reader: follow the standard procedure of saving and creating 

files

2. Add the frame:

◦ click on the Frame icon frame on the “Windows” line of the Palette panels

◦ as class name, enter CalculatorFrame: New Frame dialog

with screen reader: press F2 and then press tab to get frame button and then 

press space to activate it.

a dialogue box should open

here in first field, you can select the type of frame

leave it to the default and press tab to get class name edit box

type: calculatorFrame in edit box and press tab and then activate the OK 

button.

note: imagine frame as a chess board when maximized, covers your entire 

screen. but there are no black or white cells in frame as of now. I mean, 

ther are no widget.

3. A frame with a sizer and one slot is now visible in the Tree view and the 

Design window (there the slot is visualized by a hatched area)

it means, whenever you add a frame in your app, a frame has a vertical sizer 

and one slot.

4. It would be possible to place controls directly on the frame, but usually 

a panel is added first, as a frame is really just a frame around the other 

things.

To add the panel:

◦ in the Palette of the main window (again on the “Windows” line) click on 

the Panel icon panel to start the placement

◦ in the Tree view or the Design window, click in the slot to place the 

panel there

with screen reader: press f2 and press tab until you get to panel check box 

and then press space to check it.

press f2 to go to tree view (design view)

press down arrow to get to slot 0 and press enter to add panel here.

note: slot 0 is slot 1 here. it doesn't mean, there is no slot.

remember: if we use the same chess analogy, a slot is similar to the chess 

cell. but it can have properties like expand, shrink etc.

usually, you would add different widget on  slot and modify their 

properties.

5. On the panel we need a vertical box sizer with six slots:

◦ in the Palette on the “Sizer” line click on the BoxSizer icon sizer to 

start the placement

◦ in the Tree view or the Design window, click on the panel to place the 

sizer there

◦ a dialog will open

◦ set “Orientation” to Vertical and the number of slots to 6 New Sizer 

dialog

with screen reader:

press f2 (not always required)

press tab until you get  to boxSizer check box and then press space to check 

it.

press f2 to go to tree view and press down arrow until you get the panel1

press enter to add sizer here.

in dialogue box, use down arrow and up arrow to choose vertical sizer

press tab and type: 6 to add 6 slots and press tab and activate OK button.

6. Now add a horizontal box sizer to the first slot: do as before, but keep 

“Orientation” as Horizontal and set the number of slots to 2

with screen reader:

here, we're talking about 6 newly added slots.

using up and down arrow go to slot 0

press enter to add sizer here

in dialogue box, choose horigentle sizer and press tab and then type: 2

press tab and activate OK button.

 

7. Place a Static Text static text as label (found on the “Static” line of 

Palette) in the top left slot and a TextControl text_ctrl (found on the 

“Inputs” line) in the right

with screen reader:

press tab until you get to static text check box and press space check it.

press f2 and then press down arrow until you get slot 0

press enter to add static text (label) here.

repeat the same procedure to add edit box on slot 1

 

 

Jim

 

 

 

==========

Jim Homme

Digital Accessibility

Bender Consulting Services

412-787-8567

https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions

 

-----Original Message-----

From: program-l-bounce@xxxxxxxxxxxxx <mailto:program-l-bounce@xxxxxxxxxxxxx>  
<program-l-bounce@xxxxxxxxxxxxx <mailto:program-l-bounce@xxxxxxxxxxxxx> > On 

Behalf Of ntsiklauri2@xxxxxxxxx <mailto:ntsiklauri2@xxxxxxxxx> 

Sent: Friday, June 21, 2019 1:16 AM

To: program-l@xxxxxxxxxxxxx <mailto:program-l@xxxxxxxxxxxxx> 

Subject: [program-l] Re: GUI app layout with wxpython.

 

hi Jim! Thank you very much! That will be fantastic.

Thanks

Nick.

 

Sent from my iPhone

 

On Jun 21, 2019, at 00:21, Jim Homme <jhomme@xxxxxxxxxxxxxxxxx 
<mailto:jhomme@xxxxxxxxxxxxxxxxx> > wrote:



Hi,

I know we talked about this. I will try to see if I can find those 

messages in the archive.



Thanks.



Jim







==========

Jim Homme

Digital Accessibility

Bender Consulting Services

412-787-8567

https://www.benderconsult.com/our%20services/hightest-accessible-techn

ology-solutions



-----Original Message-----

From: program-l-bounce@xxxxxxxxxxxxx <mailto:program-l-bounce@xxxxxxxxxxxxx>  
<program-l-bounce@xxxxxxxxxxxxx <mailto:program-l-bounce@xxxxxxxxxxxxx> >

On Behalf Of nikoloz

Sent: Thursday, June 20, 2019 10:59 AM

To: program-l@xxxxxxxxxxxxx <mailto:program-l@xxxxxxxxxxxxx> 

Subject: [program-l] GUI app layout with wxpython.



Hello everyone! I have heared that it is possible to develop great looking 

applications while being completely blind with wxpython. The question here 

is, which sizers do you guys use for doing that? hor how do you even 

produce a good looking apps?



Thanks,



Nick.



** To leave the list, click on the immediately-following link:-

** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]

** If this link doesn't work then send a message to:

** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx> 

** and in the Subject line type

** unsubscribe

** For other list commands such as vacation mode, click on the

** immediately-following link:-

** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]

** or send a message, to

** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx>  
with the Subject:- faq

¢Wš½ëazX¬µÉbrJ'¶¢šg‰«^—'è–Z0Šx%Šy&j)m¢šè‚¶¦–·ª¹ë-~·ž–+-²Šà²æãyËnžË›

±Êâmⶬ–)äv‡¬žÜ(®Kaz{‑Ö¦zˁëh¦º

­©¥­ê®zË_­ç¥ŠËl¢¸Ø§¶’¹¸ÞrÙbër¥ë§²æìr¸›xZ+¢Ø^®X¬µÊ&™©Ý²Ëœ…«/iÆ­Š‰æ¡

ל–'$¢{az)¦yØšµér~‰e£§‚X§’f¢–Ú)®ˆ+jikz«ž²×ëyéb²Û(®

.n7œµöª¢»‑Ö¦zˁëh¦º ­©¥­ê®zË_­ç¥ŠËl¢¸0ŠØm…ä®n7œµöª

** To leave the list, click on the immediately-following link:-

** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]

** If this link doesn't work then send a message to:

** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx> 

** and in the Subject line type

** unsubscribe

** For other list commands such as vacation mode, click on the

** immediately-following link:-

** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]

** or send a message, to

** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx>  
with the Subject:- faq

Nj�����vz�–������z���[1]��!��z¶�j������z���y����n��������j�yr�������j����~��� 

 

** To leave the list, click on the immediately-following link:-

** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]

** If this link doesn't work then send a message to:

** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx> 

** and in the Subject line type

** unsubscribe

** For other list commands such as vacation mode, click on the

** immediately-following link:-

** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]

** or send a message, to

** program-l-request@xxxxxxxxxxxxx <mailto:program-l-request@xxxxxxxxxxxxx>  
with the Subject:- faq

 

JPEG image

Other related posts:

  1. Home
  2. program-l
  3. Archive
  4. 06-2019