Day 0 Project with Tkinter and Figma
My experience during the first technical orientation at KITE
I’m Marudhu Paandian K, a tech enthusiast, a freshman at KGiSL Institute of Technology. I attended the induction program where Dr. Ashok Bakthavathsalam sir gave a lecture on incremental programming and showed us a guessing game with a GUI, later a simpler text-based version was given to us in a step-by-step manner to teach us the basics of programming.
I have been doing programming as a hobby since 8th grade. To be honest, I have not been a big fan of making UI as it is a bit cumbersome (especially modern-looking UIs), and that never thought it could be done using Python.
The next day a senior from the student tech team who was the class student mentor challenged me to create a spinoff to this project with my custom UI by the next day. Later the same day he introduced me to the dev team and the staff behind the tech team. After some discussion, it was decided that the project I create will be presented to my fellow students the next morning and a meeting was scheduled that night. The clock started ticking.
The meeting started around 9 pm and went on till 10 pm. We started discussing the plan of action for the next day. I was working on the project while being at the meet. There was almost no progress made till now as I had not yet decided on the framework to use.
The first big task when making the UI was choosing a framework. At first, I started the UI with Tkinter when the challenge was given to me. After making a rough screen with just the elements it was obvious that there needs to be a change and I scrapped the things made till now and started searching for a different framework. It was around 10:20 pm by the time I had chosen the framework and made a rough sketch of what the UI should look like. The framework chosen was customtkinter. It’s a nice package that wraps over Tkinter and makes it easier to make modern UIs.
The next big challenge was choosing how to structure the project. To my surprise, I came to know that there was no set method to make a UI unlike other cases such as an Android App. After going through some previously made approaches by other devs I choose to make my approach.
With one main class and each page as a function of the class. The logic for the game is written in a different file and it is linked to the UI. It was around midnight when I started my approach and made the logic to make it appear like the UI has multiple screens and made the first 2 pages and decided to continue after some sleep.
The UI was functional by morning 7:22 am. All pages exist and the elements work as they are supposed to but there is one small step left before the UI can be called complete, The alignment process. If done manually it might take hours or days to get it fully done, I decided to ask the seniors from the tech team for a hint on how to get it done properly. The suggestion they gave was to use coordinates and place the elements without using the other methods given in the framework itself as they are finicky to work with.
On hearing that I remembered an app used by my friend, it’s called Figma. It is a tool used to draw layouts for making webpages, mobile apps, and more. I made a rectangle representing the screen size and started making boxes for different buttons, text boxes, and inputs. A rough flow for the UI was designed and I copied the coordinates and the size value of the boxes to make the UI look better. This process took around 20–30 minutes and the project was completed with barely any time left on the clock.
It was a fun and interesting experience overall. The presentation went smoothly thanks to the dev team and the staff. I got to learn about making a UI and connecting it to the logic and making it all work smoothly. This project also made me come out of my comfort zone and helped me overcome my stage fright. A sincere thanks to Dr. Ashok Bakthavathsalam sir, the tech team, and the PSPP staff for giving me this opportunity.
Anyone interested may check the project in the link below:
https://github.com/marudhu2004/The-Guessing-Game
Thank you for reading.
