A complete makeover for your boring Tkinter UI 😎
The majority of the scripts I write usually run on CLI (Command Line Interface), however at a certain point it’s good to have a nice-looking GUI (Graphical User Interface) for simple applications. In my case my Network engineer colleagues who are not very familiar with Python or have started learning always prefer to have a simple GUI for our automation scripts.
It’s not difficult to build GUI in Python as we have Tkinter built-in module to create simple and functional GUI in minutes. For example:
if we execute this code we will be able to see the following window with a counter increasing on click.
Now it does the job but we can definitely improve the UI to offer a better UX. Python does have a lot of options for UI development for example:
PyQT5 and Kivy can produce great UI results but will definitely take a bit of effort and has a little bit of a learning curve. Eel and Pywebview take a different approach and leverages HTML, CSS, and JavaScript to render the UI elements and interaction this might be beneficial for programmers with good front-end experience to create a UI which is probably not possible with PyQT or Kivy.
Here is a sample todo app from Pywebview:
That definitely looks nice! However, I will be honest I am not good with CSS 😅 I can’t center a div without looking up in StackOverflow 🤣. For any quick web development projects usually when we need a dashboard for monitoring stuff or for reporting purposes my first go-to is the Bootstrap framework. It’s easy to slap into any project and elements are pretty easy and simple enough for anyone to pick up and use almost instantaneously.
So why not apply the same here, use Bootstrap and create a UI and render the same with Pywebview. Well, that’s definitely a viable option but you’ll need interaction with the UI elements and backend for example in our previous code a counter increment happens on button click if we use Pywebview we will need to capture the UI interaction with JavaScript and then pass it on to a python function to handle the rest.
For a small project or rapid prototyping, this becomes a hassle in my personal opinion. What if we can use Bootstrap without actually using the review 😲.
That is achievable now with a new module ttkbootstrap. It leverages the Tkinter module with Bootstrap framework elements and gives a complete makeover to the GUI we were used to seeing with Tkinter.
Let’s re-create our previous counter with ttkbootstrap:
To install ttkbootstrap use the following command on the terminal or cmd prompt:
python -m pip install ttkbootstrapAs we can there is not much deviation from our previous code but the results are different:
The rendered Button is a Boostrap styled Button without using any kind of web view, custom HTML, or CSS. The rendered window is directly from the python script just like our previous Tkinter example.
So what can we achieve with this ttkbootstrap module there is an example from the module website itself:
Pretty cool 😎 isn’t it? I am working on a few projects and planning to use this module, If you find this article useful please follow to get updates on similar projects.
Thanks for reading if you want to support me feel free to buy me a coffee!
