{"id":1806,"date":"2023-10-15T16:45:35","date_gmt":"2023-10-15T14:45:35","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/?p=1806"},"modified":"2023-10-16T21:44:07","modified_gmt":"2023-10-16T19:44:07","slug":"how-to-create-a-simple-calculator-in-python-using-tkinter-gui-step-by-step","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-create-a-simple-calculator-in-python-using-tkinter-gui-step-by-step\/","title":{"rendered":"How to Create a Simple Calculator in Python using Tkinter GUI – Step by Step"},"content":{"rendered":"

In this tutorial, you will learn how to create a calculator application in Python using Tkinter module.<\/p>\n

    \n
  1. Plan Your Calculator Layout<\/a><\/li>\n
  2. Code and Test the Layout (Grid Layout)<\/a><\/li>\n
  3. Setup the Calculator Screen<\/a><\/li>\n
  4. Setup the Keypad<\/a><\/li>\n
  5. Changes the Font sizes<\/a><\/li>\n
  6. Display Selected Number on Screen<\/a><\/li>\n
  7. Coding the Assign Key<\/a><\/li>\n
  8. Coding the Calculate Key<\/a><\/li>\n
  9. Further Enhancements<\/a><\/li>\n<\/ol>\n

    Related Tutorial – How to Create a Command Line Calculator in Python<\/a><\/p>\n

    1. Plan Your Calculator Layout<\/h3>\n

    We would adopt a grid layout for the calculator UI. This is shown below. Each of the frames is placed at a given location on the grid. For instance, the display_frame is placed on location (0,0) inside the root_frame. Similarly, the keypad frame is placed at location (1,0) inside the root_frame but in the second row.<\/p>\n

    I have used the numbers in bold to show the size of the frames. Also,\u00a0 indentation is used to show the parent-child relationship between the frame.<\/p>\n

    \"Calculator<\/a>
    Calculator Frames Layout<\/figcaption><\/figure>\n

     <\/p>\n

    2. Code and Test the Layout<\/h3>\n

    The code for the frames is quite easy to understand. It follows from the layout discussed above. The little addition is the padding of the frames. We add the attribute padx<\/strong> to specify the left and right padding. The attribute pady<\/strong> specifies the top and bottom padding.<\/p>\n

    The code for the layout is given below:<\/p>\n

    import<\/span> tkinter<\/span> as<\/span> tk<\/span>\r\n\r\nwindow =<\/span> tk.<\/span>Tk()\r\nwindow.<\/span>title('Simple Python GUI Calculator'<\/span>)\r\n\r\nroot_frame =<\/span> tk.<\/span>Frame(window)\r\nwindow.<\/span>geometry('650x600'<\/span>)\r\n\r\ndisplay_frame =<\/span> tk.<\/span>LabelFrame(root_frame, width=<\/span>400<\/span>, height=<\/span>80<\/span>)\r\ndisplay_frame.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>0<\/span>, pady=<\/span>(10<\/span>, 10<\/span>))\r\ndisplay_frame.<\/span>grid_propagate(0<\/span>)\r\n\r\nkeypad_frame =<\/span> tk.<\/span>LabelFrame(root_frame, width=<\/span>400<\/span>, height=<\/span>450<\/span>)\r\nkeypad_frame.<\/span>grid(row=<\/span>1<\/span>, column=<\/span>0<\/span>, padx=<\/span>10<\/span>, pady=<\/span>(10<\/span>, 10<\/span>))\r\nkeypad_frame.<\/span>grid_propagate(0<\/span>)\r\n\r\nnumbers_frame =<\/span> tk.<\/span>LabelFrame(keypad_frame, width=<\/span>260<\/span>, height=<\/span>400<\/span>)\r\nnumbers_frame.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>0<\/span>, padx=<\/span>(10<\/span>, 20<\/span>), pady=<\/span>(10<\/span>, 10<\/span>))\r\nnumbers_frame.<\/span>grid_propagate(0<\/span>)\r\n\r\nsigns_frame =<\/span> tk.<\/span>LabelFrame(keypad_frame, width=<\/span>100<\/span>, height=<\/span>400<\/span>)\r\nsigns_frame.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>1<\/span>, pady=<\/span>(10<\/span>, 10<\/span>))\r\nsigns_frame.<\/span>grid_propagate(0<\/span>)\r\n\r\nroot_frame.<\/span>pack()\r\n\r\nwindow.<\/span>mainloop()\r\n<\/pre>\n
     <\/p>\n
    3. Setup the Calculator Screen<\/h3>\n
    The calculator screen would be a textbox which is Text() in Tkinter. This would positioned at location (0,0) inside the display_frame.<\/p>\n
    display_box =<\/span> tk.<\/span>Text(display_frame, width=<\/span>20<\/span>, height=<\/span>1<\/span>)\r\ndisplay_box.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>0<\/span>, padx=<\/span>(20<\/span>, 5<\/span>), pady=<\/span>(20<\/span>, 5<\/span>))\r\n<\/pre>\n
     <\/p>\n
    4. Setup the Calculator Keypad<\/h3>\n
    The calculator keypad consists of the numbers_frame and the signs_frame. These are implemented as buttons as shown in the code.<\/p>\n
    The buttons for the numbers_keypad are placed inside the numbers_frame in 3 by 4 grid. The buttons for the signs_keypad are placed inside the signs_frame 1 by 4 grid.<\/p>\n
    The code for button 1 and button 2 is given below:<\/p>\n
    button_1 =<\/span> tk.<\/span>Button(numbers_frame, text=<\/span>'1'<\/span>, height=<\/span>3<\/span>, width=<\/span>3<\/span>)\r\nbutton_1.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>0<\/span>, padx=<\/span>10<\/span>, pady=<\/span>10<\/span>)\r\n\r\nbutton_2 =<\/span> tk.<\/span>Button(numbers_frame, text=<\/span>'2'<\/span>, height=<\/span>3<\/span>, width=<\/span>3<\/span>)\r\nbutton_2.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>1<\/span>)\r\n<\/pre>\n
    You can can complete code for the rest of the buttons or you can get the code from Github here.<\/p>\n
    Also the button for the addition sign(+) is given below<\/p>\n
    button_add =<\/span> tk.<\/span>Button(signs_frame, text=<\/span>'+'<\/span>, height=<\/span>3<\/span>, width=<\/span>3<\/span>)\r\nbutton_add.<\/span>grid(row=<\/span>0<\/span>, column=<\/span>0<\/span>, padx=<\/span>(10<\/span>, 10<\/span>), pady=<\/span>10<\/span>)\r\n\r\nbutton_subtract =<\/span> tk.<\/span>Button(signs_frame, text=<\/span>'-'<\/span>, height=<\/span>3<\/span>, width=<\/span>3<\/span>)\r\nbutton_subtract.<\/span>grid(row=<\/span>1<\/span>, column=<\/span>0<\/span>)\r\n\r\nbutton_multiply =<\/span> tk.<\/span>Button(signs_frame, text=<\/span>'*'<\/span>, height=<\/span>3<\/span>, width=<\/span>3<\/span>)\r\nbutton_multiply.<\/span>grid(row=<\/span>2<\/span>, column=<\/span>0<\/span>, pady=<\/span>10<\/span>)\r\n\r\nbutton_divide =<\/span> tk.<\/span>Button(signs_frame, text=<\/span>'\/'<\/span>, height=<\/span>3<\/span>, width=<\/span>3<\/span>)\r\nbutton_divide.<\/span>grid(row=<\/span>3<\/span>, column=<\/span>0<\/span>)\r\n<\/pre>\n
     <\/p>\n
    5. Change the Font Sizes<\/h3>\n
    Next, the font sizes would have to be increased both for the screen and for the keypad.<\/p>\n
    For this screen, we want the font size to be 30px. Then it would be single-line display and a font type of ‘Helvetica’. This is achieved using the height and the font attribute of the Text object. The code is given below:<\/p>\n
     height=<\/span>1<\/span>, font=<\/span>(\"Helvetica\"<\/span>, 30<\/span>)\r\n<\/pre>\n
     <\/p>\n
    Next, to change the font styles for all the buttons, we can use two loop. For each of the two frames: numbers_frame and signs_frame, we would loop through all the buttons inside and apply the same style to each.<\/p>\n
    The code is given below:<\/p>\n
    # Apply Styles to the buttons<\/span>\r\nbutton_font =<\/span> font.<\/span>Font(size=<\/span>20<\/span>, weight=<\/span>'bold'<\/span>, family=<\/span>'Helvetica'<\/span>)\r\nfor<\/span> button in<\/span> numbers_frame.<\/span>winfo_children():\r\n    button['font'<\/span>] =<\/span> button_font\r\n\r\nfor<\/span> button in<\/span> signs_frame.<\/span>winfo_children():\r\n    button['font'<\/span>] =<\/span> button_font\r\n<\/pre>\n
     <\/p>\n
    6. Display Selected Number on Screen<\/h3>\n
    We need to write a function that executes when a button is clicked. In this case, when a number is clicked, we would take the clicked number and display it on the screen.\u00a0 The function is given below. It takes a parameter, and inserts the given argument into the display_box(screen). Note that the text is appended to existing text on the display.<\/p>\n
    def<\/span> show<\/span>(num):\r\n    display_box.<\/span>insert(END, num)\r\n<\/pre>\n
     <\/p>\n
    Next you will need to add this function to the number button using the command attribute.\u00a0 So the change to the button would be as shown:<\/p>\n
    <\/p>\n
    command=<\/span>lambda<\/span> num=<\/span>'1'<\/span>: show('1'<\/span>)\r\n<\/pre>\n
     <\/p>\n
    The Clear Entry (CE) button<\/strong><\/p>\n
    You use this button the clear the content of the display. The code for it is shown below:<\/p>\n
    def<\/span> clear<\/span>():\r\n    display_box.<\/span>delete('1.0'<\/span>, END)\r\n<\/pre>\n
    And you also need to add to the command to the CE button as well:<\/p>\n
    command=<\/span>lambda<\/span>: clear()\r\n<\/pre>\n
    You can then repeat this for all other numbers. When you are done, run the application an click on each of the number to see that it appears.<\/p>\n
     <\/p>\n
    7. Coding the Assign Key<\/h3>\n
    This are the keys for the operators: add, subtract, multiply and divide. This button is clicked after the user has entered the first number. When this key is clicked, two things happen:<\/p>\n
      \n
    1. take number on the screen and assign it to a variable (num1)<\/li>\n
    2. determine the sign that was clicked and assign it to the variable op (for operator)<\/li>\n
    3. clear the display so the the user can enter the second operand<\/li>\n<\/ol>\n
      Also note that these variables are global variables. So they be used later when the EQUALS (=) button is clicked. So we first declare them at the beginning of the program as shown here:<\/p>\n
      global<\/span> num1\r\nglobal<\/span> num2\r\nglobal<\/span> op\r\n<\/pre>\n
      The calculate function is given below:<\/p>\n
      def<\/span> assign<\/span>(sign):\r\n    global<\/span> num1\r\n    global<\/span> op\r\n    op =<\/span> sign\r\n    num1 =<\/span> display_box.<\/span>get('1.0'<\/span>, 'end-1c'<\/span>)\r\n    clear()\r\n<\/pre>\n
       <\/p>\n
      8. Coding the Calculate Key<\/h3>\n
      The calculate key would perform the calculation and display the result on the screen.<\/p>\n
      The calculate function performs the following actions:<\/p>\n
        \n
      1. read the number on the screen into the second variable num2<\/li>\n
      2. determine the operation to perform<\/li>\n
      3. fetch the first operand from the global variable, num1<\/li>\n
      4. perform the operation<\/li>\n
      5. display the result on the screen<\/li>\n<\/ol>\n
        The calculate function is given below:<\/p>\n
        def<\/span> calculate<\/span>():\r\n    global<\/span> num2\r\n    global<\/span> op\r\n    num2 =<\/span> display_box.<\/span>get('1.0'<\/span>, 'end-1c'<\/span>)\r\n    result =<\/span> 0<\/span>\r\n\r\n    # Switch the op to determine which operation to perform<\/span>\r\n    if<\/span> op ==<\/span> '+'<\/span>:\r\n        result =<\/span> float<\/span>(num1) +<\/span> float<\/span>(num2)\r\n    elif<\/span> op ==<\/span> '-'<\/span>:\r\n        result =<\/span> float<\/span>(num1) -<\/span> float<\/span>(num2)\r\n    elif<\/span> op ==<\/span> '*'<\/span>:\r\n        result =<\/span> float<\/span>(num1) *<\/span> float<\/span>(num2)\r\n    elif<\/span> op ==<\/span> '\/'<\/span>:\r\n        result =<\/span> float<\/span>(num1) \/<\/span> float<\/span>(num2)\r\n    clear()\r\n    display_box.<\/span>insert(END, result)\r\n<\/pre>\n
         <\/p>\n
        9. Further Enhancements<\/h3>\n