Preview of LibrePCB 2.0's Next-Gen UI

First, let’s quickly look back how everything began. Since the early days of LibrePCB around 2013, we are using Qt as the UI toolkit and the concept was to implement every editor as a separate window (schematic editor, board editor, library editor etc.):

But with more features added over time, the UI got more and more cluttered. Also the paradigm of separate windows is often cumbersome to work with — e.g. having just one library and one project opened required to constantly switch between four(!) windows. Even a dual-monitor setup was not enough to work efficiently with LibrePCB. So it was clear we need a completely new organization of windows and editors. Generally we could have done that with Qt, but its traditional approach makes is really hard to pursue more modern UI paradigms, not to mention the effort and the error-proneness it involves. In the past I have struggled many times with Qt to create nice UI elements, thus I didn’t feel confident to build up a completely new UI with Qt again.

In the blog post NGI0 Grant for LibrePCB 2.0 I listed a few possible solutions how to build a more modern user interface. The most promising option was Slint, a relatively new UI toolkit (open-source & written in Rust) which uses a custom, declarative language to describe the UI. With the declarative approach, relations and behavior can be easily specified right in the UI description:

It may sound trivial to place a button at the top right corner of its parent, but with the procedural approach of Qt this is often not trivially doable. In many cases, it requires to implement event handlers in C++ which update the widgets position whenever the parent object’s size or the widgets’s own size has changed. Writing such code is time-consuming and error-prone, while the declarative approach of Slint is quick, easy and safe — not just for this trivial example, but also in more complex cases. For a large project like LibrePCB, which consists of hundrets of UI elements, the declarative approach is really a game-changer for us developers! (Side note: As of today, LibrePCB contains 23.746 lines of Slint code!)

Unfortunately, even with several months of full-time work, LibrePCB is too large to be migrated to Slint by 100% at once — to avoid delaying the next release too much, we need to do the migration in steps. All the main windows & editors first, and the remaining dialogs and wizards in later releases. Also our whole business logic depends on Qt (it is much more than just a UI framework), thus our dependency on Qt will remain for a long time.

So the question is, can we mix Qt with Slint? In the end, LibrePCB only works if the main thread is running Qt’s event loop. But Slint only works when the main thread is running their event loop. So at first glance it seems we have a very bad conflict here :-/

In fact, Slint supports different backends for interaction with the underlying system, e.g. for input events handling and window drawing. These are (interestingly) Qt, winit and LinuxKMS. Winit comes with the ability of GPU-accelerated rendering, which would be interesting for performance reasons. But unfortunately right now we can’t use winit because of the event loop conflict.

Luckily Slint’s Qt backend avoids that problem since Slint will run Qt’s event loop for us. So the event loop will process the events for both, the Slint UI and the LibrePCB backend. This works because Slint and LibrePCB are compiled and linked against the same Qt library. It also allows us to mix the new Slint window with legacy Qt dialogs & wizards, so we can do a step-by-step migration.

Enough background information for now, let’s have a look at the new UI of LibrePCB 2.0. The most important thing is that all the individual windows mentioned above have been replaced by a single, multifunctional window. Within that window, any kind of "document" (e.g. a footprint, a schematic or a board) is opened as a tab. The toolbars of the new window now depend on which tab is currently active, because for example the footprint editor supports other features than the schematic editor. This is how the new window currently looks like:

By the way, in this new window you can even have multiple projects (and libraries) opened at the same time! All the opened projects and libraries are listed in the documents panel, and the contained entities can be opened as individual tabs.

The old library manager was not that bad, but it was more complicated than necessary due to its "operation-based" workflow of manually triggering the installation or uninstallation of libraries, with those operations even spread across multiple list views and pages.

The new library manager is much simpler (but as functional as before) by following a "state-based" paradigm now. Instead of triggering the installation or uninstallation of individual libraries, you now just check the libraries you like to use (or uncheck those you don’t want anymore) and a single apply operation performs all the necessary installations or removals at once. Beside the improved user experience, this also fixes some issues of the old concept (e.g. limitations of the automatic dependency management).

The old 3D view was just a pure read-only display with no configuration options at all. But for a detailed review of the design, sometimes it is necessary to hide specific things — e.g. the devices or the solder paste. This is now possible by changing the transparency of those objects:

In my vision, an EDA tool should support engineers/makers as well as possible (in a non-disruptive way) to help them creating PCB designs without errors as quick as possible. The new UI has therefore various new tips & hints implemented which show up in certain situations. Many of them are especially useful for LibrePCB beginners to ensure a smooth first-use experience, but some are useful for everyone to minimize errors or wasted time.

As an example, the built-in PCB ordering feature now displays the state of the electrical- & design-rule checks as a friendly reminder to review & fix any issues before ordering a (possibly faulty) PCB. The order panel contains direct hyperlinks to the ERC & DRC panels, and even allows to run the DRC right from the order panel. And as an additional psychological effect, the order button is only highlighted if there are no issues, though it is always clickable. 🤓

Even though the new UI is the biggest change in the history of LibrePCB, this is just the beginning of a new user experience. There is still a lot of room for improvements which we will take care of after the LibrePCB 2.0 release. Just a few examples:

All the completed tasks and the planned tasks, together with more details and previews of the new UI, are summarized in this issue. Of course there are also a lot of new non-UI features beeing developed for LibrePCB 2.0 and beyond, those are tracked in separate issues. This blog post just focused on the UI things due to its huge relevance in this moment.

A majority of these updates were part of the NGI0 Commons grant we receive from NLnet, thanks a lot for their support! Also a special thanks to the Slint developers who helped me with support, feature development and bugfixes during this migration.