Simple Graphical User Interface module

From Knowledge Kitchen
Jump to navigation Jump to search


We'll play around with creating Graphical User Interfaces (GUIs) using the Python general-purpose computer programming language. We will be using a simple module I've created that allows us to do this easily.

GUI components

This library allows you to easily create graphical user interfaces with a minimum of code. In particular, it contains code to create the following interface components:

Text fields

Text fields allow a user to enter arbitrary text that can then be used by an application.

Text field

Checkboxes

Checkboxes allow a user to easily respond to yes/no questions with a simple click of the mouse.

checkbox

Buttons

Buttons are easily recognized by users to be "things that can be clicked" in order to "do something".

button

Sliders

If you want to allow a user to enter a value along a sliding scale, sliders should be your graphical user interface component of choice.

slider

Ask boxes

If you want to halt everything else and immediately ask a user to enter some text, ask boxes will do that.

ask box

Message boxes

If you want to halt everything and pop up a critical message to a user, message boxes are your solution.

message box

Download the module

Download: a zip file containing the simple graphical user interface Python module


Files

test.py graphical user interface

There are two files included: simple_gui.py and test.py, outlined below.


simple_gui.py

The file named simple_gui.py is the module you will use. However, as with most modules, you should never have to look at or change the code in this file. You will call the functions in this file from your own files, so just make sure this file is in the same folder as your own files.

  • This module contains a library of functions that I have created
  • These functions tap into Python's built-in GUI modules (known as TkInter, which is also used by John Zelle's inimitable graphics module).
  • I have tried to simplify things so that you can create basic graphical user interfaces with just a few function calls.

test.py

This is the program you should 'run'.

  • This file contains examples of how to call each of the functions found in simple_gui.py.
  • These function calls create various user interface elements.
  • Some of these functions return useful values.
  • You can use this file as a starting point for your own applications and modify it to fit your own agenda.

The grid

test.py example of a gui grid layout

GUI components are organized in a grid.

  • The system is flexible: you decide how many rows and columns your GUI needs
  • Place each component into a specific slot in the grid.

An example of a simple grid-based GUI might be the following:

  • a label in column 2, row 2
  • a text field in column 3, row 2
  • a button in column 4, row 2

Of course, you won't see the grid lines when you run your program. But imagine they are there. So as you create your own GUIs, think about where in a grid you would want to place each element, and that will help you design your interface in a structured way.

The functions

The functions available in this module are:

createMessageBox(titleText, msgText)

This is a function that creates a pop up message box. It accepts two argument: the String title of the box, and the String message to display when the message box pops up. It returns a pointer to the message box that is created.

Example:

#pop up a message box
createMessageBox("Special announcement", "You can create a message box!")

createAskStringBox(titleText, msgText)

This function creates a pop up box that asks the user to input some text. It accepts two arguments: the String title of the box, and the String message to display when the box pops up. It returns the String text the user enters into the box.

Example:

#pop up an ask string box
user_name = createAskStringBox("Special request", "Enter your name:")


createButton(buttonText, callback, row, col, colspan=1)

This function creates a button that is clickable by the user. It accepts 5 arguments: the String text to show on the button, a pointer to the function to call when the button is clicked, the row and column of the grid system to place the button into, and how many columns of space the button should take up in the grid (the default is 1 if no colspan is specified). It returns a pointer to the button that is created.

Example:

#the following code assumes you have defined a function named button_clicked that does something useful.
#create a button on row 1, column 2
button = createButton("Click me!", button_clicked, 1, 2)

createCheckbox(checkboxText, callback, row, col, colspan=1)

This function creates a checkbox that is clickable by the user. It accepts 5 arguments: the String text to show next to the checkbox, a pointer to the function to call when the checkbox is clicked, the row and column of the grid system to place the checkbox into, and how many columns of space the checkbox should take up in the grid (the default is 1 if no colspan is specified). It returns a pointer to the checkbox that is created.

Example:

#the following code assumes you have a function named checkbox_checked that does something useful.
#create a checkbox on row 2, column 2
checkbox = createCheckbox("Check me!", checkbox_checked, 2, 2)

createTextField(fieldWidth, row, col, colspan=1)

This function creates a text field where a user can enter some text. It accepts 4 arguments: the Int width of the text field, the row and column of the grid system to place the text field into, and how many columns of space the text field should take up in the grid (the default is 1 if no colspan is specified). It returns a pointer to the text field that is created.

Example:

#create a text field 100 characters long on row 3, column 2
text_field = createTextField(100, 3, 2)

createLabel(labelText, row, col, colspan=1)

This function creates a generic label. It accepts 4 arguments: the String text to display in the label, the row and column of the grid system to place the label into, and how many columns of space the label should take up in the grid (the default is 1 if no colspan is specified). It returns a pointer to the label that is created.

Example:

#create a label on row 4, column 2
label = createLabel("Very interesting", 4, 2)

createSlider(orientation, callback, row, col, colspan=1

This function creates a slider that the user can click and drag. It accepts 5 arguments: the orientation in which to place the slider (accepts either of two built-in variables: HORIZONTAL or VERTICAL), a pointer to the function to call when the slider is dragged to a new position, the row and column of the grid system to place the checkbox into, and how many columns of space the checkbox should take up in the grid (the default is 1 if no colspan is specified). It returns a pointer to the slider that is created.

Example:

# the following code assumes you have a function named slider_moved that does something useful
#create a horizontal slider on row 5, column 2
slider = createSlider(HORIZONTAL, slider_moved, 5, 2)

Getting and setting the values of the GUI elements:

You can get or set the values of these graphical user interface elements. For example:

#get the String the user entered into a text field named tf
 x = tf.get() #store the text the variable x
#get a Boolean representing whether the user has checked a checkbox or not
 x = cb.get() #store the Boolean value in the variable x
#get the Int position of a slider
 x = sl.get() #store the slider position in the variable x
#get the Int position of a slider
 x = sl.get() #store the slider position in the variable x
#set the String text of a label
 lb.set("This is a label") #put the text, "This is a label" into the label named lb

Requirements

A few things you have to do in order to get this library to work:

  • The file, simple_gui.py must be in the same folder as your own program.
  • The first line in your code must be: from simple_gui import *
  • The last line in your code must be: getGoing(10)


What links here