Build Your Own Encryption Software in Python — Part 2 Tutorial Tkinter
In Part 1, we built the logic to encrypt and decrypt messages, but imagine having a nice interface… Let me show you how
Introduction
In the previous part — see link below — we created the logic to encrypt and decrypt messages. Yet, it felt a bit rough and lonely. It all happened within our IDE. But it does not need to be that way. By wrapping up our code with a nice interface, it will make our piece of software more interactive and user friendly. We worked on the back-end, now let’s see how we can do some magic on the front-end.
In case you’ve missed Part 1, see the link below, but don’t forget to come back to Part 2:
Enters GUI
Graphical User Interface, or commonly known as GUI, is the front-end. This is what users interact with. It can be pretty, or ugly, clunky or smooth, minimalist or heavy.
In this part we will focus on a simple interface, using a standard GUI Python library Tkinter. It will be built step by step to explain the logic, then rearranged at the end. Let’s get started.
Initial window
Code review line by line
LINE 1: We import Tkinter and will later refer to it as ‘tk’, a convention.
LINE 3: We initialize our Tkinter window, naming it root, also a commonly-used convention. The result looks like this.
LINE 4: Setting up a title for our window.
LINE 5: Defining the minimum size for our window, this means the user will not be able to change the size below a width of 300 and a height of 230. That’s a size in pixels.
LINE 7: We create our Canvas. Canvas is a widget of Tkinter. This will contain our widgets, think buttons, entry field, from our interface. As arguments, we specify our root as Tk instance, and we set the window size. When generated, the window will open with that size.
LINE 8: Using .pack() on a widget will organize it as a block, and place it within the parent widget, the root.
LINE 10: By using .mainloop(), we initiate an infinite loop to run our window. It will remain active, listening (‘waiting’) for an event, processing it. The window will remain active as long as it’s not closed (or encounters an error).
The final result from those first lines:
Adding Widgets
While a minimalist look can be good, the example above is probably extreme. Let’s add some widgets to make it more interesting.
Code review line by line
This is an improvement from the code snippet above, hence explanations on lines from the previous snippets will be skipped.
LINE 10: We create the widget entry1, an entry field (‘input field’), and tie it to root.
LINE 11: We use .create_window() on our existing canvas1, set size parameters of the entry field and link it to entry1 via the window argument.
LINE 13–14: We create the widget label1, a field which will be holding/showing some text. As for entry1, we tie it to root and set dimensions.
LINE 16–17: We create the widget button1, a button which will submit our entry. The argument ‘text’ defines the text to show on the button. As for entry1 and label1, we tie it to root and set dimensions.
LINE 19: This will help us for the next few lines of code. We create v and assign it to a string variable, StringVar(). This will help us to track changes, widgets like RadioButton will require this to function properly.
LINE 20: We set up the v variable to ‘e’. Why? Read on!
LINE 22–24: We create a radio button, tie it to root, name it ‘Encrypt’, link it to the set it as value ‘e’, and link it to string variable v. As for previous widgets, we tie it to root, and set dimensions.
LINE 26: Same as for lines 22–24, except we name it ‘Decrypt’ and set ‘d’ as value.
So what? By using the v StringVar, we can define which radio button will be selected when the window is first generated. In our case, we have set v to be ‘e’ (line 20) and within our radio buttons, we defined the value of the encrypt button to be ‘e’. Those are thus tied, and ‘encrypt’ will appear checked upon generating the window.
Update on the look of our window:
An improvement. But it’s only visual for now, we’ll have to link it with our encryption/decryption code to make it functional.
Bridging The Gap Between Front and Back-End
We’re moving a step further with a new addition to our code, hence explanations on lines from the previous snippets will be skipped.
LINE 1: Define a function, which will get user inputs and treat them accordingly.
LINE 2: We get the value from the entry field entry1 and store it as x1.
LINE 3: Defining choice and assigning to the value we get from the v StringVar.
LINE 5:-6 If choice is equal to ‘e’, the code on line 6 is executed. When the user selects the radio button ‘encrypt’, the value of v will be ‘e’.
The ‘text’ attributed for label1 is set to the returned value from our code_message() function discussed in Part 1, which takes the user input x1 as an argument. As a reminder it looked like that:
LINE 8–9: The ‘else’ from our if statement, in this case, the user selected the ‘decrypt’ radio button. The function used is decode_message() which takes the user input x1 as an argument. As a reminder it looked like that:
LINE 20: This is where the magic happens. Within our button widget, we use the argument command and assign it to our function getResult. Any time the button will be clicked, the action will be to start the getResult. Using command now brings the widget to life, while previously it could be clicked but without any event taking place.
Tying It All Together
Now that we’ve built the foundations of our Tkinter interface, increment it with widgets then linked our button to a function, let’s see the big picture.
Code review line by line
LINE 1–43: You will have recognized what was discussed in Part 1.
LINE 46: We wrap the GUI code in a function called GUI, it makes it cleaner, easier to debug and read. In GUI we have a nested function, getResult, then the code to instantiate and build our Tkinter window.
LINE 83: We call the GUI function.
The final results:
Well done, you did it !
Alternatives to Tkinter
Although Tkinter is well supported and documented, you might want to try your skills on another GUI tool. Here are a few alternatives:
- PyQt,
- Flexx,
- Pyforms,
Conclusion
Quite a journey through the Tkinter-land. We saw how to build a canvas, populate it with widgets then tie functions to get results.
Mini-projects can give you confidence, and help you grow both your problem-solving and programming skills. It’s important to focus on projects that matter to you, let your mind wander a bit and you’ll soon find other ideas to bring to life. Start small, and build up 💪.
Happy Coding!
What Next? Part 3: Deploy as .exe!
What about deploying this as a standalone executable .exe file? Look no further, I am detailing the how-to in this article, Part 3:
