To build a GUI, you have to create at least one display (window).
- Display objects are application windows. They contain other GUI objects (widgets and graphics objects). A program may have several displays open. Displays may contain any number of GUI objects, but they cannot contain another display.
Once a display has been created, you populate it by placing various GUI widgets and graphics objects on it. The library provides various GUI widgets and graphics objects.
The origin (0, 0) of a display is at the top-left corner.
The following function creates a new Display, so you need to save it in a variable (in order to add GUI objects to it later).
| Function | Description |
| Display(title, width, height) | Creates a display window with the specified title (string – default is blank), width (default is 600 pixels), and height (default is 400 pixels). |
| Display(title, width, height, x, y, color) |
Same as above, but also initial x and y position on screen (default is (0, 0) at top-left), and background color (default is Color.WHITE). |
For example, a display may be created as follows:
d = Display("Simple GUI", 120, 60)
Once a display has been created, you can add GUI widgets and other graphical objects, using the following function:
d.add(object, x, y)
where object is a GUI widget or graphical object (presented below). The coordinates x, y are optional and specify where in the display to place the object. If omitted, e.g.,
d.add(object)
the object is placed using its own coordinates (e.g., a line, or a circle) specified when it was created (more below).
Once a display has been created, the following functions are available:
| Function | Description |
| d.show() | Shows display d. This happens automatically, when a new display is created. |
| d.hide() | Hides display d. |
| d.add(object, x, y) | Adds a GUI object on display d, at coordinates (x, y). It aligns the object’s top-left corner (for Circle, its center) with these coordinates. The origin (0, 0) is at the display’s top left corner. Any GUI object may be placed, except another display. A GUI object may appear only on one display. Placing a GUI object on another display, removes it from the first display. |
| d.move(object, x, y) | Moves a GUI object to the new coordinates (x, y). |
| d.remove(object) | Removes a GUI object from display d. |
| d.removeAll() | Removes all GUI objects from display d. Provides a convenient way to clear a display. |
| d.addOrder(object, order, x, y) | Same as add() but adds layering, i.e., places an object in the display, at coordinates by x and y at the order specified. Layers are ordered from smallest to largest where 0 is the closest to the front. If the object already appears on another display it is removed from there, first. |
| d.setToolTipText(text) | Sets the tooltip of display d to the provided text. |
| d.setColor(color) | Change the background color of display d (e.g., Color.RED). If no color provided, use dialog box to select. |
| d.getColor() | Returns the current background color of display d. |
| d.setTitle(color) | Sets the title of display d. |
| d.getTitle() | Returns the title of display d |
| d.setSize(width, height) | Sets the width and height of display d. |
| d.getHeight() | Returns the height of display d. |
| d.getWidth() | Returns the width of display d. |
| d.setPosition(x, y) | Sets the position of display d on the screen, where (0, 0) is at top-left. |
| d.getPosition() | Returns the position of display d on the screen. |
| d.getItems() | Returns a copy of the items currently on the display (a list). |
| d.showMouseCoordinates() | Shows mouse coordinates using the tooltip of display d. This is useful for discovering coordinates to place widgets at GUI design/exploration time. |
| d.hideMouseCoordinates() | Stops showing mouse coordinates using the tooltip of display d. |
| d.close() | Closes the display d. Before closing, calls any callback function assigned via d.onClose() – see below. |
| d.onClose( function ) | Assigns a callback function to be called right before the display is closed (whether the display is closed using the mouse, keyboard, or via function d.close(). |
Drawing on Display
Display objects support drawing of various graphics objects. This is done with the following functions:
| Function | Description |
| d.drawLine(x1, y1, x2, y2) | Draw a Line on display d between points (x1, y1) and (x2, y2). Additional optional parameters (in this order) include color (default is Color.BLACK) and thickness (default is 1). |
| d.drawCircle(x, y, radius) | Draw a Circle on display d with center at (x, y) and with the specified radius. Additional optional parameters (in this order) include color (default is Color.BLACK), fill (default is False) and thickness (default is 1). |
| d.drawPoint(x, y) | Draw a Point on display d with center at (x, y). Additional optional parameter is color (default is Color.BLACK). |
| d.drawOval(x1, y1, x2, y2) | Draw an Oval on display d using the coordinates of its enclosing rectangle, (x1, y1) and (x2, y2). Additional optional parameters (in this order) include color (default is Color.BLACK), fill (default is False) and thickness (default is 1). |
| d.drawRectangle(x1, y1, x2, y2) | Draw a Rectangle on display d using the provided coordinates, (x1, y1) and (x2, y2). Additional optional parameters (in this order) include color (default is Color.BLACK), fill (default is False) and thickness (default is 1). |
| d.drawPolygon(xPoints, yPoints) | Draw a Polygon on display d using the provided coordinates, list of x points and list of y points (parallel lists). Additional optional parameters (in this order) include color (default is Color.BLACK), fill (default is False) and thickness (default is 1). |
| d.drawIcon(filename, x, y) | Draw an Icon (image) on display d the image from the provided external file (a string, ending in “.jpg” or “.png”) at the given coordinates (top-left). Additional optional parameters (in this order) include width and height – if provided, image is rescaled accordingly. |
| d.drawImage(filename, x, y) | Same as drawIcon(). |
| d.drawLabel(text, x, y) | Draw a Label on display d containing text (a string) at the provided coordinates. Additional optional parameters (in this order) include color (default is Color.BLACK), and font (e.g., Font(“Serif”, Font.ITALIC, 16)). |
| d.drawText(text, x, y) | Same as drawLabel(). |
For convenience, each of the above functions returns the corresponding graphics object (e.g., drawLabel() returns a Label), which can be ignored, or saved for further interaction, such as animation.
Making Music with Computers 