2017-05-11 21:42:34

Hi all,

I wasn't posting here for a very long time.
I think I already asked a similar question, but maybe something changed since earlier times:
In autoit, there is the layout by code, in short lbc script which makes creating guis very easy because you don't have to worry about how elements are lying on the screen, the script calculates this all automatically. Is there something like that on PureBasic?

I just can't get the hang of designing a gui properly as a blind person, but I don't want to have to call a sighted person very often so they look on my gui, I want to be able to make them myself.

Does someone have an idea for a solution or can explain me how this calculation works so I can make some gui designing automation script out of it?

Thanks for any answers!

greetings
gamefighter

Check me out on soundcloud:
http://soundcloud.com/gamefighter

2017-05-12 04:48:21

[Gadget] might do what you want and seems to be appart of PureBasic. There's a guide [here] and an example someone posted [here].

When it comes to designing GUI's I tend to take a methodical, mathematical approach. First I determine the windows total size, or resolution, usually something like 640x480, though it varies. Then I calculate the size of the buttons and other elements I want to display and position them in that area. So if the image size for each button is 32x32 and I want to display them as a horizontal bar across the top of the screen, assuming 0,0 is the bottom left, I would take the size of the screen minus the size of the image for height and add 32 for each button for x. So something like:

for a in range(0,5,1):
    button.blit(a*32,640-32)
-BrushTone v1.3.3: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

2017-05-12 15:43:22

Hi Magurb,

Sorry if I missspelled your name. Many thanks for the links! I looked at the example gui which seemed to have lots of syntax errors which I needed to take out, but then it worked and I noticed that even the edit-box was labeled and jaws reat out its label which seems to be not the case in most pb-guis I navigated around last times.

Maybe you can explain in more detail how do you do your calculation of element positions in your guis? I think I understand it mostly, but I'm not sure, it would be nice if you could give me a step-by-step explanation on an example gui. Is that possible?

Thanks again
gamefighter

Check me out on soundcloud:
http://soundcloud.com/gamefighter

2017-05-13 07:56:33

From what I understand Gadget uses some of the operating systems native widgets, if previous experience with similar widget interfaces holds true most of them may be screen reader accessible, but there may be some gaps. In those cases you could use [tolk] as a possible workaround to fill in.

I generally program with Python and don't have much experience using PureBasic. Most of the time I've built GUI's with Pyglet by manually positioning images and handling inputs rather than using widgets with hit detection, though in term's of positioning there isn't too much difference. I've put together a small example after a bit of tinkering, it seems that with PureBasics Gadgets the starting point for 0,0 is in the upper left corner, so the higher the Y value, the lower the image will be on the screen, and the higher the X value the further right it will be. The loop in the example is largely for expedience, if you want more specific text you could reference a list or just not use a loop.

wFlags = #PB_Window_MaximizeGadget | #PB_Window_MinimizeGadget

; Create a window thats 640x 480y.
wn=OpenWindow(0, 100, 100, 640, 480, "A Simple PureBasic Program", wFlags)

; Use a for loop to create 3 buttons ranging from 0 to 2.
; In the upper left corner of the screen. Each button is 
; 64x64, so space each button 64 appart horrizontally so 
; they don't overlap one another.
For k = 0 To 2 Step 1
  ButtonGadget(k,k*64,0,64,64,"Button"+k)
Next

; Create a Quit Button at the bottom left corner of the 
; screen using the window size and subtracting the size 
; of the button.
ButtonGadget(20,0,WindowHeight(0)-64,64,64,"Quit")

; Create main loop
Repeat
; Look for button events
  Event = WaitWindowEvent()
  If Event = #PB_Event_Gadget
    Select EventGadget()
 ; If first button is pressed  
      Case 0
        Debug("Button 0 Pressed")
 ; If second button is pressed
      Case 1
        Debug("Button 1 Pressed")
; If third button is pressed
      Case 2
        Debug("Button 2 Pressed")
; If Quit button is pressed
      Case 20
        Event = #PB_Event_CloseWindow
    EndSelect
  EndIf
Until Event = #PB_Event_CloseWindow
-BrushTone v1.3.3: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

2017-05-13 15:49:45

Hi Magurp,

Thank you for taking the time making an example, I will look at it more detailed and maybe I can make something on my own out of this, maybe some kind of gui automation include which wraps the purebasic-functions but where you can just say dude, make 5 edit-boxes, one combo, 3 checkboxes and 3 buttons for me and the module will do the layouting-stuff like lbc for autoit seems to do, this would be a dream!

Check me out on soundcloud:
http://soundcloud.com/gamefighter

2017-05-14 16:42:36

Hello to all of you, how do i create an accessible GUI with python?
Could any 1 please tell me how to do that, and what i need in order to do that?

best regards
never give up on what ever you are doing.

2017-05-14 23:14:52 (edited by magurp244 2017-05-14 23:19:32)

There are a number of libraries you can use to create a GUI with in python, such as WxPython, Pyglet, Pygame, etc. WxPython uses widgets similar to PureBasic above, whereas Pyglet and Pygame render images and you have to handle  inputs independantly. Something else to keep in mind is that unlike Wxpython Pyglet/Pygame don't have screen reader accessible GUI's, and so would require separate libraries like Tolk to add it.

Depending on which library you prefer I can provide some examples and a bit of a better explanation.

