A GUI for DFT and Orthogonal DWT in Tkinter

Transcription

1 A GUI for DFT and Orthogonal DWT in Tkinter Tariq Javid Ali, Pervez Akhtar, Muhammad Faris Hamdard Institute of Engineering & Technology Hamdard University Karachi-74600, Pakistan {tariq.javid pervez.akhtar Idris Mala Computer Science Department Usman Institute of Technology Karachi-75300, Pakistan Syed Saood Zia Computer Engineering Department SSUET Karachi-75300, Pakistan Abstract Both discrete Fourier transform and discrete wavelet transform are invaluable signal processing tools with applications in numerous disciplines. This paper presents a convenient way to learn these useful transformations with the help of an innovative graphical user interface. We use the standard Python interface Tkinter and describe creation of our user interface in an easy to follow steps. The designed interface has two categories, one for the basic concepts and another for the transforms. Our developed user interface provides coverage for basic topics by the use of flowcharts, program codes, and outputs. The transforms category has coverage for introductions, example functions, program codes, and outputs. Both categories are organized as buttons inside the primary interface window. A secondary interface window opens up whenever a user clicks at any of the buttons in the primary interface window. There are eight secondary windows including one for the about button. The work in this paper hopes that similar user-friendly interfaces can be developed to better learn the fundamental first principles in science, technology, engineering, and mathematics disciplines. Index Terms DFT; Graphical user interface; Orthogonal DWT; Python; Tkinter I. INTRODUCTION A well-designed and user-friendly graphical user interface (GUI) is very helpful for human computer interaction (HCI). In this paper, we design and develop a GUI in Tkinter for an earlier implementation of discrete Fourier transform (DFT) and orthogonal discrete wavelet transform (DWT) in Python computer programming language in [1]. The tool command language (Tcl), pronounced as tickle, is a scripting language developed by John K. Ousterhout in He later developed a toolkit (Tk) graphical user interface as an extension to Tcl in 1991; together commonly abbreviated as Tcl/Tk a robust and platform independent windowing toolkit. The Python has Tkinter module which is built on top of Tcl/Tk as a thin objectoriented software layer [2]. The DFT is a basic, standard signal processing tool which is in use since late 1950s [3]. The DWT is an advanced signal processing tool introduced in 1980s [4]. An example is the famous JPEG 2000 image coding standard which is based on state-of-the-art wavelet-based compression techniques. Applications of this standard include digital cinema, broadcast market, image archives and databases, document imaging, medical imaging, wireless imaging, remote sensing and geographic information systems, digital photography, Internet, scientific and industrial, and surveillance [5]. Both transformations are important part of curriculum in science, technology, engineer- Fig. 1. GUI primary interface window (top) with both basic and transform categories are highlighted. The basic category appears on left column whereas the transform category has four buttons with positions inside middle-top and middle-right. Secondary window interface (botton) appears when a user press highlighted top-left button. ing, and mathematics (STEM) disciplines. Learners often use software and mathematical tools to develop a better and deeper understanding. The design of GUI includes a primary user interface window with one label and nine buttons, See Fig. 1. A secondary interface window opens when a user presses a button. The buttons on primary window interface are organized in two categories: basic and transform. The basic category has buttons for preliminary concepts whereas transform category has buttons for forward and inverse transformations. There are About and Quit buttons on primary user interface for GUI information and window exit, respectively. All secondary window interfaces have an Exit button. The outline of this paper is as follows. Section II is a brief introduction of Tkinter with related examples. The GUI design and step-by-step development are described in Section III. The Section IV presents a brief discussion on benefits, limitations, and challenges. The paper concludes in Section V.

2 II. A BRIEF REVIEW OF TKINTER This section is an excerpt from the useful resource [6]. The Tcl is a popular scripting language in the domains of GUI development, embedded applications, and prototyping, and testing. The Tk is an open source widget toolkit used by different computer programming languages including Python for building GUIs. The Tkinter interface is a wrapper around a C-extension a thin object-oriented software layer that uses the Tcl/Tk libraries. It is suitable to develop GUIs for small applications to multidisciplinary scientific simulations and research endeavors. The motivation to use Tkinter is due its attractive features. These features include easy learning and small code to develop a powerful GUI application. Other features include layered design, operating system portability, and pre-installed with standard Python distribution. Making GUI requires work like an artist who needs a drawing board to capture ideas. The drawing board is provided by the root window in Tkinter. The following code lines draw the root window. >>> from Tkinter import * >>> root = Tk() >>> Fig. 2 shows the execution of code in a command window with the resulting GUI. In the above three lines code, the first line imports Tkinter classes, attributes, and methods. The second line creates an instance of Tkinter.Tk class, called the root window. The third line executes the event loop method. These three lines make the skeleton of any Tkinter GUI application. Generally, a GUI programmer has to answer the following questions for building a GUI application. What components should appear on screen? Where should the components go? How do components interact and behave? In Tkinter, the components are called widgets. Geometry management refers to decide positions of widgets on the root window. Each widget does some work, for example, a button widget when pressed, does something in response. This is accomplished by using callback functions. The core widgets in Tkinter are listed in Tab. I. We use Button, Frame, and Label widgets in our GUI application. An example to add a label and a button to the root window is as follows. from Tkinter import * root=tk() label1=label(root,text= label ) button1=button(root,text= button ) button1.pack() The above code adds new instances, label1 and button1, for Label and Button widgets, respectively. The first parameter for both instances is root which defines root window as the parent. The second parameters configure text for respective instances. Fig. 3 (left top) shows the resulting GUI with both widgets. The pack() method is required to position widgets within the root window. Now a good program code development practice is to avoid use of import all methods of a module as in from Tkinter Fig. 2. Execution of code to determine Tkinter version and skeleton code with resulting GUI. Fig. 3. Resulting GUIs. import *. We can use to avoid polluting the namespace with a list of all methods in Tkinter. Further we can use grid() instead of pack() method for a table-like layout. The above program code is revised as follows, See Fig. 3 (left bottom) for resulting GUI label1 =tk.label(root,text= click ).grid(row=0,column=0) button1=tk.button(root,text= me ).grid(row=0,column=1) Each widget has attributes to configure its behavior and appearance. Example attributes for a Button widget include width, height, foreground and background colors, font size, TABLE I TKINTER CORE WIDGETS. Toplevel Label Button Canvas Checkbutton Entry Frame LabelFrame Listbox Menu Menubutton Message OptionMenu PanedWindow Radiobutton Scale Scrollbar Spinbox Text Bitmap Class Image Class

3 etc. These attributes can be configured at the creation time or altered later. The following example code for a Label widget demonstrates interesting changes in the default appearance, See Fig. 3 (middle column and left) for the resulting GUIs. label1=tk.label(root) label1.configure(text= I am a label. ) label1.configure(bg= white,fg= red ) rpi = tk.photoimage(file= rpi.gif ) label1.configure(image=rpi) A callback is associated with a widget which enables it to response to events, for example, a button press, mouse click, etc. A simple way is to mention a command = some callback in the widget option. An example is given in the following code. The resulting GUI has a button press event for exit. button1=tk.button(root) button1.configure(text= Exit ) button1.configure(command=root.quit) button1.pack() Fig. 4. An example GUI. We have used procedural code in building above GUIs. Programmers prefer object oriented programming (OOP) for a clear modular structure and to make code reusable. The revised code with few more widget options is shown below. class rootwindow: def init (self,master): self.master=master self.master.title( GUI Title ) self.frame1=tk.frame(self.master) self.frame1.pack() label1 = tk.label(self.frame1,text= I am a label. ) label1.configure(font = Times 20 bold ) self.frame2 = tk.frame(self.master) self.frame2.pack() self.button1 = tk.button(self.frame2) self.button1.pack() self.button1.configure(text= Exit ) self.button1.configure(bg= white,fg= red ) self.button1.configure(width= 36,height= 12 ) self.button1.configure(command=self.master.quit) def main(): # Fix GUI size root.resizable(width=0,height=0) app = rootwindow(root) if name == main : main() Fig. 4 shows the resulting GUI. Note, the code set GUI primary window user interface size as a fixed value. We develop our GUI application using a similar code. A. Design III. GUI DESIGN AND DEVELOPMENT We keep our GUI design very simple. It has a root or primary window interface and many secondary interfaces. We make exclusive use of graphic files to display corresponding information. The widgets selected for our design are Button, Frame, and Label. Fig. 5 shows the overall design of our GUI. The primary window interface has 9 Button widgets and 1 Fig. 5. GUI design: (top) primary or root window and (bottom) a secondary window interface. Label widget organized on 2 separate Frame widgets. A button press event executes a callback with a secondary windows interface as response.

4 The buttons on primary interface are organized in two categories. One category is for basic concepts which contains 3 buttons for inner product, convolution, and circular convolution; and another category is for transforms which contains 4 buttons for DFT, inverse DFT (IDFT), DWT, and inverse DWT (IDWT). Additionally, there are 2 more buttons for GUI information and exit. The buttons on secondary interface are used to update image option of Label widget. The secondary interfaces for basic category have 4 buttons each. A secondary window has default image for the first button. On secondary window user interface, buttons 1 3 are used to update information, i.e., image option for the Label widget. The fourth button which is not shown in Fig. 5 is for exit. These buttons are organized in a way to show information as follows. Button 1: formula and flowchart Button 2: program code Button 3: output Button 4: exit In a similar pattern, the secondary window interfaces are designed for transform category, each with an additional button. These buttons are organized on the interface to show the information as follows. Button 1: formula Button 2: example Button 3: program code Button 4: output Button 5: exit B. Development The development of GUI requires a small yet fast and lightweight integrated development environment (IDE). Geany [7], [8] is selected after a thoughtful (re)search on Google. The information screen shots are created in graphics interchange format (GIF) for primary and secondary interfaces. The size of images in a selected window, either primary or secondary, is same. However, this is not true for all the images used in GUI development. The GUI code begins with the following import statements and ends with a call to main() method. import Image, ImageTk from tkmessagebox import showinfo class mainwin: #... code here... def main(): # Fix GUI size root.resizable(width=0,height=0) app = mainwin(root) if name == main : main() The developed code for class mainwin is given below. Note, few changes have been made to meet the formatting requirements. infoabout = lambda: showinfo( \ DFT and Orthogonal DWT in Python, \ A GUI for DFT and Orthogonal DWT in Tkinter\nBy... ) class mainwin: def init (self, master): self.master = master self.master.title( DFT and DWT in Python ) self.frame1 = tk.frame(self.master) self.frame1.pack() label1 = tk.label(self.frame1,text= DFT and DWT ) label1.configure(font= Times 20 bold ) self.frame2 = tk.frame(self.master) self.frame2.pack() self.photo1 = tk.photoimage(file = photoinp.gif ) self.photo2 = tk.photoimage(file = photocnv.gif ) self.photo3 = tk.photoimage(file = photocir.gif ) self.photo4 = tk.photoimage(file = photodft.gif ) self.photo5 = tk.photoimage(file = photoidft.gif ) self.photo6 = tk.photoimage(file = photodwt.gif ) self.photo7 = tk.photoimage(file = photoidwt.gif ) self.photo8 = tk.photoimage(file = photoabout.gif ) self.photo9 = tk.photoimage(file = photoquit.gif ) self.button1 = tk.button(self.frame2,image=self.photo1,\ command=self.new_window1).grid(row=0,column=0) self.button2 = tk.button(self.frame2,image=self.photo2,\ command=self.new_window2).grid(row=1,column=0) self.button3 = tk.button(self.frame2,image=self.photo3,\ command=self.new_window3).grid(row=2,column=0) self.button4 = tk.button(self.frame2,image=self.photo4,\ command=self.new_window4).grid(row=0,column=1) self.button5 = tk.button(self.frame2,image=self.photo5,\ command=self.new_window5).grid(row=1,column=1) self.button6 = tk.button(self.frame2,image=self.photo6,\ command=self.new_window6).grid(row=0,column=2) self.button7 = tk.button(self.frame2,image=self.photo7,\ command=self.new_window7).grid(row=1,column=2) self.button8 = tk.button(self.frame2,image=self.photo8,\ command=infoabout).grid(row=2,column=1) self.button9 = tk.button(self.frame2,image=self.photo9,\ command=self.close_windows).grid(row=2,column=2) def close_windows(self): self.master.destroy() def new_window1(self): self.app = inpwin(self.newwindow) def new_window2(self): self.app = cnvwin(self.newwindow) def new_window3(self): self.app = cirwin(self.newwindow) def new_window4(self): self.app = dftwin(self.newwindow) def new_window5(self): self.app = idftwin(self.newwindow) def new_window6(self): self.app = dwtwin(self.newwindow) def new_window7(self): self.app = idwtwin(self.newwindow) A description of above code is as follows. The code begins with information message which is configured as callback function to button press event for About button. The default title of GUI window is modified with self.master.title. The Frame widget is added with self.frame1 = tk.frame(self.master). Definitions and instantiations of Button and Label widgets have reference to containers self.frame2 and self.frame1, respectively. The rest of the code in mainwin class is based on example codes presented earlier in Section II. There are eight functions defined at the end which are associated as callbacks to respective buttons. There are two additional buttons, one for information and another for exit. The Button widget for information has an image with text About. Whereas, the Button widget for exit has an image with text Quit. Fig. 6 shows the primary window of our GUI application.

5 Fig. 6. GUI primary interface window. The code for class cnvwin is given below. This code generates a secondary window interface when a user presses the Convolution button. Note, few changes have been made in the code here as well to meet the formatting requirements. class cnvwin: def init (self, master): self.master = master self.master.title( Convolution ) self.frame = tk.frame(self.master) self.frame.pack() self.photo1 = ImageTk.PhotoImage(file = flowcnv.gif ) self.label1 = tk.label(self.frame, image = self.photo1) self. self.button1 = tk.button(self.frame,text= 1,\ command=self.flow_cnv) self.button1.pack(side = left ) self.button2 = tk.button(self.frame,text= 2,\ command=self.code_cnv) self.button2.pack(side = left ) self.button3 = tk.button(self.frame,text= 3,\ command=self.out_cnv) self.button3.pack(side = left ) self.quitbutton = tk.button(self.frame,text= Exit,\ bg= white,fg= red,command=self.close_windows) self.quitbutton.pack(side = left ) def close_windows(self): self.master.destroy() def flow_cnv(self): self.photo1=imagetk.photoimage(file= flowcnv.gif ) self.label1.configure(image=self.photo1) def code_cnv(self): self.photo1=imagetk.photoimage(file= codecnv.gif ) self.label1.configure(image = self.photo1) def out_cnv(self): self.photo1=imagetk.photoimage(file= outcnv.gif ) self.label1.configure(image = self.photo1) Fig. 7 shows the secondary window interface launched when a user pressed Convolution button on primary window interface. This GUI has four buttons for respective information images which are configured as image option of a label. The Exit button closes the secondary GUI. Fig. 7. GUI secondary interface window. IV. DISCUSSION A considerable effort was made to select suitable Tkinter widgets and to decide their positions on primary and secondary interfaces. The default top down appearance of widgets was altered with the help of grid() geometry manager. The GUI application code is less than 300 lines, however, there are 9 images for the primary window and 25 images for secondary windows. A significant amount of time was consumed to standardize these images at user interface level. However,

6 image sizes vary for different secondary windows. The benefits of our developed GUI are as follows. Simple design Easy to code Minimal code Two levels: primary and secondary Beginner s approach Use of OOP Our developed GUI has certain limitations. These include static layout and contents, exclusive use of images, lack of help, and use of few examples. As stated in Section I, the developed GUI is based on an earlier work [1]; therefore, many images are included in this version of GUI with little or no modifications. We have fixed primary window user interface size to prevent a GUI resize. Fig. 8 shows few selected images which are part of our GUI. The program code development phase was easy in the beginning, however, few complexities were encountered until an acceptable version of GUI application was developed. These include transition from procedural code to modular code OOP, use of images due allowed picture formats, and a number of common coding problems. The resource [6] was quite helpful for transition to OOP. A number of web resources were quite helpful when working with images and common coding problems [9] [13]. However, very few helpful resources were available for working with Tkinter. V. CONCLUSION In this paper, we have designed and developed a simple yet powerful GUI in a step-by-step manner. Tkinter, a wrapper to Tcl/Tk libraries in Python computer programming language, was used to code an innovative and useful window user interface to learn DFT and orthogonal DWT famous signal processing tools. The design and development phases of GUI were explained with the help of drawings and program code blocks. The primary GUI interface was designed in basic and transform categories. Appropriate images were used on interface windows to help better learning. The GUI application development process was very general with potential use in other disciplines. The required code was provided in the paper to enhance and to modify the GUI to best suit for a particular area. Future work is to overcome limitations outlined in Section IV without a compromise on benefits. ACKNOWLEDGMENT The first author would like to acknowledge the inspirational work of Chris Meyers of Open Book Project with title, Building a GUI Application with Tkinter [14]. REFERENCES [1] TJ. Ali, P. Akhtar, M. Faris, I. Mala, and SS. Zia, Implementation of discrete Fourier transform and orthogonal discrete wavelet transform in Python, in SZABIST Multidisciplinary International Conference (SMIC 2016), Dubai, 09 January [2] The Python Standard Library. Graphical user interfaces with Tk. Last accessed on 10 January [Online]. Available: https: //docs.python.org/2/library/tkinter.html Fig. 8. Few selected images used in building GUI. The information message on top is a callback for the About button on the primary GUI. Both middle and bottom images are from [1]. [3] R. C. Gonzalez and R. E. Woods, Digital Image Processing, 3rd ed. PHI Learning Pvt. Ltd., [4] S. Mallat, A Wavelet Tour of Signal Processing: The Sparse Way. Academic Press, [5] Joint Photographic Experts Group (JPEG). Applications for JPEG Last accessed on 10 January [Online]. Available: [6] B. Chaudhary, Tkinter GUI Application Development HOTSHOT. Packt Publishing Ltd., [7] Geany A fast, light, GTK+ IDE. Last accessed on 10 January [Online]. Available: [8] N. H. Quan, Instant Geany IDE. Packt Publishing Ltd., [9] Tkinter example code for multiple windows, why won t buttons load correctly? Last accessed on 10 January [Online]. Available: [10] Setting the window to a fixed size with Tkinter. Last accessed on 10 January [Online]. Available: [11] The Tkinter PhotoImage class. Last accessed on 10 January [Online]. Available: [12] Tkinter. Last accessed on 10 January [Online]. Available: labels.php [13] Tkinter image problem. Last accessed on 10 January [Online]. Available: software-development/threads/72276/tkinter-image-problem [14] Building a GUI application with Tkinter. Last accessed on 11 January [Online]. Available: tkphone.html