Easy Graphical User Interfaces

Transcription

1 Easy Graphical User Interfaces with breezypythongui

2 Types of User Interfaces GUI (graphical user interface) TUI (terminal-based user interface) UI Inputs Outputs Computation

3 Terminal-Based User Interface (TUI) Supports input via the keyboard and output via the monitor In Python, the I/O functions are input and print import math radius = float(input('enter the radius: ')) area = math.pi * radius ** 2 print('the area is', area)

4 Problems with a TUI Must enter inputs in a certain order Cannot back up to correct input mistakes or change one s mind Must re-enter all inputs to change just one I/O restricted to text

5 A Simple Tax Code print("tax Calculator\n") RATE =.15 EXEMPTION_AMOUNT = income = float(input("please enter your income: $")) exemptions = int(input("please enter the number of exemptions: ")) tax = max(0.0, (income - exemptions * EXEMPTION_AMOUNT) * RATE) print("your total tax is $%0.2f" % tax, 0.0)

6 A Simple Tax Code

7 Graphical User Interface (GUI) Supports input via the keyboard Can output text and also graphical shapes representing desktop elements, such as windows, command buttons, data fields, and drop-down menus (also called widgets ) Supports direct manipulation of desktop elements via the mouse or touchscreen

8 TUI vs GUI Non-programmers (the 99%) do not use a TUI, they use a GUI Only programmers (the 1%) use a TUI (and also a GUI) Most beginning programmers program to a TUI, not a GUI

9 Programming a GUI Most modern programming languages (like Python and Java) include packages or modules for programming a GUI In Python, this module is called tkinter The model of computation for a GUI program is more complex than that of a TUI program, and tkinter is very complicated to use

10 What Is breezypythongui? A module of classes and functions that makes GUI programming with tkinter easy for beginners The module is free and open-source A tutorial and sample programs are available at the breezypythongui Web site

11 Easy GUIs with breezypythongui GUI-Based Application Program breezypythongui ezypythongui/index.html tkinter /tkinter.html#module-tkinter

12 Models of Computation TUI 1. Obtain user inputs 2. Perform computations 3. Print results GUI 1. Layout and pop up the window 2. Wait for user events 3. Handle a user event 4. Goto step 2

13 A First GUI Program: Hello World from breezypythongui import EasyFrame Import the abstract window class

14 A First GUI Program: Hello World from breezypythongui import EasyFrame class HelloWorld(EasyFrame): """Displays a greeting in a window.""" Define a subclass to specialize it for this application

15 A First GUI Program: Hello World from breezypythongui import EasyFrame class HelloWorld(EasyFrame): """Displays a greeting in a window.""" def init (self): """Sets up the window and the label.""" EasyFrame. init (self) self.addlabel(text = "Hello world!", row = 0, column = 0) Lay out the window and its widgets

16 A First GUI Program: Hello World from breezypythongui import EasyFrame class HelloWorld(EasyFrame): """Displays a greeting in a window.""" def init (self): """Sets up the window and the label.""" EasyFrame. init (self) self.addlabel(text = "Hello world!", row = 0, column = 0) # Instantiates and pops up the window. if name == " main ": HelloWorld().mainloop() Create and launch the application window

17 The Structure of Any GUI Program from breezypythongui import EasyFrame class <class name>(easyframe): def init (self): EasyFrame. init (self <optional args>) <code to set up widgets> <code to define event-handling methods> # Instantiates and pops up the window. if name == " main ": <class name>().mainloop()

18 Laying Out Widgets class LayoutDemo(EasyFrame): """Displays labels in the quadrants.""" def init (self): """Sets up the window and the labels.""" EasyFrame. init (self) self.addlabel(text = "(0, 0)", row = 0, column = 0) self.addlabel(text = "(0, 1)", row = 0, column = 1) self.addlabel(text = "(1, 0)", row = 1, column = 0) self.addlabel(text = "(1, 1)", row = 1, column = 1)