-BrushTone v1.3.3: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

2017-05-19 17:48:35

I would please like an example in the wxpython.

best regards
never give up on what ever you are doing.

2017-05-20 08:03:36 (edited by magurp244 2017-05-20 11:56:39)

Wxpythons a bit tricky to work with in a lot of ways, been working with it for awhile but still getting the hang of it, bleh. Now you could use Sizers to automatically position buttons which I haven't covered here, they can be useful in automatically spacing and placing buttons, but can also be a bit janky to use at times. If you'd like another example using them I can put one together.

import wx
import os

#create a frame
class Frame(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None, title='Example', pos=(150,150), size=(350,200))

    #create menu bar that runs across the top of the window.
    #You can add menu's to it and bind them to functions.
        menuBar = wx.MenuBar()

    #create a menu
        menu = wx.Menu()
    #add exit program option
        m_exit = menu.Append(wx.ID_EXIT, "E&xit\tAlt-X", "Close window and exit program.")
    #bind the exit option to the self.onclose function
        self.Bind(wx.EVT_MENU, self.OnClose, m_exit)
    #add this menu to the menu bar and label it "File"
        menuBar.Append(menu, "&File")

    #set the menu bar to the window so it and its menus appear.
        self.SetMenuBar(menuBar)

    #The & sign in the above menu text turns the letter to the right of it
    #into a keyboard shortcut. Be sure not to make two shortcuts of the
    #same letter in the same menu, or they will conflict.

    #the status bar displays text at the bottom if the screen, and is automatically
    #bound to the frame. Creating the menu and bars now helps make sure the buttons are
    #positioned properly.
        self.statusbar = self.CreateStatusBar()

    #this changes the status bar text
        self.SetStatusText('This is the status bar',0)


    #Panels are segments within the frame, and can have buttons and other
    #widgets attached to them, as well as to the Frame itself.
        panel = wx.Panel(self)

    #create a close button and position it in the upper left of the window
        m_close = wx.Button(panel, wx.ID_CLOSE, "Close",pos=(0,0))
    #bind the button press to the self.onclose function
        m_close.Bind(wx.EVT_BUTTON, self.OnClose)

    #create another button and position it in the lower right of the window
        b_button = wx.Button(panel, wx.ID_CLOSE, "Another Button",pos=(0,0))
    #because buttons are automatically sized by their text we can't tell what
    #its size will be until we create it. When we do we can change its position
    #in the window.
        b_button.SetPosition((self.GetClientSize()[0]-b_button.GetSize()[0],self.GetClientSize()[1]-b_button.GetSize()[1]))
    #bind the button to the self.onclose function
        b_button.Bind(wx.EVT_BUTTON, self.OnClose)

    #bind the window frames close event to the self.onclose function,
    #this will call the function if the user tries to close the window
    #some other way than our close buttons.
        self.Bind(wx.EVT_CLOSE, self.OnClose)

    #this makes sure the window is visible when loading.
        self.Show()


#in our onclose function we create a message dialog and ask if the user is sure
#they want to quit.
    def OnClose(self, event):
    #create the dialog
        dlg = wx.MessageDialog(self, 
            "Do you really want to close this application?",
            "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
    #display the dialog and allow the user to select an option.
        result = dlg.ShowModal()
    #Clean up and destroy the dialog one an option is selected.
        dlg.Destroy()
    #if the result was OK, destroy the window and close the program.
        if result == wx.ID_OK:
            self.Destroy()

#load the app
app = wx.App()
#initialize our frame
top = Frame()
#start the event loop
app.MainLoop()
-BrushTone v1.3.3: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

2017-05-27 17:18:12

Hi, I am so sorry for the late reply. But i had a lot of problems with python on windows 10 64 bit, whitch i did not evver have on windows 7 32 bit.
I used 64 bit at first, but then when i tried to install modules, it did not work, i got the message that python 2.7 is required, and it could not be detected in the registry.
so i removed python 2.7.13 and tried the 32 bit.
I still had the same errors, and i gave up for a while.
Well today, 27 may 2017 at 17:15 , i got it to work.
I had to completly remove python from the registry.
What did i do?
I had to go to the cmd.exe, and type regedit.
i went to local machine, and software and python, pressed delete there, installed python 2.7.13 32 bit, installed a module, and boom.
I am just posting this for incase any 1 would evver be stuck in the same situation as this.
But enough off topic, i reely like this example.
Where can i learn more of them?

best regards
never give up on what ever you are doing.

2017-05-28 03:07:05

Ach, having to do registry editing is a pain, i'm glad you managed to fix it though. The above example I wrote myself, though there are a few guides around such as [here], [here], and [here].

The problem though is that some parts of wxpython are accessible while others aren't, and when they are it may be only under certain circumstances. For example Toolbars are not normally keyboard accessible unless you capture keys and manually toggle them, and they aren't screen reader accessible unless you apply some short help text, and even then it may only be picked up by screen readers when you mouse over it. Similarly the aui.notebook isn't very accessible, but the wx.Notebook is, etc. Other things like treectrls, text boxes, grids, and such should be alright though.

You can also download the [wxPython Demo] which has script examples of many of these things you can play around with yourself.

-BrushTone v1.3.3: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

2017-05-28 08:34:20

Hi magurp, thanks for all those links, i am deffinitly going to try them out

best regards
never give up on what ever you are doing.