QSKM Devblog #1 – Early Prototype

Hello there! Since my last announcement to rewrite SKM, I have dedicated some time to research the possibility of porting SKM to Python. It turns out to be quite easy with PyQt, a Python wrapper for Qt framework. After learning some PyQt basics (shout out to Jan Bodnar for this great tutorial), I attempted to recreate the old Java implementation in Qt Designer. The result? Quite satisfying!

Screenshot of Qt Designer with early prototype UI

I was pleased by all that different kinds of ready-made widgets and a wealth of options I can tinker (which means… less code!) with Qt Designer and Qt framework itself. Since I am already familiar with how layout works in applications and have worked with various layout designers in the past, Qt Designer feels quite familiar to me. Most components can be added by drag-and-drop, then they can be fine tweaked with their property sheets in the right. It appears that I can also add event handling in the Designer, by utilizing Signal/Slot Editor in the lower right.  (Qt uses an unique communication protocol called Signals and Slots).

The best thing about using Qt Designer is I can set up UI parts in just a few minutes. I came up with a design (shown above) that roughly resembles the old JavaFX implementation (shown below) in less than 20 minutes. I can also get a pretty good idea about how the program actually gonna look like without even compiling the code. All that convenience was unthinkable back when I was developing in JavaFX (FXML might alleviate some of the problem but I never got to the point to start using it).

Original SKM implementation in JavaFX

Now I have the design, how do I import it to my Python project? Turns out it’s surprisingly easy. The PyQt package came with a command line tool pyuic that automatically translates .ui (XML) files generated by Qt Designer into Python code. Simply run

pyuic5 ui/MainWindow.ui -o ui/MainWindow.py

and my MainWindow design is already in Python!

So here’s what it looks like at present. I know it looks ugly, but keep in mind it is designed in short amount of time, and haven’t been tweaked at all. With Qt Designer and PyQt, I can finally focus on the logic of the program, without worrying much about the layout.

What it looks like… for now

Thank you for your reading. Stay tuned for more updates!