19 Alignment and Spanning def init (self): """Sets up the window and the labels.""" EasyFrame. init (self) self.addlabel(text = "(0, 0)", row = 0, column = 0, sticky = "NSEW") self.addlabel(text = "(0, 1)", row = 0, column = 1, sticky = "NSEW") self.addlabel(text = "(1, 0 and 1)", row = 1, column = 0, sticky = "NSEW", columnspan = 2)

20 def init (self): """Sets up the window and widgets.""" EasyFrame. init (self, title = "Circle Area ) # Label and field for the input self.addlabel(text = "Radius", row = 0, column = 0) self.radiusfield = self.addfloatfield(value = 0.0, row = 0, column = 1) # Label and field for the output self.addlabel(text = "Area", row = 1, column = 0) self.areafield = self.addfloatfield(value = 0.0, row = 1, column = 1) # The command button self.addbutton(text = "Compute", row = 2, column = 0, columnspan = 2, command = self.computearea) Circle Area class CircleWithGUI(EasyFrame): """Computes and displays the area of a circle."""

21 Circle Area class CircleWithGUI(EasyFrame): """Computes and displays the area of a circle.""" def init (self): """Sets up the window and widgets.""".. # The command button self.addbutton(text = "Compute", row = 2, column = 0, columnspan = 2, command = self.computearea) # The event handling method for the button def computearea(self): """Inputs the radius, computes the area, and outputs the result.""" radius = self.radiusfield.getnumber() area = math.pi * radius ** 2 self.areafield.setnumber(area)

22 Representing Colors: RGB The RGB system composes each color from red, green, and blue components Each component is an integer in the range means the total absence of a color component 255 means the highest saturation of a color component 256 * 256 * 256 = 16,777,216 distinct color values

23 Representing Colors: RGB Think of each color value as a triple of integers of the form (<r>, <g>, <b>) RGB Triple Color (0, 0, 0) Black (255, 0, 0) Red (0, 255, 0) Green (0, 0, 255) Blue (127, 127, 127) Medium Gray (255, 255, 255) White

24 Python Color Values Some common colors are black, red, etc. Or a string of the form xrrggbb, where RR is the red value in hexadecimal, etc. Example: xffffff is white, xff0000 is red, etc.

25 Python Color Values (127, 200, 255) is #7FC8FF as hex >>> hex(127) '0x7f' >>> hex(200) '0xc8' >>> hex(255) '0xff' >>> hex(6) '0x6' >>>

26 R, G, B to Hex String def rgbtohex(r, g, b): """Converts integer RGB values to a hax value with the format #RRGGBB.""" # Convert each int to hex string and extract the digit(s) r = hex(r)[2:] g = hex(g)[2:] b = hex(b)[2:] # Prepend a 0 to single digit values if len(r) == 1: r = "0" + r if len(g) == 1: g = "0" + g if len(b) == 1: b = "0" + b # Return the form #RRGGBB return "#" + r + g + b

27 The Canvas Widget A canvas is a rectangular area in which one can draw images or shapes, and detect mouse events The method addcanvas creates a new object of type EasyCanvas adds it to the window s grid at the given row and column returns the canvas optional arguments include background, width, and height

28 A Color Meter

29 Add a Canvas and a Sliding Scale class ColorMeter(EasyFrame): """A color meter. Uses sliding scales to update a canvas.""" def init (self): """Sets up the view.""" EasyFrame. init (self, title = "Color Meter") self.canvas = self.addcanvas(row = 0, column = 1, rowspan = 3, background = "black") # Sliding scale for red self.redscale = self.addscale(label = "Red", row = 0, column = 0, from_ = 0, to = 255, resolution = 1.00, length = 256, tickinterval = 0, command = self.setcolor) self.redscale.set(0)

30 Respond to a Sliding Scale Event def setcolor(self, x): """Updates the canvas color.""" red = self.redscale.get() green = self.greenscale.get() blue = self.bluescale.get() self.canvas["background"] = rgbtohex(red, green, blue)